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

@@ -31,12 +31,14 @@ export default Component.extend({
     this._super(...arguments);
     this._viewportlistener.add(
       this.dom.isInViewport(this.element, bool => {
+        if (get(this, 'isDisplayed') !== bool) {
           set(this, 'isDisplayed', bool);
           if (this.isDisplayed) {
             this.addPathListeners();
           } else {
             this.ticker.destroy(this);
           }
+        }
       })
     );
   },
@@ -63,11 +65,15 @@ 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;
       }
+      if (typeof nextNode !== 'undefined') {
         routes.push({
           Default: true,
           ID: `route:${this.chain.ServiceName}`,
@@ -82,6 +88,7 @@ export default Component.extend({
           NextNode: nextNode,
         });
       }
+    }
     return routes;
   }),
   resolvers: computed('chain.{Nodes,Targets}', function() {
@@ -92,24 +99,18 @@ 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':
+    this.splitters.forEach(item => {
       item.Splits.forEach(splitter => {
         graph.addLink(item.ID, splitter.NextNode);
       });
-          break;
-        case 'router':
-          item.Routes.forEach((route, i) => {
+    });
+    this.routes.forEach((route, i) => {
       route = createRoute(route, router, this.dom.guid);
       graph.addLink(route.ID, route.NextNode);
     });
-          break;
-      }
-    });
     return graph;
   }),
   selected: computed('selectedId', 'graph', function() {

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')) {

ui-v2/app/templates/components/route-card.hbs

@@ -12,9 +12,7 @@
       {{path.type}}
       </dt>
       <dd>
-  {{#if (not-eq path.type 'Default')}}
         {{path.value}}
-  {{/if}}
       </dd>
     </dl>
   </header>

ui-v2/app/templates/dc/services/show.hbs

@@ -14,7 +14,7 @@
 {{#with (service/external-source item.Service) as |externalSource|}}
 {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}}
   {{#if (not-eq bg 'none')}}
-        <span data-test-external-source="{{externalSource}}" style={{{ concat 'background-image:' bg }}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
+      <span data-test-external-source={{externalSource}} style={{{concat 'background-image:' bg}}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
   {{/if}}
 {{/with}}
 {{/with}}
@@ -29,7 +29,7 @@
       items=(compact
         (array
                         'Instances'
-    (if chain 'Routing' '')
+(if (not-eq chain null) 'Routing' '')
                         'Tags'
         )
       )
@@ -46,12 +46,12 @@
       (compact
         (array
                         (hash id=(slugify 'Instances') partial='dc/services/instances')
-        (if chain (hash id=(slugify 'Routing') partial='dc/services/routing') '')
+(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")}}
+        {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}}
           {{partial panel.partial}}
         {{/tab-section}}
     {{/each}}

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) {

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"