Merge branch...

Merge branch 'ee-9957-move-ee-differences-for-app-assets-javascripts-monitoring-components-dashboard-vue-ce' into 'master'

Remove EE differences from monitoring/dashboard.vue

Closes #9957

See merge request gitlab-org/gitlab-ee!10472

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

 <script>
-// ee-only
-import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import '~/vue_shared/mixins/is_ee';
 import Flash from '../../flash';
 import MonitoringService from '../services/monitoring_service';
 import MonitorAreaChart from './charts/area.vue';
@@ -24,9 +23,6 @@ export default {
     GlDropdownItem,
   },
 
-  // ee-only
-  mixins: [DashboardMixin],
-
   props: {
     hasMetrics: {
       type: Boolean,
@@ -91,11 +87,6 @@ export default {
       type: String,
       required: true,
     },
-    showEnvironmentDropdown: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
   data() {
     return {
@@ -131,7 +122,7 @@ export default {
     if (!this.hasMetrics) {
       this.state = 'gettingStarted';
     } else {
-      if (this.showEnvironmentDropdown) {
+      if (this.environmentsEndpoint) {
         this.servicePromises.push(
           this.service
             .getEnvironmentsData()
@@ -180,7 +171,7 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
-    <div v-if="showEnvironmentDropdown" class="environments d-flex align-items-center">
+    <div v-if="environmentsEndpoint" class="environments d-flex align-items-center">
       <strong>{{ s__('Metrics|Environment') }}</strong>
       <gl-dropdown
         class="prepend-left-10 js-environments-dropdown"
@@ -212,9 +203,8 @@ export default {
         :container-width="elWidth"
         group-id="monitor-area-chart"
       >
-        <!-- EE content -->
         <alert-widget
-          v-if="prometheusAlertsAvailable && alertsEndpoint && graphData.id"
+          v-if="isEE && prometheusAlertsAvailable && alertsEndpoint && graphData.id"
           :alerts-endpoint="alertsEndpoint"
           :label="getGraphLabel(graphData)"
           :current-alerts="getQueryAlerts(graphData)"

ee/app/assets/javascripts/monitoring/components/dashboard_mixin.js → ee/app/assets/javascripts/monitoring/components/dashboard.vue

+<script>
+import CeDashboard from '~/monitoring/components/dashboard.vue';
 import AlertWidget from './alert_widget.vue';
 
 export default {
   components: {
     AlertWidget,
   },
+  extends: CeDashboard,
   props: {
     alertsEndpoint: {
       type: String,
@@ -35,3 +38,4 @@ export default {
     },
   },
 };
+</script>

ee/app/assets/javascripts/monitoring/monitoring_bundle.js

 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import Dashboard from '~/monitoring/components/dashboard.vue';
+import Dashboard from './components/dashboard.vue';
 
 export default () => {
   const el = document.getElementById('prometheus-graphs');

ee/app/assets/javascripts/pages/projects/clusters/show/cluster_health.js

@@ -15,7 +15,6 @@ export default () => {
             showLegend: false,
             showPanels: false,
             forceSmallGraph: true,
-            showEnvironmentDropdown: false,
             currentEnvironmentName: '',
             environmentsEndpoint: '',
           },

ee/spec/javascripts/monitoring/components/dashboard_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import Dashboard from '~/monitoring/components/dashboard.vue';
+import Dashboard from 'ee/monitoring/components/dashboard.vue';
 import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint } from 'spec/monitoring/mock_data';
 import propsData from 'spec/monitoring/dashboard_spec';
@@ -17,6 +17,12 @@ describe('Dashboard', () => {
       <div class="prometheus-graphs"></div>
       <div class="layout-page"></div>
     `);
+
+    window.gon = {
+      ...window.gon,
+      ee: true,
+    };
+
     mock = new MockAdapter(axios);
     Component = localVue.extend(Dashboard);
   });

spec/javascripts/monitoring/dashboard_spec.js

@@ -33,6 +33,11 @@ describe('Dashboard', () => {
       <div class="layout-page"></div>
     `);
 
+    window.gon = {
+      ...window.gon,
+      ee: false,
+    };
+
     mock = new MockAdapter(axios);
     DashboardComponent = Vue.extend(Dashboard);
   });
@@ -160,7 +165,7 @@ describe('Dashboard', () => {
           ...propsData,
           hasMetrics: true,
           showPanels: false,
-          showEnvironmentDropdown: false,
+          environmentsEndpoint: '',
         },
       });