Add external dashboard link

Add settings for linking to external dashboard from
metrics dashboard

2 files changed, 83 insertions, 0 deletions

diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
new file mode 100644
index 00000000000..0a87d193b72
--- /dev/null
+++ b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
@@ -0,0 +1,57 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlLink,
+  },
+  props: {
+    externalDashboardPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    externalDashboardHelpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="settings expanded">
+    <div class="settings-header">
+      <h4 class="js-section-header">
+        {{ s__('ExternalMetrics|External Dashboard') }}
+      </h4>
+      <p class="js-section-sub-header">
+        {{
+          s__(
+            'ExternalMetrics|Add a button to the metrics dashboard linking directly to your existing external dashboards.',
+          )
+        }}
+        <gl-link :href="externalDashboardHelpPagePath">{{ __('Learn more') }}</gl-link>
+      </p>
+    </div>
+    <div class="settings-content">
+      <form>
+        <gl-form-group
+          :label="s__('ExternalMetrics|Full dashboard URL')"
+          :description="s__('ExternalMetrics|Enter the URL of the dashboard you want to link to')"
+        >
+          <gl-form-input
+            :value="externalDashboardPath"
+            placeholder="https://my-org.gitlab.io/my-dashboards"
+          />
+        </gl-form-group>
+        <gl-button variant="success">
+          {{ __('Save Changes') }}
+        </gl-button>
+      </form>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/operation_settings/index.js b/app/assets/javascripts/operation_settings/index.js
new file mode 100644
index 00000000000..1171f3ece9f
--- /dev/null
+++ b/app/assets/javascripts/operation_settings/index.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import ExternalDashboardForm from './components/external_dashboard.vue';
+
+export default () => {
+  /**
+   * This check can be removed when we remove
+   * the :grafana_dashboard_link feature flag
+   */
+  if (!gon.features.grafanaDashboardLink) {
+    return null;
+  }
+
+  const el = document.querySelector('.js-operation-settings');
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(ExternalDashboardForm, {
+        props: {
+          ...el.dataset,
+          expanded: false,
+        },
+      });
+    },
+  });
+};