diff options
Diffstat (limited to 'app/assets/javascripts/analytics')
6 files changed, 119 insertions, 61 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..238081cc3c0 100644 --- a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue +++ b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue @@ -1,7 +1,9 @@ <script> import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui'; import { GlSingleStat } from '@gitlab/ui/dist/charts'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { sprintf, s__ } from '~/locale'; +import DevopsScoreCallout from './devops_score_callout.vue'; const defaultHeaderAttrs = { thClass: 'gl-bg-white!', @@ -15,14 +17,12 @@ export default { GlSingleStat, GlLink, GlEmptyState, + DevopsScoreCallout, }, inject: { devopsScoreMetrics: { default: null, }, - devopsReportDocsPath: { - default: '', - }, noDataImagePath: { default: '', }, @@ -40,6 +40,7 @@ export default { return this.devopsScoreMetrics.averageScore === undefined; }, }, + devopsReportDocsPath: helpPagePath('user/admin_area/analytics/dev_ops_report'), tableHeaderFields: [ { key: 'title', @@ -65,46 +66,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="$options.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/components/service_ping_disabled.vue b/app/assets/javascripts/analytics/devops_report/components/service_ping_disabled.vue index 7c14cf3767f..400326e41e1 100644 --- a/app/assets/javascripts/analytics/devops_report/components/service_ping_disabled.vue +++ b/app/assets/javascripts/analytics/devops_report/components/service_ping_disabled.vue @@ -1,5 +1,6 @@ <script> import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; export default { components: { @@ -15,13 +16,11 @@ export default { svgPath: { default: '', }, - docsLink: { - default: '', - }, primaryButtonPath: { default: '', }, }, + docsLink: helpPagePath('development/service_ping/index.md'), }; </script> <template> @@ -36,7 +35,7 @@ export default { " > <template #docLink="{ content }"> - <gl-link :href="docsLink" target="_blank" data-testid="docs-link">{{ content }}</gl-link> + <gl-link :href="$options.docsLink" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> <template v-else> @@ -44,12 +43,7 @@ export default { {{ s__('ServicePing|Turn on service ping to review instance-level analytics.') }} </p> - <gl-button - category="primary" - variant="success" - :href="primaryButtonPath" - data-testid="power-on-button" - > + <gl-button category="primary" variant="success" :href="primaryButtonPath"> {{ s__('ServicePing|Turn on service ping') }} </gl-button> </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..0bf98b65ed5 100644 --- a/app/assets/javascripts/analytics/devops_report/devops_score.js +++ b/app/assets/javascripts/analytics/devops_report/devops_score.js @@ -6,14 +6,14 @@ export default () => { if (!el) return false; - const { devopsScoreMetrics, devopsReportDocsPath, noDataImagePath } = el.dataset; + const { devopsScoreMetrics, noDataImagePath, devopsScoreIntroImagePath } = el.dataset; return new Vue({ el, provide: { devopsScoreMetrics: JSON.parse(devopsScoreMetrics), - devopsReportDocsPath, noDataImagePath, + devopsScoreIntroImagePath, }, render(h) { return h(DevopsScore); diff --git a/app/assets/javascripts/analytics/devops_report/devops_score_disabled_service_ping.js b/app/assets/javascripts/analytics/devops_report/devops_score_disabled_service_ping.js index 63b36f35247..eb2992422a4 100644 --- a/app/assets/javascripts/analytics/devops_report/devops_score_disabled_service_ping.js +++ b/app/assets/javascripts/analytics/devops_report/devops_score_disabled_service_ping.js @@ -11,12 +11,7 @@ export default () => { if (!emptyStateContainer) return false; - const { - isAdmin, - emptyStateSvgPath, - enableServicePingPath, - docsLink, - } = emptyStateContainer.dataset; + const { isAdmin, emptyStateSvgPath, enableServicePingPath } = emptyStateContainer.dataset; return new Vue({ el: emptyStateContainer, @@ -24,7 +19,6 @@ export default () => { isAdmin: parseBoolean(isAdmin), svgPath: emptyStateSvgPath, primaryButtonPath: enableServicePingPath, - docsLink, }, render(h) { return h(ServicePingDisabled); |