Refactor Topology Metrics Card component

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

@@ -1,4 +1,4 @@
-<a class="card"
+<a class="topology-metrics-card"
   href={{if
    (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))
     (href-to "nspace.dc.services.show.index" (concat '~' @item.Namespace) @item.Datacenter @item.Name)
@@ -10,6 +10,9 @@
   <p>
     {{@item.Name}}
   </p>
+  {{#if (eq @item.Source 'proxy-registration')}}
+    <TopologyMetrics::SourceType />
+  {{/if}}
   <div class="details">
   {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
     <dl class="nspace">

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -0,0 +1,78 @@
+#upstream-container .topology-metrics-card:not(:last-child),
+#downstream-container .topology-metrics-card:not(:last-child) {
+  margin-bottom: 8px;
+}
+#upstream-container .topology-metrics-card,
+#downstream-container .topology-metrics-card {
+  display: block;
+  color: $gray-700;
+  overflow: hidden;
+  background-color: $white;
+  border-radius: $decor-radius-100;
+  border: 1px solid $gray-200;
+  p {
+    padding: 12px 12px 0 12px;
+    font-size: $typo-size-500;
+    font-weight: $typo-weight-semibold;
+    margin-bottom: 0 !important;
+  }
+  div {
+    display: inline-flex;
+    dl {
+      display: inline-flex;
+      margin-right: 8px;
+    }
+    dd {
+      color: $gray-700;
+    }
+    span {
+      margin-right: 8px;
+    }
+    span::before,
+    dt::before {
+      margin-right: 4px;
+    }
+    .nspace dt::before,
+    .health dt::before {
+      margin-top: 2px;
+    }
+    .nspace dt::before {
+      @extend %with-folder-outline-mask, %as-pseudo;
+    }
+    .health dt::before {
+      @extend %with-help-circle-outline-mask, %as-pseudo;
+    }
+    .nspace dt::before {
+      @extend %with-folder-outline-mask, %as-pseudo;
+    }
+    .health dt::before {
+      @extend %with-help-circle-outline-mask, %as-pseudo;
+    }
+    .nspace dt::before,
+    .health dt::before {
+      background-color: $gray-500;
+    }
+    .passing::before {
+      @extend %with-check-circle-fill-color-mask, %as-pseudo;
+      background-color: $green-500;
+    }
+    .warning::before {
+      @extend %with-alert-triangle-color-mask, %as-pseudo;
+      background-color: $orange-500;
+    }
+    .critical::before {
+      @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;
+    }
+  }
+  .details {
+    padding: 0 12px 12px 12px;
+  }
+  div.stats {
+    border-top: 1px solid $gray-200;
+  }
+}

ui/packages/consul-ui/app/components/topology-metrics/index.js

@@ -92,9 +92,11 @@ export default class TopologyMetrics extends Component {
     this.upView = document.getElementById('upstream-lines').getBoundingClientRect();
 
     // Get Card elements positions
-    const downCards = [...document.querySelectorAll('#downstream-container .card')];
+    const downCards = [
+      ...document.querySelectorAll('#downstream-container .topology-metrics-card'),
+    ];
     const grafanaCard = document.querySelector('.metrics-header');
-    const upCards = [...document.querySelectorAll('#upstream-column .card')];
+    const upCards = [...document.querySelectorAll('#upstream-column .topology-metrics-card')];
 
     // Set center positioning points
     this.centerDimensions = grafanaCard.getBoundingClientRect();

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

@@ -49,44 +49,6 @@
 #upstream-column #upstream-container:not(:last-child) {
   margin-bottom: 8px;
 }
-#upstream-container .card:not(:last-child),
-#downstream-container .card:not(:last-child) {
-  margin-bottom: 8px;
-}
-#upstream-container .card,
-#downstream-container .card {
-  display: block;
-  color: $gray-700;
-  overflow: hidden;
-  p {
-    padding: 12px 12px 0 12px;
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 0 !important;
-  }
-  div {
-    display: inline-flex;
-    dl {
-      display: inline-flex;
-      margin-right: 8px;
-    }
-    span {
-      margin-right: 8px;
-    }
-    span::before,
-    dt::before {
-      margin-right: 4px;
-    }
-    .nspace dt::before,
-    .health dt::before {
-      margin-top: 2px;
-    }
-  }
-  .details {
-    padding: 0 12px 12px 12px;
-  }
-
-}
 
 // Metrics Container
 #metrics-container {

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

@@ -20,52 +20,6 @@
     background-color: $gray-500;
   }
 }
-#upstream-container .card,
-#downstream-container .card {
-  background-color: $white;
-  border-radius: $decor-radius-100;
-  border: 1px solid $gray-200;
-  div {
-    dd {
-      color: $gray-700;
-    }
-    .nspace dt::before {
-      @extend %with-folder-outline-mask, %as-pseudo;
-    }
-    .health dt::before {
-      @extend %with-help-circle-outline-mask, %as-pseudo;
-    }
-    .nspace dt::before {
-      @extend %with-folder-outline-mask, %as-pseudo;
-    }
-    .health dt::before {
-      @extend %with-help-circle-outline-mask, %as-pseudo;
-    }
-    .nspace dt::before,
-    .health dt::before {
-      background-color: $gray-500;
-    }
-    .passing::before {
-      @extend %with-check-circle-fill-color-mask, %as-pseudo;
-      background-color: $green-500;
-    }
-    .warning::before {
-      @extend %with-alert-triangle-color-mask, %as-pseudo;
-      background-color: $orange-500;
-    }
-    .critical::before {
-      @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;
-  }
-}
 
 // Metrics Container
 #metrics-container {
@@ -90,9 +44,6 @@
       @extend %with-docs-mask, %as-pseudo;
     }
   }
-  div:nth-child(3) {
-    border-top: 1px solid $gray-200;
-  }
 }
 
 // SVG Line styling