Display metric label in single stat

Single stat charts in the metrics dashboard display
the metric value. This MR supports a field property in
the yml file so that a particular metric label value can
be displayed instead of the value

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

 <script>
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { __ } from '~/locale';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { graphDataValidatorForValues } from '../../utils';
 
 const defaultPrecision = 2;
+const emptyStateMsg = __('No data to display');
 
 export default {
   components: {
@@ -21,6 +23,9 @@ export default {
     queryInfo() {
       return this.graphData.metrics[0];
     },
+    queryMetric() {
+      return this.queryInfo.result[0]?.metric;
+    },
     queryResult() {
       return this.queryInfo.result[0]?.value[1];
     },
@@ -33,6 +38,12 @@ export default {
     statValue() {
       let formatter;
 
+      // if field is present the metric value is not displayed. Hence
+      // the early exit without formatting.
+      if (this.graphData?.field) {
+        return this.queryMetric?.[this.graphData.field] ?? emptyStateMsg;
+      }
+
       if (this.graphData?.maxValue) {
         formatter = getFormatter(SUPPORTED_FORMATS.percent);
         return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);

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

@@ -173,6 +173,7 @@ const mapPanelToViewModel = ({
   x_label,
   y_label,
   y_axis = {},
+  field,
   metrics = [],
   links = [],
   max_value,
@@ -193,6 +194,7 @@ const mapPanelToViewModel = ({
     y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198
     yAxis,
     xAxis,
+    field,
     maxValue: max_value,
     links: links.map(mapLinksToViewModel),
     metrics: mapToMetricsViewModel(metrics),

changelogs/unreleased/220361-display-metric-label-value-in-single-stat-panel.yml

+---
+title: Display metric label in single stat
+merge_request: 35289
+author:
+type: added

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

 import { shallowMount } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
-import { singleStatMetricsResult } from '../../mock_data';
+import { singleStatMetricsResult, singleStatMetricsWithFieldResult } from '../../mock_data';
 
 describe('Single Stat Chart component', () => {
   let singleStatChart;
@@ -66,6 +66,31 @@ describe('Single Stat Chart component', () => {
 
         expect(singleStatChart.vm.statValue).toContain('NaN');
       });
+
+      describe('field attribute', () => {
+        it('displays a label value instead of metric value when field attribute is used', () => {
+          singleStatChart.setProps({
+            graphData: singleStatMetricsWithFieldResult,
+          });
+
+          return singleStatChart.vm.$nextTick(() => {
+            expect(singleStatChart.vm.statValue).toContain('prometheus');
+          });
+        });
+
+        it('displays No data to display if field attribute is not present', () => {
+          singleStatChart.setProps({
+            graphData: {
+              ...singleStatMetricsWithFieldResult,
+              field: 'this-does-not-exist',
+            },
+          });
+
+          return singleStatChart.vm.$nextTick(() => {
+            expect(singleStatChart.vm.statValue).toContain('No data to display');
+          });
+        });
+      });
     });
   });
 });

spec/frontend/monitoring/mock_data.js

@@ -359,6 +359,11 @@ export const singleStatMetricsResult = {
   ],
 };
 
+export const singleStatMetricsWithFieldResult = {
+  ...singleStatMetricsResult,
+  field: 'job',
+};
+
 export const graphDataPrometheusQueryRangeMultiTrack = {
   title: 'Super Chart A3',
   type: 'heatmap',