diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/area.vue')
| -rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 304 |
1 files changed, 0 insertions, 304 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue deleted file mode 100644 index cac10474d06..00000000000 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ /dev/null @@ -1,304 +0,0 @@ -<script> -import { __ } from '~/locale'; -import { GlLink } from '@gitlab/ui'; -import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; -import dateFormat from 'dateformat'; -import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils'; -import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; -import Icon from '~/vue_shared/components/icon.vue'; -import { chartHeight, graphTypes, lineTypes } from '../../constants'; -import { makeDataSeries } from '~/helpers/monitor_helper'; -import { graphDataValidatorForValues } from '../../utils'; - -let debouncedResize; - -// TODO: Remove this component in favor of the more general time_series.vue -// Please port all changes here to time_series.vue as well. - -export default { - components: { - GlAreaChart, - GlChartSeriesLabel, - GlLink, - Icon, - }, - inheritAttrs: false, - props: { - graphData: { - type: Object, - required: true, - validator: graphDataValidatorForValues.bind(null, false), - }, - containerWidth: { - type: Number, - required: true, - }, - deploymentData: { - type: Array, - required: false, - default: () => [], - }, - projectPath: { - type: String, - required: false, - default: () => '', - }, - showBorder: { - type: Boolean, - required: false, - default: () => false, - }, - singleEmbed: { - type: Boolean, - required: false, - default: false, - }, - thresholds: { - type: Array, - required: false, - default: () => [], - }, - }, - data() { - return { - tooltip: { - title: '', - content: [], - commitUrl: '', - isDeployment: false, - sha: '', - }, - width: 0, - height: chartHeight, - svgs: {}, - primaryColor: null, - }; - }, - computed: { - chartData() { - // Transforms & supplements query data to render appropriate labels & styles - // Input: [{ queryAttributes1 }, { queryAttributes2 }] - // Output: [{ seriesAttributes1 }, { seriesAttributes2 }] - return this.graphData.queries.reduce((acc, query) => { - const { appearance } = query; - const lineType = - appearance && appearance.line && appearance.line.type - ? appearance.line.type - : lineTypes.default; - const lineWidth = - appearance && appearance.line && appearance.line.width - ? appearance.line.width - : undefined; - - const series = makeDataSeries(query.result, { - name: this.formatLegendLabel(query), - lineStyle: { - type: lineType, - width: lineWidth, - }, - areaStyle: { - opacity: - appearance && appearance.area && typeof appearance.area.opacity === 'number' - ? appearance.area.opacity - : undefined, - }, - }); - - return acc.concat(series); - }, []); - }, - chartOptions() { - return { - xAxis: { - name: __('Time'), - type: 'time', - axisLabel: { - formatter: date => dateFormat(date, 'h:MM TT'), - }, - axisPointer: { - snap: true, - }, - }, - yAxis: { - name: this.yAxisLabel, - axisLabel: { - formatter: num => roundOffFloat(num, 3).toString(), - }, - }, - series: this.scatterSeries, - dataZoom: [this.dataZoomConfig], - }; - }, - dataZoomConfig() { - const handleIcon = this.svgs['scroll-handle']; - - return handleIcon ? { handleIcon } : {}; - }, - earliestDatapoint() { - return this.chartData.reduce((acc, series) => { - const { data } = series; - const { length } = data; - if (!length) { - return acc; - } - - const [first] = data[0]; - const [last] = data[length - 1]; - const seriesEarliest = first < last ? first : last; - - return seriesEarliest < acc || acc === null ? seriesEarliest : acc; - }, null); - }, - isMultiSeries() { - return this.tooltip.content.length > 1; - }, - recentDeployments() { - return this.deploymentData.reduce((acc, deployment) => { - if (deployment.created_at >= this.earliestDatapoint) { - acc.push({ - id: deployment.id, - createdAt: deployment.created_at, - sha: deployment.sha, - commitUrl: `${this.projectPath}/commit/${deployment.sha}`, - tag: deployment.tag, - tagUrl: deployment.tag ? `${this.tagsPath}/${deployment.ref.name}` : null, - ref: deployment.ref.name, - showDeploymentFlag: false, - }); - } - - return acc; - }, []); - }, - scatterSeries() { - return { - type: graphTypes.deploymentData, - data: this.recentDeployments.map(deployment => [deployment.createdAt, 0]), - symbol: this.svgs.rocket, - symbolSize: 14, - itemStyle: { - color: this.primaryColor, - }, - }; - }, - yAxisLabel() { - return `${this.graphData.y_label}`; - }, - }, - watch: { - containerWidth: 'onResize', - }, - beforeDestroy() { - window.removeEventListener('resize', debouncedResize); - }, - created() { - debouncedResize = debounceByAnimationFrame(this.onResize); - window.addEventListener('resize', debouncedResize); - this.setSvg('rocket'); - this.setSvg('scroll-handle'); - }, - methods: { - formatLegendLabel(query) { - return `${query.label}`; - }, - formatTooltipText(params) { - this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy, h:MMTT'); - this.tooltip.content = []; - params.seriesData.forEach(seriesData => { - this.tooltip.isDeployment = seriesData.componentSubType === graphTypes.deploymentData; - if (this.tooltip.isDeployment) { - const [deploy] = this.recentDeployments.filter( - deployment => deployment.createdAt === seriesData.value[0], - ); - this.tooltip.sha = deploy.sha.substring(0, 8); - this.tooltip.commitUrl = deploy.commitUrl; - } else { - const { seriesName, color } = seriesData; - // seriesData.value contains the chart's [x, y] value pair - // seriesData.value[1] is threfore the chart y value - const value = seriesData.value[1].toFixed(3); - - this.tooltip.content.push({ - name: seriesName, - value, - color, - }); - } - }); - }, - setSvg(name) { - getSvgIconPathContent(name) - .then(path => { - if (path) { - this.$set(this.svgs, name, `path://${path}`); - } - }) - .catch(() => {}); - }, - onChartUpdated(chart) { - [this.primaryColor] = chart.getOption().color; - }, - onResize() { - if (!this.$refs.areaChart) return; - const { width } = this.$refs.areaChart.$el.getBoundingClientRect(); - this.width = width; - }, - }, -}; -</script> - -<template> - <div - class="prometheus-graph col-12" - :class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6': !singleEmbed }]" - > - <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }"> - <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-area-chart - ref="areaChart" - v-bind="$attrs" - :data="chartData" - :option="chartOptions" - :format-tooltip-text="formatTooltipText" - :thresholds="thresholds" - :width="width" - :height="height" - @updated="onChartUpdated" - > - <template v-if="tooltip.isDeployment"> - <template slot="tooltipTitle"> - {{ __('Deployed') }} - </template> - <div slot="tooltipContent" class="d-flex align-items-center"> - <icon name="commit" class="mr-2" /> - <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link> - </div> - </template> - <template v-else> - <template slot="tooltipTitle"> - <div class="text-nowrap"> - {{ tooltip.title }} - </div> - </template> - <template slot="tooltipContent"> - <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> - </div> - </template> - </template> - </gl-area-chart> - </div> - </div> -</template> |