1 files changed, 11 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index eee5eaa5eca..106c76a97dc 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -1,9 +1,11 @@
 <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);