diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-23 12:10:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-23 12:10:45 +0300 |
commit | cd40f83527ac4ed4751b4b7849f0416996589d18 (patch) | |
tree | 201a36d826fc98f14ee1a7a1dc806b32f51cac00 /app/assets/javascripts/analytics | |
parent | d5f3372f10b9fefc8cf831515152eee7ae908f69 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/analytics')
5 files changed, 47 insertions, 271 deletions
diff --git a/app/assets/javascripts/analytics/usage_trends/components/app.vue b/app/assets/javascripts/analytics/usage_trends/components/app.vue index c6436160ea2..4c5ddd7f458 100644 --- a/app/assets/javascripts/analytics/usage_trends/components/app.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/app.vue @@ -1,7 +1,6 @@ <script> import { TODAY, TOTAL_DAYS_TO_SHOW, START_DATE } from '../constants'; import ChartsConfig from './charts_config'; -import ProjectsAndGroupsChart from './projects_and_groups_chart.vue'; import UsageCounts from './usage_counts.vue'; import UsageTrendsCountChart from './usage_trends_count_chart.vue'; import UsersChart from './users_chart.vue'; @@ -12,7 +11,6 @@ export default { UsageCounts, UsageTrendsCountChart, UsersChart, - ProjectsAndGroupsChart, }, TOTAL_DAYS_TO_SHOW, START_DATE, @@ -29,11 +27,6 @@ export default { :end-date="$options.TODAY" :total-data-points="$options.TOTAL_DAYS_TO_SHOW" /> - <projects-and-groups-chart - :start-date="$options.START_DATE" - :end-date="$options.TODAY" - :total-data-points="$options.TOTAL_DAYS_TO_SHOW" - /> <usage-trends-count-chart v-for="chartOptions in $options.configs" :key="chartOptions.chartTitle" diff --git a/app/assets/javascripts/analytics/usage_trends/components/charts_config.js b/app/assets/javascripts/analytics/usage_trends/components/charts_config.js index b6b440b710f..014f823cdc4 100644 --- a/app/assets/javascripts/analytics/usage_trends/components/charts_config.js +++ b/app/assets/javascripts/analytics/usage_trends/components/charts_config.js @@ -1,12 +1,35 @@ -import { s__, __, sprintf } from '~/locale'; +import { s__, __ } from '~/locale'; import query from '../graphql/queries/usage_count.query.graphql'; const noDataMessage = s__('UsageTrends|No data available.'); export default [ { - loadChartError: sprintf( - s__('UsageTrends|Could not load the pipelines chart. Please refresh the page to try again.'), + loadChartError: s__( + 'UsageTrends|Could not load the projects and groups chart. Please refresh the page to try again.', + ), + noDataMessage, + chartTitle: s__('UsageTrends|Total projects & groups'), + yAxisTitle: s__('UsageTrends|Total projects & groups'), + xAxisTitle: s__('UsageTrends|Month'), + queries: [ + { + query, + title: s__('UsageTrends|Total projects'), + identifier: 'PROJECTS', + loadError: s__('UsageTrends|There was an error fetching the projects. Please try again.'), + }, + { + query, + title: s__('UsageTrends|Total groups'), + identifier: 'GROUPS', + loadError: s__('UsageTrends|There was an error fetching the groups. Please try again.'), + }, + ], + }, + { + loadChartError: s__( + 'UsageTrends|Could not load the pipelines chart. Please refresh the page to try again.', ), noDataMessage, chartTitle: s__('UsageTrends|Pipelines'), @@ -17,39 +40,47 @@ export default [ query, title: s__('UsageTrends|Pipelines total'), identifier: 'PIPELINES', - loadError: sprintf(s__('UsageTrends|There was an error fetching the total pipelines')), + loadError: s__( + 'UsageTrends|There was an error fetching the total pipelines. Please try again.', + ), }, { query, title: s__('UsageTrends|Pipelines succeeded'), identifier: 'PIPELINES_SUCCEEDED', - loadError: sprintf(s__('UsageTrends|There was an error fetching the successful pipelines')), + loadError: s__( + 'UsageTrends|There was an error fetching the successful pipelines. Please try again.', + ), }, { query, title: s__('UsageTrends|Pipelines failed'), identifier: 'PIPELINES_FAILED', - loadError: sprintf(s__('UsageTrends|There was an error fetching the failed pipelines')), + loadError: s__( + 'UsageTrends|There was an error fetching the failed pipelines. Please try again.', + ), }, { query, title: s__('UsageTrends|Pipelines canceled'), identifier: 'PIPELINES_CANCELED', - loadError: sprintf(s__('UsageTrends|There was an error fetching the cancelled pipelines')), + loadError: s__( + 'UsageTrends|There was an error fetching the cancelled pipelines. Please try again.', + ), }, { query, title: s__('UsageTrends|Pipelines skipped'), identifier: 'PIPELINES_SKIPPED', - loadError: sprintf(s__('UsageTrends|There was an error fetching the skipped pipelines')), + loadError: s__( + 'UsageTrends|There was an error fetching the skipped pipelines. Please try again.', + ), }, ], }, { - loadChartError: sprintf( - s__( - 'UsageTrends|Could not load the issues and merge requests chart. Please refresh the page to try again.', - ), + loadChartError: s__( + 'UsageTrends|Could not load the issues and merge requests chart. Please refresh the page to try again.', ), noDataMessage, chartTitle: s__('UsageTrends|Issues & Merge Requests'), @@ -60,13 +91,15 @@ export default [ query, title: __('Issues'), identifier: 'ISSUES', - loadError: sprintf(s__('UsageTrends|There was an error fetching the issues')), + loadError: s__('UsageTrends|There was an error fetching the issues. Please try again.'), }, { query, title: __('Merge requests'), identifier: 'MERGE_REQUESTS', - loadError: sprintf(s__('UsageTrends|There was an error fetching the merge requests')), + loadError: s__( + 'UsageTrends|There was an error fetching the merge requests. Please try again.', + ), }, ], }, diff --git a/app/assets/javascripts/analytics/usage_trends/components/projects_and_groups_chart.vue b/app/assets/javascripts/analytics/usage_trends/components/projects_and_groups_chart.vue deleted file mode 100644 index 66aa939938e..00000000000 --- a/app/assets/javascripts/analytics/usage_trends/components/projects_and_groups_chart.vue +++ /dev/null @@ -1,224 +0,0 @@ -<script> -import { GlAlert } from '@gitlab/ui'; -import { GlLineChart } from '@gitlab/ui/dist/charts'; -import * as Sentry from '@sentry/browser'; -import produce from 'immer'; -import { sortBy } from 'lodash'; -import { formatDateAsMonth } from '~/lib/utils/datetime_utility'; -import { s__, __ } from '~/locale'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import latestGroupsQuery from '../graphql/queries/groups.query.graphql'; -import latestProjectsQuery from '../graphql/queries/projects.query.graphql'; -import { getAverageByMonth } from '../utils'; - -const sortByDate = (data) => sortBy(data, (item) => new Date(item[0]).getTime()); - -const averageAndSortData = (data = [], maxDataPoints) => { - const averaged = getAverageByMonth( - data.length > maxDataPoints ? data.slice(0, maxDataPoints) : data, - { shouldRound: true }, - ); - return sortByDate(averaged); -}; - -export default { - name: 'ProjectsAndGroupsChart', - components: { GlAlert, GlLineChart, ChartSkeletonLoader }, - props: { - startDate: { - type: Date, - required: true, - }, - endDate: { - type: Date, - required: true, - }, - totalDataPoints: { - type: Number, - required: true, - }, - }, - data() { - return { - loadingError: false, - errorMessage: '', - groups: [], - projects: [], - groupsPageInfo: null, - projectsPageInfo: null, - }; - }, - apollo: { - groups: { - query: latestGroupsQuery, - variables() { - return { - first: this.totalDataPoints, - after: null, - }; - }, - update(data) { - return data.groups?.nodes || []; - }, - result({ data }) { - const { - groups: { pageInfo }, - } = data; - this.groupsPageInfo = pageInfo; - this.fetchNextPage({ - query: this.$apollo.queries.groups, - pageInfo: this.groupsPageInfo, - dataKey: 'groups', - errorMessage: this.$options.i18n.loadGroupsDataError, - }); - }, - error(error) { - this.handleError({ - message: this.$options.i18n.loadGroupsDataError, - error, - dataKey: 'groups', - }); - }, - }, - projects: { - query: latestProjectsQuery, - variables() { - return { - first: this.totalDataPoints, - after: null, - }; - }, - update(data) { - return data.projects?.nodes || []; - }, - result({ data }) { - const { - projects: { pageInfo }, - } = data; - this.projectsPageInfo = pageInfo; - this.fetchNextPage({ - query: this.$apollo.queries.projects, - pageInfo: this.projectsPageInfo, - dataKey: 'projects', - errorMessage: this.$options.i18n.loadProjectsDataError, - }); - }, - error(error) { - this.handleError({ - message: this.$options.i18n.loadProjectsDataError, - error, - dataKey: 'projects', - }); - }, - }, - }, - i18n: { - yAxisTitle: s__('UsageTrends|Total projects & groups'), - xAxisTitle: __('Month'), - loadChartError: s__( - 'UsageTrends|Could not load the projects and groups chart. Please refresh the page to try again.', - ), - loadProjectsDataError: s__('UsageTrends|There was an error while loading the projects'), - loadGroupsDataError: s__('UsageTrends|There was an error while loading the groups'), - noDataMessage: s__('UsageTrends|No data available.'), - }, - computed: { - isLoadingGroups() { - return this.$apollo.queries.groups.loading || this.groupsPageInfo?.hasNextPage; - }, - isLoadingProjects() { - return this.$apollo.queries.projects.loading || this.projectsPageInfo?.hasNextPage; - }, - isLoading() { - return this.isLoadingProjects && this.isLoadingGroups; - }, - groupChartData() { - return averageAndSortData(this.groups, this.totalDataPoints); - }, - projectChartData() { - return averageAndSortData(this.projects, this.totalDataPoints); - }, - hasNoData() { - const { projectChartData, groupChartData } = this; - return Boolean(!projectChartData.length && !groupChartData.length); - }, - options() { - return { - xAxis: { - name: this.$options.i18n.xAxisTitle, - type: 'category', - axisLabel: { - formatter: (value) => { - return formatDateAsMonth(value); - }, - }, - }, - yAxis: { - name: this.$options.i18n.yAxisTitle, - }, - }; - }, - chartData() { - return [ - { - name: s__('UsageTrends|Total projects'), - data: this.projectChartData, - }, - { - name: s__('UsageTrends|Total groups'), - data: this.groupChartData, - }, - ]; - }, - }, - methods: { - handleError({ error, message = this.$options.i18n.loadChartError, dataKey = null }) { - this.loadingError = true; - this.errorMessage = message; - if (!dataKey) { - this.projects = []; - this.groups = []; - } else { - this[dataKey] = []; - } - Sentry.captureException(error); - }, - fetchNextPage({ pageInfo, query, dataKey, errorMessage }) { - if (pageInfo?.hasNextPage) { - query - .fetchMore({ - variables: { first: this.totalDataPoints, after: pageInfo.endCursor }, - updateQuery: (previousResult, { fetchMoreResult }) => { - const results = produce(fetchMoreResult, (newData) => { - // eslint-disable-next-line no-param-reassign - newData[dataKey].nodes = [ - ...previousResult[dataKey].nodes, - ...newData[dataKey].nodes, - ]; - }); - return results; - }, - }) - .catch((error) => { - this.handleError({ error, message: errorMessage, dataKey }); - }); - } - }, - }, -}; -</script> -<template> - <div> - <h3>{{ $options.i18n.yAxisTitle }}</h3> - <chart-skeleton-loader v-if="isLoading" /> - <gl-alert v-else-if="hasNoData" variant="info" :dismissible="false" class="gl-mt-3"> - {{ $options.i18n.noDataMessage }} - </gl-alert> - <div v-else> - <gl-alert v-if="loadingError" variant="danger" :dismissible="false" class="gl-mt-3">{{ - errorMessage - }}</gl-alert> - <gl-line-chart :option="options" :include-legend-avg-max="true" :data="chartData" /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/analytics/usage_trends/graphql/queries/groups.query.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/queries/groups.query.graphql deleted file mode 100644 index b1249cc9480..00000000000 --- a/app/assets/javascripts/analytics/usage_trends/graphql/queries/groups.query.graphql +++ /dev/null @@ -1,13 +0,0 @@ -#import "~/graphql_shared/fragments/pageInfo.fragment.graphql" -#import "../fragments/count.fragment.graphql" - -query getGroupsCount($first: Int, $after: String) { - groups: usageTrendsMeasurements(identifier: GROUPS, first: $first, after: $after) { - nodes { - ...Count - } - pageInfo { - ...PageInfo - } - } -} diff --git a/app/assets/javascripts/analytics/usage_trends/graphql/queries/projects.query.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/queries/projects.query.graphql deleted file mode 100644 index 2e10b6cce3e..00000000000 --- a/app/assets/javascripts/analytics/usage_trends/graphql/queries/projects.query.graphql +++ /dev/null @@ -1,13 +0,0 @@ -#import "~/graphql_shared/fragments/pageInfo.fragment.graphql" -#import "../fragments/count.fragment.graphql" - -query getProjectsCount($first: Int, $after: String) { - projects: usageTrendsMeasurements(identifier: PROJECTS, first: $first, after: $after) { - nodes { - ...Count - } - pageInfo { - ...PageInfo - } - } -} |