ui: Redesign - Node service instances tab (#8204)

* Upgrade consul-api-dobule to version 3.1.3 * Create ConsulInstaceChecks component with test * Redesign: Service Instaces tab in for a Node * Update Node tests to work with the ConsulServiceInstancesList * Style fix to the copy button in the composite-row details * Delete helper and move logic to ConsulInstanceChecks component * Delete unused component consul-node-service-list
hashicorp · Jul 1, 2020 · b78ef1f · b78ef1f
1 parent 246fdb9
commit b78ef1f
Show file tree

Hide file tree

Showing 16 changed files with 183 additions and 187 deletions.
diff --git a/ui-v2/app/components/consul-instance-checks/index.hbs b/ui-v2/app/components/consul-instance-checks/index.hbs
@@ -0,0 +1,32 @@
+{{#if (gt items.length 0)}}
+  {{#if (eq healthCheck.check 'empty') }}
+    <dl class={{healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>No {{type}} checks</dd>
+    </dl>
+  {{else}}
+    {{#if (eq healthCheck.count items.length)}}
+    <dl class={{healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>All {{type}} checks {{healthCheck.status}}</dd>
+    </dl>
+    {{else}}
+    <dl class={{healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>{{healthCheck.count}}/{{items.length}} {{type}} checks {{healthCheck.status}}</dd>
+    </dl>
+    {{/if}}
+  {{/if}}
+{{/if}}
diff --git a/ui-v2/app/components/consul-instance-checks/index.js b/ui-v2/app/components/consul-instance-checks/index.js
@@ -0,0 +1,52 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  tagName: '',
+  healthCheck: computed('items.[]', function() {
+    let ChecksCritical = 0;
+    let ChecksWarning = 0;
+    let ChecksPassing = 0;
+
+    this.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 {
+          check: 'critical',
+          status: 'failing',
+          count: ChecksCritical,
+        };
+      case ChecksWarning !== 0:
+        return {
+          check: 'warning',
+          status: 'with warning',
+          count: ChecksWarning,
+        };
+      case ChecksPassing !== 0:
+        return {
+          check: 'passing',
+          status: 'passing',
+          count: ChecksPassing,
+        };
+      default:
+        return {
+          check: 'empty',
+        };
+    }
+  }),
+});
diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs
@@ -1,80 +1,25 @@
 {{#if (gt items.length 0)}}
   <ListCollection @items={{items}} class="consul-service-instance-list" as |item index|>
     <BlockSlot @name="header">
-      <a href={{href-to routeName item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
-        {{item.Service.ID}}
-      </a>
-    </BlockSlot>
-    <BlockSlot @name="details">
-      <ConsulExternalSource @item={{item.Service}} />
-{{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}}
-  {{#let (service/instance-checks checks) as |serviceCheck| }}
-    {{#if (eq serviceCheck.check 'empty') }}
-      <dl class={{serviceCheck.check}}>
-        <dt>
-           <Tooltip>
-            Service Checks
-          </Tooltip>
-        </dt>
-        <dd>No service checks</dd>
-      </dl>
-    {{else}}
-      {{#if (eq serviceCheck.count checks.length)}}
-      <dl class={{serviceCheck.check}}>
-        <dt>
-          <Tooltip>
-            Service Checks
-          </Tooltip>
-        </dt>
-        <dd>All service checks {{serviceCheck.status}}</dd>
-      </dl>
+      {{#if (eq routeName "dc.services.show")}}
+        <a data-test-service-name href={{href-to routeName item.Service}}>
+          {{item.ID}}
+        </a>
       {{else}}
-      <dl class={{serviceCheck.check}}>
-        <dt>
-          <Tooltip>
-            Service Checks
-          </Tooltip>
-        </dt>
-        <dd>{{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}</dd>
-      </dl>
+        <a data-test-service-name href={{href-to routeName item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
+          {{item.Service.ID}}
+        </a>
       {{/if}}
-    {{/if}}
-  {{/let}}
-{{/let}}
-{{#let (filter-by 'ServiceID' '' item.Checks) as |checks|}}
-  {{#let (service/instance-checks checks) as |nodeCheck| }}
-    {{#if (eq nodeCheck.check 'empty') }}
-      <dl class={{nodeCheck.check}}>
-        <dt>
-          <Tooltip>
-            Node Checks
-          </Tooltip>
-        </dt>
-        <dd>No node checks</dd>
-      </dl>
+    </BlockSlot>
+    <BlockSlot @name="details">
+    {{#if checks}}
+      <ConsulExternalSource @item={{item}} />
+      <ConsulInstanceChecks @type="service" @items={{get checks item.Service}} />
     {{else}}
-      {{#if (eq nodeCheck.count checks.length)}}
-      <dl class={{nodeCheck.check}}>
-        <dt>
-          <Tooltip>
-            Node Checks
-          </Tooltip>
-        </dt>
-        <dd>All node checks {{nodeCheck.status}}</dd>
-      </dl>
-      {{else}}
-      <dl class={{nodeCheck.check}}>
-        <dt>
-          <Tooltip>
-            Node Checks
-          </Tooltip>
-        </dt>
-        <dd>{{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}</dd>
-      </dl>
-      {{/if}}
+      <ConsulExternalSource @item={{item.Service}} />
+      <ConsulInstanceChecks @type="service" @items={{reject-by 'ServiceID' '' item.Checks}} />
+      <ConsulInstanceChecks @type="node" @items={{filter-by 'ServiceID' '' item.Checks}} />
     {{/if}}
-  {{/let}}
-{{/let}}
 {{#if (get proxies item.Service.ID)}}
       <dl class="proxy">
         <dt>
@@ -99,6 +44,7 @@
         </dd>
       </dl>
 {{/if}}
+{{#if item.Service.Port}}
       <dl class="address" data-test-address>
         <dt>
           <Tooltip>
@@ -113,7 +59,23 @@
           {{/if}}
         </dd>
       </dl>
+{{/if}}
+{{#if (and checks item.Port)}}
+      <dl>
+        <dt>
+          <CopyButton
+            @value={{item.Port}}
+            @name="Port"
+          />
+        </dt>
+        <dd data-test-service-port={{item.Port}}>:{{item.Port}}</dd>
+      </dl>
+{{/if}}
+{{#if checks}}
+      <TagList @item={{item}} />
+{{else}}
       <TagList @item={{item.Service}} />
+{{/if}}
     </BlockSlot>
   </ListCollection>
 {{/if}}
diff --git a/ui-v2/app/controllers/dc/nodes/show/services.js b/ui-v2/app/controllers/dc/nodes/show/services.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import { alias } from '@ember/object/computed';
+import { get, computed } from '@ember/object';
 
 export default Controller.extend({
   items: alias('item.Services'),
@@ -9,4 +10,19 @@ export default Controller.extend({
       replace: true,
     },
   },
+  checks: computed('item.Checks.[]', function() {
+    const checks = {};
+    get(this, 'item.Checks')
+      .filter(item => {
+        return item.ServiceID !== '';
+      })
+      .forEach(item => {
+        if (typeof checks[item.ServiceID] === 'undefined') {
+          checks[item.ServiceID] = [];
+        }
+        checks[item.ServiceID].push(item);
+      });
+
+    return checks;
+  }),
 });
diff --git a/ui-v2/app/helpers/service/instance-checks.js b/ui-v2/app/helpers/service/instance-checks.js
diff --git a/ui-v2/app/router.js b/ui-v2/app/router.js
@@ -67,7 +67,7 @@ export const routes = {
           _options: { path: '/health-checks' },
         },
         services: {
-          _options: { path: '/services' },
+          _options: { path: '/service-instances' },
         },
         rtt: {
           _options: { path: '/round-trip-time' },

diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss
@@ -73,6 +73,7 @@
 }
 %composite-row-detail .copy-button {
   margin-right: 4px;
+  margin-top: 2px;
 }
 %composite-row-header .copy-button {
   margin-left: 4px;

diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
@@ -21,7 +21,7 @@
           compact
               (array
                           (hash label="Health Checks" href=(href-to "dc.nodes.show.healthchecks") selected=(is-href "dc.nodes.show.healthchecks"))
-                          (hash label="Services" href=(href-to "dc.nodes.show.services") selected=(is-href "dc.nodes.show.services"))
+                          (hash label="Service Instances" href=(href-to "dc.nodes.show.services") selected=(is-href "dc.nodes.show.services"))
 (if tomography.distances  (hash label="Round Trip Time" href=(href-to "dc.nodes.show.rtt") selected=(is-href "dc.nodes.show.rtt")) '')
                           (hash label="Lock Sessions" href=(href-to "dc.nodes.show.sessions") selected=(is-href "dc.nodes.show.sessions"))
                           (hash label="Metadata" href=(href-to "dc.nodes.show.metadata") selected=(is-href "dc.nodes.show.metadata"))

diff --git a/ui-v2/app/templates/dc/nodes/show/services.hbs b/ui-v2/app/templates/dc/nodes/show/services.hbs
@@ -8,38 +8,9 @@
       @onsearch={{action (mut search) value="target.value"}}
     />
   {{/if}}
-    <ChangeableSet @dispatcher={{searchable 'nodeservice' items}} @terms={{search}}>
+     <ChangeableSet @dispatcher={{searchable 'nodeservice' items}} @terms={{search}}>
       <BlockSlot @name="set" as |filtered|>
-          <TabularCollection
-            data-test-services
-            @items={{filtered}} as |item index|
-          >
-              <BlockSlot @name="header">
-                  <th>Service</th>
-                  <th>Port</th>
-                  <th>Tags</th>
-              </BlockSlot>
-              <BlockSlot @name="row">
-                  <td data-test-service-name={{item.Service}}>
-                    <a href={{href-to 'dc.services.show' item.Service}}>
-                  {{#let (service/external-source item) as |externalSource| }}
-                    {{#if externalSource }}
-                      <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
-                    {{else}}
-                      <span></span>
-                    {{/if}}
-                  {{/let}}
-                      {{item.Service}}{{#if (not-eq item.ID item.Service) }}&nbsp;<em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
-                    </a>
-                  </td>
-                  <td data-test-service-port={{item.Port}} class="port">
-                      {{item.Port}}
-                  </td>
-                  <td data-test-service-tags>
-                    <TagList @item={{item}} />
-                  </td>
-              </BlockSlot>
-          </TabularCollection>
+        <ConsulServiceInstanceList @routeName="dc.services.show" @items={{filtered}} @checks={{checks}}/>
       </BlockSlot>
       <BlockSlot @name="empty">
         <p>

diff --git a/ui-v2/tests/acceptance/components/catalog-filter.feature b/ui-v2/tests/acceptance/components/catalog-filter.feature
@@ -90,8 +90,8 @@ Feature: components / catalog-filter
       node: node-0
     ---
     # And I see 3 healthcheck model with the name "Disk Util"
-    When I click services on the tabs
-    And I see servicesIsSelected on the tabs
+    When I click serviceInstances on the tabs
+    And I see serviceInstancesIsSelected on the tabs
 
     Then I fill in with yaml
     ---
@@ -101,12 +101,6 @@ Feature: components / catalog-filter
     And I see 1 [Model] model with the port "65535"
     Then I fill in with yaml
     ---
-    s: service-0-with-id
-    ---
-    And I see 1 [Model] model
-    And I see 1 [Model] model with the id "service-0-with-id"
-    Then I fill in with yaml
-    ---
     s: hard drive
     ---
     And I see 1 [Model] model with the name "[Model]-1"