diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card.hbs index 4d36f93e20..ed392e5f58 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs +++ b/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 '')}} + No health checks + {{else}} {{#if (not-eq percentage.passing 0)}} {{percentage.passing}}% {{/if}} @@ -34,6 +37,7 @@ {{#if (not-eq percentage.critical 0)}} {{percentage.critical}}% {{/if}} + {{/if}} {{/let}} {{else}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index 5a1372c4a4..7f52c7e766 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/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; diff --git a/ui/packages/consul-ui/app/helpers/service/health-percentage.js b/ui/packages/consul-ui/app/helpers/service/health-percentage.js index d8b9b0cf71..98163d0501 100644 --- a/ui/packages/consul-ui/app/helpers/service/health-percentage.js +++ b/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), + }; + } });