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

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>

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;
+    });
+  }
 }

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);
   }

app/views/projects/environments/metrics.html.haml

@@ -11,7 +11,7 @@
     "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'),
     "metrics-endpoint": additional_metrics_project_environment_path(@project, @environment, format: :json),
     "deployment-endpoint": project_environment_deployments_path(@project, @environment, format: :json),
-    "environments": project_environments_path(@project, format: :json),
+    "environments-endpoint": project_environments_path(@project, format: :json),
     "project-path": project_path(@project),
     "tags-path": project_tags_path(@project),
     "has-metrics": "#{@environment.has_metrics?}" } }