Fix single stat panel percentile format support

This readds the `max_value` prop to
`mapPanelToViewModel` that allows
single stat panels to render percentile values

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,
@@ -29,11 +31,18 @@ export default {
      * @returns {(String)}
      */
     statValue() {
-      const chartValue = this.graphData?.max_value
-        ? (this.queryResult / Number(this.graphData.max_value)) * 100
-        : this.queryResult;
+      let formatter;
+      let value;
+
+      if (this.graphData?.max_value) {
+        formatter = getFormatter(SUPPORTED_FORMATS.percent);
+        value = formatter(this.queryResult / Number(this.graphData.max_value), defaultPrecision);
+      } else {
+        formatter = getFormatter(SUPPORTED_FORMATS.number);
+        value = `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit}`;
+      }
 
-      return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`;
+      return value;
     },
     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,
+    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,7 +20,7 @@ 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', () => {
@@ -31,7 +31,7 @@ describe('Single Stat Chart component', () => {
           },
         });
 
-        expect(singleStatChart.vm.statValue).toContain('75.8');
+        expect(singleStatChart.vm.statValue).toContain('75.83%');
       });
 
       it('should display NaN for non numeric max_value values', () => {

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 max_value', () => {
+      setupWithPanel({
+        max_value: 100,
+      });
+
+      expect(getMappedPanel().max_value).toBe(100);
+    });
   });
 
   describe('metrics mapping', () => {