Merge pull request #4387 from hashicorp/feature/ui-service-ids

UI - Show/search by service ids

ui-v2/app/components/healthchecked-resource.js

@@ -15,6 +15,9 @@ export default Component.extend({
   }),
   gridRowEnd: computed('UnhealthyChecks', function() {
     let spans = 3;
+    if (get(this, 'service')) {
+      spans++;
+    }
     if (get(this, 'healthy.length') > 0) {
       spans++;
     }

ui-v2/app/controllers/dc/nodes/show.js

@@ -23,6 +23,9 @@ export default Controller.extend(WithFiltering, {
       get(item, 'Service')
         .toLowerCase()
         .indexOf(term) !== -1 ||
+      get(item, 'ID')
+        .toLowerCase()
+        .indexOf(term) !== -1 ||
       get(item, 'Port')
         .toString()
         .toLowerCase()

ui-v2/app/controllers/dc/services/show.js

@@ -20,10 +20,16 @@ export default Controller.extend(WithHealthFiltering, {
     });
   }),
   filter: function(item, { s = '', status = '' }) {
+    const term = s.toLowerCase();
+
     return (
       get(item, 'Node.Node')
         .toLowerCase()
-        .indexOf(s.toLowerCase()) !== -1 && hasStatus(get(item, 'Checks'), status)
+        .indexOf(term) !== -1 ||
+      (get(item, 'Service.ID')
+        .toLowerCase()
+        .indexOf(term) !== -1 &&
+        hasStatus(get(item, 'Checks'), status))
     );
   },
 });

ui-v2/app/styles/components/healthchecked-resource.scss

@@ -14,6 +14,7 @@
   border-top: 1px solid;
 }
 %healthchecked-resource header span,
+%healthchecked-resource header em,
 %healthchecked-resource li:not(:last-child) span {
   overflow: hidden;
   display: inline-block;
@@ -34,14 +35,11 @@
   border-radius: $radius-small;
 }
 %healthchecked-resource header {
-  margin-bottom: 2em;
   position: relative;
 }
 
 %healthchecked-resource header strong {
   position: absolute;
-  bottom: -0.6em;
-  left: 15px;
 }
 %healthchecked-resource a,
 %healthchecked-resource header a > * {
@@ -85,12 +83,25 @@
 .healthy .healthchecked-resource li a {
   padding-left: 0;
 }
+%healthchecked-resource header strong {
+  top: 2.8em;
+  left: 15px;
+}
+%healthchecked-resource header span {
+  margin-bottom: 1.75em;
+}
 %healthchecked-resource header a {
   padding: 12px 15px;
 }
+.unhealthy .healthchecked-resource header a {
+  padding-bottom: 15px;
+}
+.unhealthy .healthchecked-resource header.with-service a {
+  padding-bottom: 25px;
+}
 %healthchecked-resource li a {
   padding: 3px 15px;
-  padding-top: 5px;
+  padding-top: 4px;
   padding-left: 39px;
   height: 31px;
 }

ui-v2/app/styles/core/typography.scss

@@ -41,10 +41,13 @@ th,
   font-weight: $weight-medium;
 }
 main label a[rel*='help'],
+td:first-child em,
 %healthchecked-resource strong {
   font-weight: $weight-normal;
 }
-%form-element > em {
+%form-element > em,
+td:first-child em,
+%healthchecked-resource header em {
   font-style: normal;
 }
 %form-element > span {

ui-v2/app/templates/components/healthchecked-resource.hbs

@@ -1,7 +1,8 @@
-    <header>
+<header class={{if service 'with-service' }}>
         <strong>{{address}}</strong>
         <a href={{href}}>
             <span>{{name}}</span>
+            <em>{{service}}</em>
         </a>
     </header>
     <ul>

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

@@ -15,7 +15,7 @@
         {{/block-slot}}
         {{#block-slot 'row'}}
             <td data-test-service-name="{{item.Service}}">
-                <a href={{href-to 'dc.services.show' item.Service }}>{{item.Service}}</a>
+              <a href={{href-to 'dc.services.show' item.Service }}>{{item.Service}}{{#if (not-eq item.ID item.Service) }} <em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}</a>
             </td>
             <td data-test-service-port="{{item.Port}}" class="port">
                 {{item.Port}}

ui-v2/app/templates/dc/nodes/index.hbs

@@ -35,7 +35,7 @@
             <h2>Healthy Nodes</h2>
             {{#list-collection
                 items=healthy
-                cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index|
+                cell-layout=(percentage-columns-layout healthy.length columns 92) as |item index|
             }}
                 {{healthchecked-resource
                     data-test-node=item.Node

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

@@ -36,6 +36,7 @@
                         data-test-node=item.Node.Node
                         href=(href-to 'dc.nodes.show' item.Node.Node)
                         name=item.Node.Node
+                        service=item.Service.ID
                         address=(concat item.Node.Address ':' item.Service.Port)
                         checks=item.Checks
                     }}
@@ -49,12 +50,13 @@
             <h2>Healthy Nodes</h2>
             {{#list-collection
                 items=healthy
-                cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index|
+                cell-layout=(percentage-columns-layout healthy.length columns 113) as |item index|
             }}
                 {{healthchecked-resource
                     href=(href-to 'dc.nodes.show' item.Node.Node)
                     data-test-node=item.Node.Node
                     name=item.Node.Node
+                    service=item.Service.ID
                     address=(concat item.Node.Address ':' item.Service.Port)
                     checks=item.Checks
                     status=item.Checks.[0].Status

ui-v2/package.json

@@ -30,7 +30,7 @@
     ]
   },
   "devDependencies": {
-    "@hashicorp/consul-api-double": "^1.2.0",
+    "@hashicorp/consul-api-double": "^1.4.0",
     "@hashicorp/ember-cli-api-double": "^1.3.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",

ui-v2/tests/acceptance/components/catalog-filter.feature

@@ -65,7 +65,7 @@ Feature: components / catalog-filter
     ---
     - ID: node-0
     ---
-    When I visit the node page for yaml
+    When I visit the [Page] page for yaml
     ---
       dc: dc1
       node: node-0
@@ -81,8 +81,39 @@ Feature: components / catalog-filter
     ---
     And I see 1 [Model] model
     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"
   Where:
     -------------------------------------------------
     | Model   | Page     | Url                       |
     | service | node     | /dc-1/nodes/node-0        |
     -------------------------------------------------
+  Scenario: Filtering [Model] in [Page]
+    Given 1 datacenter model with the value "dc1"
+    And 2 [Model] models from yaml
+    ---
+    - ID: node-0
+    ---
+    When I visit the [Page] page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    Then I fill in with yaml
+    ---
+    s: service-0-with-id
+    ---
+    And I see 1 [Model] model
+    Then I see id on the unhealthy like yaml
+    ---
+      - service-0-with-id
+    ---
+  Where:
+    -------------------------------------------------
+    | Model   | Page     | Url                       |
+    | nodes   | service  | /dc-1/services/service-0  |
+    -------------------------------------------------

ui-v2/tests/acceptance/dc/services/show.feature

@@ -28,14 +28,17 @@ Feature: dc / services / show: Show Service
     - Checks:
         - Status: passing
       Service:
+        ID: passing-service-8080
         Port: 8080
       Node:
         Address: 1.1.1.1
     - Service:
+        ID: service-8000
         Port: 8000
       Node:
         Address: 2.2.2.2
     - Service:
+        ID: service-8888
         Port: 8888
       Node:
         Address: 3.3.3.3
@@ -54,3 +57,12 @@ Feature: dc / services / show: Show Service
       - "2.2.2.2:8000"
       - "3.3.3.3:8888"
     ---
+    Then I see id on the healthy like yaml
+    ---
+      - "passing-service-8080"
+    ---
+    Then I see id on the unhealthy like yaml
+    ---
+      - "service-8000"
+      - "service-8888"
+    ---

ui-v2/tests/pages/dc/nodes/show.js

@@ -6,6 +6,7 @@ export default function(visitable, deletable, clickable, attribute, collection,
       name: attribute('data-test-node-healthcheck'),
     }),
     services: collection('#services [data-test-tabular-row]', {
+      id: attribute('data-test-service-id', '[data-test-service-id]'),
       port: attribute('data-test-service-port', '.port'),
     }),
     sessions: collection(

ui-v2/tests/pages/dc/services/show.js

@@ -7,10 +7,12 @@ export default function(visitable, attribute, collection, text, filter) {
     healthy: collection('[data-test-healthy] [data-test-node]', {
       name: attribute('data-test-node'),
       address: text('header strong'),
+      id: text('header em'),
     }),
     unhealthy: collection('[data-test-unhealthy] [data-test-node]', {
       name: attribute('data-test-node'),
       address: text('header strong'),
+      id: text('header em'),
     }),
     filter: filter,
   };

ui-v2/yarn.lock

@@ -81,9 +81,9 @@
     faker "^4.1.0"
     js-yaml "^3.10.0"
 
-"@hashicorp/consul-api-double@^1.2.0":
+"@hashicorp/consul-api-double@^1.4.0":
-  version "1.3.0"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.3.0.tgz#fded48ca4db1e63c66e39b4433b2169b6add69ed"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.4.0.tgz#6b5222263f2acf1539d0e375c1a935d50217b9ab"
 
 "@hashicorp/ember-cli-api-double@^1.3.0":
   version "1.3.0"