From 207491eaa7c390549c2a4329a8e08a60d84073d3 Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Wed, 30 Sep 2020 09:13:38 -0400 Subject: [PATCH] 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 --- .../components/consul-service-list/index.hbs | 29 +++++++++++++--- ui-v2/app/models/service.js | 6 ++-- .../app/styles/base/icons/base-variables.scss | 1 + .../styles/base/icons/icon-placeholders.scss | 10 ++++++ .../styles/components/icon-definition.scss | 4 +-- .../acceptance/dc/services/index.feature | 34 ++++++++++++++++--- ui-v2/tests/pages/dc/services/index.js | 3 +- 7 files changed, 72 insertions(+), 15 deletions(-) diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs index 783f0b5949..f9ba9d0e26 100644 --- a/ui-v2/app/components/consul-service-list/index.hbs +++ b/ui-v2/app/components/consul-service-list/index.hbs @@ -61,16 +61,35 @@ {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}} {{/if}} - {{#if item.Proxy}} -
+ {{#if (eq item.Kind 'terminating-gateway')}} + + {{format-number item.GatewayConfig.AssociatedServiceCount}} linked services + + {{else if (eq item.Kind 'ingress-gateway')}} + + {{format-number item.GatewayConfig.AssociatedServiceCount}} upstreams + + {{/if}} + {{#if (or item.ConnectedWithGateway item.ConnectedWithProxy)}} +
This service uses a proxy for the Consul service mesh
-
- connected with proxy -
+ {{#if (and item.ConnectedWithGateway item.ConnectedWithProxy )}} +
+ in service mesh with proxy and gateway +
+ {{else if item.ConnectedWithProxy}} +
+ in service mesh with proxy +
+ {{else if item.ConnectedWithGateway}} +
+ in service mesh with gateway +
+ {{/if}}
{{/if}} diff --git a/ui-v2/app/models/service.js b/ui-v2/app/models/service.js index 67bf5ea508..181b5b7ab3 100644 --- a/ui-v2/app/models/service.js +++ b/ui-v2/app/models/service.js @@ -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(), diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index f5cec0145c..9d566199d4 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -113,6 +113,7 @@ $logo-slack-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); $menu-svg: url('data:image/svg+xml;charset=UTF-8,'); +$mesh-svg: url('data:image/svg+xml;charset=UTF-8,'); $message-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index 095025c918..a497982733 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -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; diff --git a/ui-v2/app/styles/components/icon-definition.scss b/ui-v2/app/styles/components/icon-definition.scss index 205c69ca3a..2259a0508f 100644 --- a/ui-v2/app/styles/components/icon-definition.scss +++ b/ui-v2/app/styles/components/icon-definition.scss @@ -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; diff --git a/ui-v2/tests/acceptance/dc/services/index.feature b/ui-v2/tests/acceptance/dc/services/index.feature index 6bec9f3287..2ff0ac98ca 100644 --- a/ui-v2/tests/acceptance/dc/services/index.feature +++ b/ui-v2/tests/acceptance/dc/services/index.feature @@ -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 diff --git a/ui-v2/tests/pages/dc/services/index.js b/ui-v2/tests/pages/dc/services/index.js index 5ca6123a3c..64de685377 100644 --- a/ui-v2/tests/pages/dc/services/index.js +++ b/ui-v2/tests/pages/dc/services/index.js @@ -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'),