diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-06 15:10:15 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-06 15:10:15 +0300 |
commit | 14b5bf2629cf6cd77fe9bb6108d4a6dc0963f6c1 (patch) | |
tree | 90544438a276b7cd3c9b24ab92f46927ef768185 /app/assets/javascripts/analytics | |
parent | ff490fb7dfd0f4fedbd45b9079fcfa13ade3144c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/analytics')
4 files changed, 117 insertions, 40 deletions
diff --git a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue index 1a3289ffb75..be38b32c119 100644 --- a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue +++ b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue @@ -2,6 +2,7 @@ import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui'; import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { sprintf, s__ } from '~/locale'; +import DevopsScoreCallout from './devops_score_callout.vue'; const defaultHeaderAttrs = { thClass: 'gl-bg-white!', @@ -15,6 +16,7 @@ export default { GlSingleStat, GlLink, GlEmptyState, + DevopsScoreCallout, }, inject: { devopsScoreMetrics: { @@ -65,46 +67,49 @@ export default { }; </script> <template> - <gl-empty-state - v-if="isEmpty" - :title="__('Data is still calculating...')" - :svg-path="noDataImagePath" - > - <template #description> - <p class="gl-mb-0">{{ __('It may be several days before you see feature usage data.') }}</p> - <gl-link :href="devopsReportDocsPath">{{ - __('See example DevOps Score page in our documentation.') - }}</gl-link> - </template> - </gl-empty-state> - <div v-else data-testid="devops-score-app"> - <div class="gl-text-gray-400 gl-my-4" data-testid="devops-score-note-text"> - {{ titleHelperText }} - </div> - <gl-single-stat - unit="%" - size="sm" - :title="s__('DevopsReport|Your score')" - :should-animate="true" - :value="devopsScoreMetrics.averageScore.value" - :meta-icon="devopsScoreMetrics.averageScore.scoreLevel.icon" - :meta-text="devopsScoreMetrics.averageScore.scoreLevel.label" - :variant="devopsScoreMetrics.averageScore.scoreLevel.variant" - /> - <gl-table - :fields="$options.tableHeaderFields" - :items="devopsScoreMetrics.cards" - thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100" - stacked="sm" + <div data-testid="devops-score-container"> + <devops-score-callout /> + <gl-empty-state + v-if="isEmpty" + :title="__('Data is still calculating...')" + :svg-path="noDataImagePath" > - <template #cell(usage)="{ item }"> - <div data-testid="usageCol"> - <span>{{ item.usage }}</span> - <gl-badge :variant="item.scoreLevel.variant" size="sm" class="gl-ml-1">{{ - item.scoreLevel.label - }}</gl-badge> - </div> + <template #description> + <p class="gl-mb-0">{{ __('It may be several days before you see feature usage data.') }}</p> + <gl-link :href="devopsReportDocsPath">{{ + __('See example DevOps Score page in our documentation.') + }}</gl-link> </template> - </gl-table> + </gl-empty-state> + <div v-else data-testid="devops-score-app"> + <div class="gl-text-gray-400 gl-my-4" data-testid="devops-score-note-text"> + {{ titleHelperText }} + </div> + <gl-single-stat + unit="%" + size="sm" + :title="s__('DevopsReport|Your score')" + :should-animate="true" + :value="devopsScoreMetrics.averageScore.value" + :meta-icon="devopsScoreMetrics.averageScore.scoreLevel.icon" + :meta-text="devopsScoreMetrics.averageScore.scoreLevel.label" + :variant="devopsScoreMetrics.averageScore.scoreLevel.variant" + /> + <gl-table + :fields="$options.tableHeaderFields" + :items="devopsScoreMetrics.cards" + thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100" + stacked="sm" + > + <template #cell(usage)="{ item }"> + <div data-testid="usageCol"> + <span>{{ item.usage }}</span> + <gl-badge :variant="item.scoreLevel.variant" size="sm" class="gl-ml-1">{{ + item.scoreLevel.label + }}</gl-badge> + </div> + </template> + </gl-table> + </div> </div> </template> diff --git a/app/assets/javascripts/analytics/devops_report/components/devops_score_callout.vue b/app/assets/javascripts/analytics/devops_report/components/devops_score_callout.vue new file mode 100644 index 00000000000..e594b4e360a --- /dev/null +++ b/app/assets/javascripts/analytics/devops_report/components/devops_score_callout.vue @@ -0,0 +1,55 @@ +<script> +import { GlBanner } from '@gitlab/ui'; +import { parseBoolean, getCookie, setCookie } from '~/lib/utils/common_utils'; +import { + INTRO_COOKIE_KEY, + INTRO_BANNER_TITLE, + INTRO_BANNER_BODY, + INTRO_BANNER_ACTION_TEXT, +} from '../constants'; + +export default { + name: 'DevopsScoreCallout', + components: { + GlBanner, + }, + inject: { + devopsReportDocsPath: { + default: '', + }, + devopsScoreIntroImagePath: { + default: '', + }, + }, + data() { + return { + bannerDismissed: parseBoolean(getCookie(INTRO_COOKIE_KEY)), + }; + }, + i18n: { + title: INTRO_BANNER_TITLE, + body: INTRO_BANNER_BODY, + action: INTRO_BANNER_ACTION_TEXT, + }, + methods: { + dismissBanner() { + setCookie(INTRO_COOKIE_KEY, 'true'); + this.bannerDismissed = true; + }, + }, +}; +</script> +<template> + <gl-banner + v-if="!bannerDismissed" + class="gl-mt-3" + variant="introduction" + :title="$options.i18n.title" + :button-text="$options.i18n.action" + :button-link="devopsReportDocsPath" + :svg-path="devopsScoreIntroImagePath" + @close="dismissBanner" + > + <p>{{ $options.i18n.body }}</p> + </gl-banner> +</template> diff --git a/app/assets/javascripts/analytics/devops_report/constants.js b/app/assets/javascripts/analytics/devops_report/constants.js new file mode 100644 index 00000000000..b395d7eb464 --- /dev/null +++ b/app/assets/javascripts/analytics/devops_report/constants.js @@ -0,0 +1,11 @@ +import { __ } from '~/locale'; + +export const INTRO_COOKIE_KEY = 'dev_ops_report_intro_callout_dismissed'; + +export const INTRO_BANNER_TITLE = __('Introducing Your DevOps Report'); + +export const INTRO_BANNER_BODY = __( + 'Your DevOps Report gives an overview of how you are using GitLab from a feature perspective. Use it to view how you compare with other organizations.', +); + +export const INTRO_BANNER_ACTION_TEXT = __('Read more'); diff --git a/app/assets/javascripts/analytics/devops_report/devops_score.js b/app/assets/javascripts/analytics/devops_report/devops_score.js index 18f7cf0c3ab..20e9fc776bc 100644 --- a/app/assets/javascripts/analytics/devops_report/devops_score.js +++ b/app/assets/javascripts/analytics/devops_report/devops_score.js @@ -6,7 +6,12 @@ export default () => { if (!el) return false; - const { devopsScoreMetrics, devopsReportDocsPath, noDataImagePath } = el.dataset; + const { + devopsScoreMetrics, + devopsReportDocsPath, + noDataImagePath, + devopsScoreIntroImagePath, + } = el.dataset; return new Vue({ el, @@ -14,6 +19,7 @@ export default () => { devopsScoreMetrics: JSON.parse(devopsScoreMetrics), devopsReportDocsPath, noDataImagePath, + devopsScoreIntroImagePath, }, render(h) { return h(DevopsScore); |