Merge branch 'jivanvl-fix-single-stat-percentile-format' into 'master'

Fix single stat panel percentile format support

See merge request gitlab-org/gitlab!28365

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

 <script>
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { roundOffFloat } from '~/lib/utils/common_utils';
+import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { graphDataValidatorForValues } from '../../utils';
 
+const defaultPrecision = 2;
+
 export default {
   components: {
     GlSingleStat,
@@ -25,15 +27,19 @@ export default {
     /**
      * 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
+     * by using the `maxValue` 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;
+      let formatter;
+
+      if (this.graphData?.maxValue) {
+        formatter = getFormatter(SUPPORTED_FORMATS.percent);
+        return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);
+      }
 
-      return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`;
+      formatter = getFormatter(SUPPORTED_FORMATS.number);
+      return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit}`;
     },
     graphTitle() {
       return this.queryInfo.label;

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

@@ -109,6 +109,7 @@ const mapPanelToViewModel = ({
   y_label,
   y_axis = {},
   metrics = [],
+  max_value,
 }) => {
   // Both `x_axis.name` and `x_label` are supported for now
   // https://gitlab.com/gitlab-org/gitlab/issues/210521
@@ -125,6 +126,7 @@ const mapPanelToViewModel = ({
     y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198
     yAxis,
     xAxis,
+    maxValue: max_value,
     metrics: mapToMetricsViewModel(metrics, yAxis.name),
   };
 };

changelogs/unreleased/jivanvl-fix-single-stat-percentile-format.yml

+---
+title: Fix single stat panel percentile format support
+merge_request: 28365
+author:
+type: fixed

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

@@ -20,25 +20,25 @@ describe('Single Stat Chart component', () => {
   describe('computed', () => {
     describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.statValue).toBe('91MB');
+        expect(singleStatChart.vm.statValue).toBe('91.00MB');
       });
 
       it('should change the value representation to a percentile one', () => {
         singleStatChart.setProps({
           graphData: {
             ...graphDataPrometheusQuery,
-            max_value: 120,
+            maxValue: 120,
           },
         });
 
-        expect(singleStatChart.vm.statValue).toContain('75.8');
+        expect(singleStatChart.vm.statValue).toContain('75.83%');
       });
 
-      it('should display NaN for non numeric max_value values', () => {
+      it('should display NaN for non numeric maxValue values', () => {
         singleStatChart.setProps({
           graphData: {
             ...graphDataPrometheusQuery,
-            max_value: 'not a number',
+            maxValue: 'not a number',
           },
         });
 
@@ -60,7 +60,7 @@ describe('Single Stat Chart component', () => {
                 ],
               },
             ],
-            max_value: 120,
+            maxValue: 120,
           },
         });
 

spec/frontend/monitoring/store/utils_spec.js

@@ -220,6 +220,15 @@ describe('mapToDashboardViewModel', () => {
 
       expect(getMappedPanel().yAxis.format).toBe(SUPPORTED_FORMATS.number);
     });
+
+    // This property allows single_stat panels to render percentile values
+    it('group maxValue', () => {
+      setupWithPanel({
+        max_value: 100,
+      });
+
+      expect(getMappedPanel().maxValue).toBe(100);
+    });
   });
 
   describe('metrics mapping', () => {