Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

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 }
  */