GitLab steht Mittwoch, den 23. September, zwischen 10:00 und 12:00 Uhr aufgrund von Wartungsarbeiten nicht zur Verfügung.

Commit 9a0f96f9 authored by Kushal Pandya's avatar Kushal Pandya Committed by Filipa Lacerda

Add metrics button to Environment Overview page

parent 75fe1277
......@@ -25,6 +25,12 @@ export default {
};
},
computed: {
title() {
return 'Deploy to...';
},
},
methods: {
onClickAction(endpoint) {
this.isLoading = true;
......@@ -44,8 +50,11 @@ export default {
template: `
<div class="btn-group" role="group">
<button
class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
data-container="body"
data-toggle="dropdown"
:title="title"
:aria-label="title"
:disabled="isLoading">
<span>
<span v-html="playIconSvg"></span>
......
......@@ -9,13 +9,21 @@ export default {
},
},
computed: {
title() {
return 'Open';
},
},
template: `
<a
class="btn external_url"
class="btn external-url has-tooltip"
data-container="body"
:href="externalUrl"
target="_blank"
rel="noopener noreferrer"
title="Environment external URL">
rel="noopener noreferrer nofollow"
:title="title"
:aria-label="title">
<i class="fa fa-external-link" aria-hidden="true"></i>
</a>
`,
......
......@@ -5,6 +5,7 @@ import ExternalUrlComponent from './environment_external_url';
import StopComponent from './environment_stop';
import RollbackComponent from './environment_rollback';
import TerminalButtonComponent from './environment_terminal_button';
import MonitoringButtonComponent from './environment_monitoring';
import CommitComponent from '../../vue_shared/components/commit';
/**
......@@ -22,6 +23,7 @@ export default {
'stop-component': StopComponent,
'rollback-component': RollbackComponent,
'terminal-button-component': TerminalButtonComponent,
'monitoring-button-component': MonitoringButtonComponent,
},
props: {
......@@ -392,6 +394,14 @@ export default {
return '';
},
monitoringUrl() {
if (this.model && this.model.metrics_path) {
return this.model.metrics_path;
}
return '';
},
/**
* Constructs folder URL based on the current location and the folder id.
*
......@@ -496,13 +506,16 @@ export default {
<external-url-component v-if="externalURL && canReadEnvironment"
:external-url="externalURL"/>
<stop-component v-if="hasStopAction && canCreateDeployment"
:stop-url="model.stop_path"
:service="service"/>
<monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
:monitoring-url="monitoringUrl"/>
<terminal-button-component v-if="model && model.terminal_path"
:terminal-path="model.terminal_path"/>
<stop-component v-if="hasStopAction && canCreateDeployment"
:stop-url="model.stop_path"
:service="service"/>
<rollback-component v-if="canRetry && canCreateDeployment"
:is-last-deployment="isLastDeployment"
:retry-url="retryUrl"
......
/**
* Renders the Monitoring (Metrics) link in environments table.
*/
export default {
props: {
monitoringUrl: {
type: String,
default: '',
required: true,
},
},
computed: {
title() {
return 'Monitoring';
},
},
template: `
<a
class="btn monitoring-url has-tooltip"
data-container="body"
:href="monitoringUrl"
target="_blank"
rel="noopener noreferrer nofollow"
:title="title"
:aria-label="title">
<i class="fa fa-area-chart" aria-hidden="true"></i>
</a>
`,
};
......@@ -25,6 +25,12 @@ export default {
};
},
computed: {
title() {
return 'Stop';
},
},
methods: {
onClick() {
if (confirm('Are you sure you want to stop this environment?')) {
......@@ -45,10 +51,12 @@ export default {
template: `
<button type="button"
class="btn stop-env-link"
class="btn stop-env-link has-tooltip"
data-container="body"
@click="onClick"
:disabled="isLoading"
title="Stop Environment">
:title="title"
:aria-label="title">
<i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
<i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</button>
......
......@@ -14,12 +14,22 @@ export default {
},
data() {
return { terminalIconSvg };
return {
terminalIconSvg,
};
},
computed: {
title() {
return 'Terminal';
},
},
template: `
<a class="btn terminal-button"
title="Open web terminal"
<a class="btn terminal-button has-tooltip"
data-container="body"
:title="title"
:aria-label="title"
:href="terminalPath">
${terminalIconSvg}
</a>
......
......@@ -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;
}
}
......@@ -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,
......
---
title: Add metrics button to environments overview page
merge_request: 10234
author:
......@@ -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);
......
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');
});
});
......@@ -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', () => {
......
......@@ -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);
});
});
......@@ -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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment