diff options
| -rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 43 | ||||
| -rw-r--r-- | app/assets/javascripts/monitoring/constants.js | 9 | ||||
| -rw-r--r-- | locale/gitlab.pot | 3 | ||||
| -rw-r--r-- | spec/javascripts/monitoring/dashboard_spec.js | 37 |
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', () => { |