add dashed and dotted line styles for multiple-query graphs

app/assets/javascripts/monitoring/components/graph.vue

@@ -247,6 +247,7 @@
               :key="index"
               :generated-line-path="path.linePath"
               :generated-area-path="path.areaPath"
+              :line-style="path.lineStyle"
               :line-color="path.lineColor"
               :area-color="path.areaColor"
             />

app/assets/javascripts/monitoring/components/graph/legend.vue

@@ -92,6 +92,12 @@
         }
         return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
       },
+
+      strokeDashArray(type) {
+        if (type === 'dashed') return '6, 3';
+        if (type === 'dotted') return '3, 3';
+        return null;
+      },
     },
     mounted() {
       this.$nextTick(() => {
@@ -162,13 +168,15 @@
       v-for="(series, index) in timeSeries"
       :key="index"
       :transform="translateLegendGroup(index)">
-      <rect
-        :fill="series.areaColor"
-        :width="measurements.legends.width"
-        :height="measurements.legends.height"
-        x="20"
-        :y="graphHeight - measurements.legendOffset">
-      </rect>
+      <line
+        :stroke="series.lineColor"
+        :stroke-width="measurements.legends.height"
+        :stroke-dasharray="strokeDashArray(series.lineStyle)"
+        x1="20"
+        :x2="20 + measurements.legends.width"
+        :y1="graphHeight - measurements.legendOffset"
+        :y2="graphHeight - measurements.legendOffset">
+      </line>
       <text
         v-if="timeSeries.length > 1"
         class="legend-metric-title"

app/assets/javascripts/monitoring/components/graph/path.vue

@@ -9,6 +9,10 @@
         type: String,
         required: true,
       },
+      lineStyle: {
+        type: String,
+        required: true,
+      },
       lineColor: {
         type: String,
         required: true,
@@ -18,6 +22,13 @@
         required: true,
       },
     },
+    computed: {
+      strokeDashArray() {
+        if (this.lineStyle === 'dashed') return '3, 1';
+        if (this.lineStyle === 'dotted') return '1, 1';
+        return null;
+      },
+    },
   };
 </script>
 <template>
@@ -34,6 +45,7 @@
       :stroke="lineColor"
       fill="none"
       stroke-width="1"
+      :stroke-dasharray="strokeDashArray"
       transform="translate(-5, 20)">
     </path>
   </g>

app/assets/javascripts/monitoring/utils/measurements.js

@@ -7,7 +7,7 @@ export default {
       left: 40,
     },
     legends: {
-      width: 10,
+      width: 15,
       height: 3,
     },
     backgroundLegend: {
@@ -15,7 +15,7 @@ export default {
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 33,
+    legendOffset: 32,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -33,7 +33,7 @@ export default {
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 36,
+    legendOffset: 34,
   },
   xTicks: 8,
   yTicks: 3,