Merge branch '232771-enable-unitless-single-stat' into 'master'

Enable unitless single stat

Closes #232771

See merge request gitlab-org/gitlab!39067

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

@@ -50,7 +50,7 @@ export default {
       }
 
       formatter = getFormatter(SUPPORTED_FORMATS.number);
-      return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit}`;
+      return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit ?? ''}`;
     },
     graphTitle() {
       return this.queryInfo.label;

changelogs/unreleased/232771-enable-unitless-single-stat.yml

+---
+title: Support unitless single stat chart in metrics dashboards
+merge_request: 39067
+author:
+type: changed

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

 import { shallowMount } from '@vue/test-utils';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
 import { singleStatGraphData } from '../../graph_data';
 
 describe('Single Stat Chart component', () => {
-  let singleStatChart;
+  let wrapper;
 
-  beforeEach(() => {
-    singleStatChart = shallowMount(SingleStatChart, {
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(SingleStatChart, {
       propsData: {
         graphData: singleStatGraphData({}, { unit: 'MB' }),
+        ...props,
       },
     });
+  };
+
+  const findChart = () => wrapper.find(GlSingleStat);
+
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    singleStatChart.destroy();
+    wrapper.destroy();
   });
 
   describe('computed', () => {
     describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.statValue).toBe('1.00MB');
+        expect(findChart().props('value')).toBe('1.00MB');
       });
 
       it('should change the value representation to a percentile one', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('75.83%');
+        expect(findChart().props('value')).toContain('75.83%');
       });
 
       it('should display NaN for non numeric maxValue values', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 'not a number' }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('NaN');
+        expect(findChart().props('value')).toContain('NaN');
       });
 
       it('should display NaN for missing query values', () => {
-        singleStatChart.setProps({
+        createComponent({
           graphData: singleStatGraphData({ max_value: 120 }, { value: 'NaN' }),
         });
 
-        expect(singleStatChart.vm.statValue).toContain('NaN');
+        expect(findChart().props('value')).toContain('NaN');
+      });
+
+      it('should not display `unit` when `unit` is undefined', () => {
+        createComponent({
+          graphData: singleStatGraphData({}, { unit: undefined }),
+        });
+
+        expect(findChart().props('value')).not.toContain('undefined');
       });
 
-      describe('field attribute', () => {
+      it('should not display `unit` when `unit` is null', () => {
+        createComponent({
+          graphData: singleStatGraphData({}, { unit: null }),
+        });
+
+        expect(findChart().props('value')).not.toContain('null');
+      });
+
+      describe('when a field attribute is set', () => {
         it('displays a label value instead of metric value when field attribute is used', () => {
-          singleStatChart.setProps({
+          createComponent({
             graphData: singleStatGraphData({ field: 'job' }, { isVector: true }),
           });
 
-          return singleStatChart.vm.$nextTick(() => {
-            expect(singleStatChart.vm.statValue).toContain('prometheus');
-          });
+          expect(findChart().props('value')).toContain('prometheus');
         });
 
         it('displays No data to display if field attribute is not present', () => {
-          singleStatChart.setProps({
+          createComponent({
             graphData: singleStatGraphData({ field: 'this-does-not-exist' }),
           });
 
-          return singleStatChart.vm.$nextTick(() => {
-            expect(singleStatChart.vm.statValue).toContain('No data to display');
-          });
+          expect(findChart().props('value')).toContain('No data to display');
         });
       });
     });