All files / app/assets/javascripts/monitoring/components/charts gauge.vue

92.11% Statements 35/38
91.3% Branches 21/23
90.91% Functions 10/11
92.11% Lines 35/38

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123  11x 11x   11x 11x 11x                                 25x           25x 25x   25x   25x 25x     25x 18x 18x     25x           25x 25x   25x 1x     24x     25x     25x 25x   25x     25x 25x 25x 25x   25x   25x             25x   25x 25x                   25x                       108x                              
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlGaugeChart } from '@gitlab/ui/dist/charts';
import { isFinite, isArray, isInteger } from 'lodash';
import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { graphDataValidatorForValues } from '../../utils';
import { getValidThresholds } from './options';
 
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>