From b13cd6737a2cb175c1f4501c1c5e0d01c060fa39 Mon Sep 17 00:00:00 2001 From: Reuben Pereira Date: Wed, 26 Jun 2019 14:53:55 +0000 Subject: Always display environment selector On the metrics dashboard, always display the environment selector, even if there is no data to display for that environment. This allows the user to switch to the metrics dashboard of another environment. --- .../monitoring/components/dashboard.vue | 77 +++++++++++----------- .../always-display-environment-selector.yml | 5 ++ .../environments/environment_metrics_spec.rb | 39 ++++++++++- spec/javascripts/monitoring/dashboard_spec.js | 46 ++++++++++--- spec/support/helpers/prometheus_helpers.rb | 4 ++ 5 files changed, 123 insertions(+), 48 deletions(-) create mode 100644 changelogs/unreleased/always-display-environment-selector.yml diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 0a652329dfe..973fa346a4f 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -234,7 +234,7 @@ export default { diff --git a/changelogs/unreleased/always-display-environment-selector.yml b/changelogs/unreleased/always-display-environment-selector.yml new file mode 100644 index 00000000000..7a55e8f3e5d --- /dev/null +++ b/changelogs/unreleased/always-display-environment-selector.yml @@ -0,0 +1,5 @@ +--- +title: Fix broken environment selector and always display it on monitoring dashboard +merge_request: 29705 +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 f4166987aed..cf72cce1781 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -62,16 +62,34 @@ describe('Dashboard', () => { }); describe('no metrics are available yet', () => { - it('shows a getting started empty state when no metrics are present', () => { + beforeEach(() => { component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData }, store, }); + }); + it('shows a getting started empty state when no metrics are present', () => { expect(component.$el.querySelector('.prometheus-graphs')).toBe(null); expect(component.emptyState).toEqual('gettingStarted'); }); + + it('shows the environment selector', () => { + expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy(); + }); + }); + + describe('no data found', () => { + it('shows the environment selector dropdown', () => { + component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, showEmptyState: true }, + store, + }); + + expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy(); + }); }); describe('requests information to the server', () => { @@ -150,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 => { @@ -212,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), -- cgit v1.2.1