Matrix results can be displayed in vector charts

When a matrix result is obtained from prometheus, the parsing
defines a "values" array with a time range of results.

However, some charts can only present an instant vector.

This change enables all matrix type results to be visible on charts
that support instant vectors. To do so it picks the last result
and presents it as "the" current vector.

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

@@ -352,11 +352,16 @@ const normalizeStringResult = result => [
  * [
  *  {
  *    "metric": { "<label_name>": "<label_value>", ... },
- *    "value": [ <unix_time>, "<sample_value>" ]
+ *    "value": [ <unix_time>, "<sample_value>" ],
+ *    "values": [ [ <unix_time>, "<sample_value>" ] ]
  *  },
  *  ...
  * ]
  *
+ * `metric` - Key-value pairs object representing metric measured
+ * `value` - The vector result
+ * `values` - An array with a single value representing the result
+ *
  * This method also adds the matrix version of the vector
  * by introducing a `values` array with a single element. This
  * allows charts to default to `values` if needed.
@@ -379,16 +384,28 @@ const normalizeVectorResult = result =>
  *
  * {
  *   "metric": { "<label_name>": "<label_value>", ... },
+ *   "value": [ <unix_time>, "<sample_value>" ],
  *   "values": [ [ <unix_time>, "<sample_value>" ], ... ]
  * },
  *
+ * `metric` - Key-value pairs object representing metric measured
+ * `value` - The last (more recent) result
+ * `values` - A range of results for the metric
+ *
  * See https://prometheus.io/docs/prometheus/latest/querying/api/#range-vectors
  *
  * @param {array} result
- * @returns {array}
+ * @returns {object} Normalized result.
  */
 const normalizeResultMatrix = result =>
-  result.map(({ metric, values }) => ({ metric, values: values.map(mapScalarValue) }));
+  result.map(({ metric, values }) => {
+    const mappedValues = values.map(mapScalarValue);
+    return {
+      metric,
+      value: mappedValues[mappedValues.length - 1],
+      values: mappedValues,
+    };
+  });
 
 /**
  * Parse response data from a Prometheus Query that comes

spec/frontend/monitoring/store/utils_spec.js

@@ -781,7 +781,7 @@ describe('normalizeQueryResponseData', () => {
             job: 'prometheus',
             instance: 'localhost:9090',
           },
-          values: [[1435781430.781, '1'], [1435781445.781, '1'], [1435781460.781, '1']],
+          values: [[1435781430.781, '1'], [1435781445.781, '2'], [1435781460.781, '3']],
         },
         {
           metric: {
@@ -789,7 +789,7 @@ describe('normalizeQueryResponseData', () => {
             job: 'node',
             instance: 'localhost:9091',
           },
-          values: [[1435781430.781, '0'], [1435781445.781, '0'], [1435781460.781, '1']],
+          values: [[1435781430.781, '4'], [1435781445.781, '5'], [1435781460.781, '6']],
         },
       ],
     };
@@ -797,18 +797,20 @@ describe('normalizeQueryResponseData', () => {
     expect(normalizeQueryResponseData(mockMatrix)).toEqual([
       {
         metric: { __name__: 'up', instance: 'localhost:9090', job: 'prometheus' },
+        value: ['2015-07-01T20:11:00.781Z', 3],
         values: [
           ['2015-07-01T20:10:30.781Z', 1],
-          ['2015-07-01T20:10:45.781Z', 1],
-          ['2015-07-01T20:11:00.781Z', 1],
+          ['2015-07-01T20:10:45.781Z', 2],
+          ['2015-07-01T20:11:00.781Z', 3],
         ],
       },
       {
         metric: { __name__: 'up', instance: 'localhost:9091', job: 'node' },
+        value: ['2015-07-01T20:11:00.781Z', 6],
         values: [
-          ['2015-07-01T20:10:30.781Z', 0],
-          ['2015-07-01T20:10:45.781Z', 0],
-          ['2015-07-01T20:11:00.781Z', 1],
+          ['2015-07-01T20:10:30.781Z', 4],
+          ['2015-07-01T20:10:45.781Z', 5],
+          ['2015-07-01T20:11:00.781Z', 6],
         ],
       },
     ]);