ui: Fix empty state conditional for Series Graph (#9221)

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

@@ -8,20 +8,22 @@
 
 {{on-window 'resize' (action 'redraw')}}
 
-{{#if data.labels}}
-<a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a>
+{{#if (not empty)}}
+  {{#if data.labels}}
+  <a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a>
+  {{/if}}
 {{/if}}
 
 <div class="sparkline-wrapper">
   <div class="tooltip">
     <div class="sparkline-time">Timestamp</div>
   </div>
-  {{#unless data}}
+  {{#if empty}}
     <TopologyMetrics::Status
       @noMetricsReason={{@noMetricsReason}}
       @error={{error}}
     />
-  {{/unless}}
+  {{/if}}
   <svg class="sparkline"></svg>
 </div>
 

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

@@ -7,6 +7,7 @@ import { scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
 import { schemeTableau10 } from 'd3-scale-chromatic';
 import { area, stack, stackOrderReverse } from 'd3-shape';
 import { max, extent, bisector } from 'd3-array';
+import { set } from '@ember/object';
 
 dayjs.extend(Calendar);
 
@@ -21,7 +22,7 @@ function niceTimeWithSeconds(d) {
 
 export default Component.extend({
   data: null,
-
+  empty: false,
   actions: {
     redraw: function(evt) {
       this.drawGraphs();
@@ -35,6 +36,7 @@ export default Component.extend({
 
   drawGraphs: function() {
     if (!this.data) {
+      set(this, 'empty', true);
       return;
     }
 
@@ -59,10 +61,10 @@ export default Component.extend({
     if (series.length == 0 || keys.length == 0) {
       // Put the graph in an error state that might get fixed if metrics show up
       // on next poll.
-      let loader = this.element.querySelector('.sparkline-loader');
-      loader.innerHTML = 'No Metrics Available';
-      loader.style.display = 'block';
+      set(this, 'empty', true);
       return;
+    } else {
+      set(this, 'empty', false);
     }
 
     let st = stack()