1 files changed, 122 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/gauge.vue b/app/assets/javascripts/monitoring/components/charts/gauge.vue
new file mode 100644
index 00000000000..63fa60bbdf0
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/charts/gauge.vue
@@ -0,0 +1,122 @@
+<script>
+import { GlResizeObserverDirective } from '@gitlab/ui';
+import { GlGaugeChart } from '@gitlab/ui/dist/charts';
+import { isFinite, isArray, isInteger } from 'lodash';
+import { graphDataValidatorForValues } from '../../utils';
+import { getValidThresholds } from './options';
+import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
+
+export default {
+  components: {
+    GlGaugeChart,
+  },
+  directives: {
+    GlResizeObserverDirective,
+  },
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
+      validator: graphDataValidatorForValues.bind(null, true),
+    },
+  },
+  data() {
+    return {
+      width: 0,
+    };
+  },
+  computed: {
+    rangeValues() {
+      let min = 0;
+      let max = 100;
+
+      const { minValue, maxValue } = this.graphData;
+
+      const isValidMinMax = () => {
+        return isFinite(minValue) && isFinite(maxValue) && minValue < maxValue;
+      };
+
+      if (isValidMinMax()) {
+        min = minValue;
+        max = maxValue;
+      }
+
+      return {
+        min,
+        max,
+      };
+    },
+    validThresholds() {
+      const { mode, values } = this.graphData?.thresholds || {};
+      const range = this.rangeValues;
+
+      if (!isArray(values)) {
+        return [];
+      }
+
+      return getValidThresholds({ mode, range, values });
+    },
+    queryResult() {
+      return this.graphData?.metrics[0]?.result[0]?.value[1];
+    },
+    splitValue() {
+      const { split } = this.graphData;
+      const defaultValue = 10;
+
+      return isInteger(split) && split > 0 ? split : defaultValue;
+    },
+    textValue() {
+      const formatFromPanel = this.graphData.format;
+      const defaultFormat = SUPPORTED_FORMATS.engineering;
+      const format = SUPPORTED_FORMATS[formatFromPanel] ?? defaultFormat;
+      const { queryResult } = this;
+
+      const formatter = getFormatter(format);
+
+      return isFinite(queryResult) ? formatter(queryResult) : '--';
+    },
+    thresholdsValue() {
+      /**
+       * If there are no valid thresholds, a default threshold
+       * will be set at 90% of the gauge arcs' max value
+       */
+      const { min, max } = this.rangeValues;
+
+      const defaultThresholdValue = [(max - min) * 0.95];
+      return this.validThresholds.length ? this.validThresholds : defaultThresholdValue;
+    },
+    value() {
+      /**
+       * The gauge chart gitlab-ui component expects a value
+       * of type number.
+       *
+       * So, if the query result is undefined,
+       * we pass the gauge chart a value of NaN.
+       */
+      return this.queryResult || NaN;
+    },
+  },
+  methods: {
+    onResize() {
+      if (!this.$refs.gaugeChart) return;
+      const { width } = this.$refs.gaugeChart.$el.getBoundingClientRect();
+      this.width = width;
+    },
+  },
+};
+</script>
+<template>
+  <div v-gl-resize-observer-directive="onResize">
+    <gl-gauge-chart
+      ref="gaugeChart"
+      v-bind="$attrs"
+      :value="value"
+      :min="rangeValues.min"
+      :max="rangeValues.max"
+      :thresholds="thresholdsValue"
+      :text="textValue"
+      :split-number="splitValue"
+      :width="width"
+    />
+  </div>
+</template>