1 files changed, 25 insertions, 0 deletions
diff --git a/app/assets/javascripts/behaviors/components/diagram_performance_warning.vue b/app/assets/javascripts/behaviors/components/diagram_performance_warning.vue
new file mode 100644
index 00000000000..31b2682b546
--- /dev/null
+++ b/app/assets/javascripts/behaviors/components/diagram_performance_warning.vue
@@ -0,0 +1,25 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    bodyText: __('Warning: Displaying this diagram might cause performance issues on this page.'),
+    buttonText: __('Display'),
+  },
+  components: {
+    GlAlert,
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    :primary-button-text="$options.i18n.buttonText"
+    variant="warning"
+    @dismiss="$emit('closeAlert')"
+    @primaryAction="$emit('showImage')"
+  >
+    {{ $options.i18n.bodyText }}
+  </gl-alert>
+</template>