1 files changed, 15 insertions, 14 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index b03a6ca1806..7428b27a9c3 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { roundOffFloat } from '~/lib/utils/common_utils';
+import { graphDataValidatorForValues } from '../../utils';
 
 export default {
   components: {
@@ -7,22 +9,21 @@ export default {
   },
   inheritAttrs: false,
   props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Number,
-      required: true,
-    },
-    unit: {
-      type: String,
+    graphData: {
+      type: Object,
       required: true,
+      validator: graphDataValidatorForValues.bind(null, true),
     },
   },
   computed: {
-    valueWithUnit() {
-      return `${this.value}${this.unit}`;
+    queryInfo() {
+      return this.graphData.queries[0];
+    },
+    engineeringNotation() {
+      return `${roundOffFloat(this.queryInfo.result[0].value[1], 1)}${this.queryInfo.unit}`;
+    },
+    graphTitle() {
+      return this.queryInfo.label;
     },
   },
 };
@@ -30,8 +31,8 @@ export default {
 <template>
   <div class="prometheus-graph col-12 col-lg-6">
     <div class="prometheus-graph-header">
-      <h5 ref="graphTitle" class="prometheus-graph-title">{{ title }}</h5>
+      <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
     </div>
-    <gl-single-stat :value="valueWithUnit" :title="title" variant="success" />
+    <gl-single-stat :value="engineeringNotation" :title="graphTitle" variant="success" />
   </div>
 </template>