From 9fcad3e0c3d9c3b1b9d1188e56a133c4f1315622 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Tue, 16 Jun 2020 11:59:31 -0400
Subject: [PATCH] ui: Add detailed Health Checks to Service Detail page (#8111)

---
 .../consul-service-instance-list/index.hbs    | 56 ++++++++++++++++---
 ui-v2/app/helpers/service/instance-checks.js  | 19 +++++--
 .../styles/components/composite-row/skin.scss |  3 +-
 3 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs
index c99875dab4..92270519c4 100644
--- a/ui-v2/app/components/consul-service-instance-list/index.hbs
+++ b/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
diff --git a/ui-v2/app/helpers/service/instance-checks.js b/ui-v2/app/helpers/service/instance-checks.js
index a6ea5218b2..3935b9d569 100644
--- a/ui-v2/app/helpers/service/instance-checks.js
+++ b/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',
+      };
   }
 }
 
diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss
index 32e2bde835..5772c1088a 100644
--- a/ui-v2/app/styles/components/composite-row/skin.scss
+++ b/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;
 }