Use ECharts for metrics dashboard

Update metrics dashboard to support GitLab UI area chart changes

3 files changed, 17 insertions, 26 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index e2cffe0b4b4..5ca561259b6 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -35,13 +35,7 @@ export default {
   computed: {
     chartData() {
       return this.graphData.queries.reduce((accumulator, query) => {
-        const xLabel = `${query.unit}`;
-        accumulator[xLabel] = {};
-        query.result.forEach(res =>
-          res.values.forEach(v => {
-            accumulator[xLabel][v.time.toISOString()] = v.value;
-          }),
-        );
+        accumulator[query.unit] = query.result.reduce((acc, res) => acc.concat(res.values), []);
         return accumulator;
       }, {});
     },
@@ -51,14 +45,17 @@ export default {
           name: 'Time',
           type: 'time',
           axisLabel: {
-            formatter: date => dateFormat(date, 'h:MMtt'),
+            formatter: date => dateFormat(date, 'h:MM TT'),
+          },
+          axisPointer: {
+            snap: true,
           },
           nameTextStyle: {
             padding: [18, 0, 0, 0],
           },
         },
         yAxis: {
-          name: this.graphData.y_label,
+          name: this.yAxisLabel,
           axisLabel: {
             formatter: value => value.toFixed(3),
           },
@@ -74,6 +71,10 @@ export default {
     xAxisLabel() {
       return this.graphData.queries.map(query => query.label).join(', ');
     },
+    yAxisLabel() {
+      const [query] = this.graphData.queries;
+      return `${this.graphData.y_label} (${query.unit})`;
+    },
   },
   methods: {
     formatTooltipText(params) {
@@ -85,7 +86,7 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-graph">
+  <div class="prometheus-graph col-12 col-lg-6">
     <div class="prometheus-graph-header">
       <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
       <div class="prometheus-graph-widgets"><slot></slot></div>
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 96ecc5ab8a8..70635059bd9 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -13,7 +13,7 @@ function checkQueryEmptyData(query) {
     result: query.result.filter(timeSeries => {
       const newTimeSeries = timeSeries;
       const hasValue = series =>
-        !Number.isNaN(series.value) && (series.value !== null || series.value !== undefined);
+        !Number.isNaN(series[1]) && (series[1] !== null || series[1] !== undefined);
       const hasNonNullValue = timeSeries.values.find(hasValue);
 
       newTimeSeries.values = hasNonNullValue ? newTimeSeries.values : [];
@@ -33,10 +33,10 @@ function normalizeMetrics(metrics) {
       ...query,
       result: query.result.map(result => ({
         ...result,
-        values: result.values.map(([timestamp, value]) => ({
-          time: new Date(timestamp * 1000),
-          value: Number(value),
-        })),
+        values: result.values.map(([timestamp, value]) => [
+          new Date(timestamp * 1000).toISOString(),
+          Number(value),
+        ]),
       })),
     }));
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index b6abb792709..61ecf133b02 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -240,18 +240,7 @@
 }
 
 .prometheus-graph {
-  flex: 1 0 auto;
-  min-width: 450px;
-  max-width: 100%;
   padding: $gl-padding / 2;
-
-  h5 {
-    font-size: 16px;
-  }
-
-  @include media-breakpoint-down(sm) {
-    min-width: 100%;
-  }
 }
 
 .prometheus-graph-header {
@@ -261,6 +250,7 @@
   margin-bottom: $gl-padding-8;
 
   h5 {
+    font-size: $gl-font-size-large;
     margin: 0;
   }
 }