UX Adjustments for the prometheus dashboard

5 files changed, 30 insertions, 64 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 9bf32d8a2da..d9f2b9ba7cb 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -255,6 +255,7 @@ export default {
           :margin="margin"
           :measurements="measurements"
           :y-axis-label="yAxisLabel"
+          :unit-of-display="unitOfDisplay"
         />
         <svg
           class="graph-data"
@@ -304,7 +305,6 @@ export default {
       :legend-title="legendTitle"
       :time-series="timeSeries"
       :current-data-index="currentDataIndex"
-      :unit-of-display="unitOfDisplay"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index ae397fc39e2..6e15f938ab7 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -1,4 +1,6 @@
 <script>
+import { convertToSentenceCase } from '~/lib/utils/text_utility';
+
 export default {
   props: {
     graphWidth: {
@@ -21,6 +23,10 @@ export default {
       type: String,
       required: true,
     },
+    unitOfDisplay: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -64,6 +70,10 @@ export default {
           this.measurements.axisLabelLineOffset || 0
       );
     },
+
+    yAxisLabelSentenceCase() {
+      return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`;
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -106,7 +116,7 @@ export default {
       :transform="textTransform"
       ref="ylabel"
     >
-      {{ yAxisLabel }}
+      {{ yAxisLabelSentenceCase }}
     </text>
     <rect
       class="rect-axis-text"
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 8e6a830f08c..02f62ca2c40 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -181,7 +181,7 @@ export default {
                 />
               </svg>
             </td>
-            <td>{{ seriesMetricLabel(index, series) }}</td>
+            <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
             <td>
               <strong>{{ seriesMetricValue(series) }}</strong>
             </td>
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index ca3081a6306..140190d34a9 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -15,21 +15,8 @@ export default {
       type: Number,
       required: true,
     },
-    unitOfDisplay: {
-      type: String,
-      required: true,
-    },
   },
   methods: {
-    formatMetricUsage(series) {
-      const value =
-        series.values[this.currentDataIndex] && series.values[this.currentDataIndex].value;
-      if (isNaN(value)) {
-        return '-';
-      }
-      return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
-    },
-
     summaryMetrics(series) {
       return `Avg: ${formatRelevantDigits(series.average)} · Max: ${formatRelevantDigits(series.max)}`;
     },
@@ -50,6 +37,9 @@ export default {
         :key="index"
       >
         <td>
+          <strong>{{ series.track }}</strong>
+        </td>
+        <td>
           <svg
             width="15"
             height="6"
@@ -70,17 +60,15 @@ export default {
           v-if="timeSeries.length > 1"
         >
           <template v-if="series.metricTag">
-            <strong>{{ series.metricTag }}</strong>
-            {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
+            <strong>{{ series.metricTag }}</strong> {{ summaryMetrics(series) }}
           </template>
           <template v-else>
             <strong>{{ legendTitle }}</strong>
-            series {{ index + 1 }} {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
+            series {{ index + 1 }} {{ summaryMetrics(series) }}
           </template>
         </td>
         <td v-else>
-          <strong>{{ legendTitle }}</strong>
-          {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }}
+          <strong>{{ legendTitle }}</strong> {{ summaryMetrics(series) }}
         </td>
       </tr>
     </table>
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 95db31c7a2a..633f3509f3c 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -3,6 +3,7 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { line, area, curveLinear } from 'd3-shape';
 import { extent, max, sum } from 'd3-array';
 import { timeMinute } from 'd3-time';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
 const d3 = {
   scaleLinear,
@@ -28,15 +29,7 @@ const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
 
 const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
 
-function queryTimeSeries(
-  query,
-  graphWidth,
-  graphHeight,
-  graphHeightOffset,
-  xDom,
-  yDom,
-  lineStyle,
-) {
+function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) {
   let usedColors = [];
 
   function pickColor(name) {
@@ -63,12 +56,11 @@ function queryTimeSeries(
     const timeSeriesValues = timeSeries.values.map(d => d.value);
     const maximumValue = d3.max(timeSeriesValues);
     const accum = d3.sum(timeSeriesValues);
+    const track = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
 
     const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
 
-    const timeSeriesScaleY = d3
-      .scaleLinear()
-      .range([graphHeight - graphHeightOffset, 0]);
+    const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(xDom);
     timeSeriesScaleX.ticks(d3.timeMinute, 60);
@@ -91,27 +83,18 @@ function queryTimeSeries(
       .y0(graphHeight - graphHeightOffset)
       .y1(d => timeSeriesScaleY(d.value));
 
-    const timeSeriesMetricLabel =
-      timeSeries.metric[Object.keys(timeSeries.metric)[0]];
+    const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
     const seriesCustomizationData =
-      query.series != null &&
-      _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
+      query.series != null && _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel });
 
     if (seriesCustomizationData) {
       metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
       [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
     } else {
-      metricTag =
-        timeSeriesMetricLabel ||
-        query.label ||
-        `series ${timeSeriesNumber + 1}`;
+      metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`;
       [lineColor, areaColor] = pickColor();
     }
 
-    if (query.track) {
-      metricTag += ` - ${query.track}`;
-    }
-
     return {
       linePath: lineFunction(timeSeries.values),
       areaPath: areaFunction(timeSeries.values),
@@ -123,23 +106,16 @@ function queryTimeSeries(
       lineColor,
       areaColor,
       metricTag,
+      track,
     };
   });
 }
 
-export default function createTimeSeries(
-  queries,
-  graphWidth,
-  graphHeight,
-  graphHeightOffset,
-) {
+export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
   const allValues = queries.reduce(
     (allQueryResults, query) =>
       allQueryResults.concat(
-        query.result.reduce(
-          (allResults, result) => allResults.concat(result.values),
-          [],
-        ),
+        query.result.reduce((allResults, result) => allResults.concat(result.values), []),
       ),
     [],
   );
@@ -150,15 +126,7 @@ export default function createTimeSeries(
   return queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
     return series.concat(
-      queryTimeSeries(
-        query,
-        graphWidth,
-        graphHeight,
-        graphHeightOffset,
-        xDom,
-        yDom,
-        lineStyle,
-      ),
+      queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle),
     );
   }, []);
 }