Add threshold lines in metrics graph

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>

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 }}

package.json

@@ -27,7 +27,7 @@
     "@babel/preset-env": "^7.1.0",
     "@gitlab/csslab": "^1.8.0",
     "@gitlab/svgs": "^1.47.0",
-    "@gitlab/ui": "^1.18.0",
+    "@gitlab/ui": "^1.20.0",
     "apollo-boost": "^0.1.20",
     "apollo-client": "^2.4.5",
     "autosize": "^4.0.0",

yarn.lock

@@ -641,10 +641,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.47.0.tgz#c03dda41aefd3889cbfed95a391836106ae2ac4d"
   integrity sha512-0Bx/HxqR8xpqqaLnZiFAHIh1jTAFQPFToVZ6Wi3QyhsAwmXRAbgw1SlkRMZ7w3e6l+G71Wnw+GnI4rx1gK8JLQ==
 
-"@gitlab/ui@^1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.18.0.tgz#5cc591b2c7958e59fa7b1b443d4235e0e8f956c9"
-  integrity sha512-JqmiRSGYmK0DbGBQJBpjeRrcgjK25rCqG6QW6/GPTVLtRjbPPZYGvVg5PyA6nJUGAnwFoeApUZVML6X3OpnV1Q==
+"@gitlab/ui@^1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.20.0.tgz#50bd4b092646a2c6337f0f462779af8e702dda05"
+  integrity sha512-EJgrqon/tYCUPoOgnNNAXbrDXOEAajJwKHr4aR2R6vkJI3kVZiq66RNIe5ftGIUoNqYCDnRIkpLyo7MqzJPgcw==
   dependencies:
     babel-standalone "^6.26.0"
     bootstrap-vue "^2.0.0-rc.11"