ui: Add detailed Health Checks to Service Detail page (#8111)

ui-v2/app/components/consul-service-instance-list/index.hbs

@@ -10,16 +10,56 @@
           <ExternalSource />
         </li>
       </ConsulExternalSource>
-    {{#with (reject-by 'ServiceID' '' item.Checks) as |checks|}}
-      <li class={{service/instance-checks checks}}>
-        {{checks.length}} service checks
+{{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}}
+  {{#let (service/instance-checks checks) as |serviceCheck| }}
+    {{#if (eq serviceCheck.status 'empty') }}
+      <li class={{serviceCheck.status}}>
+        No service checks
       </li>
-    {{/with}}
-    {{#with (filter-by 'ServiceID' '' item.Checks) as |checks|}}
-      <li class={{service/instance-checks checks}}>
-        {{checks.length}} node checks
+    {{else}}
+      {{#if (eq serviceCheck.count checks.length)}}
+        {{#if (eq serviceCheck.status 'warning') }}
+          <li class={{serviceCheck.status}}>
+            All service checks with {{serviceCheck.status}}
+          </li>
+        {{else}}
+          <li class={{serviceCheck.status}}>
+            All service checks {{serviceCheck.status}}
+          </li>
+        {{/if}}
+      {{else}}
+        <li class={{serviceCheck.status}}>
+          {{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}
+        </li>
+      {{/if}}
+    {{/if}}
+  {{/let}}
+{{/let}}
+{{#let (filter-by 'ServiceID' '' item.Checks) as |checks|}}
+  {{#let (service/instance-checks checks) as |nodeCheck| }}
+    {{#if (eq nodeCheck.status 'empty') }}
+      <li class={{nodeCheck.status}}>
+        No node checks
       </li>
-    {{/with}}
+    {{else}}
+      {{#if (eq nodeCheck.count checks.length)}}
+        {{#if (eq nodeCheck.status 'warning') }}
+          <li class={{nodeCheck.status}}>
+            All node checks with {{nodeCheck.status}}
+          </li>
+        {{else}}
+          <li class={{nodeCheck.status}}>
+            All node checks {{nodeCheck.status}}
+          </li>
+        {{/if}}
+      {{else}}
+        <li class={{nodeCheck.status}}>
+          {{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}
+        </li>
+      {{/if}}
+    {{/if}}
+  {{/let}}
+{{/let}}
     {{#if (get proxies item.Service.ID)}}
       <li class="proxy">
         connected with proxy

ui-v2/app/helpers/service/instance-checks.js

@@ -23,13 +23,24 @@ export function healthChecks([items], hash) {
 
   switch (true) {
     case ChecksCritical !== 0:
-      return 'critical';
+      return {
+        status: 'failing',
+        count: ChecksCritical,
+      };
     case ChecksWarning !== 0:
-      return 'warning';
+      return {
+        status: 'warning',
+        count: ChecksWarning,
+      };
     case ChecksPassing !== 0:
-      return 'passing';
+      return {
+        status: 'passing',
+        count: ChecksPassing,
+      };
     default:
-      return 'empty';
+      return {
+        status: 'empty',
+      };
   }
 }
 

ui-v2/app/styles/components/composite-row/skin.scss

@@ -27,7 +27,8 @@
   @extend %with-alert-triangle-color-mask, %as-pseudo;
   background-color: $orange-500;
 }
-%composite-row .critical::before {
+%composite-row .critical::before,
+%composite-row .failing::before {
   @extend %with-cancel-square-fill-color-mask, %as-pseudo;
   background-color: $red-500;
 }