kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use the selected time window for metrics dashboard

Browse source
This commit is contained in:
Sarah Yasonik 2019-06-06 07:30:04 +00:00 committed by Phil Hughes
parent 3e07725f5a
commit 6f7b6ba072
3 changed files with 57 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/monitoring/components/dashboard.vue
View file

@ -172,7 +172,7 @@ export default {
if (!this.hasMetrics) {
this.setGettingStartedEmptyState();
} else {
this.fetchData(getTimeDiff(this.timeWindows.eightHours));
this.fetchData(getTimeDiff(this.selectedTimeWindow));
sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
sidebarMutationObserver.observe(document.querySelector('.layout-page'), {

5
changelogs/unreleased/fix-time-window-default.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Use the selected time window for metrics dashboard
merge_request: 29152
author:
type: fixed

70
spec/javascripts/monitoring/dashboard_spec.js
View file

@ -38,6 +38,7 @@ describe('Dashboard', () => {
let DashboardComponent;
let mock;
let store;
let component;
beforeEach(() => {
setFixtures(`
@ -59,12 +60,13 @@ describe('Dashboard', () => {
});
afterEach(() => {
component.$destroy();
mock.restore();
});
describe('no metrics are available yet', () => {
it('shows a getting started empty state when no metrics are present', () => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, showTimeWindowDropdown: false },
store,
@ -81,7 +83,7 @@ describe('Dashboard', () => {
});
it('shows up a loading state', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false },
store,
@ -94,7 +96,7 @@ describe('Dashboard', () => {
});
it('hides the legend when showLegend is false', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -114,7 +116,7 @@ describe('Dashboard', () => {
});
it('hides the group panels when showPanels is false', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -134,7 +136,7 @@ describe('Dashboard', () => {
});
it('renders the environments dropdown with a number of environments', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -165,7 +167,7 @@ describe('Dashboard', () => {
});
it('hides the environments dropdown list when there is no environments', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -195,7 +197,7 @@ describe('Dashboard', () => {
});
it('renders the environments dropdown with a single active element', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -228,7 +230,7 @@ describe('Dashboard', () => {
});
it('hides the dropdown', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -249,7 +251,7 @@ describe('Dashboard', () => {
});
it('does not show the time window dropdown when the feature flag is not set', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -270,7 +272,7 @@ describe('Dashboard', () => {
});
it('renders the time window dropdown with a set of options', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -295,10 +297,46 @@ describe('Dashboard', () => {
});
});
it('fetches the metrics data with proper time window', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: true,
},
store,
});
spyOn(component.$store, 'dispatch').and.stub();
const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff');
component.$store.commit(
`monitoringDashboard/${types.SET_ENVIRONMENTS_ENDPOINT}`,
'/environments',
);
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
component.$mount();
Vue.nextTick()
.then(() => {
expect(component.$store.dispatch).toHaveBeenCalled();
expect(getTimeDiffSpy).toHaveBeenCalledWith(component.selectedTimeWindow);
done();
})
.catch(done.fail);
});
it('shows a specific time window selected from the url params', done => {
spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
store,
@ -319,7 +357,7 @@ describe('Dashboard', () => {
'<script>alert("XSS")</script>',
]);
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
store,
@ -344,7 +382,7 @@ describe('Dashboard', () => {
});
it('sets elWidth to page width when the sidebar is resized', done => {
const component = new DashboardComponent({
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
@ -374,16 +412,10 @@ describe('Dashboard', () => {
});
describe('external dashboard link', () => {
let component;
beforeEach(() => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
});
afterEach(() => {
component.$destroy();
});
describe('with feature flag enabled', () => {
beforeEach(() => {
component = new DashboardComponent({