From 1fdf60234cf9336d300bc84b64364bfde3485ff9 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 6 Feb 2020 12:06:48 +0000 Subject: [PATCH] ui: Discovery chain improvements (#7222) * ui: remove the default word when describing routes * ui: Avoid mutating the chain and look for the default edges more safely * ui: Use not null check instead of a truthy check for showing disco-chain * ui: Upgrade consul-api-double for better disco-chain mocks/fixtures --- ui-v2/app/components/discovery-chain.js | 69 ++++++------ ui-v2/app/components/route-card.js | 6 - ui-v2/app/templates/components/route-card.hbs | 2 - ui-v2/app/templates/dc/services/show.hbs | 104 +++++++++--------- .../utils/components/discovery-chain/index.js | 8 +- ui-v2/yarn.lock | 6 +- 6 files changed, 95 insertions(+), 100 deletions(-) diff --git a/ui-v2/app/components/discovery-chain.js b/ui-v2/app/components/discovery-chain.js index fabd6e85e..c708ffa27 100644 --- a/ui-v2/app/components/discovery-chain.js +++ b/ui-v2/app/components/discovery-chain.js @@ -31,11 +31,13 @@ export default Component.extend({ this._super(...arguments); this._viewportlistener.add( this.dom.isInViewport(this.element, bool => { - set(this, 'isDisplayed', bool); - if (this.isDisplayed) { - this.addPathListeners(); - } else { - this.ticker.destroy(this); + if (get(this, 'isDisplayed') !== bool) { + set(this, 'isDisplayed', bool); + if (this.isDisplayed) { + this.addPathListeners(); + } else { + this.ticker.destroy(this); + } } }) ); @@ -63,24 +65,29 @@ export default Component.extend({ !routes.find(item => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') && !routes.find(item => typeof item.Definition === 'undefined') ) { - let nextNode = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`; - const splitterID = `splitter:${this.chain.ServiceName}`; - if (typeof this.chain.Nodes[splitterID] !== 'undefined') { + let nextNode; + const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`; + const splitterID = `splitter:${this.chain.ServiceName}.${this.chain.Namespace}`; + if (typeof this.chain.Nodes[resolverID] !== 'undefined') { + nextNode = resolverID; + } else if (typeof this.chain.Nodes[splitterID] !== 'undefined') { nextNode = splitterID; } - routes.push({ - Default: true, - ID: `route:${this.chain.ServiceName}`, - Name: this.chain.ServiceName, - Definition: { - Match: { - HTTP: { - PathPrefix: '/', + if (typeof nextNode !== 'undefined') { + routes.push({ + Default: true, + ID: `route:${this.chain.ServiceName}`, + Name: this.chain.ServiceName, + Definition: { + Match: { + HTTP: { + PathPrefix: '/', + }, }, }, - }, - NextNode: nextNode, - }); + NextNode: nextNode, + }); + } } return routes; }), @@ -92,23 +99,17 @@ export default Component.extend({ get(this, 'chain.Nodes') ); }), - graph: computed('chain.Nodes', function() { + graph: computed('splitters', 'routes', function() { const graph = this.dataStructs.graph(); const router = this.chain.ServiceName; - Object.entries(get(this, 'chain.Nodes')).forEach(([key, item]) => { - switch (item.Type) { - case 'splitter': - item.Splits.forEach(splitter => { - graph.addLink(item.ID, splitter.NextNode); - }); - break; - case 'router': - item.Routes.forEach((route, i) => { - route = createRoute(route, router, this.dom.guid); - graph.addLink(route.ID, route.NextNode); - }); - break; - } + this.splitters.forEach(item => { + item.Splits.forEach(splitter => { + graph.addLink(item.ID, splitter.NextNode); + }); + }); + this.routes.forEach((route, i) => { + route = createRoute(route, router, this.dom.guid); + graph.addLink(route.ID, route.NextNode); }); return graph; }), diff --git a/ui-v2/app/components/route-card.js b/ui-v2/app/components/route-card.js index ce9b3547d..7ca2db8b2 100644 --- a/ui-v2/app/components/route-card.js +++ b/ui-v2/app/components/route-card.js @@ -4,12 +4,6 @@ import { get, computed } from '@ember/object'; export default Component.extend({ tagName: '', path: computed('item', function() { - if (get(this, 'item.Default')) { - return { - type: 'Default', - value: '/', - }; - } return Object.entries(get(this, 'item.Definition.Match.HTTP') || {}).reduce( function(prev, [key, value]) { if (key.toLowerCase().startsWith('path')) { diff --git a/ui-v2/app/templates/components/route-card.hbs b/ui-v2/app/templates/components/route-card.hbs index 9d43619d4..a46ca6c17 100644 --- a/ui-v2/app/templates/components/route-card.hbs +++ b/ui-v2/app/templates/components/route-card.hbs @@ -12,9 +12,7 @@ {{path.type}}
- {{#if (not-eq path.type 'Default')}} {{path.value}} - {{/if}}
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 2a145aed0..d963fc74d 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -1,59 +1,59 @@ {{title item.Service.Service}} {{#app-view class="service show"}} - {{#block-slot name='notification' as |status type|}} - {{partial 'dc/services/notifications'}} - {{/block-slot}} - {{#block-slot name='breadcrumbs'}} -
    -
  1. All Services
    2. -
- {{/block-slot}} - {{#block-slot name='header'}} -

- {{ item.Service.Service }} -{{#with (service/external-source item.Service) as |externalSource| }} - {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }} - {{#if (not-eq bg 'none') }} - Registered via {{externalSource}} - {{/if}} - {{/with}} + {{#block-slot name='notification' as |status type|}} + {{partial 'dc/services/notifications'}} + {{/block-slot}} + {{#block-slot name='breadcrumbs'}} +
    +
  1. All Services
    2. +
+ {{/block-slot}} + {{#block-slot name='header'}} +

+ {{item.Service.Service}} +{{#with (service/external-source item.Service) as |externalSource|}} +{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}} + {{#if (not-eq bg 'none')}} + Registered via {{externalSource}} + {{/if}} +{{/with}} {{/with}} {{#if (eq item.Service.Kind 'connect-proxy')}} - Proxy + Proxy {{else if (eq item.Service.Kind 'mesh-gateway')}} - Mesh Gateway + Mesh Gateway {{/if}} -

- - {{tab-nav - items=(compact - (array - 'Instances' - (if chain 'Routing' '') - 'Tags' - ) - ) - selected=selectedTab - }} - {{/block-slot}} - {{#block-slot name='actions'}} - {{#if urls.service}} - {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}} - {{/if}} - {{/block-slot}} - {{#block-slot name='content'}} - {{#each - (compact - (array - (hash id=(slugify 'Instances') partial='dc/services/instances') - (if chain (hash id=(slugify 'Routing') partial='dc/services/routing') '') - (hash id=(slugify 'Tags') partial='dc/services/tags') - ) - ) as |panel| - }} - {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}} - {{partial panel.partial}} - {{/tab-section}} - {{/each}} - {{/block-slot}} + + + {{tab-nav + items=(compact + (array + 'Instances' +(if (not-eq chain null) 'Routing' '') + 'Tags' + ) + ) + selected=selectedTab + }} + {{/block-slot}} + {{#block-slot name='actions'}} + {{#if urls.service}} + {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}} + {{/if}} + {{/block-slot}} + {{#block-slot name='content'}} + {{#each + (compact + (array + (hash id=(slugify 'Instances') partial='dc/services/instances') +(if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '') + (hash id=(slugify 'Tags') partial='dc/services/tags') + ) + ) as |panel| + }} + {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}} + {{partial panel.partial}} + {{/tab-section}} + {{/each}} + {{/block-slot}} {{/app-view}} diff --git a/ui-v2/app/utils/components/discovery-chain/index.js b/ui-v2/app/utils/components/discovery-chain/index.js index ab3240bf5..cf5577315 100644 --- a/ui-v2/app/utils/components/discovery-chain/index.js +++ b/ui-v2/app/utils/components/discovery-chain/index.js @@ -37,7 +37,6 @@ export const getAlternateServices = function(targets, a) { export const getSplitters = function(nodes) { return getNodesByType(nodes, 'splitter').map(function(item) { // Splitters need IDs adding so we can find them in the DOM later - item.ID = `splitter:${item.Name}`; // splitters have a service.nspace as a name // do the reverse dance to ensure we don't mess up any // serivice names with dots in them @@ -45,8 +44,11 @@ export const getSplitters = function(nodes) { temp.reverse(); temp.shift(); temp.reverse(); - item.Name = temp.join('.'); - return item; + return { + ...item, + ID: `splitter:${item.Name}`, + Name: temp.join('.'), + }; }); }; export const getRoutes = function(nodes, uid) { diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock index 51d52207b..2fd156a57 100644 --- a/ui-v2/yarn.lock +++ b/ui-v2/yarn.lock @@ -992,9 +992,9 @@ js-yaml "^3.13.1" "@hashicorp/consul-api-double@^2.6.2": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.11.0.tgz#0b833893ccc5cfb9546b1513127d5e92d30f2262" - integrity sha512-2MO1jiwuJyPlSGQ4AeFtLKJWmLSj0msoiaRHPtj6YPjm69ZkY/t4U4SU3cfpVn2Dx7wHzXe//9GvNHI1gRxAzg== + version "2.12.0" + resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.12.0.tgz#725078f770bbd0ef75a5f2498968c5c8891f90a2" + integrity sha512-8OcgesUjWQ8AjaXzbz3tGJQn1kM0sN6pLidGM7isNPUyYmIjIEXQzaeUQYzsfv0N2Ko9ZuOXYUsaBl8IK1KGow== "@hashicorp/ember-cli-api-double@^2.0.0": version "2.0.0"