Label empty clients in the topo viz chart

ui/app/styles/charts/topo-viz-node.scss

@@ -1,7 +1,11 @@
 .chart.topo-viz-node {
   display: block;
 
-  svg {
+  .label {
+    font-weight: $weight-normal;
+  }
+
+  .chart {
     display: inline-block;
     height: 100%;
     width: 100%;
@@ -57,6 +61,13 @@
     }
   }
 
+  .empty-text {
+    fill: $red;
+    transform: translate(50%, 50%);
+    text-anchor: middle;
+    alignment-baseline: central;
+  }
+
   & + .topo-viz-node {
     margin-top: 1em;
   }
@@ -74,6 +85,7 @@
   }
 }
 
-.flex-masonry-columns-2 > .flex-masonry-item > .chart.topo-viz-node svg {
+.flex-masonry-columns-2 > .flex-masonry-item > .chart.topo-viz-node svg,
+.flex-masonry-columns-2 > .flex-masonry-item > .chart.topo-viz-node .label {
   width: calc(100% - 0.75em);
 }

ui/app/templates/components/topo-viz/node.hbs

@@ -1,7 +1,9 @@
 <div class="chart topo-viz-node {{unless this.allocations.length "is-empty"}}" {{did-insert this.reloadNode}}>
   {{#unless @isDense}}
-    <p>
-      <strong>{{@node.node.name}}</strong>
+    <p class="label">
+      <strong>
+        {{@node.node.name}}
+      </strong>
       <span class="bumper-left">{{this.count}} Allocs</span>
       <span class="bumper-left is-faded">{{@node.memory}} MiB, {{@node.cpu}} Mhz</span>
     </p>
@@ -94,6 +96,8 @@
           {{/each}}
         </g>
       </g>
+    {{else}}
+      <text class="empty-text">Empty Client</text>
     {{/if}}
   </svg>
   <div class="chart-tooltip {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>