3 files changed, 28 insertions, 13 deletions
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 8178821be3d..570d3b712e0 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -221,13 +221,13 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         return tmpl;
       },
       data: GfmAutoComplete.defaultLoadingData,
-      // eslint-disable-next-line no-template-curly-in-string
-      insertTpl: '${atwho-at}${id}',
+      insertTpl: GfmAutoComplete.Issues.insertTemplateFunction,
+      skipSpecialCharacterTest: true,
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(issues) {
@@ -238,6 +238,7 @@ class GfmAutoComplete {
             return {
               id: i.iid,
               title: sanitize(i.title),
+              reference: i.reference,
               search: `${i.iid} ${i.title}`,
             };
           });
@@ -287,13 +288,13 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         return tmpl;
       },
       data: GfmAutoComplete.defaultLoadingData,
-      // eslint-disable-next-line no-template-curly-in-string
-      insertTpl: '${atwho-at}${id}',
+      insertTpl: GfmAutoComplete.Issues.insertTemplateFunction,
+      skipSpecialCharacterTest: true,
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(merges) {
@@ -304,6 +305,7 @@ class GfmAutoComplete {
             return {
               id: m.iid,
               title: sanitize(m.title),
+              reference: m.reference,
               search: `${m.iid} ${m.title}`,
             };
           });
@@ -397,7 +399,7 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         return tmpl;
       },
@@ -596,8 +598,12 @@ GfmAutoComplete.Labels = {
 };
 // Issues, MergeRequests and Snippets
 GfmAutoComplete.Issues = {
-  templateFunction(id, title) {
-    return `<li><small>${id}</small> ${_.escape(title)}</li>`;
+  insertTemplateFunction(value) {
+    // eslint-disable-next-line no-template-curly-in-string
+    return value.reference || '${atwho-at}${id}';
+  },
+  templateFunction({ id, title, reference }) {
+    return `<li><small>${reference || id}</small> ${_.escape(title)}</li>`;
   },
 };
 // Milestones
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 }}