Commit 3e3bead2 authored by Jose Vargas's avatar Jose Vargas

Make time window parameters available in the query string

This commit adds the frontend functionality to add the parameters
via the `pushState` api, preventing the need for a page reload.
parent ca8e5ade
<script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
import _ from 'underscore';
import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import '~/vue_shared/mixins/is_ee';
import { getParameterValues } from '~/lib/utils/url_utility';
import Flash from '../../flash';
import MonitoringService from '../services/monitoring_service';
import MonitorAreaChart from './charts/area.vue';
import GraphGroup from './graph_group.vue';
import EmptyState from './empty_state.vue';
import MonitoringStore from '../stores/monitoring_store';
import { timeWindows } from '../constants';
import { timeWindows, timeWindowsKeyNames } from '../constants';
import { getTimeDiff } from '../utils';
const sidebarAnimationDuration = 150;
......@@ -24,6 +25,7 @@ export default {
Icon,
GlDropdown,
GlDropdownItem,
GlLink,
},
props: {
......@@ -102,6 +104,7 @@ export default {
showEmptyState: true,
elWidth: 0,
selectedTimeWindow: '',
selectedTimeWindowKey: '',
};
},
created() {
......@@ -110,9 +113,16 @@ export default {
deploymentEndpoint: this.deploymentEndpoint,
environmentsEndpoint: this.environmentsEndpoint,
});
this.timeWindows = timeWindows;
this.selectedTimeWindow = this.timeWindows.eightHours;
this.selectedTimeWindowKey =
_.escape(getParameterValues('time_window')[0]) || timeWindowsKeyNames.eightHours;
// Set default time window if the selectedTimeWindowKey is bogus
if (!Object.keys(this.timeWindows).includes(this.selectedTimeWindowKey)) {
this.selectedTimeWindowKey = timeWindowsKeyNames.eightHours;
}
this.selectedTimeWindow = this.timeWindows[this.selectedTimeWindowKey];
},
beforeDestroy() {
if (sidebarMutationObserver) {
......@@ -120,9 +130,10 @@ export default {
}
},
mounted() {
const startEndWindow = getTimeDiff(this.timeWindows[this.selectedTimeWindowKey]);
this.servicePromises = [
this.service
.getGraphsData()
.getGraphsData(startEndWindow)
.then(data => this.store.storeMetrics(data))
.catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))),
this.service
......@@ -176,22 +187,6 @@ export default {
this.state = 'unableToConnect';
});
},
getGraphsDataWithTime(timeFrame) {
this.state = 'loading';
this.showEmptyState = true;
this.service
.getGraphsData(getTimeDiff(this.timeWindows[timeFrame]))
.then(data => {
this.store.storeMetrics(data);
this.selectedTimeWindow = this.timeWindows[timeFrame];
})
.catch(() => {
Flash(s__('Metrics|Not enough data to display'));
})
.finally(() => {
this.showEmptyState = false;
});
},
onSidebarMutation() {
setTimeout(() => {
this.elWidth = this.$el.clientWidth;
......@@ -200,6 +195,9 @@ export default {
activeTimeWindow(key) {
return this.timeWindows[key] === this.selectedTimeWindow;
},
setTimeWindowParameter(key) {
return `?time_window=${key}`;
},
},
};
</script>
......@@ -239,8 +237,7 @@ export default {
v-for="(value, key) in timeWindows"
:key="key"
:active="activeTimeWindow(key)"
@click="getGraphsDataWithTime(key)"
>{{ value }}</gl-dropdown-item
><gl-link :href="setTimeWindowParameter(key)">{{ value }}</gl-link></gl-dropdown-item
>
</gl-dropdown>
</div>
......
......@@ -18,3 +18,12 @@ export const timeWindows = {
threeDays: __('3 days'),
oneWeek: __('1 week'),
};
export const timeWindowsKeyNames = {
thirtyMinutes: 'thirtyMinutes',
threeHours: 'threeHours',
eightHours: 'eightHours',
oneDay: 'oneDay',
threeDays: 'threeDays',
oneWeek: 'oneWeek',
};
......@@ -5661,9 +5661,6 @@ msgstr ""
msgid "Metrics|No deployed environments"
msgstr ""
msgid "Metrics|Not enough data to display"
msgstr ""
msgid "Metrics|Show last"
msgstr ""
......
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import Dashboard from '~/monitoring/components/dashboard.vue';
import { timeWindows } from '~/monitoring/constants';
import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
import axios from '~/lib/utils/axios_utils';
import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
......@@ -248,6 +248,41 @@ describe('Dashboard', () => {
done();
});
});
it('shows a specific time window selected from the url params', done => {
spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
});
setTimeout(() => {
const selectedTimeWindow = component.$el.querySelector(
'.js-time-window-dropdown [active="true"]',
);
expect(selectedTimeWindow.textContent.trim()).toEqual('30 minutes');
done();
});
});
it('defaults to the eight hours time window for non valid url parameters', done => {
spyOnDependency(Dashboard, 'getParameterValues').and.returnValue([
'<script>alert("XSS")</script>',
]);
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
});
Vue.nextTick(() => {
expect(component.selectedTimeWindowKey).toEqual(timeWindowsKeyNames.eightHours);
done();
});
});
});
describe('when the window resizes', () => {
......
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