Add latest changes from gitlab-org/gitlab@master

3 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue
index 324103c482f..8749f102442 100644
--- a/app/assets/javascripts/alert_management/components/alert_details.vue
+++ b/app/assets/javascripts/alert_management/components/alert_details.vue
@@ -26,6 +26,7 @@ import Tracking from '~/tracking';
 import { toggleContainerClasses } from '~/lib/utils/dom_utils';
 import SystemNote from './system_notes/system_note.vue';
 import AlertSidebar from './alert_sidebar.vue';
+import AlertMetrics from './alert_metrics.vue';
 
 const containerEl = document.querySelector('.page-with-contextual-sidebar');
 
@@ -36,6 +37,7 @@ export default {
     ),
     fullAlertDetailsTitle: s__('AlertManagement|Alert details'),
     overviewTitle: s__('AlertManagement|Overview'),
+    metricsTitle: s__('AlertManagement|Metrics'),
     reportedAt: s__('AlertManagement|Reported %{when}'),
     reportedAtWithTool: s__('AlertManagement|Reported %{when} by %{tool}'),
   },
@@ -53,6 +55,7 @@ export default {
     TimeAgoTooltip,
     AlertSidebar,
     SystemNote,
+    AlertMetrics,
   },
   inject: {
     projectPath: {
@@ -329,6 +332,9 @@ export default {
             </template>
           </gl-table>
         </gl-tab>
+        <gl-tab data-testId="metricsTab" :title="$options.i18n.metricsTitle">
+          <alert-metrics :dashboard-url="alert.metricsDashboardUrl" />
+        </gl-tab>
       </gl-tabs>
       <alert-sidebar
         :alert="alert"
diff --git a/app/assets/javascripts/alert_management/components/alert_metrics.vue b/app/assets/javascripts/alert_management/components/alert_metrics.vue
new file mode 100644
index 00000000000..c5b40edc672
--- /dev/null
+++ b/app/assets/javascripts/alert_management/components/alert_metrics.vue
@@ -0,0 +1,56 @@
+<script>
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as Sentry from '@sentry/browser';
+
+Vue.use(Vuex);
+
+export default {
+  props: {
+    dashboardUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      metricEmbedComponent: null,
+      namespace: 'alertMetrics',
+    };
+  },
+  mounted() {
+    if (this.dashboardUrl) {
+      Promise.all([
+        import('~/monitoring/components/embeds/metric_embed.vue'),
+        import('~/monitoring/stores'),
+      ])
+        .then(([{ default: MetricEmbed }, { monitoringDashboard }]) => {
+          this.$store = new Vuex.Store({
+            modules: {
+              [this.namespace]: monitoringDashboard,
+            },
+          });
+          this.metricEmbedComponent = MetricEmbed;
+        })
+        .catch(e => Sentry.captureException(e));
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="gl-py-3">
+    <div v-if="dashboardUrl" ref="metricsChart">
+      <component
+        :is="metricEmbedComponent"
+        v-if="metricEmbedComponent"
+        :dashboard-url="dashboardUrl"
+        :namespace="namespace"
+      />
+    </div>
+    <div v-else ref="emptyState">
+      {{ s__("AlertManagement|Metrics weren't available in the alerts payload.") }}
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql
index 83ce79c986b..d9e4d7505e7 100644
--- a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql
+++ b/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql
@@ -5,6 +5,7 @@ fragment AlertDetailItem on AlertManagementAlert {
   ...AlertListItem
   createdAt
   monitoringTool
+  metricsDashboardUrl
   service
   description
   updatedAt
@@ -15,4 +16,5 @@ fragment AlertDetailItem on AlertManagementAlert {
       ...AlertNote
     }
   }
+
 }