Added specs for rendered output, changed the background for stable tracks

app/assets/javascripts/monitoring/components/graph/axis.vue

 <script>
 import { convertToSentenceCase } from '~/lib/utils/text_utility';
+import { s__ } from '~/locale';
 
 export default {
   props: {
@@ -74,6 +75,10 @@ export default {
     yAxisLabelSentenceCase() {
       return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`;
     },
+
+    timeString() {
+      return s__('PrometheusDashboard|Time');
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -131,7 +136,7 @@ export default {
       :y="yPosition"
       dy=".35em"
     >
-      Time
+      {{ timeString }}
     </text>
   </g>
 </template>

app/assets/javascripts/monitoring/components/graph/legend.vue

@@ -17,6 +17,13 @@ export default {
       required: true,
     },
   },
+  methods: {
+    isStable(track) {
+      return {
+        'prometheus-table-row-highlight': track.trackName !== 'Canary' && track.renderCanary,
+      };
+    },
+  },
 };
 </script>
 <template>
@@ -26,6 +33,7 @@ export default {
         v-for="(series, index) in timeSeries"
         :key="index"
         v-if="series.shouldRenderLegend"
+        :class="isStable(series)"
       >
         <td>
           <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
@@ -53,7 +61,9 @@ export default {
             :track="track"
             :key="`track-line-${trackIndex}`"/>
           <td :key="`track-info-${trackIndex}`">
-            <track-info :track="track" />
+            <track-info
+              class="legend-metric-title"
+              :track="track" />
           </td>
         </template>
       </tr>

app/assets/javascripts/monitoring/components/graph/track_line.vue

@@ -7,10 +7,10 @@ export default {
       required: true,
     },
   },
-  methods: {
-    strokeDashArray(type) {
-      if (type === 'dashed') return '6, 3';
-      if (type === 'dotted') return '3, 3';
+  computed: {
+    stylizedLine() {
+      if (this.track.lineStyle === 'dashed') return '6, 3';
+      if (this.track.lineStyle === 'dotted') return '3, 3';
       return null;
     },
   },
@@ -22,7 +22,7 @@ export default {
       width="15"
       height="6">
       <line
-        :stroke-dasharray="strokeDashArray(track.lineStyle)"
+        :stroke-dasharray="stylizedLine"
         :stroke="track.lineColor"
         stroke-width="4"
         :x1="0"

app/assets/stylesheets/framework/variables.scss

@@ -767,3 +767,8 @@ $border-color-settings: #e1e1e1;
 Modals
 */
 $modal-body-height: 134px;
+
+/*
+Prometheus
+*/
+$prometheus-table-row-highlight-color: $theme-gray-100;

app/assets/stylesheets/pages/environments.scss

@@ -321,6 +321,11 @@
       vertical-align: top;
     }
   }
+
+  .legend-metric-title {
+    font-size: 12px;
+    vertical-align: middle;
+  }
 }
 
 .prometheus-svg-container {
@@ -409,3 +414,7 @@
     }
   }
 }
+
+.prometheus-table-row-highlight {
+  background-color: $prometheus-table-row-highlight-color;
+}

spec/javascripts/monitoring/graph/track_info_spec.js

@@ -28,4 +28,17 @@ describe('TrackInfo component', () => {
       expect(vm.summaryMetrics).toEqual('Avg: 0.000 · Max: 0.000');
     });
   });
+
+  describe('Rendered output', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { track: timeSeries[0] });
+    });
+
+    it('contains metric tag and the summary metrics', () => {
+      const metricTag = vm.$el.querySelector('strong');
+
+      expect(metricTag.textContent.trim()).toEqual(vm.track.metricTag);
+      expect(vm.$el.textContent).toContain('Avg: 0.000 · Max: 0.000');
+    });
+  });
 });

spec/javascripts/monitoring/graph/track_line_spec.js

@@ -20,16 +20,33 @@ describe('TrackLine component', () => {
   });
 
   describe('Computed props', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, { track: timeSeries[0] });
+    it('stylizedLine for dashed lineStyles', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dashed' } });
+
+      expect(vm.stylizedLine).toEqual('6, 3');
     });
 
-    it('strokeDashArray', () => {
-      const dashedArray = vm.strokeDashArray('dashed');
-      const dottedArray = vm.strokeDashArray('dotted');
+    it('stylizedLine for dotted lineStyles', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dotted' } });
+
+      expect(vm.stylizedLine).toEqual('3, 3');
+    });
+  });
+
+  describe('Rendered output', () => {
+    it('has an svg with a line', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0] } });
+      const svgEl = vm.$el.querySelector('svg');
+      const lineEl = vm.$el.querySelector('svg line');
+
+      expect(svgEl.getAttribute('width')).toEqual('15');
+      expect(svgEl.getAttribute('height')).toEqual('6');
 
-      expect(dashedArray).toEqual('6, 3');
-      expect(dottedArray).toEqual('3, 3');
+      expect(lineEl.getAttribute('stroke-width')).toEqual('4');
+      expect(lineEl.getAttribute('x1')).toEqual('0');
+      expect(lineEl.getAttribute('x2')).toEqual('15');
+      expect(lineEl.getAttribute('y1')).toEqual('2');
+      expect(lineEl.getAttribute('y2')).toEqual('2');
     });
   });
 });