1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/analytics/devops_reports/components/service_ping_disabled.vue b/app/assets/javascripts/analytics/devops_reports/components/service_ping_disabled.vue
new file mode 100644
index 00000000000..400326e41e1
--- /dev/null
+++ b/app/assets/javascripts/analytics/devops_reports/components/service_ping_disabled.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlSprintf,
+    GlLink,
+    GlButton,
+  },
+  inject: {
+    isAdmin: {
+      default: false,
+    },
+    svgPath: {
+      default: '',
+    },
+    primaryButtonPath: {
+      default: '',
+    },
+  },
+  docsLink: helpPagePath('development/service_ping/index.md'),
+};
+</script>
+<template>
+  <gl-empty-state :title="s__('ServicePing|Service ping is off')" :svg-path="svgPath">
+    <template #description>
+      <gl-sprintf
+        v-if="!isAdmin"
+        :message="
+          s__(
+            'ServicePing|To view instance-level analytics, ask an admin to turn on %{docLinkStart}service ping%{docLinkEnd}.',
+          )
+        "
+      >
+        <template #docLink="{ content }">
+          <gl-link :href="$options.docsLink" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+      <template v-else>
+        <p>
+          {{ s__('ServicePing|Turn on service ping to review instance-level analytics.') }}
+        </p>
+
+        <gl-button category="primary" variant="success" :href="primaryButtonPath">
+          {{ s__('ServicePing|Turn on service ping') }}
+        </gl-button>
+      </template>
+    </template>
+  </gl-empty-state>
+</template>