Add threshold lines in metrics graph

2 files changed, 13 insertions, 4 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index 12224e36ba2..e2cffe0b4b4 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -6,6 +6,7 @@ export default {
   components: {
     GlAreaChart,
   },
+  inheritAttrs: false,
   props: {
     graphData: {
       type: Object,
@@ -25,6 +26,11 @@ export default {
         );
       },
     },
+    alertData: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   computed: {
     chartData() {
@@ -74,9 +80,6 @@ export default {
       const [date, value] = params;
       return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
     },
-    onCreated(chart) {
-      this.$emit('created', chart);
-    },
   },
 };
 </script>
@@ -88,10 +91,11 @@ export default {
       <div class="prometheus-graph-widgets"><slot></slot></div>
     </div>
     <gl-area-chart
+      v-bind="$attrs"
       :data="chartData"
       :option="chartOptions"
       :format-tooltip-text="formatTooltipText"
-      @created="onCreated"
+      :thresholds="alertData"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 2d9c5050c9b..cea5c1a56ca 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -144,6 +144,9 @@ export default {
     }
   },
   methods: {
+    getGraphAlerts(graphId) {
+      return this.alertData ? this.alertData[graphId] || {} : {};
+    },
     getGraphsData() {
       this.state = 'loading';
       Promise.all([
@@ -223,6 +226,8 @@ export default {
         :tags-path="tagsPath"
         :show-legend="showLegend"
         :small-graph="forceSmallGraph"
+        :alert-data="getGraphAlerts(graphData.id)"
+        group-id="monitor-area-chart"
       >
         <!-- EE content -->
         {{ null }}