mirror of https://github.com/status-im/consul.git
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
GitHub
parent
ed9826bbbe
commit
207491eaa7
|
|
@ -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}} />
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue