formatting fixes

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

@@ -23,26 +23,15 @@ export default {
   methods: {
     formatMetricUsage(series) {
       const value =
-        series.values[this.currentDataIndex] &&
-        series.values[this.currentDataIndex].value;
+        series.values[this.currentDataIndex] && series.values[this.currentDataIndex].value;
       if (isNaN(value)) {
         return '-';
       }
       return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
     },
 
-    createSeriesString(index, series) {
-      if (series.metricTag) {
-        return `${series.metricTag} ${this.formatMetricUsage(series)}`;
-      }
-      return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(
-        series,
-      )}`;
-    },
-
     summaryMetrics(series) {
-      return `Avg: ${formatRelevantDigits(series.average)} ${this.unitOfDisplay},
-      Max: ${formatRelevantDigits(series.max)} ${this.unitOfDisplay}`;
+      return `Avg: ${formatRelevantDigits(series.average)} · Max: ${formatRelevantDigits(series.max)}`;
     },
 
     strokeDashArray(type) {
@@ -80,10 +69,18 @@ export default {
           class="legend-metric-title"
           v-if="timeSeries.length > 1"
         >
-          {{ createSeriesString(index, series) }}, {{ summaryMetrics(series) }}
+          <template v-if="series.metricTag">
+            <strong>{{ series.metricTag }}</strong>
+            {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
+          </template>
+          <template v-else>
+            <strong>{{ legendTitle }}</strong>
+            series {{ index + 1 }} {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
+          </template>
         </td>
         <td v-else>
-          {{ legendTitle }} {{ formatMetricUsage(series) }}, {{ summaryMetrics(series) }}
+          <strong>{{ legendTitle }}</strong>
+          {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
         </td>
       </tr>
     </table>

spec/javascripts/monitoring/graph/legend_spec.js

@@ -2,14 +2,9 @@ import Vue from 'vue';
 import GraphLegend from '~/monitoring/components/graph/legend.vue';
 import createTimeSeries from '~/monitoring/utils/multiple_time_series';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import {
-  singleRowMetricsMultipleSeries,
-  convertDatesMultipleSeries,
-} from '../mock_data';
+import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data';
 
-const convertedMetrics = convertDatesMultipleSeries(
-  singleRowMetricsMultipleSeries,
-);
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
 
 const defaultValuesComponent = {};
 
@@ -77,9 +72,7 @@ describe('Legend Component', () => {
     });
 
     it('should container the same number of rows in the table as time series', () => {
-      expect(vm.$el.querySelectorAll('.prometheus-table tr').length).toEqual(
-        vm.timeSeries.length,
-      );
+      expect(vm.$el.querySelectorAll('.prometheus-table tr').length).toEqual(vm.timeSeries.length);
     });
   });
 });