populate environments dropdown, add tests

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

 <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>

app/assets/javascripts/monitoring/services/monitoring_service.js

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

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 = []) {

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

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'),

changelogs/unreleased/45738-add-environment-drop-down-to-metrics-dashboard.yml

+---
+title: Add environment dropdown for the metrics page
+merge_request: 19833
+author:
+type: changed

spec/javascripts/monitoring/dashboard_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import axios from '~/lib/utils/axios_utils';
-import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
+import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
 describe('Dashboard', () => {
   let DashboardComponent;
@@ -20,6 +20,8 @@ describe('Dashboard', () => {
     emptyLoadingSvgPath: '/path/to/loading.svg',
     emptyNoDataSvgPath: '/path/to/no-data.svg',
     emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+    environmentsEndpoint: '/root/hello-prometheus/environments/35',
+    currentEnvironmentName: 'production',
   };
   beforeEach(() => {
@@ -50,7 +52,7 @@ describe('Dashboard', () => {
       mock.restore();
     });
-    it('shows up a loading state', (done) => {
+    it('shows up a loading state', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true },
@@ -62,7 +64,7 @@ describe('Dashboard', () => {
       });
     });
-    it('hides the legend when showLegend is false', (done) => {
+    it('hides the legend when showLegend is false', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showLegend: false },
@@ -76,7 +78,7 @@ describe('Dashboard', () => {
       });
     });
-    it('hides the group panels when showPanels is false', (done) => {
+    it('hides the group panels when showPanels is false', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
@@ -89,5 +91,40 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('renders the dropdown with a number of environments', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      component.store.storeEnvironmentsData(environmentData);
+
+      setTimeout(() => {
+        const dropdownMenuEnvironments = component.$el.querySelectorAll('.dropdown-menu ul li a');
+        expect(dropdownMenuEnvironments.length).toEqual(component.store.environmentsData.length);
+        done();
+      });
+    });
+
+    it('renders the dropdown with a single is-active element', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      component.store.storeEnvironmentsData(environmentData);
+
+      setTimeout(() => {
+        const dropdownIsActiveElement = component.$el.querySelectorAll(
+          '.dropdown-menu ul li a.is-active',
+        );
+        expect(dropdownIsActiveElement.length).toEqual(1);
+        expect(dropdownIsActiveElement[0].textContent.trim()).toEqual(
+          component.currentEnvironmentName,
+        );
+        done();
+      });
+    });
   });
 });

spec/javascripts/monitoring/mock_data.js

@@ -6542,3 +6542,44 @@ export function convertDatesMultipleSeries(multipleSeries) {
   });
   return convertedMultiple;
 }
+
+export const environmentData = [
+  {
+    name: 'production',
+    size: 1,
+    latest: {
+      id: 34,
+      name: 'production',
+      state: 'available',
+      external_url: 'http://root-autodevops-deploy.my-fake-domain.com',
+      environment_type: null,
+      stop_action: false,
+      metrics_path: '/root/hello-prometheus/environments/34/metrics',
+      environment_path: '/root/hello-prometheus/environments/34',
+      stop_path: '/root/hello-prometheus/environments/34/stop',
+      terminal_path: '/root/hello-prometheus/environments/34/terminal',
+      folder_path: '/root/hello-prometheus/environments/folders/production',
+      created_at: '2018-06-29T16:53:38.301Z',
+      updated_at: '2018-06-29T16:57:09.825Z',
+    },
+  },
+  {
+    name: 'review',
+    size: 1,
+    latest: {
+      id: 35,
+      name: 'review/noop-branch',
+      state: 'available',
+      external_url: 'http://root-autodevops-deploy-review-noop-branc-die93w.my-fake-domain.com',
+      environment_type: 'review',
+      stop_action: true,
+      metrics_path: '/root/hello-prometheus/environments/35/metrics',
+      environment_path: '/root/hello-prometheus/environments/35',
+      stop_path: '/root/hello-prometheus/environments/35/stop',
+      terminal_path: '/root/hello-prometheus/environments/35/terminal',
+      folder_path: '/root/hello-prometheus/environments/folders/review',
+      created_at: '2018-07-03T18:39:41.702Z',
+      updated_at: '2018-07-03T18:44:54.010Z',
+    },
+  },
+];