Show Service.ID's throughout the app, allow searching by Service.ID

1. In the Services > Services detail page for both healthy and unhealthy
nodes, also add searching by Service.ID here
2. In the Nodes > Node detail > [Services] tab only if its different
from the Service name, add searching by Service.ID here

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