From d770171da49c6c4b09012da6faa613cb524cbea7 Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Mon, 29 Jul 2019 21:52:55 +0000
Subject: Alerts dropdown to modal - CE1

---
 app/assets/javascripts/monitoring/components/dashboard.vue  | 4 +++-
 app/assets/javascripts/monitoring/components/panel_type.vue | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 745488255ab..45543ef2cc8 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -369,7 +369,7 @@ export default {
     </div>
     <div v-if="!showEmptyState">
       <graph-group
-        v-for="groupData in groups"
+        v-for="(groupData, index) in groups"
         :key="`${groupData.group}.${groupData.priority}`"
         :name="groupData.group"
         :show-panels="showPanels"
@@ -381,6 +381,7 @@ export default {
             :key="`panel-type-${graphIndex}`"
             :graph-data="graphData"
             :dashboard-width="elWidth"
+            :index="`${index}-${graphIndex}`"
           />
         </template>
         <template v-else>
@@ -399,6 +400,7 @@ export default {
               :alerts-endpoint="alertsEndpoint"
               :relevant-queries="graphData.queries"
               :alerts-to-manage="getGraphAlerts(graphData.queries)"
+              :modal-id="`alert-modal-${index}-${graphIndex}`"
               @setAlerts="setAlerts"
             />
           </monitor-area-chart>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index d7cd2c57871..f1f02964a29 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -20,6 +20,11 @@ export default {
       type: Number,
       required: true,
     },
+    index: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     ...mapState('monitoringDashboard', ['deploymentData', 'projectPath']),
@@ -64,6 +69,7 @@ export default {
       :alerts-endpoint="alertsEndpoint"
       :relevant-queries="graphData.queries"
       :alerts-to-manage="getGraphAlerts(graphData.queries)"
+      :modal-id="`alert-modal-${index}`"
       @setAlerts="setAlerts"
     />
   </monitor-area-chart>
-- 
cgit v1.2.1