Merge branch '223804-matrix-style-results-as-vectors' into 'master'

Matrix results can be displayed in vector charts

See merge request gitlab-org/gitlab!35101

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],
         ],
       },
     ]);