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
2020-02-06 12:06:48 +00:00 · 2020-02-06 12:06:48 +00:00 · 1fdf60234c
parent 1d26be2415
commit 1fdf60234c
6 changed files with 95 additions and 100 deletions
--- 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;
  }),
--- 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')) {
--- a/ui-v2/app/templates/components/route-card.hbs
+++ b/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>
--- 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'}}
-        <ol>
-            <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
-        </ol>
-    {{/block-slot}}
-    {{#block-slot name='header'}}
-      <h1>
-        {{ 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') }}
-        <span data-test-external-source="{{externalSource}}" style={{{ concat 'background-image:' bg }}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
-    {{/if}}
-  {{/with}}
+  {{#block-slot name='notification' as |status type|}}
+    {{partial 'dc/services/notifications'}}
+  {{/block-slot}}
+  {{#block-slot name='breadcrumbs'}}
+    <ol>
+        <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
+    </ol>
+  {{/block-slot}}
+  {{#block-slot name='header'}}
+    <h1>
+      {{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')}}
+      <span data-test-external-source={{externalSource}} style={{{concat 'background-image:' bg}}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
+  {{/if}}
+{{/with}}
 {{/with}}
 {{#if (eq item.Service.Kind 'connect-proxy')}}
-        <span class="kind-proxy">Proxy</span>
+      <span class="kind-proxy">Proxy</span>
 {{else if (eq item.Service.Kind 'mesh-gateway')}}
-        <span class="kind-proxy">Mesh Gateway</span>
+      <span class="kind-proxy">Mesh Gateway</span>
 {{/if}}
-      </h1>
-      <label for="toolbar-toggle"></label>
-      {{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}}
+    </h1>
+    <label for="toolbar-toggle"></label>
+    {{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}}
--- 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) {
--- 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"