1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue
new file mode 100644
index 00000000000..812c5a3fe9a
--- /dev/null
+++ b/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue
@@ -0,0 +1,48 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+  },
+  computed: {
+    ...mapState(['externalDashboard']),
+    userDashboardUrl: {
+      get() {
+        return this.externalDashboard.url;
+      },
+      set(url) {
+        this.setExternalDashboardUrl(url);
+      },
+    },
+  },
+  methods: {
+    ...mapActions(['setExternalDashboardUrl']),
+  },
+};
+</script>
+
+<template>
+  <gl-form-group
+    :label="s__('MetricsSettings|External dashboard URL')"
+    label-for="external-dashboard-url"
+  >
+    <template #description>
+      {{
+        s__(
+          'MetricsSettings|Add a button to the metrics dashboard linking directly to your existing external dashboard.',
+        )
+      }}
+    </template>
+    <!-- placeholder with a url is a false positive  -->
+    <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings -->
+    <gl-form-input
+      id="external-dashboard-url"
+      v-model="userDashboardUrl"
+      placeholder="https://my-org.gitlab.io/my-dashboards"
+    />
+    <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings -->
+  </gl-form-group>
+</template>