diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-27 12:07:43 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-27 12:07:43 +0000 |
commit | 39fa7d1eeb2dba52f0601128f3ac91f57d19866e (patch) | |
tree | da042d34ff762dd1957e51666a34202295a081b9 /app/assets/javascripts/monitoring/components | |
parent | 6ac4a6713ed3196af899011f7e18658e16ebaac0 (diff) | |
download | gitlab-ce-39fa7d1eeb2dba52f0601128f3ac91f57d19866e.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/bar.vue | 97 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/panel_type.vue | 6 |
2 files changed, 103 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/bar.vue b/app/assets/javascripts/monitoring/components/charts/bar.vue new file mode 100644 index 00000000000..01fd8940dad --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/bar.vue @@ -0,0 +1,97 @@ +<script> +import { GlResizeObserverDirective } from '@gitlab/ui'; +import { GlBarChart } from '@gitlab/ui/dist/charts'; +import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; +import { chartHeight } from '../../constants'; +import { barChartsDataParser, graphDataValidatorForValues } from '../../utils'; + +export default { + components: { + GlBarChart, + }, + directives: { + GlResizeObserverDirective, + }, + props: { + graphData: { + type: Object, + required: true, + validator: graphDataValidatorForValues.bind(null, false), + }, + }, + data() { + return { + width: 0, + height: chartHeight, + svgs: {}, + }; + }, + computed: { + chartData() { + return barChartsDataParser(this.graphData.metrics); + }, + chartOptions() { + return { + dataZoom: [this.dataZoomConfig], + }; + }, + xAxisTitle() { + const { xLabel = '' } = this.graphData; + return xLabel; + }, + yAxisTitle() { + const { y_label = '' } = this.graphData; + return y_label; // eslint-disable-line babel/camelcase + }, + xAxisType() { + const { x_type = 'value' } = this.graphData; + return x_type; // eslint-disable-line babel/camelcase + }, + dataZoomConfig() { + const handleIcon = this.svgs['scroll-handle']; + + return handleIcon ? { handleIcon } : {}; + }, + }, + created() { + this.setSvg('scroll-handle'); + }, + methods: { + 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 => { + if (path) { + this.$set(this.svgs, name, `path://${path}`); + } + }) + .catch(e => { + // eslint-disable-next-line no-console, @gitlab/require-i18n-strings + console.error('SVG could not be rendered correctly: ', e); + }); + }, + }, +}; +</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> +</template> diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 79f2c8ad41f..da305c7dda3 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -18,6 +18,7 @@ import MonitorAnomalyChart from './charts/anomaly.vue'; import MonitorSingleStatChart from './charts/single_stat.vue'; import MonitorHeatmapChart from './charts/heatmap.vue'; import MonitorColumnChart from './charts/column.vue'; +import MonitorBarChart from './charts/bar.vue'; import MonitorStackedColumnChart from './charts/stacked_column.vue'; import MonitorEmptyChart from './charts/empty_chart.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; @@ -31,6 +32,7 @@ export default { components: { MonitorSingleStatChart, MonitorColumnChart, + MonitorBarChart, MonitorHeatmapChart, MonitorStackedColumnChart, MonitorEmptyChart, @@ -259,6 +261,10 @@ export default { v-else-if="isPanelType('heatmap') && graphDataHasMetrics" :graph-data="graphData" /> + <monitor-bar-chart + v-else-if="isPanelType('bar') && graphDataHasMetrics" + :graph-data="graphData" + /> <monitor-column-chart v-else-if="isPanelType('column') && graphDataHasMetrics" :graph-data="graphData" |