ui: Return empty state for no health check in Topology Cards (#9403)

ui/packages/consul-ui/app/components/topology-metrics/card.hbs

@@ -25,6 +25,9 @@
   {{/if}}
 {{#if (eq @item.Datacenter @dc)}}
   {{#let (service/health-percentage @item) as |percentage|}}
+  {{#if (eq percentage '')}}
+    <span class="empty">No health checks</span>
+  {{else}}
     {{#if (not-eq percentage.passing 0)}}
       <span class="passing">{{percentage.passing}}%</span>
     {{/if}}
@@ -34,6 +37,7 @@
     {{#if (not-eq percentage.critical 0)}}
       <span class="critical">{{percentage.critical}}%</span>
     {{/if}}
+  {{/if}}
   {{/let}}
 {{else}}
     <dl class="health">

ui/packages/consul-ui/app/components/topology-metrics/skin.scss

@@ -57,6 +57,10 @@
       @extend %with-cancel-square-fill-color-mask, %as-pseudo;
       background-color: $red-500;
     }
+    .empty::before {
+      @extend %with-minus-square-fill-mask, %as-pseudo;
+      color: $gray-500;
+    }
   }
   div:nth-child(3) {
     border-top: 1px solid $gray-200;

ui/packages/consul-ui/app/helpers/service/health-percentage.js

@@ -2,9 +2,14 @@ import { helper } from '@ember/component/helper';
 
 export default helper(function serviceHealthPercentage([params] /*, hash*/) {
   const total = params.ChecksCritical + params.ChecksPassing + params.ChecksWarning;
-  return {
-    passing: Math.round((params.ChecksPassing / total) * 100),
-    warning: Math.round((params.ChecksWarning / total) * 100),
-    critical: Math.round((params.ChecksCritical / total) * 100),
-  };
+
+  if (total === 0) {
+    return '';
+  } else {
+    return {
+      passing: Math.round((params.ChecksPassing / total) * 100),
+      warning: Math.round((params.ChecksWarning / total) * 100),
+      critical: Math.round((params.ChecksCritical / total) * 100),
+    };
+  }
 });