summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue43
-rw-r--r--app/assets/javascripts/monitoring/constants.js9
-rw-r--r--locale/gitlab.pot3
-rw-r--r--spec/javascripts/monitoring/dashboard_spec.js37
4 files changed, 65 insertions, 27 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 00547abd7bc..33f6afc9c2d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,16 +1,17 @@
<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>
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index e97320fd682..26f1bf3f68d 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -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',
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0ac7282baac..ccf9725e3ff 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5878,9 +5878,6 @@ msgstr ""
msgid "Metrics|No deployed environments"
msgstr ""
-msgid "Metrics|Not enough data to display"
-msgstr ""
-
msgid "Metrics|Show last"
msgstr ""
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 16dc0084a10..5c28840d3a4 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,7 +1,7 @@
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', () => {