diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-24 15:12:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-24 15:12:57 +0300 |
commit | e40c68997d44209aed2baf3a8ec6be9ae99fb0b5 (patch) | |
tree | d5c7fd65b398a5857e27b9ae641b9a9435d971e5 /app/assets/javascripts/monitoring | |
parent | 563c8efdee39233f80f4dc7b20b38d417b26f055 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring')
5 files changed, 65 insertions, 119 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/bar.vue b/app/assets/javascripts/monitoring/components/charts/bar.vue index a4cef5ea256..1e0f4b10297 100644 --- a/app/assets/javascripts/monitoring/components/charts/bar.vue +++ b/app/assets/javascripts/monitoring/components/charts/bar.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlBarChart } from '@gitlab/ui/dist/charts'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import { chartHeight } from '../../constants'; @@ -9,9 +8,6 @@ export default { components: { GlBarChart, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -60,11 +56,6 @@ export default { formatLegendLabel(query) { return query.label; }, - onResize() { - if (!this.$refs.barChart) return; - const { width } = this.$refs.barChart.$el.getBoundingClientRect(); - this.width = width; - }, setSvg(name) { getSvgIconPathContent(name) .then((path) => { @@ -81,17 +72,16 @@ export default { }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-bar-chart - ref="barChart" - v-bind="$attrs" - :data="chartData" - :option="chartOptions" - :width="width" - :height="height" - :x-axis-title="xAxisTitle" - :y-axis-title="yAxisTitle" - :x-axis-type="xAxisType" - /> - </div> + <gl-bar-chart + ref="barChart" + v-bind="$attrs" + :responsive="true" + :data="chartData" + :option="chartOptions" + :width="width" + :height="height" + :x-axis-title="xAxisTitle" + :y-axis-title="yAxisTitle" + :x-axis-type="xAxisType" + /> </template> diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue index 37251af2049..e8f54b1fa34 100644 --- a/app/assets/javascripts/monitoring/components/charts/column.vue +++ b/app/assets/javascripts/monitoring/components/charts/column.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; import { makeDataSeries } from '~/helpers/monitor_helper'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; @@ -12,9 +11,6 @@ export default { components: { GlColumnChart, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -83,11 +79,6 @@ export default { formatLegendLabel(query) { return query.label; }, - onResize() { - if (!this.$refs.columnChart) return; - const { width } = this.$refs.columnChart.$el.getBoundingClientRect(); - this.width = width; - }, setSvg(name) { getSvgIconPathContent(name) .then((path) => { @@ -101,17 +92,16 @@ export default { }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-column-chart - ref="columnChart" - v-bind="$attrs" - :bars="barChartData" - :option="chartOptions" - :width="width" - :height="height" - :x-axis-title="xAxisTitle" - :y-axis-title="yAxisTitle" - :x-axis-type="xAxisType" - /> - </div> + <gl-column-chart + ref="columnChart" + v-bind="$attrs" + :responsive="true" + :bars="barChartData" + :option="chartOptions" + :width="width" + :height="height" + :x-axis-title="xAxisTitle" + :y-axis-title="yAxisTitle" + :x-axis-type="xAxisType" + /> </template> diff --git a/app/assets/javascripts/monitoring/components/charts/gauge.vue b/app/assets/javascripts/monitoring/components/charts/gauge.vue index 461ff06be72..0477ff19ffe 100644 --- a/app/assets/javascripts/monitoring/components/charts/gauge.vue +++ b/app/assets/javascripts/monitoring/components/charts/gauge.vue @@ -1,5 +1,4 @@ <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'; @@ -10,9 +9,6 @@ export default { components: { GlGaugeChart, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -96,27 +92,19 @@ export default { 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> + <gl-gauge-chart + ref="gaugeChart" + v-bind="$attrs" + :responsive="true" + :value="value" + :min="rangeValues.min" + :max="rangeValues.max" + :thresholds="thresholdsValue" + :text="textValue" + :split-number="splitValue" + :width="width" + /> </template> diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue index ed888ef022c..12add274a90 100644 --- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue +++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlHeatmap } from '@gitlab/ui/dist/charts'; import { formatDate, timezones, formats } from '../../format_date'; import { graphDataValidatorForValues } from '../../utils'; @@ -8,9 +7,6 @@ export default { components: { GlHeatmap, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -61,26 +57,18 @@ export default { return this.graphData.metrics[0]; }, }, - methods: { - onResize() { - if (this.$refs.heatmapChart) return; - const { width } = this.$refs.heatmapChart.$el.getBoundingClientRect(); - this.width = width; - }, - }, }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-heatmap - ref="heatmapChart" - v-bind="$attrs" - :data-series="chartData" - :x-axis-name="xAxisName" - :y-axis-name="yAxisName" - :x-axis-labels="xAxisLabels" - :y-axis-labels="yAxisLabels" - :width="width" - /> - </div> + <gl-heatmap + ref="heatmapChart" + v-bind="$attrs" + :responsive="true" + :data-series="chartData" + :x-axis-name="xAxisName" + :y-axis-name="yAxisName" + :x-axis-labels="xAxisLabels" + :y-axis-labels="yAxisLabels" + :width="width" + /> </template> diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue index a53f899f752..0cf39448d6b 100644 --- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue +++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlStackedColumnChart } from '@gitlab/ui/dist/charts'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import { s__ } from '~/locale'; @@ -12,9 +11,6 @@ export default { components: { GlStackedColumnChart, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -125,32 +121,26 @@ export default { console.error('SVG could not be rendered correctly: ', e); }); }, - onResize() { - if (!this.$refs.chart) return; - const { width } = this.$refs.chart.$el.getBoundingClientRect(); - this.width = width; - }, }, }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-stacked-column-chart - ref="chart" - v-bind="$attrs" - :bars="chartData" - :option="chartOptions" - :x-axis-title="xAxisTitle" - :y-axis-title="yAxisTitle" - :x-axis-type="xAxisType" - :group-by="groupBy" - :width="width" - :height="height" - :legend-layout="legendLayout" - :legend-average-text="legendAverageText" - :legend-current-text="legendCurrentText" - :legend-max-text="legendMaxText" - :legend-min-text="legendMinText" - /> - </div> + <gl-stacked-column-chart + ref="chart" + v-bind="$attrs" + :responsive="true" + :bars="chartData" + :option="chartOptions" + :x-axis-title="xAxisTitle" + :y-axis-title="yAxisTitle" + :x-axis-type="xAxisType" + :group-by="groupBy" + :width="width" + :height="height" + :legend-layout="legendLayout" + :legend-average-text="legendAverageText" + :legend-current-text="legendCurrentText" + :legend-max-text="legendMaxText" + :legend-min-text="legendMinText" + /> </template> |