diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js index 455a8819549..385085c03e2 100644 --- a/app/assets/javascripts/environments/components/environment_actions.js +++ b/app/assets/javascripts/environments/components/environment_actions.js @@ -25,6 +25,12 @@ export default { }; }, + computed: { + title() { + return 'Deploy to...'; + }, + }, + methods: { onClickAction(endpoint) { this.isLoading = true; @@ -44,8 +50,11 @@ export default { template: `
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js index 66a71faa02f..092a50a0d6f 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.js +++ b/app/assets/javascripts/environments/components/environment_terminal_button.js @@ -14,12 +14,22 @@ export default { }, data() { - return { terminalIconSvg }; + return { + terminalIconSvg, + }; + }, + + computed: { + title() { + return 'Terminal'; + }, }, template: ` - ${terminalIconSvg} diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 25be7f408d0..3d91e0b22d8 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -26,7 +26,7 @@ .table.ci-table { .environments-actions { - min-width: 200px; + min-width: 300px; } .environments-commit, @@ -222,3 +222,12 @@ stroke: $black; stroke-width: 1; } + +.environments-actions { + .external-url, + .monitoring-url, + .terminal-button, + .stop-env-link { + width: 38px; + } +} diff --git a/app/serializers/environment_entity.rb b/app/serializers/environment_entity.rb index 4c017960628..4ff15a78115 100644 --- a/app/serializers/environment_entity.rb +++ b/app/serializers/environment_entity.rb @@ -9,6 +9,13 @@ class EnvironmentEntity < Grape::Entity expose :last_deployment, using: DeploymentEntity expose :stop_action? + expose :metrics_path, if: -> (environment, _) { environment.has_metrics? } do |environment| + metrics_namespace_project_environment_path( + environment.project.namespace, + environment.project, + environment) + end + expose :environment_path do |environment| namespace_project_environment_path( environment.project.namespace, diff --git a/changelogs/unreleased/29341-add-metrics-button-env-overview.yml b/changelogs/unreleased/29341-add-metrics-button-env-overview.yml new file mode 100644 index 00000000000..16b69235dff --- /dev/null +++ b/changelogs/unreleased/29341-add-metrics-button-env-overview.yml @@ -0,0 +1,4 @@ +--- +title: Add metrics button to environments overview page +merge_request: 10234 +author: diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js index 85b73f1d4e2..13840b42bd6 100644 --- a/spec/javascripts/environments/environment_actions_spec.js +++ b/spec/javascripts/environments/environment_actions_spec.js @@ -32,7 +32,12 @@ describe('Actions Component', () => { }).$mount(); }); - it('should render a dropdown with the provided actions', () => { + it('should render a dropdown button with icon and title attribute', () => { + expect(component.$el.querySelector('.fa-caret-down')).toBeDefined(); + expect(component.$el.querySelector('.dropdown-new').getAttribute('title')).toEqual('Deploy to...'); + }); + + it('should render a dropdown with the provided list of actions', () => { expect( component.$el.querySelectorAll('.dropdown-menu li').length, ).toEqual(actionsMock.length); diff --git a/spec/javascripts/environments/environment_monitoring_spec.js b/spec/javascripts/environments/environment_monitoring_spec.js new file mode 100644 index 00000000000..fc451cce641 --- /dev/null +++ b/spec/javascripts/environments/environment_monitoring_spec.js @@ -0,0 +1,23 @@ +import Vue from 'vue'; +import monitoringComp from '~/environments/components/environment_monitoring'; + +describe('Monitoring Component', () => { + let MonitoringComponent; + + beforeEach(() => { + MonitoringComponent = Vue.extend(monitoringComp); + }); + + it('should render a link to environment monitoring page', () => { + const monitoringUrl = 'https://gitlab.com'; + const component = new MonitoringComponent({ + propsData: { + monitoringUrl, + }, + }).$mount(); + + expect(component.$el.getAttribute('href')).toEqual(monitoringUrl); + expect(component.$el.querySelector('.fa-area-chart')).toBeDefined(); + expect(component.$el.getAttribute('title')).toEqual('Monitoring'); + }); +}); diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js index 8f79b88f3df..01055e3f255 100644 --- a/spec/javascripts/environments/environment_stop_spec.js +++ b/spec/javascripts/environments/environment_stop_spec.js @@ -24,7 +24,7 @@ describe('Stop Component', () => { it('should render a button to stop the environment', () => { expect(component.$el.tagName).toEqual('BUTTON'); - expect(component.$el.getAttribute('title')).toEqual('Stop Environment'); + expect(component.$el.getAttribute('title')).toEqual('Stop'); }); it('should call the service when an action is clicked', () => { diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js index b07aa4e1745..be2289edc2b 100644 --- a/spec/javascripts/environments/environment_terminal_button_spec.js +++ b/spec/javascripts/environments/environment_terminal_button_spec.js @@ -18,7 +18,7 @@ describe('Stop Component', () => { it('should render a link to open a web terminal with the provided path', () => { expect(component.$el.tagName).toEqual('A'); - expect(component.$el.getAttribute('title')).toEqual('Open web terminal'); + expect(component.$el.getAttribute('title')).toEqual('Terminal'); expect(component.$el.getAttribute('href')).toEqual(terminalPath); }); }); diff --git a/spec/serializers/environment_entity_spec.rb b/spec/serializers/environment_entity_spec.rb index 57728ce3181..979d9921941 100644 --- a/spec/serializers/environment_entity_spec.rb +++ b/spec/serializers/environment_entity_spec.rb @@ -15,4 +15,24 @@ describe EnvironmentEntity do it 'exposes core elements of environment' do expect(subject).to include(:id, :name, :state, :environment_path) end + + context 'metrics disabled' do + before do + allow(environment).to receive(:has_metrics?).and_return(false) + end + + it "doesn't expose metrics path" do + expect(subject).not_to include(:metrics_path) + end + end + + context 'metrics enabled' do + before do + allow(environment).to receive(:has_metrics?).and_return(true) + end + + it 'exposes metrics path' do + expect(subject).to include(:metrics_path) + end + end end