Commit 6e937b5a authored by Phil Hughes's avatar Phil Hughes

Merge branch 'fix-time-window-default' into 'master'

Use the selected time window for metrics dashboard

See merge request gitlab-org/gitlab-ce!29152
parents 3e07725f 6f7b6ba0
...@@ -172,7 +172,7 @@ export default { ...@@ -172,7 +172,7 @@ export default {
if (!this.hasMetrics) { if (!this.hasMetrics) {
this.setGettingStartedEmptyState(); this.setGettingStartedEmptyState();
} else { } else {
this.fetchData(getTimeDiff(this.timeWindows.eightHours)); this.fetchData(getTimeDiff(this.selectedTimeWindow));
sidebarMutationObserver = new MutationObserver(this.onSidebarMutation); sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
sidebarMutationObserver.observe(document.querySelector('.layout-page'), { sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
......
---
title: Use the selected time window for metrics dashboard
merge_request: 29152
author:
type: fixed
...@@ -38,6 +38,7 @@ describe('Dashboard', () => { ...@@ -38,6 +38,7 @@ describe('Dashboard', () => {
let DashboardComponent; let DashboardComponent;
let mock; let mock;
let store; let store;
let component;
beforeEach(() => { beforeEach(() => {
setFixtures(` setFixtures(`
...@@ -59,12 +60,13 @@ describe('Dashboard', () => { ...@@ -59,12 +60,13 @@ describe('Dashboard', () => {
}); });
afterEach(() => { afterEach(() => {
component.$destroy();
mock.restore(); mock.restore();
}); });
describe('no metrics are available yet', () => { describe('no metrics are available yet', () => {
it('shows a getting started empty state when no metrics are present', () => { it('shows a getting started empty state when no metrics are present', () => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, showTimeWindowDropdown: false }, propsData: { ...propsData, showTimeWindowDropdown: false },
store, store,
...@@ -81,7 +83,7 @@ describe('Dashboard', () => { ...@@ -81,7 +83,7 @@ describe('Dashboard', () => {
}); });
it('shows up a loading state', done => { it('shows up a loading state', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false }, propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false },
store, store,
...@@ -94,7 +96,7 @@ describe('Dashboard', () => { ...@@ -94,7 +96,7 @@ describe('Dashboard', () => {
}); });
it('hides the legend when showLegend is false', done => { it('hides the legend when showLegend is false', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -114,7 +116,7 @@ describe('Dashboard', () => { ...@@ -114,7 +116,7 @@ describe('Dashboard', () => {
}); });
it('hides the group panels when showPanels is false', done => { it('hides the group panels when showPanels is false', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -134,7 +136,7 @@ describe('Dashboard', () => { ...@@ -134,7 +136,7 @@ describe('Dashboard', () => {
}); });
it('renders the environments dropdown with a number of environments', done => { it('renders the environments dropdown with a number of environments', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -165,7 +167,7 @@ describe('Dashboard', () => { ...@@ -165,7 +167,7 @@ describe('Dashboard', () => {
}); });
it('hides the environments dropdown list when there is no environments', done => { it('hides the environments dropdown list when there is no environments', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -195,7 +197,7 @@ describe('Dashboard', () => { ...@@ -195,7 +197,7 @@ describe('Dashboard', () => {
}); });
it('renders the environments dropdown with a single active element', done => { it('renders the environments dropdown with a single active element', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -228,7 +230,7 @@ describe('Dashboard', () => { ...@@ -228,7 +230,7 @@ describe('Dashboard', () => {
}); });
it('hides the dropdown', done => { it('hides the dropdown', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -249,7 +251,7 @@ describe('Dashboard', () => { ...@@ -249,7 +251,7 @@ describe('Dashboard', () => {
}); });
it('does not show the time window dropdown when the feature flag is not set', done => { 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'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -270,7 +272,7 @@ describe('Dashboard', () => { ...@@ -270,7 +272,7 @@ describe('Dashboard', () => {
}); });
it('renders the time window dropdown with a set of options', done => { it('renders the time window dropdown with a set of options', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -295,10 +297,46 @@ describe('Dashboard', () => { ...@@ -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 => { it('shows a specific time window selected from the url params', done => {
spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']); spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true }, propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
store, store,
...@@ -319,7 +357,7 @@ describe('Dashboard', () => { ...@@ -319,7 +357,7 @@ describe('Dashboard', () => {
'<script>alert("XSS")</script>', '<script>alert("XSS")</script>',
]); ]);
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true }, propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
store, store,
...@@ -344,7 +382,7 @@ describe('Dashboard', () => { ...@@ -344,7 +382,7 @@ describe('Dashboard', () => {
}); });
it('sets elWidth to page width when the sidebar is resized', done => { it('sets elWidth to page width when the sidebar is resized', done => {
const component = new DashboardComponent({ component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'), el: document.querySelector('.prometheus-graphs'),
propsData: { propsData: {
...propsData, ...propsData,
...@@ -374,16 +412,10 @@ describe('Dashboard', () => { ...@@ -374,16 +412,10 @@ describe('Dashboard', () => {
}); });
describe('external dashboard link', () => { describe('external dashboard link', () => {
let component;
beforeEach(() => { beforeEach(() => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
}); });
afterEach(() => {
component.$destroy();
});
describe('with feature flag enabled', () => { describe('with feature flag enabled', () => {
beforeEach(() => { beforeEach(() => {
component = new DashboardComponent({ component = new DashboardComponent({
......
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