diff options
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 24 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/constants.js | 14 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/services/monitoring_service.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/utils.js | 32 | ||||
-rw-r--r-- | locale/gitlab.pot | 23 | ||||
-rw-r--r-- | spec/javascripts/monitoring/dashboard_spec.js | 18 |
6 files changed, 72 insertions, 41 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index dd8e899d3d3..21105d886fb 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -9,8 +9,8 @@ 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, msPerMinute } from '../constants'; -import { getTimeDifferenceMinutes } from '../utils'; +import { timeWindows } from '../constants'; +import { getTimeDiff } from '../utils'; const sidebarAnimationDuration = 150; let sidebarMutationObserver; @@ -100,7 +100,7 @@ export default { }; }, computed: { - getTimeWindowFlagStatus() { + showTimeWindowDropdown() { return gon.features.metricsTimeWindow; }, }, @@ -113,7 +113,6 @@ export default { this.timeWindows = timeWindows; this.selectedTimeWindow = this.timeWindows.eightHours; - this.msPerMinute = msPerMinute; }, beforeDestroy() { if (sidebarMutationObserver) { @@ -173,23 +172,18 @@ export default { }); }, getGraphsDataWithTime(timeFrame) { - this.selectedTimeWindow = this.timeWindows[timeFrame]; this.state = 'loading'; this.showEmptyState = true; - const end = Date.now(); - const timeDifferenceMinutes = getTimeDifferenceMinutes(this.selectedTimeWindow); - const start = new Date(end - timeDifferenceMinutes * this.msPerMinute).getTime(); this.service - .getGraphsData({ - start, - end, - }) + .getGraphsData(getTimeDiff(this.timeWindows[timeFrame])) .then(data => { this.store.storeMetrics(data); + this.selectedTimeWindow = this.timeWindows[timeFrame]; this.showEmptyState = false; }) .catch(() => { - this.state = 'unableToConnect'; + this.showEmptyState = false; + Flash(s__('Metrics|Not enough data to display')); }); }, onSidebarMutation() { @@ -227,8 +221,8 @@ export default { > </gl-dropdown> </div> - <div v-if="getTimeWindowFlagStatus" class="d-flex align-items-center float-right"> - <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span> + <div v-if="showTimeWindowDropdown" class="d-flex align-items-center"> + <strong>{{ s__('Metrics|Show last') }}</strong> <gl-dropdown class="prepend-left-10 js-time-window-dropdown" toggle-class="dropdown-menu-toggle" diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index c01c8ab2dd6..9e5d0d0fd28 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -1,3 +1,5 @@ +import { __ } from '~/locale'; + export const chartHeight = 300; export const graphTypes = { @@ -9,12 +11,12 @@ export const lineTypes = { }; export const timeWindows = { - thirtyMinutes: '30 minutes', - threeHours: '3 hours', - eightHours: '8 hours', - oneDay: '1 day', - threeDays: '3 days', - oneWeek: '1 week', + thirtyMinutes: __('30 minutes'), + threeHours: __('3 hours'), + eightHours: __('8 hours'), + oneDay: __('1 day'), + threeDays: __('3 days'), + oneWeek: __('1 week'), }; export const msPerMinute = 60000; diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js index 0fbbcfd1494..64e27856bb9 100644 --- a/app/assets/javascripts/monitoring/services/monitoring_service.js +++ b/app/assets/javascripts/monitoring/services/monitoring_service.js @@ -36,7 +36,7 @@ export default class MonitoringService { return backOffRequest(() => axios.get(this.metricsEndpoint, { params: { - ...params, + params, }, }), ) diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js index 1dd26f62437..c3e854c5367 100644 --- a/app/assets/javascripts/monitoring/utils.js +++ b/app/assets/javascripts/monitoring/utils.js @@ -1,32 +1,30 @@ -import { timeWindows } from './constants'; +import { timeWindows, msPerMinute } from './constants'; export const getTimeDifferenceMinutes = timeWindow => { - let timeDifferenceMinutes; switch (timeWindow) { case timeWindows.thirtyMinutes: - timeDifferenceMinutes = 30; - break; + return 30; case timeWindows.threeHours: - timeDifferenceMinutes = 60 * 3; - break; + return 60 * 3; case timeWindows.eightHours: - timeDifferenceMinutes = 60 * 8; - break; + return 60 * 8; case timeWindows.oneDay: - timeDifferenceMinutes = 60 * 24 * 1; - break; + return 60 * 24 * 1; case timeWindows.threeDays: - timeDifferenceMinutes = 60 * 24 * 3; - break; + return 60 * 24 * 3; case timeWindows.oneWeek: - timeDifferenceMinutes = 60 * 24 * 7 * 1; - break; + return 60 * 24 * 7 * 1; default: - timeDifferenceMinutes = 60 * 8; - break; + return 60 * 8; } +}; + +export const getTimeDiff = selectedTimeWindow => { + const end = Date.now(); + const timeDifferenceMinutes = getTimeDifferenceMinutes(selectedTimeWindow); + const start = new Date(end - timeDifferenceMinutes * msPerMinute).getTime(); - return timeDifferenceMinutes; + return { start, end }; }; export default {}; diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 78d3234b562..6402f2413da 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -238,6 +238,9 @@ msgid_plural "%d closed merge requests" msgstr[0] "" msgstr[1] "" +msgid "1 day" +msgstr "" + msgid "1 merged merge request" msgid_plural "%d merged merge requests" msgstr[0] "" @@ -258,6 +261,9 @@ msgid_plural "%d pipelines" msgstr[0] "" msgstr[1] "" +msgid "1 week" +msgstr "" + msgid "1st contribution!" msgstr "" @@ -267,6 +273,15 @@ msgstr "" msgid "2FA enabled" msgstr "" +msgid "3 days" +msgstr "" + +msgid "3 hours" +msgstr "" + +msgid "30 minutes" +msgstr "" + msgid "403|Please contact your GitLab administrator to get permission." msgstr "" @@ -282,6 +297,9 @@ msgstr "" msgid "404|Please contact your GitLab administrator if you think this is a mistake." msgstr "" +msgid "8 hours" +msgstr "" + msgid "<code>\"johnsmith@example.com\": \"@johnsmith\"</code> will add \"By <a href=\"#\">@johnsmith</a>\" to all issues and comments originally created by johnsmith@example.com, and will set <a href=\"#\">@johnsmith</a> as the assignee on all issues originally assigned to johnsmith@example.com." msgstr "" @@ -5100,7 +5118,10 @@ msgstr "" msgid "Metrics|No deployed environments" msgstr "" -msgid "Metrics|Show Last" +msgid "Metrics|Not enough data to display" +msgstr "" + +msgid "Metrics|Show last" msgstr "" msgid "Metrics|There was an error fetching the environments data, please try again" diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index a2d1acbe618..6d85e2c6ea2 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -184,7 +184,23 @@ 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 => { + gon.features.metricsTimeWindow = false; + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showPanels: false }, + }); + + setTimeout(() => { + const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown'); + + expect(timeWindowDropdown).toBeNull(); + + done(); + }); + }); + + it('does not show the time window dropdown when the feature flag is not set', done => { const component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, hasMetrics: true, showPanels: false }, |