From fe784f6f8340a122ed44de052f8918d9840c8bb5 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Tue, 16 Jun 2020 12:33:11 -0400
Subject: [PATCH] ui: Refactor detailed health checks to use more of the
 service/instance-checks helper (#8119)

---
 .../consul-service-instance-list/index.hbs    | 32 ++++++-------------
 ui-v2/app/helpers/service/instance-checks.js  |  7 ++--
 .../styles/components/composite-row/skin.scss |  3 +-
 3 files changed, 16 insertions(+), 26 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 92270519c4..20f297a2bb 100644
--- a/ui-v2/app/components/consul-service-instance-list/index.hbs
+++ b/ui-v2/app/components/consul-service-instance-list/index.hbs
@@ -12,23 +12,17 @@
       </ConsulExternalSource>
 {{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}}
   {{#let (service/instance-checks checks) as |serviceCheck| }}
-    {{#if (eq serviceCheck.status 'empty') }}
-      <li class={{serviceCheck.status}}>
+    {{#if (eq serviceCheck.check 'empty') }}
+      <li class={{serviceCheck.check}}>
         No service checks
       </li>
     {{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}}>
+          <li class={{serviceCheck.check}}>
             All service checks {{serviceCheck.status}}
           </li>
-        {{/if}}
       {{else}}
-        <li class={{serviceCheck.status}}>
+        <li class={{serviceCheck.check}}>
           {{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}
         </li>
       {{/if}}
@@ -37,23 +31,17 @@
 {{/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}}>
+    {{#if (eq nodeCheck.check 'empty') }}
+      <li class={{nodeCheck.check}}>
         No node checks
       </li>
     {{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}}
+        <li class={{nodeCheck.check}}>
+          All node checks {{nodeCheck.status}}
+        </li>
       {{else}}
-        <li class={{nodeCheck.status}}>
+        <li class={{nodeCheck.check}}>
           {{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}
         </li>
       {{/if}}
diff --git a/ui-v2/app/helpers/service/instance-checks.js b/ui-v2/app/helpers/service/instance-checks.js
index 3935b9d569..319e82bf17 100644
--- a/ui-v2/app/helpers/service/instance-checks.js
+++ b/ui-v2/app/helpers/service/instance-checks.js
@@ -24,22 +24,25 @@ export function healthChecks([items], hash) {
   switch (true) {
     case ChecksCritical !== 0:
       return {
+        check: 'critical',
         status: 'failing',
         count: ChecksCritical,
       };
     case ChecksWarning !== 0:
       return {
-        status: 'warning',
+        check: 'warning',
+        status: 'with warning',
         count: ChecksWarning,
       };
     case ChecksPassing !== 0:
       return {
+        check: 'passing',
         status: 'passing',
         count: ChecksPassing,
       };
     default:
       return {
-        status: 'empty',
+        check: 'empty',
       };
   }
 }
diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss
index 5772c1088a..32e2bde835 100644
--- a/ui-v2/app/styles/components/composite-row/skin.scss
+++ b/ui-v2/app/styles/components/composite-row/skin.scss
@@ -27,8 +27,7 @@
   @extend %with-alert-triangle-color-mask, %as-pseudo;
   background-color: $orange-500;
 }
-%composite-row .critical::before,
-%composite-row .failing::before {
+%composite-row .critical::before {
   @extend %with-cancel-square-fill-color-mask, %as-pseudo;
   background-color: $red-500;
 }