luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Update to service index page (#8775) 

* Add 'in service mesh ...' to the composite rows in Service List page

* Add associated services count to terminating and ingress gateways in Service List page

* Update mesh icon in icon-defintion files
This commit is contained in:
Kenia 2020-09-30 09:13:38 -04:00 committed by GitHub
parent 75271d1667
commit 095e5801ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 72 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui-v2/app/components/consul-service-list/index.hbs
View File

@ -61,16 +61,35 @@
{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
</span>
{{/if}}
{{#if item.Proxy}}
<dl class="proxy">
{{#if (eq item.Kind 'terminating-gateway')}}
<span data-test-associated-service-count>
{{format-number item.GatewayConfig.AssociatedServiceCount}} linked services
</span>
{{else if (eq item.Kind 'ingress-gateway')}}
<span data-test-associated-service-count>
{{format-number item.GatewayConfig.AssociatedServiceCount}} upstreams
</span>
{{/if}}
{{#if (or item.ConnectedWithGateway item.ConnectedWithProxy)}}
<dl class="mesh">
<dt>
<Tooltip>
This service uses a proxy for the Consul service mesh
</Tooltip>
</dt>
<dd data-test-proxy>
connected with proxy
</dd>
{{#if (and item.ConnectedWithGateway item.ConnectedWithProxy )}}
<dd data-test-mesh>
in service mesh with proxy and gateway
</dd>
{{else if item.ConnectedWithProxy}}
<dd data-test-mesh>
in service mesh with proxy
</dd>
{{else if item.ConnectedWithGateway}}
<dd data-test-mesh>
in service mesh with gateway
</dd>
{{/if}}
</dl>
{{/if}}
<TagList @item={{item}} />

6
ui-v2/app/models/service.js
View File

@ -14,11 +14,11 @@ export default Model.extend({
},
}),
InstanceCount: attr('number'),
Proxy: attr(),
ProxyFor: attr(),
ConnectedWithGateway: attr(),
ConnectedWithProxy: attr(),
GatewayConfig: attr(),
Kind: attr('string'),
ExternalSources: attr(),
GatewayConfig: attr(),
Meta: attr(),
Address: attr('string'),
TaggedAddresses: attr(),

1
ui-v2/app/styles/base/icons/base-variables.scss
View File

@ -113,6 +113,7 @@ $logo-slack-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="
$logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.096 8.663c-.251-.566-.873-.822-1.453-.558-.58.265-.795.927-.532 1.493l2.436 5.437c.383.852.787 1.298 1.545 1.298.81 0 1.163-.486 1.545-1.298l2.147-4.8a.308.308 0 0 1 .306-.202c.183 0 .336.15.336.352v4.645c0 .716.387 1.303 1.131 1.303s1.146-.587 1.146-1.303v-3.801c0-.733.512-1.21 1.21-1.21.697 0 1.16.494 1.16 1.21v3.801c0 .716.389 1.303 1.132 1.303.743 0 1.147-.587 1.147-1.303v-3.801c0-.733.51-1.21 1.208-1.21.696 0 1.162.494 1.162 1.21v3.801c0 .716.388 1.303 1.131 1.303.744 0 1.147-.587 1.147-1.303v-4.326C22 9.114 20.755 8 19.256 8c-1.497 0-2.434 1.063-2.434 1.063-.498-.663-1.185-1.062-2.347-1.062-1.227 0-2.3 1.062-2.3 1.062-.499-.663-1.348-1.062-2.05-1.062-1.087 0-1.95.491-2.477 1.727l-1.556 3.765-1.996-4.83z" fill="%23696566"/></svg>');
$logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.096 8.663c-.251-.566-.873-.822-1.453-.558-.58.265-.795.927-.532 1.493l2.436 5.437c.383.852.787 1.298 1.545 1.298.81 0 1.163-.486 1.545-1.298l2.147-4.8a.308.308 0 0 1 .306-.202c.183 0 .336.15.336.352v4.645c0 .716.387 1.303 1.131 1.303s1.146-.587 1.146-1.303v-3.801c0-.733.512-1.21 1.21-1.21.697 0 1.16.494 1.16 1.21v3.801c0 .716.389 1.303 1.132 1.303.743 0 1.147-.587 1.147-1.303v-3.801c0-.733.51-1.21 1.208-1.21.696 0 1.162.494 1.162 1.21v3.801c0 .716.388 1.303 1.131 1.303.744 0 1.147-.587 1.147-1.303v-4.326C22 9.114 20.755 8 19.256 8c-1.497 0-2.434 1.063-2.434 1.063-.498-.663-1.185-1.062-2.347-1.062-1.227 0-2.3 1.062-2.3 1.062-.499-.663-1.348-1.062-2.05-1.062-1.087 0-1.95.491-2.477 1.727l-1.556 3.765-1.996-4.83z" fill="%23000"/></svg>');
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
$mesh-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.5 20v-.25l-.2-.15A9.485 9.485 0 012.5 12c0-1.663.427-3.225 1.177-4.583l.117-.214L3.7 6.98a2.5 2.5 0 013.28-3.28l.224.095.214-.117A9.455 9.455 0 0112 2.5c1.09 0 2.135.183 3.108.52l.243.084.21-.148a2.5 2.5 0 013.84 2.746l-.073.247.158.202A9.457 9.457 0 0121.5 12a9.57 9.57 0 01-.129 1.568l-.048.29.23.183a2.5 2.5 0 01-2.19 4.377l-.285-.075-.203.214a9.471 9.471 0 01-7.579 2.917l-.248-.018-.165.188A2.5 2.5 0 016.5 20.001zm11.41-1.891l.31-.3-.251-.351A2.486 2.486 0 0117.5 16c0-.264.04-.518.116-.756l.114-.358-.313-.209-3.14-2.093-.459-.306-.26.487-2.703 5.07-.159.297.218.26c.366.434.586.995.586 1.608v.5h.5a8.474 8.474 0 005.91-2.391zm-8.434-.564l.363.07.173-.325 2.757-5.17.213-.4-.377-.25-4.883-3.256-.252-.168-.266.145-.009.005-.334.184.088.37 2.004 8.398.078.33.336.049c.037.005.073.011.11.018zm-1.747.301l.318-.187-.086-.359-2.02-8.465-.075-.317-.32-.06a2.478 2.478 0 01-.623-.201l-.461-.22-.21.465A8.471 8.471 0 003.5 12a8.481 8.481 0 002.91 6.404l.377.329.33-.377c.175-.2.382-.373.612-.51zM19.043 7.24l-.275-.405-.411.266a2.486 2.486 0 01-1.628.386l-.335-.037-.16.298-1.73 3.245-.213.4.377.25 3.403 2.27.276.183.277-.183a2.485 2.485 0 011.324-.412l.433-.008.053-.43c.044-.348.066-.702.066-1.062a8.463 8.463 0 00-1.457-4.76zm-6.047 3.289l.46.306.259-.487 1.598-2.997.174-.326-.26-.262a2.49 2.49 0 01-.654-2.366l.118-.476-.473-.127A8.51 8.51 0 0012 3.5c-1.246 0-2.43.268-3.498.751l-.466.21.22.462a2.492 2.492 0 01.064 2.01l-.151.377.338.225 4.49 2.993z" stroke="%23000"/></svg>');
$message-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0H2C.9 0 .01.9.01 2L0 20l4-4h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM4 7h12v2H4V7zm8 5H4v-2h8v2zm4-6H4V4h12v2z" fill="%23000"/></svg>');
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');

10
ui-v2/app/styles/base/icons/icon-placeholders.scss
View File

@ -1166,6 +1166,16 @@
mask-image: $menu-svg;
}
%with-mesh-icon {
@extend %with-icon;
background-image: $mesh-svg;
}
%with-mesh-mask {
@extend %with-mask;
-webkit-mask-image: $mesh-svg;
mask-image: $mesh-svg;
}
%with-message-icon {
@extend %with-icon;
background-image: $message-svg;

4
ui-v2/app/styles/components/icon-definition.scss
View File

@ -32,8 +32,8 @@
%icon-definition.address dt::before {
@extend %with-public-default-mask, %as-pseudo;
}
%icon-definition.proxy dt::before {
@extend %with-swap-horizontal-mask, %as-pseudo;
%icon-definition.mesh dt::before {
@extend %with-mesh-mask, %as-pseudo;
}
%icon-definition.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo;

34
ui-v2/tests/acceptance/dc/services/index.feature
View File

@ -75,17 +75,20 @@ Feature: dc / services / index: List Services
- ingress-gateway
- terminating-gateway
---
Scenario: View a Service with a proxy
Scenario: View a Service in mesh
Given 1 datacenter model with the value "dc-1"
And 3 service models from yaml
---
- Name: Service-0
Kind: ~
ConnectedWithProxy: true
ConnectedWithGateway: true
- Name: Service-0-proxy
Kind: connect-proxy
ProxyFor: ['Service-0']
- Name: Service-1
Kind: ~
ConnectedWithProxy: false
ConnectedWithGateway: false
---
When I visit the services page for yaml
@ -95,5 +98,28 @@ Feature: dc / services / index: List Services
Then the url should be /dc-1/services
And the title should be "Services - Consul"
Then I see 2 service models
And I see proxy on the services.0
And I don't see proxy on the services.1
And I see mesh on the services.0
And I don't see mesh on the services.1
Scenario: View a Service's Associated Service count
Given 1 datacenter model with the value "dc-1"
And 3 service models from yaml
---
- Name: Service-0
Kind: ~
- Name: Service-0-proxy
Kind: connect-proxy
- Name: Service-1
Kind: 'ingress-gateway'
GatewayConfig:
- AssociatedServiceCount: 345
---
When I visit the services page for yaml
---
dc: dc-1
---
Then the url should be /dc-1/services
And the title should be "Services - Consul"
Then I see 2 service models
And I don't see associatedServiceCount on the services.0
And I see associatedServiceCount on the services.1

3
ui-v2/tests/pages/dc/services/index.js
View File

@ -4,7 +4,8 @@ export default function(visitable, clickable, text, attribute, present, collecti
service: clickable('a'),
externalSource: attribute('data-test-external-source', '[data-test-external-source]'),
kind: attribute('data-test-kind', '[data-test-kind]'),
proxy: present('[data-test-proxy]'),
mesh: present('[data-test-mesh]'),
associatedServiceCount: present('[data-test-associated-service-count]'),
};
return {
visit: visitable('/:dc/services'),