diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue')
-rw-r--r-- | app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue | 32 |
1 files changed, 24 insertions, 8 deletions
diff --git a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue index 0b4fa879b03..1eb4832a2a3 100644 --- a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue @@ -1,5 +1,6 @@ <script> -import MetricCard from '~/analytics/shared/components/metric_card.vue'; +import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSingleStat } from '@gitlab/ui/dist/charts'; import createFlash from '~/flash'; import { number } from '~/lib/utils/unit_format'; import { s__ } from '~/locale'; @@ -10,7 +11,8 @@ const defaultPrecision = 0; export default { name: 'UsageCounts', components: { - MetricCard, + GlSkeletonLoading, + GlSingleStat, }, data() { return { @@ -56,10 +58,24 @@ export default { </script> <template> - <metric-card - :title="__('Usage Trends')" - :metrics="counts" - :is-loading="$apollo.queries.counts.loading" - class="gl-mt-4" - /> + <div> + <h2> + {{ __('Usage Trends') }} + </h2> + <div + class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start" + > + <gl-skeleton-loading v-if="$apollo.queries.counts.loading" /> + <template v-else> + <gl-single-stat + v-for="count in counts" + :key="count.key" + class="gl-pr-9 gl-my-4 gl-md-mt-0 gl-md-mb-0" + :value="`${count.value}`" + :title="count.label" + :should-animate="true" + /> + </template> + </div> + </div> </template> |