Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/single_stat.vue')
-rw-r--r--app/assets/javascripts/monitoring/components/charts/single_stat.vue71
1 files changed, 0 insertions, 71 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
deleted file mode 100644
index 6d6a7af600b..00000000000
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
-import { __ } from '~/locale';
-import { graphDataValidatorForValues } from '../../utils';
-
-const defaultPrecision = 2;
-const emptyStateMsg = __('No data to display');
-
-export default {
- components: {
- GlSingleStat,
- },
- inheritAttrs: false,
- props: {
- graphData: {
- type: Object,
- required: true,
- validator: graphDataValidatorForValues.bind(null, true),
- },
- },
- computed: {
- queryInfo() {
- return this.graphData.metrics[0];
- },
- queryMetric() {
- return this.queryInfo.result[0]?.metric;
- },
- queryResult() {
- return this.queryInfo.result[0]?.value[1];
- },
- /**
- * This method formats the query result from a promQL expression
- * allowing a user to format the data in percentile values
- * by using the `maxValue` inner property from the graphData prop
- * @returns {(String)}
- */
- 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.number);
- return formatter(
- (this.queryResult / Number(this.graphData.maxValue)) * 100,
- defaultPrecision,
- );
- }
-
- formatter = getFormatter(SUPPORTED_FORMATS.number);
- return `${formatter(this.queryResult, defaultPrecision)}`;
- },
- unit() {
- return this.graphData?.maxValue ? '%' : this.queryInfo.unit;
- },
- graphTitle() {
- return this.queryInfo.label;
- },
- },
-};
-</script>
-<template>
- <div>
- <gl-single-stat :value="statValue" :title="graphTitle" :unit="unit" variant="success" />
- </div>
-</template>