Move EE differences for `app/assets/javascripts/monitoring/components/dashboard.vue `

The file app/assets/javascripts/monitoring/components/dashboard.vue has differences between CE and EE.

Diferences

diff --git a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
index cea5c1a56ca..9e2b84d2d1d 100644
--- a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,4 +1,7 @@
 <script>
+// ee-only
+import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
+
 import _ from 'underscore';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -19,6 +22,10 @@ export default {
     EmptyState,
     Icon,
   },
+
+  // ee-only
+  mixins: [DashboardMixin],
+
   props: {
     hasMetrics: {
       type: Boolean,
@@ -93,6 +100,11 @@ export default {
       type: String,
       required: true,
     },
+    showEnvironmentDropdown: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -131,9 +143,29 @@ export default {
   },
   mounted() {
     this.resizeThrottled = _.debounce(this.resize, 100);
+    this.servicePromises = [
+      this.service
+        .getGraphsData()
+        .then(data => this.store.storeMetrics(data))
+        .catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))),
+      this.service
+        .getDeploymentData()
+        .then(data => this.store.storeDeploymentData(data))
+        .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
+    ];
     if (!this.hasMetrics) {
       this.state = 'gettingStarted';
     } else {
+      if (this.showEnvironmentDropdown) {
+        this.servicePromises.push(
+          this.service
+            .getEnvironmentsData()
+            .then(data => this.store.storeEnvironmentsData(data))
+            .catch(() =>
+              Flash(s__('Metrics|There was an error getting environments information.')),
+            ),
+        );
+      }
       this.getGraphsData();
       window.addEventListener('resize', this.resizeThrottled, false);
 
@@ -149,17 +181,7 @@ export default {
     },
     getGraphsData() {
       this.state = 'loading';
-      Promise.all([
-        this.service.getGraphsData().then(data => this.store.storeMetrics(data)),
-        this.service
-          .getDeploymentData()
-          .then(data => this.store.storeDeploymentData(data))
-          .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
-        this.service
-          .getEnvironmentsData()
-          .then(data => this.store.storeEnvironmentsData(data))
-          .catch(() => Flash(s__('Metrics|There was an error getting environments information.'))),
-      ])
+      Promise.all(this.servicePromises)
         .then(() => {
           if (this.store.groups.length < 1) {
             this.state = 'noData';
@@ -185,7 +207,7 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" :key="forceRedraw" class="prometheus-graphs prepend-top-default">
-    <div class="environments d-flex align-items-center">
+    <div v-if="showEnvironmentDropdown" class="environments d-flex align-items-center">
       {{ s__('Metrics|Environment') }}
       <div class="dropdown prepend-left-10">
         <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
@@ -230,7 +252,24 @@ export default {
         group-id="monitor-area-chart"
       >
         <!-- EE content -->
-        {{ null }}
+        <template slot="additionalSvgContent" scope="{ graphDrawData }">
+          <threshold-lines
+            v-for="(alert, alertName) in alertData[graphData.id]"
+            :key="alertName"
+            :operator="alert.operator"
+            :threshold="alert.threshold"
+            :graph-draw-data="graphDrawData"
+          />
+        </template>
+        <alert-widget
+          v-if="alertsEndpoint && graphData.id"
+          :alerts-endpoint="alertsEndpoint"
+          :label="getGraphLabel(graphData)"
+          :current-alerts="getQueryAlerts(graphData)"
+          :custom-metric-id="graphData.id"
+          :alert-data="alertData[graphData.id]"
+          @setAlerts="setAlerts"
+        />
       </component>
     </graph-group>
   </div>

What needs to be done

1. Create an empty CE counterpart of the import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
2. Use ee_else_ce to import the DashboardMixin.
3. Move all differences in script tag to the EE mixin
4. For the differences in the templates, use v-if="renderIfEE"
5. Guarantee that specs exist or are added