Fix broken environment selector

Add an href to the dropdown items in the environment selector, so that
clicking on them will take you to that environment's metrics dashboard.

5 files changed, 65 insertions, 10 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 56d1c38c891..973fa346a4f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -253,6 +253,7 @@ export default {
               :key="environment.id"
               :active="environment.name === currentEnvironmentName"
               active-class="is-active"
+              :href="environment.metrics_path"
               >{{ environment.name }}</gl-dropdown-item
             >
           </gl-dropdown>
diff --git a/changelogs/unreleased/63341-fix-environment-selector.yml b/changelogs/unreleased/63341-fix-environment-selector.yml
new file mode 100644
index 00000000000..6a32ae308de
--- /dev/null
+++ b/changelogs/unreleased/63341-fix-environment-selector.yml
@@ -0,0 +1,5 @@
+---
+title: Fix broken environment selector on Monitoring dashboard
+merge_request: 29754
+author:
+type: fixed
diff --git a/spec/features/projects/environments/environment_metrics_spec.rb b/spec/features/projects/environments/environment_metrics_spec.rb
index edbab14f7c1..b08ccdc2a7c 100644
--- a/spec/features/projects/environments/environment_metrics_spec.rb
+++ b/spec/features/projects/environments/environment_metrics_spec.rb
@@ -9,11 +9,11 @@ describe 'Environment > Metrics' do
   let(:build) { create(:ci_build, pipeline: pipeline) }
   let(:environment) { create(:environment, project: project) }
   let(:current_time) { Time.now.utc }
+  let!(:staging) { create(:environment, name: 'staging', project: project) }
 
   before do
     project.add_developer(user)
-    create(:deployment, environment: environment, deployable: build)
-    stub_all_prometheus_requests(environment.slug)
+    stub_any_prometheus_request
 
     sign_in(user)
     visit_environment(environment)
@@ -23,15 +23,50 @@ describe 'Environment > Metrics' do
     Timecop.freeze(current_time) { example.run }
   end
 
+  shared_examples 'has environment selector' do
+    it 'has a working environment selector', :js do
+      click_link('See metrics')
+
+      expect(page).to have_metrics_path(environment)
+      expect(page).to have_css('div.js-environments-dropdown')
+
+      within('div.js-environments-dropdown') do
+        # Click on the dropdown
+        click_on(environment.name)
+
+        # Select the staging environment
+        click_on(staging.name)
+      end
+
+      expect(page).to have_metrics_path(staging)
+
+      wait_for_requests
+    end
+  end
+
+  context 'without deployments' do
+    it_behaves_like 'has environment selector'
+  end
+
   context 'with deployments and related deployable present' do
+    before do
+      create(:deployment, environment: environment, deployable: build)
+    end
+
     it 'shows metrics' do
       click_link('See metrics')
 
       expect(page).to have_css('div#prometheus-graphs')
     end
+
+    it_behaves_like 'has environment selector'
   end
 
   def visit_environment(environment)
     visit project_environment_path(environment.project, environment)
   end
+
+  def have_metrics_path(environment)
+    have_current_path(metrics_project_environment_path(project, id: environment.id))
+  end
 end
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 6d61a84102e..cf72cce1781 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -168,14 +168,24 @@ describe('Dashboard', () => {
         singleGroupResponse,
       );
 
-      setTimeout(() => {
-        const dropdownMenuEnvironments = component.$el.querySelectorAll(
-          '.js-environments-dropdown .dropdown-item',
-        );
+      Vue.nextTick()
+        .then(() => {
+          const dropdownMenuEnvironments = component.$el.querySelectorAll(
+            '.js-environments-dropdown .dropdown-item',
+          );
 
-        expect(dropdownMenuEnvironments.length).toEqual(component.environments.length);
-        done();
-      });
+          expect(component.environments.length).toEqual(environmentData.length);
+          expect(dropdownMenuEnvironments.length).toEqual(component.environments.length);
+
+          Array.from(dropdownMenuEnvironments).forEach((value, index) => {
+            if (environmentData[index].metrics_path) {
+              expect(value).toHaveAttr('href', environmentData[index].metrics_path);
+            }
+          });
+
+          done();
+        })
+        .catch(done.fail);
     });
 
     it('hides the environments dropdown list when there is no environments', done => {
@@ -230,7 +240,7 @@ describe('Dashboard', () => {
       Vue.nextTick()
         .then(() => {
           const dropdownItems = component.$el.querySelectorAll(
-            '.js-environments-dropdown .dropdown-item[active="true"]',
+            '.js-environments-dropdown .dropdown-item.is-active',
           );
 
           expect(dropdownItems.length).toEqual(1);
diff --git a/spec/support/helpers/prometheus_helpers.rb b/spec/support/helpers/prometheus_helpers.rb
index 87f825152cf..db662836013 100644
--- a/spec/support/helpers/prometheus_helpers.rb
+++ b/spec/support/helpers/prometheus_helpers.rb
@@ -70,6 +70,10 @@ module PrometheusHelpers
     WebMock.stub_request(:get, url).to_raise(exception_type)
   end
 
+  def stub_any_prometheus_request
+    WebMock.stub_request(:any, /prometheus.example.com/)
+  end
+
   def stub_all_prometheus_requests(environment_slug, body: nil, status: 200)
     stub_prometheus_request(
       prometheus_query_with_time_url(prometheus_memory_query(environment_slug), Time.now.utc),