Resolve "Environments dropdown is showing on the cluster health page"

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

@@ -98,6 +98,11 @@ export default {
       type: String,
       required: true,
     },
+    showEnvironmentDropdown: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -126,9 +131,25 @@ export default {
   },
   mounted() {
     this.resizeThrottled = _.throttle(this.resize, 600);
+    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);
     }
@@ -136,17 +157,7 @@ export default {
   methods: {
     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';
@@ -180,7 +191,10 @@ export default {
     v-if="!showEmptyState"
     class="prometheus-graphs prepend-top-10"
   >
-    <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

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

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

ee/changelogs/unreleased/6919-environments-dropdown-is-showing-on-the-cluster-health-page.yml

+---
+title: Resolve Environments dropdown is showing on the cluster health page
+merge_request: 6528
+author:
+type: fixed

locale/gitlab.pot

@@ -4107,6 +4107,9 @@ msgstr ""
 msgid "Metrics|There was an error getting environments information."
 msgstr ""
 
+msgid "Metrics|There was an error while retrieving metrics"
+msgstr ""
+
 msgid "Metrics|Type"
 msgstr ""
 

spec/javascripts/monitoring/dashboard_spec.js

@@ -126,5 +126,23 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('hides the dropdown', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showEnvironmentDropdown: false,
+        },
+      });
+
+      Vue.nextTick(() => {
+        const dropdownIsActiveElement = component.$el.querySelectorAll('.environments');
+        expect(dropdownIsActiveElement.length).toEqual(0);
+        done();
+      });
+    });
   });
 });