Commit 08d1cc5c authored by Fatih Acet's avatar Fatih Acet

Merge branch '59365-include-time-window-parameters-in-the-url-query-string' into 'master'

Resolve "Include time window parameters in the URL query string"

Closes #59365

See merge request gitlab-org/gitlab-ce!27230
parents 96aa0838 3e3bead2
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
import _ from 'underscore'; import _ from 'underscore';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import '~/vue_shared/mixins/is_ee'; import '~/vue_shared/mixins/is_ee';
import { getParameterValues } from '~/lib/utils/url_utility';
import Flash from '../../flash'; import Flash from '../../flash';
import MonitoringService from '../services/monitoring_service'; import MonitoringService from '../services/monitoring_service';
import MonitorAreaChart from './charts/area.vue'; import MonitorAreaChart from './charts/area.vue';
import GraphGroup from './graph_group.vue'; import GraphGroup from './graph_group.vue';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import MonitoringStore from '../stores/monitoring_store'; import MonitoringStore from '../stores/monitoring_store';
import { timeWindows } from '../constants'; import { timeWindows, timeWindowsKeyNames } from '../constants';
import { getTimeDiff } from '../utils'; import { getTimeDiff } from '../utils';
const sidebarAnimationDuration = 150; const sidebarAnimationDuration = 150;
...@@ -24,6 +25,7 @@ export default { ...@@ -24,6 +25,7 @@ export default {
Icon, Icon,
GlDropdown, GlDropdown,
GlDropdownItem, GlDropdownItem,
GlLink,
}, },
props: { props: {
...@@ -102,6 +104,7 @@ export default { ...@@ -102,6 +104,7 @@ export default {
showEmptyState: true, showEmptyState: true,
elWidth: 0, elWidth: 0,
selectedTimeWindow: '', selectedTimeWindow: '',
selectedTimeWindowKey: '',
}; };
}, },
created() { created() {
...@@ -110,9 +113,16 @@ export default { ...@@ -110,9 +113,16 @@ export default {
deploymentEndpoint: this.deploymentEndpoint, deploymentEndpoint: this.deploymentEndpoint,
environmentsEndpoint: this.environmentsEndpoint, environmentsEndpoint: this.environmentsEndpoint,
}); });
this.timeWindows = timeWindows; 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() { beforeDestroy() {
if (sidebarMutationObserver) { if (sidebarMutationObserver) {
...@@ -120,9 +130,10 @@ export default { ...@@ -120,9 +130,10 @@ export default {
} }
}, },
mounted() { mounted() {
const startEndWindow = getTimeDiff(this.timeWindows[this.selectedTimeWindowKey]);
this.servicePromises = [ this.servicePromises = [
this.service this.service
.getGraphsData() .getGraphsData(startEndWindow)
.then(data => this.store.storeMetrics(data)) .then(data => this.store.storeMetrics(data))
.catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))), .catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))),
this.service this.service
...@@ -176,22 +187,6 @@ export default { ...@@ -176,22 +187,6 @@ export default {
this.state = 'unableToConnect'; 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() { onSidebarMutation() {
setTimeout(() => { setTimeout(() => {
this.elWidth = this.$el.clientWidth; this.elWidth = this.$el.clientWidth;
...@@ -200,6 +195,9 @@ export default { ...@@ -200,6 +195,9 @@ export default {
activeTimeWindow(key) { activeTimeWindow(key) {
return this.timeWindows[key] === this.selectedTimeWindow; return this.timeWindows[key] === this.selectedTimeWindow;
}, },
setTimeWindowParameter(key) {
return `?time_window=${key}`;
},
}, },
}; };
</script> </script>
...@@ -239,8 +237,7 @@ export default { ...@@ -239,8 +237,7 @@ export default {
v-for="(value, key) in timeWindows" v-for="(value, key) in timeWindows"
:key="key" :key="key"
:active="activeTimeWindow(key)" :active="activeTimeWindow(key)"
@click="getGraphsDataWithTime(key)" ><gl-link :href="setTimeWindowParameter(key)">{{ value }}</gl-link></gl-dropdown-item
>{{ value }}</gl-dropdown-item
> >
</gl-dropdown> </gl-dropdown>
</div> </div>
......
...@@ -18,3 +18,12 @@ export const timeWindows = { ...@@ -18,3 +18,12 @@ export const timeWindows = {
threeDays: __('3 days'), threeDays: __('3 days'),
oneWeek: __('1 week'), oneWeek: __('1 week'),
}; };
export const timeWindowsKeyNames = {
thirtyMinutes: 'thirtyMinutes',
threeHours: 'threeHours',
eightHours: 'eightHours',
oneDay: 'oneDay',
threeDays: 'threeDays',
oneWeek: 'oneWeek',
};
...@@ -5878,9 +5878,6 @@ msgstr "" ...@@ -5878,9 +5878,6 @@ msgstr ""
msgid "Metrics|No deployed environments" msgid "Metrics|No deployed environments"
msgstr "" msgstr ""
msgid "Metrics|Not enough data to display"
msgstr ""
msgid "Metrics|Show last" msgid "Metrics|Show last"
msgstr "" msgstr ""
......
import Vue from 'vue'; import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import Dashboard from '~/monitoring/components/dashboard.vue'; 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 axios from '~/lib/utils/axios_utils';
import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data'; import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
...@@ -248,6 +248,41 @@ describe('Dashboard', () => { ...@@ -248,6 +248,41 @@ describe('Dashboard', () => {
done(); 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', () => { 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