diff options
Diffstat (limited to 'app/assets')
3 files changed, 119 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue new file mode 100644 index 00000000000..55ae4a3bdb2 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue @@ -0,0 +1,103 @@ +<script> +import { GlResizeObserverDirective } from '@gitlab/ui'; +import { GlStackedColumnChart } from '@gitlab/ui/dist/charts'; +import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; +import { chartHeight } from '../../constants'; +import { graphDataValidatorForValues } from '../../utils'; + +export default { + components: { + GlStackedColumnChart, + }, + directives: { + GlResizeObserverDirective, + }, + props: { + graphData: { + type: Object, + required: true, + validator: graphDataValidatorForValues.bind(null, false), + }, + }, + data() { + return { + width: 0, + height: chartHeight, + svgs: {}, + }; + }, + computed: { + chartData() { + return this.graphData.metrics.map(metric => metric.result[0].values.map(val => val[1])); + }, + xAxisTitle() { + return this.graphData.x_label !== undefined ? this.graphData.x_label : ''; + }, + yAxisTitle() { + return this.graphData.y_label !== undefined ? this.graphData.y_label : ''; + }, + xAxisType() { + return this.graphData.x_type !== undefined ? this.graphData.x_type : 'category'; + }, + groupBy() { + return this.graphData.metrics[0].result[0].values.map(val => val[0]); + }, + dataZoomConfig() { + const handleIcon = this.svgs['scroll-handle']; + + return handleIcon ? { handleIcon } : {}; + }, + chartOptions() { + return { + dataZoom: this.dataZoomConfig, + }; + }, + seriesNames() { + return this.graphData.metrics.map(metric => metric.series_name); + }, + }, + created() { + this.setSvg('scroll-handle'); + }, + methods: { + setSvg(name) { + getSvgIconPathContent(name) + .then(path => { + if (path) { + this.$set(this.svgs, name, `path://${path}`); + } + }) + .catch(e => { + // eslint-disable-next-line no-console, @gitlab/i18n/no-non-i18n-strings + 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" class="prometheus-graph"> + <div class="prometheus-graph-header"> + <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5> + <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div> + </div> + <gl-stacked-column-chart + ref="chart" + v-bind="$attrs" + :data="chartData" + :option="chartOptions" + :x-axis-title="xAxisTitle" + :y-axis-title="yAxisTitle" + :x-axis-type="xAxisType" + :group-by="groupBy" + :width="width" + :height="height" + :series-names="seriesNames" + /> + </div> +</template> diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 4d067365ed9..6751f3d31e8 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -15,6 +15,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 MonitorStackedColumnChart from './charts/stacked_column.vue'; import MonitorEmptyChart from './charts/empty_chart.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; import { downloadCSVOptions, generateLinkToChartOptions } from '../utils'; @@ -24,6 +25,7 @@ export default { MonitorSingleStatChart, MonitorColumnChart, MonitorHeatmapChart, + MonitorStackedColumnChart, MonitorEmptyChart, Icon, GlDropdown, @@ -121,6 +123,10 @@ export default { v-else-if="isPanelType('column') && graphDataHasMetrics" :graph-data="graphData" /> + <monitor-stacked-column-chart + v-else-if="isPanelType('stacked-column') && graphDataHasMetrics" + :graph-data="graphData" + /> <component :is="monitorChartComponent" v-else-if="graphDataHasMetrics" diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 7fa48c70f41..58279bba4ca 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -160,6 +160,11 @@ $ide-commit-header-height: 48px; height: 0; } +// stylelint-disable selector-class-pattern +// stylelint-disable selector-max-compound-selectors +// stylelint-disable stylelint-gitlab/duplicate-selectors +// stylelint-disable stylelint-gitlab/utility-classes + .blob-editor-container { flex: 1; height: 0; @@ -301,6 +306,11 @@ $ide-commit-header-height: 48px; } } +// stylelint-enable selector-class-pattern +// stylelint-enable selector-max-compound-selectors +// stylelint-enable stylelint-gitlab/duplicate-selectors +// stylelint-enable stylelint-gitlab/utility-classes + .preview-container { flex-grow: 1; position: relative; |