From a4857d03c6cb1ef582ce71d2f2d9367316188b10 Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Tue, 21 Apr 2020 10:21:52 -0400 Subject: [PATCH] ui: Redesign - Service Detail Page (#7655) * Create ConsulServiceInstanceList with styling and test * Implement ConsulServiceInstanceList to Service Detail page * Implement ConsulExternalSource to Services Show page header * Update services/show page object * Update the styling of CompositeRow * Refactor ConsulServiceList component and styling * Update ConsulExternalSource to say 'Registered via...' * Upgrade consul-api-double to patch 2.14.1 * Fix up tests to not use Kind in service models * Update ListCollection with clickFirstAnchor action * Add $typo-size-450 to typography base variables --- .../consul-external-source/index.hbs | 34 +++++++------ .../consul-service-instance-list/index.hbs | 47 +++++++++++++++++ .../consul-service-instance-list/index.js | 5 ++ .../components/consul-service-list/index.hbs | 32 +++++++++--- .../components/consul-service-list/index.js | 3 +- .../app/components/list-collection/index.hbs | 2 +- ui-v2/app/components/list-collection/index.js | 5 ++ ui-v2/app/controllers/dc/services/index.js | 18 +++---- .../controllers/dc/services/show/instances.js | 9 ++++ ui-v2/app/helpers/service/instance-checks.js | 36 +++++++++++++ ui-v2/app/routes/dc/services/show.js | 15 +++--- .../base/typography/base-variables.scss | 1 + ui-v2/app/styles/components/app-view.scss | 7 +++ .../styles/components/app-view/layout.scss | 10 ++++ .../components/composite-row/index.scss | 10 ++-- .../components/composite-row/layout.scss | 6 ++- .../styles/components/composite-row/skin.scss | 42 ++++++++++++++-- .../components/consul-external-source.scss | 12 +++-- .../consul-service-instance-list.scss | 9 ++++ .../components/consul-service-list.scss | 5 +- .../components/consul-service-list/index.scss | 2 - .../consul-service-list/layout.scss | 16 ------ .../components/consul-service-list/skin.scss | 30 ----------- .../styles/components/filter-bar/layout.scss | 5 +- ui-v2/app/styles/components/index.scss | 1 + ui-v2/app/styles/core/typography.scss | 7 +++ ui-v2/app/templates/dc/services/index.hbs | 16 +----- ui-v2/app/templates/dc/services/show.hbs | 36 ++++++------- .../templates/dc/services/show/instances.hbs | 43 +--------------- ui-v2/app/utils/dom/click-first-anchor.js | 10 ++-- .../components/catalog-filter.feature | 12 +++-- ui-v2/tests/acceptance/dc/error.feature | 11 ++-- .../tests/acceptance/dc/list-blocking.feature | 4 +- .../acceptance/dc/nspaces/manage.feature | 20 +++++--- .../acceptance/dc/services/dc-switch.feature | 21 +++++--- .../acceptance/dc/services/index.feature | 50 +++++++++++-------- .../dc/services/list-blocking.feature | 11 ++-- .../tests/acceptance/dc/services/list.feature | 11 ++-- .../dc/services/show-routing.feature | 20 -------- .../consul-service-instance-list-test.js | 26 ++++++++++ ui-v2/tests/pages.js | 11 +--- ui-v2/tests/pages/dc/services/show.js | 17 ++----- ui-v2/yarn.lock | 6 +-- 43 files changed, 403 insertions(+), 291 deletions(-) create mode 100644 ui-v2/app/components/consul-service-instance-list/index.hbs create mode 100644 ui-v2/app/components/consul-service-instance-list/index.js create mode 100644 ui-v2/app/helpers/service/instance-checks.js create mode 100644 ui-v2/app/styles/components/consul-service-instance-list.scss delete mode 100644 ui-v2/app/styles/components/consul-service-list/index.scss delete mode 100644 ui-v2/app/styles/components/consul-service-list/layout.scss delete mode 100644 ui-v2/app/styles/components/consul-service-list/skin.scss create mode 100644 ui-v2/tests/integration/components/consul-service-instance-list-test.js diff --git a/ui-v2/app/components/consul-external-source/index.hbs b/ui-v2/app/components/consul-external-source/index.hbs index 9a66b3a9ce61..b18e8e302387 100644 --- a/ui-v2/app/components/consul-external-source/index.hbs +++ b/ui-v2/app/components/consul-external-source/index.hbs @@ -1,17 +1,19 @@ -{{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}} - {{#if externalSource}} - {{#if (has-block)}} - {{yield - (component 'consul-external-source' item=item _externalSource=externalSource) - }} - {{else}} - - {{#if (eq externalSource 'aws')}} - Synced from {{uppercase externalSource}} - {{else}} - Synced from {{capitalize externalSource}} - {{/if}} - +{{#if item}} + {{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}} + {{#if externalSource}} + {{#if (has-block)}} + {{yield + (component 'consul-external-source' item=item _externalSource=externalSource) + }} + {{else}} + + {{#if (eq externalSource 'aws')}} + Registered via {{uppercase externalSource}} + {{else}} + Registered via {{capitalize externalSource}} + {{/if}} + + {{/if}} {{/if}} - {{/if}} -{{/let}} + {{/let}} +{{/if}} diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs new file mode 100644 index 000000000000..ef815e0eaac4 --- /dev/null +++ b/ui-v2/app/components/consul-service-instance-list/index.hbs @@ -0,0 +1,47 @@ +{{yield}} +{{#if (gt items.length 0)}} + + + {{item.Service.ID}} + + + +{{/if}} \ No newline at end of file diff --git a/ui-v2/app/components/consul-service-instance-list/index.js b/ui-v2/app/components/consul-service-instance-list/index.js new file mode 100644 index 000000000000..4798652642ba --- /dev/null +++ b/ui-v2/app/components/consul-service-instance-list/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs index 426a461a96d3..50f53c7c7657 100644 --- a/ui-v2/app/components/consul-service-list/index.hbs +++ b/ui-v2/app/components/consul-service-list/index.hbs @@ -1,14 +1,30 @@ {{yield}} {{#if (gt items.length 0)}} - - - - {{item.Name}} - - - {{yield}} - + + {{item.Name}} + {{/if}} \ No newline at end of file diff --git a/ui-v2/app/components/consul-service-list/index.js b/ui-v2/app/components/consul-service-list/index.js index a7be4db1319e..4798652642ba 100644 --- a/ui-v2/app/components/consul-service-list/index.js +++ b/ui-v2/app/components/consul-service-list/index.js @@ -1,6 +1,5 @@ import Component from '@ember/component'; -import Slotted from 'block-slots'; -export default Component.extend(Slotted, { +export default Component.extend({ tagName: '', }); diff --git a/ui-v2/app/components/list-collection/index.hbs b/ui-v2/app/components/list-collection/index.hbs index f1863719facc..9e077dd6ee4f 100644 --- a/ui-v2/app/components/list-collection/index.hbs +++ b/ui-v2/app/components/list-collection/index.hbs @@ -1,6 +1,6 @@
  • {{~#each _cells as |cell|~}} -
  • {{yield cell.item cell.index }}
    • +
  • {{yield cell.item cell.index }}
    • {{~/each~}}     \ No newline at end of file diff --git a/ui-v2/app/components/list-collection/index.js b/ui-v2/app/components/list-collection/index.js index 39181ec81e67..dc830db62c8d 100644 --- a/ui-v2/app/components/list-collection/index.js +++ b/ui-v2/app/components/list-collection/index.js @@ -45,4 +45,9 @@ export default Component.extend(WithResizing, { this.updateScrollPosition(); } }, + actions: { + click: function(e) { + return this.dom.clickFirstAnchor(e, 'li'); + }, + }, }); diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js index 6a27337e2843..1e643ad44752 100644 --- a/ui-v2/app/controllers/dc/services/index.js +++ b/ui-v2/app/controllers/dc/services/index.js @@ -21,19 +21,19 @@ export default Controller.extend(WithEventSource, WithSearching, { }), services: computed('items.[]', function() { return this.items.filter(function(item) { - return item.Kind === 'consul'; + return typeof item.Kind === 'undefined'; }); }), proxies: computed('items.[]', function() { - return this.items.filter(function(item) { - return item.Kind === 'connect-proxy'; - }); - }), - withProxies: computed('proxies', function() { const proxies = {}; - this.proxies.forEach(item => { - proxies[item.Name.replace('-proxy', '')] = true; - }); + this.items + .filter(function(item) { + return item.Kind === 'connect-proxy'; + }) + .forEach(item => { + proxies[item.Name.replace('-proxy', '')] = true; + }); + return proxies; }), }); diff --git a/ui-v2/app/controllers/dc/services/show/instances.js b/ui-v2/app/controllers/dc/services/show/instances.js index d8aa4db153e4..4a916b5128c9 100644 --- a/ui-v2/app/controllers/dc/services/show/instances.js +++ b/ui-v2/app/controllers/dc/services/show/instances.js @@ -3,6 +3,7 @@ import { get, computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import WithSearching from 'consul-ui/mixins/with-searching'; + export default Controller.extend(WithSearching, { dom: service('dom'), items: alias('item.Nodes'), @@ -23,4 +24,12 @@ export default Controller.extend(WithSearching, { .add(this.items) .search(get(this, this.searchParams.serviceInstance)); }), + keyedProxies: computed('proxies.[]', function() { + const proxies = {}; + this.proxies.forEach(item => { + proxies[item.ServiceProxy.DestinationServiceID] = true; + }); + + return proxies; + }), }); diff --git a/ui-v2/app/helpers/service/instance-checks.js b/ui-v2/app/helpers/service/instance-checks.js new file mode 100644 index 000000000000..a6ea5218b205 --- /dev/null +++ b/ui-v2/app/helpers/service/instance-checks.js @@ -0,0 +1,36 @@ +import { helper } from '@ember/component/helper'; + +export function healthChecks([items], hash) { + let ChecksCritical = 0; + let ChecksWarning = 0; + let ChecksPassing = 0; + + items.forEach(item => { + switch (item.Status) { + case 'critical': + ChecksCritical += 1; + break; + case 'warning': + ChecksWarning += 1; + break; + case 'passing': + ChecksPassing += 1; + break; + default: + break; + } + }); + + switch (true) { + case ChecksCritical !== 0: + return 'critical'; + case ChecksWarning !== 0: + return 'warning'; + case ChecksPassing !== 0: + return 'passing'; + default: + return 'empty'; + } +} + +export default helper(healthChecks); diff --git a/ui-v2/app/routes/dc/services/show.js b/ui-v2/app/routes/dc/services/show.js index 816c804fb7ad..db144b85fd98 100644 --- a/ui-v2/app/routes/dc/services/show.js +++ b/ui-v2/app/routes/dc/services/show.js @@ -7,6 +7,7 @@ export default Route.extend({ repo: service('repository/service'), intentionRepo: service('repository/intention'), chainRepo: service('repository/discovery-chain'), + proxyRepo: service('repository/proxy'), settings: service('settings'), model: function(params, transition = {}) { const dc = this.modelFor('dc').dc.Name; @@ -16,12 +17,11 @@ export default Route.extend({ intentions: this.intentionRepo.findByService(params.name, dc, nspace), urls: this.settings.findBySlug('urls'), dc: dc, - nspace: nspace, }).then(model => { - return hash({ - chain: ['connect-proxy', 'mesh-gateway'].includes(get(model, 'item.Service.Kind')) - ? null - : this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) { + return ['connect-proxy', 'mesh-gateway'].includes(get(model, 'item.Service.Kind')) + ? model + : hash({ + chain: this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) { const code = get(e, 'errors.firstObject.status'); // Currently we are specifically catching a 500, but we return null // by default, so null for all errors. @@ -38,8 +38,9 @@ export default Route.extend({ return null; } }), - ...model, - }); + proxies: this.proxyRepo.findAllBySlug(params.name, dc, nspace), + ...model, + }); }); }, setupController: function(controller, model) { diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss index b0fbdc8d4468..706e390a76db 100644 --- a/ui-v2/app/styles/base/typography/base-variables.scss +++ b/ui-v2/app/styles/base/typography/base-variables.scss @@ -6,6 +6,7 @@ $typo-size-100: 3.5rem; $typo-size-200: 1.8rem; $typo-size-300: 1.3rem; $typo-size-400: 1.2rem; +$typo-size-450: 1.125rem; $typo-size-500: 1rem; $typo-size-600: 0.875rem; $typo-size-700: 0.8125rem; diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 16315f24aa04..c05db39e75a2 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -115,4 +115,11 @@ main { #toolbar-toggle:checked + * { display: block; } + html.template-service.template-show #toolbar-toggle + * { + display: block; + padding: 4px; + } + html.template-service.template-show .actions { + display: none; + } } diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss index f297aa6470bb..433a7df7e62d 100644 --- a/ui-v2/app/styles/components/app-view/layout.scss +++ b/ui-v2/app/styles/components/app-view/layout.scss @@ -20,6 +20,16 @@ %app-view-header dt { font-weight: bold; } +%app-view-header .title-bar { + display: flex; + align-items: center; +} +%app-view-header .title-bar > h1 { + border: 0; +} +%app-view-header .title-bar > span { + margin-left: 8px; +} /* units */ %app-view { margin-top: 50px; diff --git a/ui-v2/app/styles/components/composite-row/index.scss b/ui-v2/app/styles/components/composite-row/index.scss index 16a0c0af0e8d..f6aadc70c3c2 100644 --- a/ui-v2/app/styles/components/composite-row/index.scss +++ b/ui-v2/app/styles/components/composite-row/index.scss @@ -1,13 +1,13 @@ @import './layout'; @import './skin'; -%composite-row a:hover, -%composite-row a:focus, -%composite-row a:active { +%composite-row:hover, +%composite-row:focus, +%composite-row:active { @extend %composite-row-intent; } -%composite-row > a > span { +%composite-row > a { @extend %composite-row-header; } -%composite-row > a > ul { +%composite-row > ul { @extend %composite-row-detail; } diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss index a1c52b004647..be8b009e70a1 100644 --- a/ui-v2/app/styles/components/composite-row/layout.scss +++ b/ui-v2/app/styles/components/composite-row/layout.scss @@ -1,4 +1,5 @@ -%composite-row a { +%composite-row { + cursor: pointer; display: block; box-sizing: border-box; padding: 12px; @@ -19,3 +20,6 @@ %composite-row-detail > li:not(:first-child) { margin-left: 12px; } +%composite-row-detail .node::before { + margin-top: 2px; +} diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss index b262f8cd7c1f..9ab9fc7e39eb 100644 --- a/ui-v2/app/styles/components/composite-row/skin.scss +++ b/ui-v2/app/styles/components/composite-row/skin.scss @@ -1,9 +1,7 @@ %composite-row { list-style-type: none; -} -%composite-row a { border-top-color: $gray-200; - border-bottom-color: $gray-200; + border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } @@ -17,3 +15,41 @@ %composite-row-detail { color: $gray-500; } +%composite-row:last-child { + border-bottom-color: $gray-200; +} + +// Health Checks +%composite-row .passing::before { + @extend %with-check-circle-fill-color-mask, %as-pseudo; + background-color: $green-500; +} +%composite-row .warning::before { + @extend %with-alert-triangle-color-mask, %as-pseudo; + background-color: $orange-500; +} +%composite-row .critical::before { + @extend %with-cancel-square-fill-color-mask, %as-pseudo; + background-color: $red-500; +} + +// Metadata +%composite-row .node a { + color: $gray-500; +} +%composite-row .node a:hover { + color: $color-action; + text-decoration: underline; +} +%composite-row .node::before { + @extend %with-git-commit-mask, %as-pseudo; + background-color: $gray-500; +} +%composite-row .address::before { + @extend %with-public-default-mask, %as-pseudo; + background-color: $gray-500; +} +%composite-row .proxy::before { + @extend %with-swap-horizontal-mask, %as-pseudo; + background-color: $gray-500; +} diff --git a/ui-v2/app/styles/components/consul-external-source.scss b/ui-v2/app/styles/components/consul-external-source.scss index 3c8147a83225..3365a0600bdb 100644 --- a/ui-v2/app/styles/components/consul-external-source.scss +++ b/ui-v2/app/styles/components/consul-external-source.scss @@ -1,17 +1,19 @@ .consul-external-source { background-color: $gray-100; padding: 0 8px; - height: 16px; - line-height: 12px; - margin-top: 3px; border-radius: $decor-radius-100; + height: 18px; + line-height: 0.7rem; } .consul-external-source > span { + font-size: 14px; + font-weight: normal; position: relative; - top: -1px; + color: $gray-500; } .consul-external-source::before { - font-size: 0.7em; + width: 14px; + height: 14px; margin-right: 2px; position: relative; top: 2px; diff --git a/ui-v2/app/styles/components/consul-service-instance-list.scss b/ui-v2/app/styles/components/consul-service-instance-list.scss new file mode 100644 index 000000000000..8ae21f9bad0f --- /dev/null +++ b/ui-v2/app/styles/components/consul-service-instance-list.scss @@ -0,0 +1,9 @@ +.consul-service-instance-list > ul { + @extend %consul-service-instance-list; +} +%consul-service-instance-list > li:not(:first-child) { + @extend %consul-service-instance-row; +} +%consul-service-instance-row { + @extend %composite-row; +} diff --git a/ui-v2/app/styles/components/consul-service-list.scss b/ui-v2/app/styles/components/consul-service-list.scss index 1652d418ee21..eb99bb36d99c 100644 --- a/ui-v2/app/styles/components/consul-service-list.scss +++ b/ui-v2/app/styles/components/consul-service-list.scss @@ -1,5 +1,3 @@ -@import './consul-service-list/index'; - .consul-service-list > ul { @extend %consul-service-list; } @@ -9,3 +7,6 @@ %consul-service-row { @extend %composite-row; } +%consul-service-row > ul { + margin-left: 26px; +} diff --git a/ui-v2/app/styles/components/consul-service-list/index.scss b/ui-v2/app/styles/components/consul-service-list/index.scss deleted file mode 100644 index 62cfad5c0188..000000000000 --- a/ui-v2/app/styles/components/consul-service-list/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './layout'; -@import './skin'; diff --git a/ui-v2/app/styles/components/consul-service-list/layout.scss b/ui-v2/app/styles/components/consul-service-list/layout.scss deleted file mode 100644 index 6b617ceb7d66..000000000000 --- a/ui-v2/app/styles/components/consul-service-list/layout.scss +++ /dev/null @@ -1,16 +0,0 @@ -%consul-service-row > a > span:first-child { - margin-right: 4px; - width: 16px; - height: 16px; -} -%consul-service-row > a > span:nth-child(3) { - margin-left: 4px; - width: 16px; - height: 16px; -} -%consul-service-row > a > ul { - margin-left: 26px; -} -%consul-service-row .proxy::before { - margin-right: 4px; -} diff --git a/ui-v2/app/styles/components/consul-service-list/skin.scss b/ui-v2/app/styles/components/consul-service-list/skin.scss deleted file mode 100644 index bec1796c4861..000000000000 --- a/ui-v2/app/styles/components/consul-service-list/skin.scss +++ /dev/null @@ -1,30 +0,0 @@ -%consul-service-row > a > span:nth-child(2) { - font-size: 1.125rem; - font-weight: $typo-weight-medium; -} -%consul-service-row > a > span:first-child, -%consul-service-row > a > span:nth-child(3) { - @extend %as-pseudo; -} - -// Health Checks -%consul-service-row .empty { - @extend %with-minus-square-fill-mask; - background-color: #7c8797; -} -%consul-service-row .passing { - @extend %with-check-circle-fill-mask; - background-color: $green-500; -} -%consul-service-row .warning { - @extend %with-alert-triangle-mask; - background-color: $orange-500; -} -%consul-service-row .critical { - @extend %with-cancel-square-fill-mask; - background-color: $red-500; -} -%consul-service-row .proxy::before { - @extend %with-git-commit-mask, %as-pseudo; - background-color: $gray-500; -} diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss index 0b35d64c9954..cdd857fe1b99 100644 --- a/ui-v2/app/styles/components/filter-bar/layout.scss +++ b/ui-v2/app/styles/components/filter-bar/layout.scss @@ -1,7 +1,8 @@ %filter-bar { - padding: 14px; + padding: 4px; display: block; margin-top: 0 !important; + margin-bottom: 8px !important; } @media #{$--horizontal-filters} { %filter-bar { @@ -19,6 +20,6 @@ } @media #{$--lt-horizontal-filters} { %filter-bar > *:first-child { - margin-bottom: 12px; + margin: 2px 0; } } diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss index 9338c1f7fbd7..4871673e1f65 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -34,6 +34,7 @@ @import './list-collection'; @import './grid-collection'; @import './consul-service-list'; +@import './consul-service-instance-list'; /**/ diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index d0f3920aec33..5e9bb5662f6e 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -109,6 +109,13 @@ pre code, } /**/ +/* composite row */ +%composite-row-header { + font-size: $typo-size-450; + font-weight: $typo-weight-medium; +} +/**/ + /* TODO: We have nothing else with a 500 */ /* either make this the biggest %p or don't use it */ %app-view h1 em { diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 1df6c9ba5ae9..98794a8a17d1 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -14,21 +14,7 @@ - - -
      - -
    • - -
      • -       -
    • {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
      • - {{#if (get withProxies item.Name)}}
    • connected with proxy
      • {{/if}} -
      • -
    -     -     -     +

    There are no services. diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 469bb3e63e32..48c02e095cd8 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -10,29 +10,21 @@ -

    - {{item.Service.Service}} -{{#let (service/external-source item.Service) as |externalSource| }} - {{#if externalSource }} - Registered via {{externalSource}} - {{/if}} -{{/let}} -{{#if (eq item.Service.Kind 'connect-proxy')}} - Proxy -{{else if (eq item.Service.Kind 'mesh-gateway')}} - Mesh Gateway -{{/if}} -

    - - +

    + {{item.Service.Service}} +

    + + + + (hash label="Tags" href=(href-to "dc.services.show.tags") selected=(is-href "dc.services.show.tags")) + ) + }}/>     {{#if urls.service}} diff --git a/ui-v2/app/templates/dc/services/show/instances.hbs b/ui-v2/app/templates/dc/services/show/instances.hbs index 25ac7636067c..e7de7c68c2d6 100644 --- a/ui-v2/app/templates/dc/services/show/instances.hbs +++ b/ui-v2/app/templates/dc/services/show/instances.hbs @@ -8,48 +8,7 @@ {{/if}} - - - ID - Node - Address - Node Checks - Service Checks - - - - - {{#let (service/external-source item.Service) as |externalSource| }} - {{#if externalSource }} - - {{else}} - - {{/if}} - {{/let}} - {{or item.Service.ID item.Service.Service}} - - - - {{item.Node.Node}} - - - {{item.Service.Address}}:{{item.Service.Port}} - - - {{#with (reject-by 'ServiceID' '' item.Checks) as |checks|}} - - {{/with}} - - - {{#with (filter-by 'ServiceID' '' item.Checks) as |checks|}} - - {{/with}} - - - +

    diff --git a/ui-v2/app/utils/dom/click-first-anchor.js b/ui-v2/app/utils/dom/click-first-anchor.js index da3699fbc758..04cde2e9e901 100644 --- a/ui-v2/app/utils/dom/click-first-anchor.js +++ b/ui-v2/app/utils/dom/click-first-anchor.js @@ -14,7 +14,11 @@ const clickEvent = function($el) { export default function(closest, click = clickEvent) { // TODO: Decide whether we should use `e` for ease // or `target`/`el` - return function(e) { + // TODO: currently, using a string stopElement to tell the func + // where to stop looking and currenlty default is 'tr' because + // it's backwards compatible. + // Long-term this func shouldn't default to 'tr' + return function(e, stopElement = 'tr') { // click on row functionality // so if you click the actual row but not a link // find the first link and fire that instead @@ -26,9 +30,7 @@ export default function(closest, click = clickEvent) { case 'button': return; } - // TODO: why should this be restricted to a tr - // closest should probably be relaced with a finder function - const $a = closest('tr', e.target).querySelector('a'); + const $a = closest(stopElement, e.target).querySelector('a'); if ($a) { click($a); } diff --git a/ui-v2/tests/acceptance/components/catalog-filter.feature b/ui-v2/tests/acceptance/components/catalog-filter.feature index ad8fd42df8ee..a3536fa3aafe 100644 --- a/ui-v2/tests/acceptance/components/catalog-filter.feature +++ b/ui-v2/tests/acceptance/components/catalog-filter.feature @@ -127,26 +127,30 @@ Feature: components / catalog-filter ------------------------------------------------- Scenario: Freetext filtering the service listing Given 1 datacenter model with the value "dc-1" - And 3 service models from yaml + And 6 service models from yaml --- - Name: Service-0 - Kind: consul Tags: ['one', 'two', 'three'] ChecksPassing: 0 ChecksWarning: 0 ChecksCritical: 1 + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul Tags: ['two', 'three'] ChecksPassing: 0 ChecksWarning: 1 ChecksCritical: 0 + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul Tags: ['three'] ChecksPassing: 1 ChecksWarning: 0 ChecksCritical: 0 + - Name: Service-2-proxy + Kind: 'connect-proxy' + --- When I visit the services page for yaml --- diff --git a/ui-v2/tests/acceptance/dc/error.feature b/ui-v2/tests/acceptance/dc/error.feature index 2682471d3f58..7e432259c5ff 100644 --- a/ui-v2/tests/acceptance/dc/error.feature +++ b/ui-v2/tests/acceptance/dc/error.feature @@ -6,14 +6,17 @@ Feature: dc / error: Recovering from a dc 500 error - dc-1 - dc-500 --- - And 3 service models from yaml + And 6 service models from yaml --- - Name: Service-0 - Kind: consul + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul + - Name: Service-2-proxy + Kind: 'connect-proxy' --- And the url "/v1/internal/ui/services" responds with a 500 status When I visit the services page for yaml diff --git a/ui-v2/tests/acceptance/dc/list-blocking.feature b/ui-v2/tests/acceptance/dc/list-blocking.feature index 7e6d9243865a..b0d039883ccf 100644 --- a/ui-v2/tests/acceptance/dc/list-blocking.feature +++ b/ui-v2/tests/acceptance/dc/list-blocking.feature @@ -32,7 +32,7 @@ Feature: dc / list-blocking When I visit the [Page] page for yaml --- dc: dc-1 - service: service-0-proxy + service: service --- Then the url should be /dc-1/[Url] And pause until I see 3 [Model] models @@ -45,5 +45,5 @@ Feature: dc / list-blocking Where: ----------------------------------------------------------------- | Page | Model | Url | - | service | instance | services/service-0-proxy/instances | + | service | instance | services/service/instances | ----------------------------------------------------------------- diff --git a/ui-v2/tests/acceptance/dc/nspaces/manage.feature b/ui-v2/tests/acceptance/dc/nspaces/manage.feature index 24083b10f778..431777ac2eb1 100644 --- a/ui-v2/tests/acceptance/dc/nspaces/manage.feature +++ b/ui-v2/tests/acceptance/dc/nspaces/manage.feature @@ -13,20 +13,26 @@ Feature: dc / nspaces / manage : Managing Namespaces --- - dc-1 --- - And 6 service models from yaml + And 12 service models from yaml --- - Name: Service-0 - Kind: consul + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul + - Name: Service-2-proxy + Kind: 'connect-proxy' - Name: Service-3 - Kind: consul + - Name: Service-3-proxy + Kind: 'connect-proxy' - Name: Service-4 - Kind: consul + - Name: Service-4-proxy + Kind: 'connect-proxy' - Name: Service-5 - Kind: consul + - Name: Service-5-proxy + Kind: 'connect-proxy' --- When I visit the services page for yaml diff --git a/ui-v2/tests/acceptance/dc/services/dc-switch.feature b/ui-v2/tests/acceptance/dc/services/dc-switch.feature index 5b2d7d2933cc..ae294a69c195 100644 --- a/ui-v2/tests/acceptance/dc/services/dc-switch.feature +++ b/ui-v2/tests/acceptance/dc/services/dc-switch.feature @@ -6,21 +6,28 @@ Feature: dc / services / dc-switch : Switching Datacenters - dc-1 - dc-2 --- - And 6 service models from yaml + And 12 service models from yaml --- - Name: Service-0 - Kind: consul + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul + - Name: Service-2-proxy + Kind: 'connect-proxy' - Name: Service-3 - Kind: consul + - Name: Service-3-proxy + Kind: 'connect-proxy' - Name: Service-4 - Kind: consul + - Name: Service-4-proxy + Kind: 'connect-proxy' - Name: Service-5 - Kind: consul + - Name: Service-5-proxy + Kind: 'connect-proxy' --- + When I visit the services page for yaml --- dc: dc-1 diff --git a/ui-v2/tests/acceptance/dc/services/index.feature b/ui-v2/tests/acceptance/dc/services/index.feature index 9fde58258899..b3ecf44ba4a8 100644 --- a/ui-v2/tests/acceptance/dc/services/index.feature +++ b/ui-v2/tests/acceptance/dc/services/index.feature @@ -2,36 +2,42 @@ Feature: dc / services / index: List Services Scenario: Given 1 datacenter model with the value "dc-1" - And 4 service models from yaml + And 10 service models from yaml --- - - Name: Service 1 - Kind: consul - ExternalSources: - - consul - - Name: Service 2 - Kind: consul - ExternalSources: - - nomad - - Name: Service 3 - Kind: consul - ExternalSources: - - terraform - - Name: Service 4 - Kind: consul - ExternalSources: - - kubernetes - - Name: Service 5 - Kind: consul - ExternalSources: - - aws + - Name: Service-0 + ExternalSources: + - consul + - Name: Service-0-proxy + Kind: 'connect-proxy' + - Name: Service-1 + ExternalSources: + - nomad + - Name: Service-1-proxy + Kind: 'connect-proxy' + - Name: Service-2 + ExternalSources: + - terraform + - Name: Service-2-proxy + Kind: 'connect-proxy' + - Name: Service-3 + ExternalSources: + - kubernetes + - Name: Service-3-proxy + Kind: 'connect-proxy' + - Name: Service-4 + ExternalSources: + - aws + - Name: Service-4-proxy + Kind: 'connect-proxy' --- + 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 4 service models + Then I see 5 service models And I see externalSource on the services like yaml --- - consul diff --git a/ui-v2/tests/acceptance/dc/services/list-blocking.feature b/ui-v2/tests/acceptance/dc/services/list-blocking.feature index c445782129d2..74ee62021649 100644 --- a/ui-v2/tests/acceptance/dc/services/list-blocking.feature +++ b/ui-v2/tests/acceptance/dc/services/list-blocking.feature @@ -2,14 +2,17 @@ Feature: dc / services / list blocking Scenario: Viewing the listing pages for service Given 1 datacenter model with the value "dc-1" - Given 3 service models from yaml + And 6 service models from yaml --- - Name: Service-0 - Kind: consul + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul + - Name: Service-2-proxy + Kind: 'connect-proxy' --- And a network latency of 100 When I visit the services page for yaml diff --git a/ui-v2/tests/acceptance/dc/services/list.feature b/ui-v2/tests/acceptance/dc/services/list.feature index db7317083ff3..2638253f0f38 100644 --- a/ui-v2/tests/acceptance/dc/services/list.feature +++ b/ui-v2/tests/acceptance/dc/services/list.feature @@ -2,14 +2,17 @@ Feature: dc / services / list Scenario: Listing service Given 1 datacenter model with the value "dc-1" - And 3 service models from yaml + And 6 service models from yaml --- - Name: Service-0 - Kind: consul + - Name: Service-0-proxy + Kind: 'connect-proxy' - Name: Service-1 - Kind: consul + - Name: Service-1-proxy + Kind: 'connect-proxy' - Name: Service-2 - Kind: consul + - Name: Service-2-proxy + Kind: 'connect-proxy' --- When I visit the services page for yaml --- diff --git a/ui-v2/tests/acceptance/dc/services/show-routing.feature b/ui-v2/tests/acceptance/dc/services/show-routing.feature index ff1b7cdf7eeb..70c64c57c396 100644 --- a/ui-v2/tests/acceptance/dc/services/show-routing.feature +++ b/ui-v2/tests/acceptance/dc/services/show-routing.feature @@ -6,7 +6,6 @@ Feature: dc / services / Show Routing for Service And 1 service model from yaml --- - Service: - Kind: consul Name: service-0 ID: service-0-with-id --- @@ -17,31 +16,12 @@ Feature: dc / services / Show Routing for Service --- And the title should be "service-0 - Consul" And I see routing on the tabs - Scenario: Given a service proxy, the Routing tab should not display - Given 1 datacenter model with the value "dc1" - And 1 node models - And 1 service model from yaml - --- - - Service: - Kind: connect-proxy - Name: service-0-proxy - ID: service-0-proxy-with-id - --- - When I visit the service page for yaml - --- - dc: dc1 - service: service-0-proxy - --- - And the title should be "service-0-proxy - Consul" - And I don't see routing on the tabs - Scenario: Given connect is disabled, the Routing tab should not display or error Given 1 datacenter model with the value "dc1" And 1 node models And 1 service model from yaml --- - Service: - Kind: consul Name: service-0 ID: service-0-with-id --- diff --git a/ui-v2/tests/integration/components/consul-service-instance-list-test.js b/ui-v2/tests/integration/components/consul-service-instance-list-test.js new file mode 100644 index 000000000000..19f7666f62f1 --- /dev/null +++ b/ui-v2/tests/integration/components/consul-service-instance-list-test.js @@ -0,0 +1,26 @@ +import { module, skip } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | consul-service-instance-list', function(hooks) { + setupRenderingTest(hooks); + + skip('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +}); diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js index 42f31cb1d62a..5ef2bf14efec 100644 --- a/ui-v2/tests/pages.js +++ b/ui-v2/tests/pages.js @@ -78,16 +78,7 @@ export default { services(visitable, clickable, text, attribute, collection, page, catalogFilter, radiogroup) ), service: create( - service( - visitable, - clickable, - attribute, - collection, - text, - consulIntentionList, - catalogFilter, - tabgroup - ) + service(visitable, attribute, collection, text, consulIntentionList, catalogFilter, tabgroup) ), instance: create(instance(visitable, attribute, collection, text, tabgroup)), nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)), diff --git a/ui-v2/tests/pages/dc/services/show.js b/ui-v2/tests/pages/dc/services/show.js index cd9b0f22a072..86acf55b0360 100644 --- a/ui-v2/tests/pages/dc/services/show.js +++ b/ui-v2/tests/pages/dc/services/show.js @@ -1,16 +1,9 @@ -export default function( - visitable, - clickable, - attribute, - collection, - text, - intentions, - filter, - tabs -) { +export default function(visitable, attribute, collection, text, intentions, filter, tabs) { return { visit: visitable('/:dc/services/:service'), - externalSource: attribute('data-test-external-source', 'h1 span'), + externalSource: attribute('data-test-external-source', '[data-test-external-source]', { + scope: '.title-bar', + }), dashboardAnchor: { href: attribute('href', '[data-test-dashboard-anchor]'), }, @@ -18,7 +11,7 @@ export default function( filter: filter, // TODO: These need to somehow move to subpages - instances: collection('#instances [data-test-tabular-row]', { + instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', { address: text('[data-test-address]'), }), intentions: intentions(), diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock index 2a53d09734fe..efc00c641434 100644 --- a/ui-v2/yarn.lock +++ b/ui-v2/yarn.lock @@ -1211,9 +1211,9 @@ js-yaml "^3.13.1" "@hashicorp/consul-api-double@^2.6.2": - version "2.14.0" - resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.0.tgz#ecef725fc22490011a671bc0a285a16013ca5e53" - integrity sha512-1rGMg/XSHR2ROr8a7OVEwOUy8UWuYdNUMijMxCuFHR201vDAGK9EDmkJCPF2PfYsDrcsiyb/0dxIL6Mba9p32Q== + version "2.14.1" + resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.1.tgz#c4beefa853368319324a6092fc4eb4371f9f8ffc" + integrity sha512-ZJtjkAuFHqcLTRjVaqx4NYnkZ17v5/DjaDhjH/kRVBx0gXcyKUEeMe34g69PfqgRo6ZYMVYMbSDq0JHTGcIShQ== "@hashicorp/ember-cli-api-double@^3.0.2": version "3.0.2"