Use GitLab UI area chart

Replace the metrics dashboard graph with
GitLab UI's area chart component

3 files changed, 109 insertions, 2 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
new file mode 100644
index 00000000000..12224e36ba2
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -0,0 +1,97 @@
+<script>
+import { GlAreaChart } from '@gitlab/ui';
+import dateFormat from 'dateformat';
+
+export default {
+  components: {
+    GlAreaChart,
+  },
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
+      validator(data) {
+        return (
+          data.queries &&
+          Array.isArray(data.queries) &&
+          data.queries.filter(query => {
+            if (Array.isArray(query.result)) {
+              return (
+                query.result.filter(res => Array.isArray(res.values)).length === query.result.length
+              );
+            }
+            return false;
+          }).length === data.queries.length
+        );
+      },
+    },
+  },
+  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;
+          }),
+        );
+        return accumulator;
+      }, {});
+    },
+    chartOptions() {
+      return {
+        xAxis: {
+          name: 'Time',
+          type: 'time',
+          axisLabel: {
+            formatter: date => dateFormat(date, 'h:MMtt'),
+          },
+          nameTextStyle: {
+            padding: [18, 0, 0, 0],
+          },
+        },
+        yAxis: {
+          name: this.graphData.y_label,
+          axisLabel: {
+            formatter: value => value.toFixed(3),
+          },
+          nameTextStyle: {
+            padding: [0, 0, 36, 0],
+          },
+        },
+        legend: {
+          formatter: this.xAxisLabel,
+        },
+      };
+    },
+    xAxisLabel() {
+      return this.graphData.queries.map(query => query.label).join(', ');
+    },
+  },
+  methods: {
+    formatTooltipText(params) {
+      const [date, value] = params;
+      return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
+    },
+    onCreated(chart) {
+      this.$emit('created', chart);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="prometheus-graph">
+    <div class="prometheus-graph-header">
+      <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
+      <div class="prometheus-graph-widgets"><slot></slot></div>
+    </div>
+    <gl-area-chart
+      :data="chartData"
+      :option="chartOptions"
+      :format-tooltip-text="formatTooltipText"
+      @created="onCreated"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 218c508a608..2d9c5050c9b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -4,6 +4,7 @@ import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import MonitoringService from '../services/monitoring_service';
+import MonitorAreaChart from './charts/area.vue';
 import GraphGroup from './graph_group.vue';
 import Graph from './graph.vue';
 import EmptyState from './empty_state.vue';
@@ -12,6 +13,7 @@ import eventHub from '../event_hub';
 
 export default {
   components: {
+    MonitorAreaChart,
     Graph,
     GraphGroup,
     EmptyState,
@@ -102,6 +104,9 @@ export default {
     };
   },
   computed: {
+    graphComponent() {
+      return gon.features && gon.features.areaChart ? MonitorAreaChart : Graph;
+    },
     forceRedraw() {
       return this.elWidth;
     },
@@ -207,7 +212,8 @@ export default {
       :name="groupData.group"
       :show-panels="showPanels"
     >
-      <graph
+      <component
+        :is="graphComponent"
         v-for="(graphData, graphIndex) in groupData.metrics"
         :key="graphIndex"
         :graph-data="graphData"
@@ -220,7 +226,7 @@ export default {
       >
         <!-- EE content -->
         {{ null }}
-      </graph>
+      </component>
     </graph-group>
   </div>
   <empty-state
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index e940f382a19..a63eea0ca0e 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -11,6 +11,10 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :verify_api_request!, only: :terminal_websocket_authorize
   before_action :expire_etag_cache, only: [:index]
 
+  before_action do
+    push_frontend_feature_flag(:area_chart, project)
+  end
+
   def index
     @environments = project.environments
       .with_state(params[:scope] || :available)