diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-09 12:10:17 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-09 12:10:17 +0300 |
commit | ad0265eead72a624ce7a020847db4f0f0c877e57 (patch) | |
tree | 206e0564b02aa9530e3c95f70eb10a77e074bdf0 /app/assets/javascripts/monitoring/components | |
parent | 4dfc8711171fe0c04bc6b8b224687603026dea46 (diff) |
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/annotations.js | 67 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/time_series.vue | 74 |
2 files changed, 98 insertions, 43 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js index cc2b2bd0900..b0c89d5e374 100644 --- a/app/assets/javascripts/monitoring/components/charts/annotations.js +++ b/app/assets/javascripts/monitoring/components/charts/annotations.js @@ -1,4 +1,4 @@ -import { graphTypes, symbolSizes } from '../../constants'; +import { graphTypes, symbolSizes, colorValues } from '../../constants'; /** * Annotations and deployments are decoration layers on @@ -40,33 +40,50 @@ export const annotationsYAxis = { formatter: () => {}, }, }; + /** - * This util method check if a particular series data point - * is of annotation type. Annotations are generally scatter - * plot charts + * Fetched list of annotations are parsed into a + * format the eCharts accepts to draw markLines + * + * If Annotation is a single line, the `from` property + * has a value and the `to` is null. Because annotations + * only supports lines the from value does not exist yet. + * * - * @param {String} type series component type - * @returns {Boolean} + * @param {Object} annotation object + * @returns {Object} markLine object */ -export const isAnnotation = type => type === graphTypes.annotationsData; +export const parseAnnotations = ({ + from: annotationFrom = '', + color = colorValues.primaryColor, +}) => ({ + xAxis: annotationFrom, + lineStyle: { + color, + }, +}); /** - * This method currently supports only deployments. After - * https://gitlab.com/gitlab-org/gitlab/-/issues/211418 annotations - * support will be added in this method. + * This method currently generates deployments and annotations + * but are not used in the chart. The method calling + * generateAnnotationsSeries will not pass annotations until + * https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is + * implemented. * * This method is extracted out of the charts so that * annotation lines can be easily supported in * the future. * + * In order to make hover work, hidden annotation data points + * are created along with the markLines. These data points have + * the necessart metadata that is used to display in the tooltip. + * * @param {Array} deployments deployments data * @returns {Object} annotation series object */ -export const generateAnnotationsSeries = (deployments = []) => { - if (!deployments.length) { - return []; - } - const data = deployments.map(deployment => { +export const generateAnnotationsSeries = ({ deployments = [], annotations = [] } = {}) => { + // deployment data points + const deploymentsData = deployments.map(deployment => { return { name: 'deployments', value: [deployment.createdAt, annotationsYAxisCoords.pos], @@ -78,9 +95,27 @@ export const generateAnnotationsSeries = (deployments = []) => { }; }); + // annotation data points + const annotationsData = annotations.map(annotation => { + return { + name: 'annotations', + value: [annotation.from, annotationsYAxisCoords.pos], + symbol: 'none', + description: annotation.description, + }; + }); + + // annotation markLine option + const markLine = { + symbol: 'none', + silent: true, + data: annotations.map(parseAnnotations), + }; + return { type: graphTypes.annotationsData, yAxisIndex: 1, // annotationsYAxis index - data, + data: [...deploymentsData, ...annotationsData], + markLine, }; }; diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 73c63a0580f..e43a0131528 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -6,9 +6,9 @@ import dateFormat from 'dateformat'; import { s__, __ } from '~/locale'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import Icon from '~/vue_shared/components/icon.vue'; -import { chartHeight, lineTypes, lineWidths, dateFormats } from '../../constants'; +import { chartHeight, lineTypes, lineWidths, dateFormats, tooltipTypes } from '../../constants'; import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options'; -import { annotationsYAxis, generateAnnotationsSeries, isAnnotation } from './annotations'; +import { annotationsYAxis, generateAnnotationsSeries } from './annotations'; import { makeDataSeries } from '~/helpers/monitor_helper'; import { graphDataValidatorForValues } from '../../utils'; @@ -20,6 +20,7 @@ const events = { }; export default { + tooltipTypes, components: { GlAreaChart, GlLineChart, @@ -88,10 +89,10 @@ export default { data() { return { tooltip: { + type: '', title: '', content: [], commitUrl: '', - isDeployment: false, sha: '', }, width: 0, @@ -137,7 +138,13 @@ export default { }, []); }, chartOptionSeries() { - return (this.option.series || []).concat(generateAnnotationsSeries(this.recentDeployments)); + // After https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is implemented, + // this method will have access to annotations data + return (this.option.series || []).concat( + generateAnnotationsSeries({ + deployments: this.recentDeployments, + }), + ); }, chartOptions() { const { yAxis, xAxis } = this.option; @@ -246,6 +253,9 @@ export default { formatLegendLabel(query) { return `${query.label}`; }, + isTooltipOfType(tooltipType, defaultType) { + return tooltipType === defaultType; + }, formatTooltipText(params) { this.tooltip.title = dateFormat(params.value, dateFormats.default); this.tooltip.content = []; @@ -253,13 +263,18 @@ export default { params.seriesData.forEach(dataPoint => { if (dataPoint.value) { const [xVal, yVal] = dataPoint.value; - this.tooltip.isDeployment = isAnnotation(dataPoint.componentSubType); - if (this.tooltip.isDeployment) { + this.tooltip.type = dataPoint.name; + if (this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.deployments)) { const [deploy] = this.recentDeployments.filter( deployment => deployment.createdAt === xVal, ); this.tooltip.sha = deploy.sha.substring(0, 8); this.tooltip.commitUrl = deploy.commitUrl; + } else if ( + this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.annotations) + ) { + const { data } = dataPoint; + this.tooltip.content.push(data?.description); } else { const { seriesName, color, dataIndex } = dataPoint; @@ -288,7 +303,6 @@ export default { onChartUpdated(eChart) { [this.primaryColor] = eChart.getOption().color; }, - onChartCreated(eChart) { // Emit a datazoom event that corresponds to the eChart // `datazoom` event. @@ -346,7 +360,7 @@ export default { @created="onChartCreated" @updated="onChartUpdated" > - <template v-if="tooltip.isDeployment"> + <template v-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.deployments)"> <template slot="tooltipTitle"> {{ __('Deployed') }} </template> @@ -355,29 +369,35 @@ export default { <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link> </div> </template> + <template v-else-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.annotations)"> + <template slot="tooltipTitle"> + <div class="text-nowrap"> + {{ tooltip.title }} + </div> + </template> + <div slot="tooltipContent" class="d-flex align-items-center"> + {{ tooltip.content.join('\n') }} + </div> + </template> <template v-else> <template slot="tooltipTitle"> - <slot name="tooltipTitle"> - <div class="text-nowrap"> - {{ tooltip.title }} - </div> - </slot> + <div class="text-nowrap"> + {{ tooltip.title }} + </div> </template> - <template slot="tooltipContent"> - <slot name="tooltipContent" :tooltip="tooltip"> - <div - v-for="(content, key) in tooltip.content" - :key="key" - class="d-flex justify-content-between" - > - <gl-chart-series-label :color="isMultiSeries ? content.color : ''"> - {{ content.name }} - </gl-chart-series-label> - <div class="prepend-left-32"> - {{ content.value }} - </div> + <template slot="tooltipContent" :tooltip="tooltip"> + <div + v-for="(content, key) in tooltip.content" + :key="key" + class="d-flex justify-content-between" + > + <gl-chart-series-label :color="isMultiSeries ? content.color : ''"> + {{ content.name }} + </gl-chart-series-label> + <div class="prepend-left-32"> + {{ content.value }} </div> - </slot> + </div> </template> </template> </component> |