1 files changed, 45 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/pages/panel_new_page.vue b/app/assets/javascripts/monitoring/pages/panel_new_page.vue
new file mode 100644
index 00000000000..8ff6adb47ca
--- /dev/null
+++ b/app/assets/javascripts/monitoring/pages/panel_new_page.vue
@@ -0,0 +1,45 @@
+<script>
+import { mapState } from 'vuex';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { DASHBOARD_PAGE } from '../router/constants';
+import DashboardPanelBuilder from '../components/dashboard_panel_builder.vue';
+
+export default {
+  components: {
+    GlButton,
+    DashboardPanelBuilder,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  computed: {
+    ...mapState('monitoringDashboard', ['panelPreviewYml']),
+    dashboardPageLocation() {
+      return {
+        ...this.$route,
+        name: DASHBOARD_PAGE,
+      };
+    },
+  },
+  i18n: {
+    backToDashboard: s__('Metrics|Back to dashboard'),
+  },
+};
+</script>
+<template>
+  <div class="gl-mt-5">
+    <div class="gl-display-flex gl-align-items-baseline gl-mb-5">
+      <gl-button
+        v-gl-tooltip
+        icon="go-back"
+        :to="dashboardPageLocation"
+        :aria-label="$options.i18n.backToDashboard"
+        :title="$options.i18n.backToDashboard"
+        class="gl-mr-5"
+      />
+      <h1 class="gl-font-size-h1 gl-my-0">{{ s__('Metrics|Add panel') }}</h1>
+    </div>
+    <dashboard-panel-builder />
+  </div>
+</template>