Add percentile support to single stat panel types

app/assets/javascripts/monitoring/components/charts/single_stat.vue

@@ -19,8 +19,21 @@ export default {
     queryInfo() {
       return this.graphData.metrics[0];
     },
-    engineeringNotation() {
-      return `${roundOffFloat(this.queryInfo.result[0].value[1], 1)}${this.queryInfo.unit}`;
+    queryResult() {
+      return this.queryInfo.result[0]?.value[1];
+    },
+    /**
+     * This method formats the query result from a promQL expression
+     * allowing a user to format the data in percentile values
+     * by using the `max_value` inner property from the graphData prop
+     * @returns {(String)}
+     */
+    statValue() {
+      const chartValue = this.graphData?.max_value
+        ? (this.queryResult / Number(this.graphData.max_value)) * 100
+        : this.queryResult;
+
+      return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`;
     },
     graphTitle() {
       return this.queryInfo.label;
@@ -33,6 +46,6 @@ export default {
     <div class="prometheus-graph-header">
       <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
     </div>
-    <gl-single-stat :value="engineeringNotation" :title="graphTitle" variant="success" />
+    <gl-single-stat :value="statValue" :title="graphTitle" variant="success" />
   </div>
 </template>

changelogs/unreleased/jivanvl-add-percentile-support-single-stat-charts.yml

+---
+title: Add percentile value support to single stat panel types
+merge_request: 24813
+author:
+type: changed

spec/frontend/monitoring/components/charts/single_stat_spec.js

@@ -18,9 +18,53 @@ describe('Single Stat Chart component', () => {
   });
 
   describe('computed', () => {
-    describe('engineeringNotation', () => {
+    describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.engineeringNotation).toBe('91MB');
+        expect(singleStatChart.vm.statValue).toBe('91MB');
+      });
+
+      it('should change the value representation to a percentile one', () => {
+        singleStatChart.setProps({
+          graphData: {
+            ...graphDataPrometheusQuery,
+            max_value: 120,
+          },
+        });
+
+        expect(singleStatChart.vm.statValue).toContain('75.8');
+      });
+
+      it('should display NaN for non numeric max_value values', () => {
+        singleStatChart.setProps({
+          graphData: {
+            ...graphDataPrometheusQuery,
+            max_value: 'not a number',
+          },
+        });
+
+        expect(singleStatChart.vm.statValue).toContain('NaN');
+      });
+
+      it('should display NaN for missing query values', () => {
+        singleStatChart.setProps({
+          graphData: {
+            ...graphDataPrometheusQuery,
+            metrics: [
+              {
+                ...graphDataPrometheusQuery.metrics[0],
+                result: [
+                  {
+                    ...graphDataPrometheusQuery.metrics[0].result[0],
+                    value: [''],
+                  },
+                ],
+              },
+            ],
+            max_value: 120,
+          },
+        });
+
+        expect(singleStatChart.vm.statValue).toContain('NaN');
       });
     });
   });