Fix the environments dropdown rendering when no environments were present45068-no-longer-require-a-deploy-to-start-prometheus-monitoring

2 files changed, 22 insertions, 2 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 67338aa96c3..98182d92c2f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -149,7 +149,7 @@ export default {
           .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
         this.service
           .getEnvironmentsData()
-          .then((data) => this.store.storeEnvironmentsData(data))
+          .then(data => this.store.storeEnvironmentsData(data))
           .catch(() => Flash(s__('Metrics|There was an error getting environments information.'))),
       ])
         .then(() => {
@@ -157,6 +157,7 @@ export default {
             this.state = 'noData';
             return;
           }
+
           this.showEmptyState = false;
         })
         .then(this.resize)
@@ -195,7 +196,10 @@ export default {
             name="chevron-down"
           />
         </button>
-        <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+        <div 
+          v-if="store.environmentsData.length > 0"  
+          class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
+        >
           <ul>
             <li
               v-for="environment in store.environmentsData"
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index a3477c5f8c6..565b87de248 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -113,6 +113,22 @@ describe('Dashboard', () => {
       });
     });
 
+    it('hides the dropdown list when there is no environments', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      component.store.storeEnvironmentsData([]);
+
+      setTimeout(() => {
+        const dropdownMenuEnvironments = component.$el.querySelectorAll('.dropdown-menu ul');
+
+        expect(dropdownMenuEnvironments.length).toEqual(0);
+        done();
+      });
+    });
+
     it('renders the dropdown with a single is-active element', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),