populate environments dropdown, add tests

5 files changed, 49 insertions, 16 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 8c4eb66755f..17a6d5bcd2a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,5 +1,7 @@
 <script>
 import _ from 'underscore';
+import { s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import MonitoringService from '../services/monitoring_service';
 import GraphGroup from './graph_group.vue';
@@ -13,6 +15,7 @@ export default {
     Graph,
     GraphGroup,
     EmptyState,
+    Icon,
   },
   props: {
     hasMetrics: {
@@ -84,6 +87,10 @@ export default {
       type: String,
       required: true,
     },
+    currentEnvironmentName: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -127,18 +134,17 @@ export default {
         this.service
           .getDeploymentData()
           .then(data => this.store.storeDeploymentData(data))
-          .catch(() => new Flash('Error getting deployment information.')),
+          .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
         this.service
           .getEnvironmentsData()
           .then((data) => this.store.storeEnvironmentsData(data))
-          .catch(() => new Flash('Error getting environments information.')),
+          .catch(() => Flash(s__('Metrics|There was an error getting environments information.'))),
       ])
         .then(() => {
           if (this.store.groups.length < 1) {
             this.state = 'noData';
             return;
           }
-          // Populate the environments dropdown
           this.showEmptyState = false;
         })
         .catch(() => {
@@ -167,22 +173,36 @@ export default {
     v-if="!showEmptyState"
     class="prometheus-graphs prepend-top-10"
   >
-    <div class="environments">
-      Environment
+    <div class="environments d-flex align-items-center">
+      {{ s__('Metrics|Environment') }}
       <div class="dropdown prepend-left-10">
-        <!--Set up the actual data-->
         <button
           class="dropdown-menu-toggle"
           data-toggle="dropdown"
           type="button"
         >
-          Production
-          <i class="fa fa-chevron-down"></i>
+          <span>
+            {{ currentEnvironmentName }}
+          </span>
+          <icon
+            name="chevron-down"
+          />
         </button>
         <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
-          <button class="dropdown-item">
-            Staging
-          </button>
+          <ul>
+            <li
+              v-for="environment in store.environmentsData"
+              :key="environment.latest.id"
+            >
+              <a
+                :href="environment.latest.metrics_path"
+                :class="{ 'is-active': environment.latest.name == currentEnvironmentName }"
+                class="dropdown-item"
+              >
+                {{ environment.latest.name }}
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 4da1de1b674..260d424378e 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -1,6 +1,7 @@
 import axios from '../../lib/utils/axios_utils';
 import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
+import { s__ } from '../../locale';
 
 const MAX_REQUESTS = 3;
 
@@ -34,7 +35,7 @@ export default class MonitoringService {
       .then(resp => resp.data)
       .then((response) => {
         if (!response || !response.data) {
-          throw new Error('Unexpected metrics data response from prometheus endpoint');
+          throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
         return response.data;
       });
@@ -48,7 +49,7 @@ export default class MonitoringService {
       .then(resp => resp.data)
       .then((response) => {
         if (!response || !response.deployments) {
-          throw new Error('Unexpected deployment data response from prometheus endpoint');
+          throw new Error(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
         }
         return response.deployments;
       });
@@ -59,7 +60,7 @@ export default class MonitoringService {
     .then(resp => resp.data)
     .then((response) => {
       if (!response || !response.environments) {
-        throw new Error('There was an error fetching the environments data, please try again');
+        throw new Error(s__('Metrics|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 d5483976fe9..748b8cb6e6e 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -24,6 +24,7 @@ export default class MonitoringStore {
   constructor() {
     this.groups = [];
     this.deploymentData = [];
+    this.environmentsData = [];
   }
 
   storeMetrics(groups = []) {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 80bf98ff33f..199039f38f7 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -224,8 +224,18 @@
 
 .prometheus-graphs {
   .environments {
-    display: flex;
-    align-items: center;
+    .dropdown-menu-toggle {
+      svg {
+        position: absolute;
+        right: 5%;
+        top: 25%;
+      }
+    }
+
+    .dropdown-menu-toggle,
+    .dropdown-menu {
+      width: 240px;
+    }
   }
 }
 
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index a3ad3eabb3b..290970a1045 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -4,6 +4,7 @@
 .prometheus-container{ class: container_class }
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
     "clusters-path": project_clusters_path(@project),
+    "current-environment-name": @environment.name,
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
     "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'),
     "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'),