diff options
Diffstat (limited to 'app/assets/javascripts/analytics/instance_statistics/components/pipelines_chart.vue')
| -rw-r--r-- | app/assets/javascripts/analytics/instance_statistics/components/pipelines_chart.vue | 215 |
1 files changed, 0 insertions, 215 deletions
diff --git a/app/assets/javascripts/analytics/instance_statistics/components/pipelines_chart.vue b/app/assets/javascripts/analytics/instance_statistics/components/pipelines_chart.vue deleted file mode 100644 index b16d960402b..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/components/pipelines_chart.vue +++ /dev/null @@ -1,215 +0,0 @@ -<script> -import { GlLineChart } from '@gitlab/ui/dist/charts'; -import { GlAlert } from '@gitlab/ui'; -import { mapKeys, mapValues, pick, some, sum } from 'lodash'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import { s__ } from '~/locale'; -import { - differenceInMonths, - formatDateAsMonth, - getDayDifference, -} from '~/lib/utils/datetime_utility'; -import { getAverageByMonth, sortByDate, extractValues } from '../utils'; -import pipelineStatsQuery from '../graphql/queries/pipeline_stats.query.graphql'; -import { TODAY, START_DATE } from '../constants'; - -const DATA_KEYS = [ - 'pipelinesTotal', - 'pipelinesSucceeded', - 'pipelinesFailed', - 'pipelinesCanceled', - 'pipelinesSkipped', -]; -const PREFIX = 'pipelines'; - -export default { - name: 'PipelinesChart', - components: { - GlLineChart, - GlAlert, - ChartSkeletonLoader, - }, - startDate: START_DATE, - endDate: TODAY, - i18n: { - loadPipelineChartError: s__( - 'InstanceAnalytics|Could not load the pipelines chart. Please refresh the page to try again.', - ), - noDataMessage: s__('InstanceAnalytics|There is no data available.'), - total: s__('InstanceAnalytics|Total'), - succeeded: s__('InstanceAnalytics|Succeeded'), - failed: s__('InstanceAnalytics|Failed'), - canceled: s__('InstanceAnalytics|Canceled'), - skipped: s__('InstanceAnalytics|Skipped'), - chartTitle: s__('InstanceAnalytics|Pipelines'), - yAxisTitle: s__('InstanceAnalytics|Items'), - xAxisTitle: s__('InstanceAnalytics|Month'), - }, - data() { - return { - loading: true, - loadingError: null, - }; - }, - apollo: { - pipelineStats: { - query: pipelineStatsQuery, - variables() { - return { - firstTotal: this.totalDaysToShow, - firstSucceeded: this.totalDaysToShow, - firstFailed: this.totalDaysToShow, - firstCanceled: this.totalDaysToShow, - firstSkipped: this.totalDaysToShow, - }; - }, - update(data) { - const allData = extractValues(data, DATA_KEYS, PREFIX, 'nodes'); - const allPageInfo = extractValues(data, DATA_KEYS, PREFIX, 'pageInfo'); - - return { - ...mapValues(allData, sortByDate), - ...allPageInfo, - }; - }, - result() { - if (this.hasNextPage) { - this.fetchNextPage(); - } - }, - error() { - this.handleError(); - }, - }, - }, - computed: { - isLoading() { - return this.$apollo.queries.pipelineStats.loading; - }, - totalDaysToShow() { - return getDayDifference(this.$options.startDate, this.$options.endDate); - }, - firstVariables() { - const allData = pick(this.pipelineStats, [ - 'nodesTotal', - 'nodesSucceeded', - 'nodesFailed', - 'nodesCanceled', - 'nodesSkipped', - ]); - const allDayDiffs = mapValues(allData, data => { - const firstdataPoint = data[0]; - if (!firstdataPoint) { - return 0; - } - - return Math.max( - 0, - getDayDifference(this.$options.startDate, new Date(firstdataPoint.recordedAt)), - ); - }); - - return mapKeys(allDayDiffs, (value, key) => key.replace('nodes', 'first')); - }, - cursorVariables() { - const pageInfoKeys = [ - 'pageInfoTotal', - 'pageInfoSucceeded', - 'pageInfoFailed', - 'pageInfoCanceled', - 'pageInfoSkipped', - ]; - - return extractValues(this.pipelineStats, pageInfoKeys, 'pageInfo', 'endCursor'); - }, - hasNextPage() { - return ( - sum(Object.values(this.firstVariables)) > 0 && - some(this.pipelineStats, ({ hasNextPage }) => hasNextPage) - ); - }, - hasEmptyDataSet() { - return this.chartData.every(({ data }) => data.length === 0); - }, - chartData() { - const allData = pick(this.pipelineStats, [ - 'nodesTotal', - 'nodesSucceeded', - 'nodesFailed', - 'nodesCanceled', - 'nodesSkipped', - ]); - const options = { shouldRound: true }; - return Object.keys(allData).map(key => { - const i18nName = key.slice('nodes'.length).toLowerCase(); - return { - name: this.$options.i18n[i18nName], - data: getAverageByMonth(allData[key], options), - }; - }); - }, - range() { - return { - min: this.$options.startDate, - max: this.$options.endDate, - }; - }, - chartOptions() { - const { endDate, startDate, i18n } = this.$options; - return { - xAxis: { - ...this.range, - name: i18n.xAxisTitle, - type: 'time', - splitNumber: differenceInMonths(startDate, endDate) + 1, - axisLabel: { - interval: 0, - showMinLabel: false, - showMaxLabel: false, - align: 'right', - formatter: formatDateAsMonth, - }, - }, - yAxis: { - name: i18n.yAxisTitle, - }, - }; - }, - }, - methods: { - handleError() { - this.loadingError = true; - }, - fetchNextPage() { - this.$apollo.queries.pipelineStats - .fetchMore({ - variables: { - ...this.firstVariables, - ...this.cursorVariables, - }, - updateQuery: (previousResult, { fetchMoreResult }) => { - return Object.keys(fetchMoreResult).reduce((memo, key) => { - const { nodes, ...rest } = fetchMoreResult[key]; - const previousNodes = previousResult[key].nodes; - return { ...memo, [key]: { ...rest, nodes: [...previousNodes, ...nodes] } }; - }, {}); - }, - }) - .catch(this.handleError); - }, - }, -}; -</script> -<template> - <div> - <h3>{{ $options.i18n.chartTitle }}</h3> - <gl-alert v-if="loadingError" variant="danger" :dismissible="false" class="gl-mt-3"> - {{ this.$options.i18n.loadPipelineChartError }} - </gl-alert> - <chart-skeleton-loader v-else-if="isLoading" /> - <gl-alert v-else-if="hasEmptyDataSet" variant="info" :dismissible="false" class="gl-mt-3"> - {{ $options.i18n.noDataMessage }} - </gl-alert> - <gl-line-chart v-else :option="chartOptions" :include-legend-avg-max="true" :data="chartData" /> - </div> -</template> |