From 600dea8631115b63dfc385e5c2140b3f5c7376c8 Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Wed, 13 May 2020 11:28:11 -0400 Subject: [PATCH] ui: Create Upstreams tab for Ingress Gateways (#7865) --- ui-v2/app/router.js | 3 ++ .../app/routes/dc/services/show/upstreams.js | 14 +++++ .../components/composite-row/layout.scss | 9 ++++ .../styles/components/composite-row/skin.scss | 11 ++-- .../styles/components/list-collection.scss | 14 ++++- .../app/styles/routes/dc/services/index.scss | 8 +-- ui-v2/app/templates/dc/services/show.hbs | 5 +- .../templates/dc/services/show/services.hbs | 4 +- .../templates/dc/services/show/upstreams.hbs | 32 +++++++++++ ui-v2/config/environment.js | 2 - ...eway-services.feature => services.feature} | 25 ++++++++- .../dc/services/show/upstreams.feature | 54 +++++++++++++++++++ ...ay-services-steps.js => services-steps.js} | 0 .../steps/dc/services/show/upstreams-steps.js | 10 ++++ ui-v2/tests/pages/dc/services/show.js | 11 +++- 15 files changed, 183 insertions(+), 19 deletions(-) create mode 100644 ui-v2/app/routes/dc/services/show/upstreams.js create mode 100644 ui-v2/app/templates/dc/services/show/upstreams.hbs rename ui-v2/tests/acceptance/dc/services/show/{gateway-services.feature => services.feature} (53%) create mode 100644 ui-v2/tests/acceptance/dc/services/show/upstreams.feature rename ui-v2/tests/acceptance/steps/dc/services/show/{gateway-services-steps.js => services-steps.js} (100%) create mode 100644 ui-v2/tests/acceptance/steps/dc/services/show/upstreams-steps.js diff --git a/ui-v2/app/router.js b/ui-v2/app/router.js index 8566d03b8..794b5f98a 100644 --- a/ui-v2/app/router.js +++ b/ui-v2/app/router.js @@ -22,6 +22,9 @@ export const routes = { services: { _options: { path: '/services' }, }, + upstreams: { + _options: { path: '/upstreams' }, + }, routing: { _options: { path: '/routing' }, }, diff --git a/ui-v2/app/routes/dc/services/show/upstreams.js b/ui-v2/app/routes/dc/services/show/upstreams.js new file mode 100644 index 000000000..9793d62c0 --- /dev/null +++ b/ui-v2/app/routes/dc/services/show/upstreams.js @@ -0,0 +1,14 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + model: function() { + const parent = this.routeName + .split('.') + .slice(0, -1) + .join('.'); + return this.modelFor(parent); + }, + setupController: function(controller, model) { + controller.setProperties(model); + }, +}); diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss index 7175b2166..7826a7b72 100644 --- a/ui-v2/app/styles/components/composite-row/layout.scss +++ b/ui-v2/app/styles/components/composite-row/layout.scss @@ -33,3 +33,12 @@ %composite-row-detail .port button:hover { background-color: transparent !important; } + +// Tooltip +%composite-row-detail .feedback-dialog-out { + left: -12px; + bottom: 12px; +} +%composite-row-detail .feedback-dialog-out::after { + left: 18px; +} diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss index b80065922..3f7b6fc4d 100644 --- a/ui-v2/app/styles/components/composite-row/skin.scss +++ b/ui-v2/app/styles/components/composite-row/skin.scss @@ -1,9 +1,9 @@ %composite-row { list-style-type: none; - border-top-color: $gray-200; - border-bottom-color: transparent; - border-right-color: transparent; - border-left-color: transparent; + border-top-color: $transparent; + border-bottom-color: $gray-200; + border-right-color: $transparent; + border-left-color: $transparent; } %composite-row-intent { border-color: $gray-200; @@ -16,9 +16,6 @@ %composite-row-detail { color: $gray-500; } -%composite-row:last-child { - border-bottom-color: $gray-200; -} // Health Checks %composite-row .passing::before { diff --git a/ui-v2/app/styles/components/list-collection.scss b/ui-v2/app/styles/components/list-collection.scss index a91557d06..78505f903 100644 --- a/ui-v2/app/styles/components/list-collection.scss +++ b/ui-v2/app/styles/components/list-collection.scss @@ -1,7 +1,19 @@ .list-collection { + @extend %list-collection; height: 500px; position: relative; } -.list-collection > ul { +%list-collection > ul { + border-top: 1px solid $gray-200; overflow-x: hidden !important; } +%list-collection > ul > li:nth-child(2) .with-feedback p { + bottom: auto; + top: 24px; +} +%list-collection > ul > li:nth-child(2) p::after { + bottom: auto; + top: -10px !important; + border-bottom-width: 18px; + border-top-width: 0; +} diff --git a/ui-v2/app/styles/routes/dc/services/index.scss b/ui-v2/app/styles/routes/dc/services/index.scss index ac5078f4e..6f4f8c89f 100644 --- a/ui-v2/app/styles/routes/dc/services/index.scss +++ b/ui-v2/app/styles/routes/dc/services/index.scss @@ -1,8 +1,9 @@ // Services - Linked Services tab -.gateway-services-list > ul { - @extend %gateway-services-list; +// TODO - move this into composite-row +.consul-gateway-services-list > ul { + @extend %consul-gateway-services-list; } -%gateway-services-list > li:not(:first-child) { +%consul-gateway-services-list > li:not(:first-child) { @extend %gateway-service-row; } %gateway-service-row { @@ -12,6 +13,7 @@ // Service Detail - Proxy Info tab .proxy-upstreams > ul { @extend %proxy-upstreams-list; + border-top: 1px solid $gray-200; } %proxy-upstreams-list > li { @extend %composite-row; diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 395b2ee71..eaa5b44cf 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -17,7 +17,7 @@ - {{#if (or (not item.Service.Kind) (eq item.Service.Kind 'terminating-gateway'))}} + {{#if (not-eq item.Service.Kind 'mesh-gateway')}}

The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our - step-by-step guide. + step-by-step guide.

- + {{item.Name}} diff --git a/ui-v2/app/templates/dc/services/show/upstreams.hbs b/ui-v2/app/templates/dc/services/show/upstreams.hbs new file mode 100644 index 000000000..db02a53e8 --- /dev/null +++ b/ui-v2/app/templates/dc/services/show/upstreams.hbs @@ -0,0 +1,32 @@ +
+
+ {{#if (gt gateway.Services.length 0)}} +
+

+ Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our + documentation. +

+ + + {{item.Name}} + +
    + {{#if (not-eq item.GatewayConfig.ListenerPort 0)}} +
  • + + :{{item.GatewayConfig.ListenerPort}} +
    • + {{/if}} +
+ +
+ {{else}} +

+ There are no upstreams. +

+ {{/if}} +
+
diff --git a/ui-v2/config/environment.js b/ui-v2/config/environment.js index 964481f1e..f74e2bdfd 100644 --- a/ui-v2/config/environment.js +++ b/ui-v2/config/environment.js @@ -81,8 +81,6 @@ module.exports = function(environment, $ = process.env) { CONSUL_DOCS_LEARN_URL: 'https://learn.hashicorp.com', CONSUL_DOCS_API_URL: 'https://www.consul.io/api', CONSUL_COPYRIGHT_URL: 'https://www.hashicorp.com', - CONSUL_TERMINATING_GATEWAYS_URL: 'https://www.consul.io/docs/connect/terminating_gateway', - CONSUL_INGRESS_GATEWAYS_URL: 'https://www.consul.io/docs/connect/ingress_gateway', }); const isTestLike = ['staging', 'test'].indexOf(environment) > -1; const isDevLike = ['development', 'staging', 'test'].indexOf(environment) > -1; diff --git a/ui-v2/tests/acceptance/dc/services/show/gateway-services.feature b/ui-v2/tests/acceptance/dc/services/show/services.feature similarity index 53% rename from ui-v2/tests/acceptance/dc/services/show/gateway-services.feature rename to ui-v2/tests/acceptance/dc/services/show/services.feature index b394925c7..cc576c6c1 100644 --- a/ui-v2/tests/acceptance/dc/services/show/gateway-services.feature +++ b/ui-v2/tests/acceptance/dc/services/show/services.feature @@ -1,5 +1,5 @@ @setupApplicationTest -Feature: dc / services / gateway +Feature: dc / services / show / services Background: Given 1 datacenter model with the value "dc1" And 1 node models @@ -29,6 +29,29 @@ Feature: dc / services / gateway And the title should be "terminating-gateway-1 - Consul" When I click linkedServices on the tabs Then I see 3 service models + Scenario: Don't see the Linked Services tab + Given 1 datacenter model with the value "dc1" + And 1 node models + And 1 service model from yaml + --- + - Service: + Name: [Name] + Kind: [Kind] + --- + When I visit the service page for yaml + --- + dc: dc1 + service: [Name] + --- + And the title should be "[Name] - Consul" + And I don't see linkedServices on the tabs + Where: + --------------------------------------------- + | Name | Kind | + | service | ~ | + | ingress-gateway | ingress-gateway | + | mesh-gateway | mesh-gateway | + --------------------------------------------- diff --git a/ui-v2/tests/acceptance/dc/services/show/upstreams.feature b/ui-v2/tests/acceptance/dc/services/show/upstreams.feature new file mode 100644 index 000000000..4e0def920 --- /dev/null +++ b/ui-v2/tests/acceptance/dc/services/show/upstreams.feature @@ -0,0 +1,54 @@ +@setupApplicationTest +Feature: dc / services / show / upstreams + Background: + Given 1 datacenter model with the value "dc1" + And 1 node models + And 1 service model from yaml + --- + - Service: + Name: ingress-gateway-1 + Kind: ingress-gateway + --- + Scenario: Seeing the Upstreams tab + When I visit the service page for yaml + --- + dc: dc1 + service: ingress-gateway-1 + --- + And the title should be "ingress-gateway-1 - Consul" + And I see upstreams on the tabs + When I click upstreams on the tabs + And I see upstreamsIsSelected on the tabs + Scenario: Seeing the list of Upstreams + Given 3 service models from yaml + When I visit the service page for yaml + --- + dc: dc1 + service: ingress-gateway-1 + --- + And the title should be "ingress-gateway-1 - Consul" + When I click upstreams on the tabs + Then I see 3 service models + Scenario: Don't see the Upstreams tab + Given 1 datacenter model with the value "dc1" + And 1 node models + And 1 service model from yaml + --- + - Service: + Name: [Name] + Kind: [Kind] + --- + When I visit the service page for yaml + --- + dc: dc1 + service: [Name] + --- + And the title should be "[Name] - Consul" + And I don't see upstreams on the tabs + Where: + --------------------------------------------- + | Name | Kind | + | service | ~ | + | terminating-gateway | terminating-gateway | + | mesh-gateway | mesh-gateway | + --------------------------------------------- diff --git a/ui-v2/tests/acceptance/steps/dc/services/show/gateway-services-steps.js b/ui-v2/tests/acceptance/steps/dc/services/show/services-steps.js similarity index 100% rename from ui-v2/tests/acceptance/steps/dc/services/show/gateway-services-steps.js rename to ui-v2/tests/acceptance/steps/dc/services/show/services-steps.js diff --git a/ui-v2/tests/acceptance/steps/dc/services/show/upstreams-steps.js b/ui-v2/tests/acceptance/steps/dc/services/show/upstreams-steps.js new file mode 100644 index 000000000..3231912b9 --- /dev/null +++ b/ui-v2/tests/acceptance/steps/dc/services/show/upstreams-steps.js @@ -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); + }); +} diff --git a/ui-v2/tests/pages/dc/services/show.js b/ui-v2/tests/pages/dc/services/show.js index 984c57255..c9fd7bc30 100644 --- a/ui-v2/tests/pages/dc/services/show.js +++ b/ui-v2/tests/pages/dc/services/show.js @@ -7,7 +7,14 @@ export default function(visitable, attribute, collection, text, intentions, filt dashboardAnchor: { href: attribute('href', '[data-test-dashboard-anchor]'), }, - tabs: tabs('tab', ['instances', 'linked-services', 'intentions', 'routing', 'tags']), + tabs: tabs('tab', [ + 'instances', + 'linked-services', + 'upstreams', + 'intentions', + 'routing', + 'tags', + ]), filter: filter, // TODO: These need to somehow move to subpages @@ -15,7 +22,7 @@ export default function(visitable, attribute, collection, text, intentions, filt address: text('[data-test-address]'), }), intentions: intentions(), - services: collection('.gateway-services-list> ul > li:not(:first-child)', { + services: collection('.consul-gateway-services-list> ul > li:not(:first-child)', { name: text('[data-test-service-name]'), }), };