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),
+ };
+ }
});