status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Delete Proxy Info tab (#9141) 

* Remove Proxy Info and create Upstreams and Exposed Paths tabs

* Update routes formatting

* Update typo for Expose.Checks

* Remove, update, and add tests

* Make consul-upstream-instance-list into a glimmer component

* Create styling for upstream-instance-list component
This commit is contained in:
Kenia 2020-11-10 11:31:47 -05:00 committed by GitHub
parent 8f834c2d21
commit e18d8e299d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 143 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
View File

@ -1,5 +1,5 @@
<ul data-test-proxy-upstreams>
{{#each items as |item|}}
<ul data-test-proxy-upstreams class="consul-upstream-instance-list">
{{#each @items as |item|}}
<li>
<div class="header">
<p data-test-destination-name>
@ -21,7 +21,7 @@
</dl>
{{/if}}
{{/if}}
{{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
{{#if (and (not-eq item.Datacenter @dc) (not-eq item.Datacenter ""))}}
<dl class="datacenter">
<dt>
<Tooltip>
@ -35,15 +35,15 @@
{{/if}}
{{#if (gt item.LocalBindPort 0)}}
{{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
<dl>
<dt>
<span>
<CopyButton
@value={{combinedAddress}}
@name="Address"
/>
</dt>
<dd>{{combinedAddress}}</dd>
</dl>
<span>
{{combinedAddress}}
</span>
</span>
{{/let}}
{{/if}}
</div>

5
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.js
View File

@ -1,5 +0,0 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});

6
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss Normal file
View File

@ -0,0 +1,6 @@
.consul-upstream-instance-list > li {
@extend %composite-row;
}
.consul-upstream-instance-list > ul {
border-top: 1px solid $gray-200;
}

3
ui/packages/consul-ui/app/router.js
View File

@ -46,9 +46,6 @@ export const routes = {
healthchecks: {
_options: { path: '/health-checks' },
},
proxy: {
_options: { path: '/proxy' },
},
upstreams: {
_options: { path: '/upstreams' },
},

14
ui/packages/consul-ui/app/routes/dc/services/instance/exposedpaths.js
View File

@ -1,5 +1,4 @@
import Route from 'consul-ui/routing/route';
import { get } from '@ember/object';
export default class ExposedpathsRoute extends Route {
model() {
@ -10,19 +9,6 @@ export default class ExposedpathsRoute extends Route {
return this.modelFor(parent);
}
afterModel(model, transition) {
if (
get(model, 'item.Kind') !== 'connect-proxy' ||
get(model, 'item.Proxy.Expose.Paths.length') < 1
) {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
this.replaceWith(parent);
}
}
setupController(controller, model) {
super.setupController(...arguments);
controller.setProperties(model);

16
ui/packages/consul-ui/app/routes/dc/services/instance/proxy.js
View File

@ -1,16 +0,0 @@
import Route from 'consul-ui/routing/route';
export default class ProxyRoute extends Route {
model() {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
return this.modelFor(parent);
}
setupController(controller, model) {
super.setupController(...arguments);
controller.setProperties(model);
}
}

11
ui/packages/consul-ui/app/routes/dc/services/instance/upstreams.js
View File

@ -1,5 +1,4 @@
import Route from 'consul-ui/routing/route';
import { get } from '@ember/object';
export default class UpstreamsRoute extends Route {
model() {
@ -10,16 +9,6 @@ export default class UpstreamsRoute extends Route {
return this.modelFor(parent);
}
afterModel(model, transition) {
if (get(model, 'item.Service.Kind') !== 'connect-proxy') {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
this.replaceWith(parent);
}
}
setupController(controller, model) {
super.setupController(...arguments);
controller.setProperties(model);

4
ui/packages/consul-ui/app/styles/components/composite-row.scss
View File

@ -1,6 +1,6 @@
@import './composite-row/index';
.proxy-upstreams > ul > li,
.consul-upstream-instance-list > li,
.list-collection > ul > li:not(:first-child) {
@extend %composite-row;
}
@ -34,7 +34,7 @@
overflow-x: visible !important;
}
.consul-intention-permission-list > ul,
.proxy-upstreams > ul {
.consul-upstream-instance-list > ul {
border-top: 1px solid $gray-200;
}
.consul-service-instance-list .port dt,

3
ui/packages/consul-ui/app/styles/layout.scss
View File

@ -12,10 +12,11 @@ html[data-route$='edit'] .app-view > header + div > *:first-child {
%app-view-content [role='tabpanel'] > .filter-bar + p {
margin-top: 1.25em;
}
/* turn off top borders for things flush up to a filter bar */
.consul-upstream-instance-list,
.consul-lock-session-list {
margin-top: 0 !important;
}
/* turn off top borders for things flush up to a filter bar */
html[data-route='dc.services.index'] .consul-service-list ul,
.consul-nspace-list ul,
.consul-service-instance-list ul,

6
ui/packages/consul-ui/app/templates/dc/services/instance.hbs
View File

@ -47,8 +47,10 @@
(hash label="Addresses" href=(href-to "dc.services.instance.addresses") selected=(is-href "dc.services.instance.addresses")) ""
)
(if proxy
(hash label="Proxy Info" href=(href-to "dc.services.instance.proxy") selected=(is-href "dc.services.instance.proxy"))
(hash label="Upstreams" href=(href-to "dc.services.instance.upstreams") selected=(is-href "dc.services.instance.upstreams"))
)
(if proxy
(hash label="Exposed Paths" href=(href-to "dc.services.instance.exposedpaths") selected=(is-href "dc.services.instance.exposedpaths"))
)
(hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
)

10
ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs Normal file
View File

@ -0,0 +1,10 @@
<div class="tab-section">
<div role="tabpanel">
{{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}}
<p>
The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
</p>
<Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
{{/if}}
</div>
</div>

5
ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
View File

@ -2,7 +2,10 @@
<div role="tabpanel">
{{#if (gt item.Checks.length 0) }}
<section data-test-checks>
<HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} @exposed={{proxy.ServiceProxy.Expose.Checks}} />
<HealthcheckList
@items={{sort-by (comparator 'check' 'Status:asc') (append item.Checks proxy.Checks)}}
@exposed={{proxyMeta.ServiceProxy.Expose.Checks}}
/>
</section>
{{else}}
<EmptyState>

25
ui/packages/consul-ui/app/templates/dc/services/instance/proxy.hbs
View File

@ -1,25 +0,0 @@
<div class="tab-section">
<div role="tabpanel">
{{#if (gt proxy.Service.Proxy.Upstreams.length 0)}}
<section class="proxy-upstreams">
<h3>Upstreams</h3>
<Consul::UpstreamInstance::List @items={{proxy.Service.Proxy.Upstreams}} @dc={{dc}} @nspace={{nspace}} />
</section>
{{/if}}
{{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}}
<section class="proxy-exposed-paths">
<h3>Exposed paths</h3>
<p>
The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
</p>
<Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
</section>
{{/if}}
{{#if (or (gt proxy.ServiceChecks.length 0) (gt proxy.NodeChecks.length 0))}}
<section>
<h3>Proxy health</h3>
<HealthcheckList data-test-proxy-checks @items={{sort-by (comparator 'check' 'Status:asc') (append proxy.ServiceChecks proxy.NodeChecks)}} />
</section>
{{/if}}
</div>
</div>

7
ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs Normal file
View File

@ -0,0 +1,7 @@
<div class="tab-section">
<div role="tabpanel">
{{#if (gt proxy.Service.Proxy.Upstreams.length 0)}}
<Consul::UpstreamInstance::List @items={{proxy.Service.Proxy.Upstreams}} @dc={{dc}} @nspace={{nspace}} />
{{/if}}
</div>
</div>

42
ui/packages/consul-ui/tests/acceptance/dc/services/instances/exposed-paths.feature Normal file
View File

@ -0,0 +1,42 @@
@setupApplicationTest
Feature: dc / services / instances / Exposed Paths
Background:
Given 1 datacenter model with the value "dc1"
Scenario: A Service instance without a Proxy does not display Exposed Paths tab
Given 1 proxy model from yaml
---
- ServiceProxy:
DestinationServiceName: service-1
DestinationServiceID: ~
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I don't see exposedPaths on the tabs
Scenario: A Service instance with a Proxy displays Exposed Paths tab
Given 1 proxy model from yaml
---
- ServiceProxy:
DestinationServiceName: service-0
DestinationServiceID: ~
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see exposedPaths on the tabs
When I click exposedPaths on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/exposed-paths
And I see exposedPathsIsSelected on the tabs

214
ui/packages/consul-ui/tests/acceptance/dc/services/instances/proxyinfo.feature
View File

@ -1,214 +0,0 @@
@setupApplicationTest
Feature: dc / services / instances / proxyinfo: Proxy Info tab
Background:
Given 1 datacenter model with the value "dc1"
Scenario: A Service instance without a Proxy does not display Proxy Info tab
Given 1 proxy model from yaml
---
- ServiceProxy:
DestinationServiceName: service-1
DestinationServiceID: ~
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I don't see proxyInfo on the tabs
Scenario: A Service instance with a Proxy displays Proxy Info tab
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see proxyInfo on the tabs
When I click proxyInfo on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
And I see proxyInfoIsSelected on the tabs
Scenario: A Proxy with health checks, upstreams, and exposed paths displays all info
Given 2 instance models from yaml
---
- Service:
ID: service-0-with-id
Kind: consul
Node:
Node: node-0
- Service:
ID: service-0-with-id-proxy
Kind: connect-proxy
Proxy:
DestinationServiceName: service-0
Expose:
Checks: false
Paths:
- Path: /grpc-metrics
Protocol: grpc
LocalPathPort: 8081
ListenerPort: 8080
- Path: /http-metrics
Protocol: http
LocalPathPort: 8082
ListenerPort: 8083
- Path: /http-metrics-2
Protocol: http
LocalPathPort: 8083
ListenerPort: 8084
Upstreams:
- DestinationType: service
DestinationName: service-2
DestinationNamespace: default
LocalBindAddress: 127.0.0.1
LocalBindPort: 1111
- DestinationType: prepared_query
DestinationName: service-3
LocalBindAddress: 127.0.0.1
LocalBindPort: 1112
Node:
Node: node-0
Checks:
- Name: Service check
ServiceID: service-0-proxy
Output: Output of check
Status: passing
- Name: Service check
ServiceID: service-0-proxy
Output: Output of check
Status: warning
- Name: Service check
Type: http
ServiceID: service-0-proxy
Output: Output of check
Status: critical
- Name: Node check
ServiceID: ""
Output: Output of check
Status: passing
- Name: Node check
ServiceID: ""
Output: Output of check
Status: warning
- Name: Node check
ServiceID: ""
Output: Output of check
Status: critical
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see proxyInfo on the tabs
When I click proxyInfo on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
And I see 6 of the proxyChecks object
And I see 2 of the upstreams object
And I see name on the upstreams like yaml
---
- service-2
- service-3
---
Scenario: A Proxy without health checks does not display Proxy Health section
And 2 instance models from yaml
---
- Service:
ID: service-0-with-id
Kind: consul
Node:
Node: node-0
- Service:
ID: service-0-with-id-proxy
Kind: connect-proxy
Node:
Node: node-0
Checks: []
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see proxyInfo on the tabs
When I click proxyInfo on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
And I see 0 of the proxyChecks object
Scenario: A Proxy without upstreams does not display Upstreams section
And 2 instance models from yaml
---
- Service:
ID: service-0-with-id
Kind: consul
Node:
Node: node-0
- Service:
ID: service-0-with-id-proxy
Kind: connect-proxy
Proxy:
Upstreams: []
Node:
Node: node-0
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see proxyInfo on the tabs
When I click proxyInfo on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
And I see 0 of the upstreams object
Scenario: A Proxy without exposed path does not display Exposed Paths section
And 2 instance models from yaml
---
- Service:
ID: service-0-with-id
Kind: consul
Node:
Node: node-0
- Service:
ID: service-0-with-id-proxy
Kind: connect-proxy
Proxy:
Expose:
Checks: false
Paths: []
Node:
Node: node-0
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see proxyInfo on the tabs
When I click proxyInfo on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
And I see 0 of the exposedPaths object

2
ui/packages/consul-ui/tests/acceptance/dc/services/instances/show.feature
View File

@ -65,7 +65,7 @@ Feature: dc / services / instances / show: Show Service Instance
And I don't see upstreams on the tabs
And I see healthChecksIsSelected on the tabs
And I see 6 of the checks object
And I see 7 of the checks object
When I click tags&Meta on the tabs
And I see tags&MetaIsSelected on the tabs

42
ui/packages/consul-ui/tests/acceptance/dc/services/instances/upstreams.feature Normal file
View File

@ -0,0 +1,42 @@
@setupApplicationTest
Feature: dc / services / instances / Upstreams
Background:
Given 1 datacenter model with the value "dc1"
Scenario: A Service instance without a Proxy does not display Upstreams tab
Given 1 proxy model from yaml
---
- ServiceProxy:
DestinationServiceName: service-1
DestinationServiceID: ~
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I don't see upstreams on the tabs
Scenario: A Service instance with a Proxy displays Upstreams tab
Given 1 proxy model from yaml
---
- ServiceProxy:
DestinationServiceName: service-0
DestinationServiceID: ~
---
When I visit the instance page for yaml
---
dc: dc1
service: service-0
node: node-0
id: service-0-with-id
---
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
And I see upstreams on the tabs
When I click upstreams on the tabs
Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/upstreams
And I see upstreamsIsSelected on the tabs

0
ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/proxyinfo-steps.js → ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/exposed-paths-steps.js
View File

10
ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/upstreams-steps.js Normal file
View File

@ -0,0 +1,10 @@
import steps from '../../../steps';
// step definitions that are shared between features should be moved to the
// tests/acceptance/steps/steps.js file
export default function(assert) {
return steps(assert).then('I should find a file', function() {
assert.ok(true, this.step);
});
}

2
ui/packages/consul-ui/tests/pages/dc/services/instance.js
View File

@ -4,7 +4,7 @@ export default function(visitable, attribute, collection, text, tabs) {
externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
scope: '.title',
}),
tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags-&-meta']),
tabs: tabs('tab', ['health-checks', 'upstreams', 'exposed-paths', 'addresses', 'tags-&-meta']),
checks: collection('[data-test-checks] li'),
upstreams: collection('[data-test-proxy-upstreams] > li', {
name: text('[data-test-destination-name]'),