diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /app/assets/javascripts/analytics | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'app/assets/javascripts/analytics')
20 files changed, 256 insertions, 415 deletions
diff --git a/app/assets/javascripts/analytics/devops_report/components/usage_ping_disabled.vue b/app/assets/javascripts/analytics/devops_report/components/usage_ping_disabled.vue new file mode 100644 index 00000000000..c0ad814172d --- /dev/null +++ b/app/assets/javascripts/analytics/devops_report/components/usage_ping_disabled.vue @@ -0,0 +1,53 @@ +<script> +import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui'; + +export default { + components: { + GlEmptyState, + GlSprintf, + GlLink, + GlButton, + }, + inject: { + isAdmin: { + default: false, + }, + svgPath: { + default: '', + }, + docsLink: { + default: '', + }, + primaryButtonPath: { + default: '', + }, + }, +}; +</script> +<template> + <gl-empty-state class="js-empty-state" :title="__('Usage ping is off')" :svg-path="svgPath"> + <template #description> + <gl-sprintf + v-if="!isAdmin" + :message=" + __( + 'To view instance-level analytics, ask an admin to turn on %{docLinkStart}usage ping%{docLinkEnd}.', + ) + " + > + <template #docLink="{ content }"> + <gl-link :href="docsLink" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + <template v-else + ><p> + {{ __('Turn on usage ping to review instance-level analytics.') }} + </p> + + <gl-button category="primary" variant="success" :href="primaryButtonPath"> + {{ __('Turn on usage ping') }}</gl-button + > + </template> + </template> + </gl-empty-state> +</template> diff --git a/app/assets/javascripts/analytics/devops_report/devops_score_empty_state.js b/app/assets/javascripts/analytics/devops_report/devops_score_empty_state.js new file mode 100644 index 00000000000..0cb8d9be0e4 --- /dev/null +++ b/app/assets/javascripts/analytics/devops_report/devops_score_empty_state.js @@ -0,0 +1,27 @@ +import Vue from 'vue'; +import UserCallout from '~/user_callout'; +import UsagePingDisabled from './components/usage_ping_disabled.vue'; + +export default () => { + // eslint-disable-next-line no-new + new UserCallout(); + + const emptyStateContainer = document.getElementById('js-devops-empty-state'); + + if (!emptyStateContainer) return false; + + const { emptyStateSvgPath, enableUsagePingLink, docsLink, isAdmin } = emptyStateContainer.dataset; + + return new Vue({ + el: emptyStateContainer, + provide: { + isAdmin: Boolean(isAdmin), + svgPath: emptyStateSvgPath, + primaryButtonPath: enableUsagePingLink, + docsLink, + }, + render(h) { + return h(UsagePingDisabled); + }, + }); +}; diff --git a/app/assets/javascripts/analytics/instance_statistics/components/charts_config.js b/app/assets/javascripts/analytics/instance_statistics/components/charts_config.js deleted file mode 100644 index 6fba3c56cfe..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/components/charts_config.js +++ /dev/null @@ -1,87 +0,0 @@ -import { s__, __, sprintf } from '~/locale'; -import query from '../graphql/queries/instance_count.query.graphql'; - -const noDataMessage = s__('InstanceStatistics|No data available.'); - -export default [ - { - loadChartError: sprintf( - s__( - 'InstanceStatistics|Could not load the pipelines chart. Please refresh the page to try again.', - ), - ), - noDataMessage, - chartTitle: s__('InstanceStatistics|Pipelines'), - yAxisTitle: s__('InstanceStatistics|Items'), - xAxisTitle: s__('InstanceStatistics|Month'), - queries: [ - { - query, - title: s__('InstanceStatistics|Pipelines total'), - identifier: 'PIPELINES', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the total pipelines'), - ), - }, - { - query, - title: s__('InstanceStatistics|Pipelines succeeded'), - identifier: 'PIPELINES_SUCCEEDED', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the successful pipelines'), - ), - }, - { - query, - title: s__('InstanceStatistics|Pipelines failed'), - identifier: 'PIPELINES_FAILED', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the failed pipelines'), - ), - }, - { - query, - title: s__('InstanceStatistics|Pipelines canceled'), - identifier: 'PIPELINES_CANCELED', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the cancelled pipelines'), - ), - }, - { - query, - title: s__('InstanceStatistics|Pipelines skipped'), - identifier: 'PIPELINES_SKIPPED', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the skipped pipelines'), - ), - }, - ], - }, - { - loadChartError: sprintf( - s__( - 'InstanceStatistics|Could not load the issues and merge requests chart. Please refresh the page to try again.', - ), - ), - noDataMessage, - chartTitle: s__('InstanceStatistics|Issues & Merge Requests'), - yAxisTitle: s__('InstanceStatistics|Items'), - xAxisTitle: s__('InstanceStatistics|Month'), - queries: [ - { - query, - title: __('Issues'), - identifier: 'ISSUES', - loadError: sprintf(s__('InstanceStatistics|There was an error fetching the issues')), - }, - { - query, - title: __('Merge requests'), - identifier: 'MERGE_REQUESTS', - loadError: sprintf( - s__('InstanceStatistics|There was an error fetching the merge requests'), - ), - }, - ], - }, -]; diff --git a/app/assets/javascripts/analytics/instance_statistics/components/projects_and_groups_chart.vue b/app/assets/javascripts/analytics/instance_statistics/components/projects_and_groups_chart.vue deleted file mode 100644 index 3ffec90fb68..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/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 produce from 'immer'; -import { sortBy } from 'lodash'; -import { formatDateAsMonth } from '~/lib/utils/datetime_utility'; -import { s__, __ } from '~/locale'; -import * as Sentry from '~/sentry/wrapper'; -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__('InstanceStatistics|Total projects & groups'), - xAxisTitle: __('Month'), - loadChartError: s__( - 'InstanceStatistics|Could not load the projects and groups chart. Please refresh the page to try again.', - ), - loadProjectsDataError: s__('InstanceStatistics|There was an error while loading the projects'), - loadGroupsDataError: s__('InstanceStatistics|There was an error while loading the groups'), - noDataMessage: s__('InstanceStatistics|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__('InstanceStatistics|Total projects'), - data: this.projectChartData, - }, - { - name: s__('InstanceStatistics|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/instance_statistics/graphql/fragments/count.fragment.graphql b/app/assets/javascripts/analytics/instance_statistics/graphql/fragments/count.fragment.graphql deleted file mode 100644 index 40cef95c2e7..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/graphql/fragments/count.fragment.graphql +++ /dev/null @@ -1,4 +0,0 @@ -fragment Count on InstanceStatisticsMeasurement { - count - recordedAt -} diff --git a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/groups.query.graphql b/app/assets/javascripts/analytics/instance_statistics/graphql/queries/groups.query.graphql deleted file mode 100644 index ec56d91ffaa..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/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: instanceStatisticsMeasurements(identifier: GROUPS, first: $first, after: $after) { - nodes { - ...Count - } - pageInfo { - ...PageInfo - } - } -} diff --git a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/instance_statistics_count.query.graphql b/app/assets/javascripts/analytics/instance_statistics/graphql/queries/instance_statistics_count.query.graphql deleted file mode 100644 index f14c2658674..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/instance_statistics_count.query.graphql +++ /dev/null @@ -1,34 +0,0 @@ -#import "../fragments/count.fragment.graphql" - -query getInstanceCounts { - projects: instanceStatisticsMeasurements(identifier: PROJECTS, first: 1) { - nodes { - ...Count - } - } - groups: instanceStatisticsMeasurements(identifier: GROUPS, first: 1) { - nodes { - ...Count - } - } - users: instanceStatisticsMeasurements(identifier: USERS, first: 1) { - nodes { - ...Count - } - } - issues: instanceStatisticsMeasurements(identifier: ISSUES, first: 1) { - nodes { - ...Count - } - } - mergeRequests: instanceStatisticsMeasurements(identifier: MERGE_REQUESTS, first: 1) { - nodes { - ...Count - } - } - pipelines: instanceStatisticsMeasurements(identifier: PIPELINES, first: 1) { - nodes { - ...Count - } - } -} diff --git a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/projects.query.graphql b/app/assets/javascripts/analytics/instance_statistics/graphql/queries/projects.query.graphql deleted file mode 100644 index 0845b703435..00000000000 --- a/app/assets/javascripts/analytics/instance_statistics/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: instanceStatisticsMeasurements(identifier: PROJECTS, first: $first, after: $after) { - nodes { - ...Count - } - pageInfo { - ...PageInfo - } - } -} diff --git a/app/assets/javascripts/analytics/instance_statistics/components/app.vue b/app/assets/javascripts/analytics/usage_trends/components/app.vue index 3bf41eaa008..4c5ddd7f458 100644 --- a/app/assets/javascripts/analytics/instance_statistics/components/app.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/app.vue @@ -1,18 +1,16 @@ <script> import { TODAY, TOTAL_DAYS_TO_SHOW, START_DATE } from '../constants'; import ChartsConfig from './charts_config'; -import InstanceCounts from './instance_counts.vue'; -import InstanceStatisticsCountChart from './instance_statistics_count_chart.vue'; -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'; export default { - name: 'InstanceStatisticsApp', + name: 'UsageTrendsApp', components: { - InstanceCounts, - InstanceStatisticsCountChart, + UsageCounts, + UsageTrendsCountChart, UsersChart, - ProjectsAndGroupsChart, }, TOTAL_DAYS_TO_SHOW, START_DATE, @@ -23,18 +21,13 @@ export default { <template> <div> - <instance-counts /> + <usage-counts /> <users-chart :start-date="$options.START_DATE" :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" - /> - <instance-statistics-count-chart + <usage-trends-count-chart v-for="chartOptions in $options.configs" :key="chartOptions.chartTitle" :queries="chartOptions.queries" diff --git a/app/assets/javascripts/analytics/usage_trends/components/charts_config.js b/app/assets/javascripts/analytics/usage_trends/components/charts_config.js new file mode 100644 index 00000000000..014f823cdc4 --- /dev/null +++ b/app/assets/javascripts/analytics/usage_trends/components/charts_config.js @@ -0,0 +1,106 @@ +import { s__, __ } from '~/locale'; +import query from '../graphql/queries/usage_count.query.graphql'; + +const noDataMessage = s__('UsageTrends|No data available.'); + +export default [ + { + 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'), + yAxisTitle: s__('UsageTrends|Items'), + xAxisTitle: s__('UsageTrends|Month'), + queries: [ + { + query, + title: s__('UsageTrends|Pipelines total'), + identifier: '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: s__( + 'UsageTrends|There was an error fetching the successful pipelines. Please try again.', + ), + }, + { + query, + title: s__('UsageTrends|Pipelines failed'), + identifier: 'PIPELINES_FAILED', + loadError: s__( + 'UsageTrends|There was an error fetching the failed pipelines. Please try again.', + ), + }, + { + query, + title: s__('UsageTrends|Pipelines canceled'), + identifier: 'PIPELINES_CANCELED', + loadError: s__( + 'UsageTrends|There was an error fetching the cancelled pipelines. Please try again.', + ), + }, + { + query, + title: s__('UsageTrends|Pipelines skipped'), + identifier: 'PIPELINES_SKIPPED', + loadError: s__( + 'UsageTrends|There was an error fetching the skipped pipelines. Please 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'), + yAxisTitle: s__('UsageTrends|Items'), + xAxisTitle: s__('UsageTrends|Month'), + queries: [ + { + query, + title: __('Issues'), + identifier: 'ISSUES', + loadError: s__('UsageTrends|There was an error fetching the issues. Please try again.'), + }, + { + query, + title: __('Merge requests'), + identifier: 'MERGE_REQUESTS', + loadError: s__( + 'UsageTrends|There was an error fetching the merge requests. Please try again.', + ), + }, + ], + }, +]; diff --git a/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue index f3779ed62e9..0630cca93ae 100644 --- a/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue @@ -1,15 +1,15 @@ <script> +import * as Sentry from '@sentry/browser'; import MetricCard from '~/analytics/shared/components/metric_card.vue'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format'; +import { number } from '~/lib/utils/unit_format'; import { s__ } from '~/locale'; -import * as Sentry from '~/sentry/wrapper'; -import instanceStatisticsCountQuery from '../graphql/queries/instance_statistics_count.query.graphql'; +import usageTrendsCountQuery from '../graphql/queries/usage_trends_count.query.graphql'; const defaultPrecision = 0; export default { - name: 'InstanceCounts', + name: 'UsageCounts', components: { MetricCard, }, @@ -20,12 +20,11 @@ export default { }, apollo: { counts: { - query: instanceStatisticsCountQuery, + query: usageTrendsCountQuery, update(data) { return Object.entries(data).map(([key, obj]) => { const label = this.$options.i18n.labels[key]; - const formatter = getFormatter(SUPPORTED_FORMATS.number); - const value = obj.nodes?.length ? formatter(obj.nodes[0].count, defaultPrecision) : null; + const value = obj.nodes?.length ? number(obj.nodes[0].count, defaultPrecision) : null; return { key, @@ -42,14 +41,14 @@ export default { }, i18n: { labels: { - users: s__('InstanceStatistics|Users'), - projects: s__('InstanceStatistics|Projects'), - groups: s__('InstanceStatistics|Groups'), - issues: s__('InstanceStatistics|Issues'), - mergeRequests: s__('InstanceStatistics|Merge Requests'), - pipelines: s__('InstanceStatistics|Pipelines'), + users: s__('UsageTrends|Users'), + projects: s__('UsageTrends|Projects'), + groups: s__('UsageTrends|Groups'), + issues: s__('UsageTrends|Issues'), + mergeRequests: s__('UsageTrends|Merge Requests'), + pipelines: s__('UsageTrends|Pipelines'), }, - loadCountsError: s__('Could not load instance counts. Please refresh the page to try again.'), + loadCountsError: s__('Could not load usage counts. Please refresh the page to try again.'), }, }; </script> diff --git a/app/assets/javascripts/analytics/instance_statistics/components/instance_statistics_count_chart.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_trends_count_chart.vue index e2defe0572d..8d7761694d1 100644 --- a/app/assets/javascripts/analytics/instance_statistics/components/instance_statistics_count_chart.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/usage_trends_count_chart.vue @@ -1,21 +1,21 @@ <script> import { GlAlert } from '@gitlab/ui'; import { GlLineChart } from '@gitlab/ui/dist/charts'; +import * as Sentry from '@sentry/browser'; import { some, every } from 'lodash'; import { differenceInMonths, formatDateAsMonth, getDayDifference, } from '~/lib/utils/datetime_utility'; -import * as Sentry from '~/sentry/wrapper'; import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; import { TODAY, START_DATE } from '../constants'; import { getAverageByMonth, getEarliestDate, generateDataKeys } from '../utils'; -const QUERY_DATA_KEY = 'instanceStatisticsMeasurements'; +const QUERY_DATA_KEY = 'usageTrendsMeasurements'; export default { - name: 'InstanceStatisticsCountChart', + name: 'UsageTrendsCountChart', components: { GlLineChart, GlAlert, diff --git a/app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue b/app/assets/javascripts/analytics/usage_trends/components/users_chart.vue index 73940f028a1..09dfcddcb73 100644 --- a/app/assets/javascripts/analytics/instance_statistics/components/users_chart.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/users_chart.vue @@ -1,11 +1,11 @@ <script> import { GlAlert } from '@gitlab/ui'; import { GlAreaChart } 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 { __ } from '~/locale'; -import * as Sentry from '~/sentry/wrapper'; import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; import usersQuery from '../graphql/queries/users.query.graphql'; import { getAverageByMonth } from '../utils'; diff --git a/app/assets/javascripts/analytics/instance_statistics/constants.js b/app/assets/javascripts/analytics/usage_trends/constants.js index 846c0ef408b..846c0ef408b 100644 --- a/app/assets/javascripts/analytics/instance_statistics/constants.js +++ b/app/assets/javascripts/analytics/usage_trends/constants.js diff --git a/app/assets/javascripts/analytics/usage_trends/graphql/fragments/count.fragment.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/fragments/count.fragment.graphql new file mode 100644 index 00000000000..2bde5973600 --- /dev/null +++ b/app/assets/javascripts/analytics/usage_trends/graphql/fragments/count.fragment.graphql @@ -0,0 +1,4 @@ +fragment Count on UsageTrendsMeasurement { + count + recordedAt +} diff --git a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/instance_count.query.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/queries/usage_count.query.graphql index dd22a16cd51..2a5546efb68 100644 --- a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/instance_count.query.graphql +++ b/app/assets/javascripts/analytics/usage_trends/graphql/queries/usage_count.query.graphql @@ -2,7 +2,7 @@ #import "../fragments/count.fragment.graphql" query getCount($identifier: MeasurementIdentifier!, $first: Int, $after: String) { - instanceStatisticsMeasurements(identifier: $identifier, first: $first, after: $after) { + usageTrendsMeasurements(identifier: $identifier, first: $first, after: $after) { nodes { ...Count } diff --git a/app/assets/javascripts/analytics/usage_trends/graphql/queries/usage_trends_count.query.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/queries/usage_trends_count.query.graphql new file mode 100644 index 00000000000..8cadcfae380 --- /dev/null +++ b/app/assets/javascripts/analytics/usage_trends/graphql/queries/usage_trends_count.query.graphql @@ -0,0 +1,34 @@ +#import "../fragments/count.fragment.graphql" + +query getInstanceCounts { + projects: usageTrendsMeasurements(identifier: PROJECTS, first: 1) { + nodes { + ...Count + } + } + groups: usageTrendsMeasurements(identifier: GROUPS, first: 1) { + nodes { + ...Count + } + } + users: usageTrendsMeasurements(identifier: USERS, first: 1) { + nodes { + ...Count + } + } + issues: usageTrendsMeasurements(identifier: ISSUES, first: 1) { + nodes { + ...Count + } + } + mergeRequests: usageTrendsMeasurements(identifier: MERGE_REQUESTS, first: 1) { + nodes { + ...Count + } + } + pipelines: usageTrendsMeasurements(identifier: PIPELINES, first: 1) { + nodes { + ...Count + } + } +} diff --git a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/users.query.graphql b/app/assets/javascripts/analytics/usage_trends/graphql/queries/users.query.graphql index 6235e36eb89..7c02ac49a42 100644 --- a/app/assets/javascripts/analytics/instance_statistics/graphql/queries/users.query.graphql +++ b/app/assets/javascripts/analytics/usage_trends/graphql/queries/users.query.graphql @@ -2,7 +2,7 @@ #import "../fragments/count.fragment.graphql" query getUsersCount($first: Int, $after: String) { - users: instanceStatisticsMeasurements(identifier: USERS, first: $first, after: $after) { + users: usageTrendsMeasurements(identifier: USERS, first: $first, after: $after) { nodes { ...Count } diff --git a/app/assets/javascripts/analytics/instance_statistics/index.js b/app/assets/javascripts/analytics/usage_trends/index.js index 0d7dcf6ace8..d1880b09f15 100644 --- a/app/assets/javascripts/analytics/instance_statistics/index.js +++ b/app/assets/javascripts/analytics/usage_trends/index.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; -import InstanceStatisticsApp from './components/app.vue'; +import UsageTrendsApp from './components/app.vue'; Vue.use(VueApollo); @@ -10,7 +10,7 @@ const apolloProvider = new VueApollo({ }); export default () => { - const el = document.getElementById('js-instance-statistics-app'); + const el = document.getElementById('js-usage-trends-app'); if (!el) return false; @@ -18,7 +18,7 @@ export default () => { el, apolloProvider, render(h) { - return h(InstanceStatisticsApp); + return h(UsageTrendsApp); }, }); }; diff --git a/app/assets/javascripts/analytics/instance_statistics/utils.js b/app/assets/javascripts/analytics/usage_trends/utils.js index 396962ffad6..91907877ed6 100644 --- a/app/assets/javascripts/analytics/instance_statistics/utils.js +++ b/app/assets/javascripts/analytics/usage_trends/utils.js @@ -41,8 +41,8 @@ export function getAverageByMonth(items = [], options = {}) { } /** - * Takes an array of instance counts and returns the last item in the list - * @param {Array} arr array of instance counts in the form { count: Number, recordedAt: date String } + * Takes an array of usage counts and returns the last item in the list + * @param {Array} arr array of usage counts in the form { count: Number, recordedAt: date String } * @return {String} the 'recordedAt' value of the earliest item */ export const getEarliestDate = (arr = []) => { @@ -54,7 +54,7 @@ export const getEarliestDate = (arr = []) => { * Takes an array of queries and produces an object with the query identifier as key * and a supplied defaultValue as its value * @param {Array} queries array of chart query configs, - * see ./analytics/instance_statistics/components/charts_config.js + * see ./analytics/usage_trends/components/charts_config.js * @param {any} defaultValue value to set each identifier to * @return {Object} key value pair of the form { queryIdentifier: defaultValue } */ |