1 files changed, 46 insertions, 42 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>