Merge branch '36255-metrics-that-do-not-have-a-complete-history-are-not-shown-at-all' into 'master'

Resolve "Metrics that do not have a complete history are not shown at all"

Closes #36255

See merge request gitlab-org/gitlab-ce!14741

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

@@ -79,7 +79,11 @@
       },
 
       formatMetricUsage(series) {
-        return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
+        const value = series.values[this.currentDataIndex].value;
+        if (isNaN(value)) {
+          return '-';
+        }
+        return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
       },
 
       createSeriesString(index, series) {

app/assets/javascripts/monitoring/utils/multiple_time_series.js

@@ -56,12 +56,16 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
     timeSeriesScaleX.ticks(d3.time.minute, 60);
     timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
 
+    const defined = d => !isNaN(d.value) && d.value != null;
+
     const lineFunction = d3.svg.line()
+      .defined(defined)
       .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
     const areaFunction = d3.svg.area()
+      .defined(defined)
       .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)

changelogs/unreleased/36255-metrics-that-do-not-have-a-complete-history-are-not-shown-at-all.yml

@@ -0,0 +1,5 @@
+---
+title: Allow prometheus graphs to correctly handle NaN values
+merge_request: 14741
+author:
+type: fixed