Merge branch...

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

Remove EE differences for monitoring dashboard

See merge request gitlab-org/gitlab-ce!26574

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

@@ -2,6 +2,7 @@
 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';
@@ -21,6 +22,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
   },
+
   props: {
     hasMetrics: {
       type: Boolean,
@@ -107,9 +109,29 @@ export default {
     }
   },
   mounted() {
+    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.environmentsEndpoint) {
+        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();
       sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
       sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
@@ -125,17 +147,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';
@@ -159,7 +171,7 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
-    <div 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"
@@ -190,7 +202,17 @@ export default {
         :alert-data="getGraphAlerts(graphData.id)"
         :container-width="elWidth"
         group-id="monitor-area-chart"
+      >
+        <alert-widget
+          v-if="isEE && prometheusAlertsAvailable && 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"
         />
+      </monitor-area-chart>
     </graph-group>
   </div>
   <empty-state

locale/gitlab.pot

@@ -5088,6 +5088,9 @@ msgstr ""
 msgid "Metrics|There was an error getting environments information."
 msgstr ""
 
+msgid "Metrics|There was an error while retrieving metrics"
+msgstr ""
+
 msgid "Metrics|Unexpected deployment data response from prometheus endpoint"
 msgstr ""
 

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);
   });
@@ -152,6 +157,25 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('hides the dropdown', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          environmentsEndpoint: '',
+        },
+      });
+
+      Vue.nextTick(() => {
+        const dropdownIsActiveElement = component.$el.querySelectorAll('.environments');
+
+        expect(dropdownIsActiveElement.length).toEqual(0);
+        done();
+      });
+    });
   });
 
   describe('when the window resizes', () => {