diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
5 files changed, 189 insertions, 6 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" diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index cc7f5af2259..4fd6903d566 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -46,7 +46,6 @@ export const metricStates = { }; export const sidebarAnimationDuration = 300; // milliseconds. - export const chartHeight = 300; export const graphTypes = { diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js index 066d0bf7676..48ed2259a51 100644 --- a/app/assets/javascripts/monitoring/stores/utils.js +++ b/app/assets/javascripts/monitoring/stores/utils.js @@ -73,14 +73,21 @@ const mapToMetricsViewModel = (metrics, defaultLabel) => })); /** - * Maps an axis view model + * Maps X-axis view model + * + * @param {Object} axis + */ +const mapXAxisToViewModel = ({ name = '' }) => ({ name }); + +/** + * Maps Y-axis view model * * Defaults to a 2 digit precision and `number` format. It only allows * formats in the SUPPORTED_FORMATS array. * * @param {Object} axis */ -const mapToAxisViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, precision = 2 }) => { +const mapYAxisToViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, precision = 2 }) => { return { name, format: SUPPORTED_FORMATS[format] || SUPPORTED_FORMATS.number, @@ -94,15 +101,30 @@ const mapToAxisViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, prec * @param {Object} panel - Metrics panel * @returns {Object} */ -const mapToPanelViewModel = ({ title = '', type, y_label, y_axis = {}, metrics = [] }) => { +const mapPanelToViewModel = ({ + title = '', + type, + x_axis = {}, + x_label, + y_label, + y_axis = {}, + metrics = [], +}) => { + // Both `x_axis.name` and `x_label` are supported for now + // https://gitlab.com/gitlab-org/gitlab/issues/210521 + const xAxis = mapXAxisToViewModel({ name: x_label, ...x_axis }); // eslint-disable-line babel/camelcase + // Both `y_axis.name` and `y_label` are supported for now // https://gitlab.com/gitlab-org/gitlab/issues/208385 - const yAxis = mapToAxisViewModel({ name: y_label, ...y_axis }); // eslint-disable-line babel/camelcase + const yAxis = mapYAxisToViewModel({ name: y_label, ...y_axis }); // eslint-disable-line babel/camelcase + return { title, type, + xLabel: xAxis.name, y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198 yAxis, + xAxis, metrics: mapToMetricsViewModel(metrics, yAxis.name), }; }; @@ -117,7 +139,7 @@ const mapToPanelGroupViewModel = ({ group = '', panels = [] }, i) => { return { key: `${slugify(group || 'default')}-${i}`, group, - panels: panels.map(mapToPanelViewModel), + panels: panels.map(mapPanelToViewModel), }; }; diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js index 6a46c7e67e4..7c6cd19eb7b 100644 --- a/app/assets/javascripts/monitoring/utils.js +++ b/app/assets/javascripts/monitoring/utils.js @@ -132,4 +132,63 @@ export const timeRangeToUrl = (timeRange, url = window.location.href) => { return mergeUrlParams(params, toUrl); }; +/** + * Get the metric value from first data point. + * Currently only used for bar charts + * + * @param {Array} values data points + * @returns {Number} + */ +const metricValueMapper = values => values[0]?.[1]; + +/** + * Get the metric name from metric object + * Currently only used for bar charts + * e.g. { handler: '/query' } + * { method: 'get' } + * + * @param {Object} metric metric object + * @returns {String} + */ +const metricNameMapper = metric => Object.values(metric)?.[0]; + +/** + * Parse metric object to extract metric value and name in + * [<metric-value>, <metric-name>] format. + * Currently only used for bar charts + * + * @param {Object} param0 metric object + * @returns {Array} + */ +const resultMapper = ({ metric, values = [] }) => [ + metricValueMapper(values), + metricNameMapper(metric), +]; + +/** + * Bar charts graph data parser to massage data from + * backend to a format acceptable by bar charts component + * in GitLab UI + * + * e.g. + * { + * SLO: [ + * [98, 'api'], + * [99, 'web'], + * [99, 'database'] + * ] + * } + * + * @param {Array} data series information + * @returns {Object} + */ +export const barChartsDataParser = (data = []) => + data?.reduce( + (acc, { result = [], label }) => ({ + ...acc, + [label]: result.map(resultMapper), + }), + {}, + ); + export default {}; |