Add environments endpoint, also added store and service capabilities for said endpoint

3 files changed, 29 insertions, 6 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index d8416cdb12e..8c4eb66755f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -80,6 +80,10 @@ export default {
       type: String,
       required: true,
     },
+    environmentsEndpoint: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -96,6 +100,7 @@ export default {
     this.service = new MonitoringService({
       metricsEndpoint: this.metricsEndpoint,
       deploymentEndpoint: this.deploymentEndpoint,
+      environmentsEndpoint: this.environmentsEndpoint,
     });
     eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
     eventHub.$on('hoverChanged', this.hoverChanged);
@@ -123,12 +128,17 @@ export default {
           .getDeploymentData()
           .then(data => this.store.storeDeploymentData(data))
           .catch(() => new Flash('Error getting deployment information.')),
+        this.service
+          .getEnvironmentsData()
+          .then((data) => this.store.storeEnvironmentsData(data))
+          .catch(() => new Flash('Error getting environments information.')),
       ])
         .then(() => {
           if (this.store.groups.length < 1) {
             this.state = 'noData';
             return;
           }
+          // Populate the environments dropdown
           this.showEmptyState = false;
         })
         .catch(() => {
@@ -170,12 +180,9 @@ export default {
           <i class="fa fa-chevron-down"></i>
         </button>
         <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
-          <a
-            href="#"
-            class="dropdown-item"
-          >
+          <button class="dropdown-item">
             Staging
-          </a>
+          </button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 6fcca36d2fa..4da1de1b674 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -23,9 +23,10 @@ function backOffRequest(makeRequestCallback) {
 }
 
 export default class MonitoringService {
-  constructor({ metricsEndpoint, deploymentEndpoint }) {
+  constructor({ metricsEndpoint, deploymentEndpoint, environmentsEndpoint }) {
     this.metricsEndpoint = metricsEndpoint;
     this.deploymentEndpoint = deploymentEndpoint;
+    this.environmentsEndpoint = environmentsEndpoint;
   }
 
   getGraphsData() {
@@ -52,4 +53,15 @@ export default class MonitoringService {
         return response.deployments;
       });
   }
+
+  getEnvironmentsData() {
+    return axios.get(this.environmentsEndpoint)
+    .then(resp => resp.data)
+    .then((response) => {
+      if (!response || !response.environments) {
+        throw new Error('There was an error fetching the environments data, please try again');
+      }
+      return response.environments;
+    });
+  }
 }
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 535c415cd6d..d5483976fe9 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -37,6 +37,10 @@ export default class MonitoringStore {
     this.deploymentData = deploymentData;
   }
 
+  storeEnvironmentsData(environmentsData = []) {
+    this.environmentsData = environmentsData;
+  }
+
   getMetricsCount() {
     return this.groups.reduce((count, group) => count + group.metrics.length, 0);
   }