diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-23 12:09:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-23 12:09:07 +0300 |
commit | f47c768fad17d4c876e96524f83f8306f071db66 (patch) | |
tree | 9350146fdfb67f001716357d745436338621b590 /app | |
parent | 0f8c2334f0e57a22bf10e4485c17f856289e4fb4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app')
8 files changed, 188 insertions, 124 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 5d27c6eb865..ee10a1e92fc 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -210,6 +210,9 @@ export default { :text="diffFile.file_path" :gfm="gfmCopyText" css-class="btn-default btn-transparent btn-clipboard" + data-track-event="click_copy_file_button" + data-track-label="diff_copy_file_path_button" + data-track-property="diff_copy_file" /> <small v-if="isModeChanged" ref="fileMode" class="mr-1"> @@ -233,6 +236,9 @@ export default { :class="{ active: diffHasExpandedDiscussions(diffFile) }" class="js-btn-vue-toggle-comments btn" data-qa-selector="toggle_comments_button" + data-track-event="click_toggle_comments_button" + data-track-label="diff_toggle_comments_button" + data-track-property="diff_toggle_comments" type="button" @click="toggleFileDiscussionWrappers(diffFile)" > @@ -245,6 +251,9 @@ export default { :can-current-user-fork="canCurrentUserFork" :edit-path="diffFile.edit_path" :can-modify-blob="diffFile.can_modify_blob" + data-track-event="click_toggle_edit_button" + data-track-label="diff_toggle_edit_button" + data-track-property="diff_toggle_edit" @showForkMessage="showForkMessage" /> </template> @@ -263,6 +272,9 @@ export default { v-gl-tooltip.hover :title="expandDiffToFullFileTitle" class="expand-file" + data-track-event="click_toggle_view_full_button" + data-track-label="diff_toggle_view_full_button" + data-track-property="diff_toggle_view_full" @click="toggleFullDiff(diffFile.file_path)" > <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline /> @@ -275,6 +287,9 @@ export default { :href="diffFile.view_path" target="blank" class="view-file" + data-track-event="click_toggle_view_sha_button" + data-track-label="diff_toggle_view_sha_button" + data-track-property="diff_toggle_view_sha" :title="viewFileButtonText" > <icon name="doc-text" /> @@ -288,6 +303,9 @@ export default { :title="`View on ${diffFile.formatted_external_url}`" target="_blank" rel="noopener noreferrer" + data-track-event="click_toggle_external_button" + data-track-label="diff_toggle_external_button" + data-track-property="diff_toggle_external" class="btn btn-file-option" > <icon name="external-link" /> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index f6f119d4463..211990f3d7c 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -27,10 +27,12 @@ import GroupEmptyState from './group_empty_state.vue'; import DashboardsDropdown from './dashboards_dropdown.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; -import { getTimeDiff, getAddMetricTrackingOptions } from '../utils'; -import { metricStates } from '../constants'; +import { getAddMetricTrackingOptions } from '../utils'; +import { getTimeRange } from './date_time_picker/date_time_picker_lib'; -const defaultTimeDiff = getTimeDiff(); +import { datePickerTimeWindows, metricStates } from '../constants'; + +const defaultTimeDiff = getTimeRange(); export default { components: { @@ -191,6 +193,7 @@ export default { startDate: getParameterValues('start')[0] || defaultTimeDiff.start, endDate: getParameterValues('end')[0] || defaultTimeDiff.end, hasValidDates: true, + datePickerTimeWindows, isRearrangingPanels: false, }; }, @@ -426,6 +429,7 @@ export default { <date-time-picker :start="startDate" :end="endDate" + :time-windows="datePickerTimeWindows" @apply="onDateTimePickerApply" @invalid="onDateTimePickerInvalid" /> diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue index 0aa710b1b3a..3a18a494cad 100644 --- a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue +++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue @@ -1,19 +1,18 @@ <script> import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; +import { __, sprintf } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import DateTimePickerInput from './date_time_picker_input.vue'; import { - getTimeDiff, + defaultTimeWindows, isValidDate, - getTimeWindow, + getTimeRange, + getTimeWindowKey, stringToISODate, ISODateToString, truncateZerosInDateTime, isDateTimePickerInputValid, -} from '~/monitoring/utils'; - -import { timeWindows } from '~/monitoring/constants'; +} from './date_time_picker_lib'; const events = { apply: 'apply', @@ -41,7 +40,7 @@ export default { timeWindows: { type: Object, required: false, - default: () => timeWindows, + default: () => defaultTimeWindows, }, }, data() { @@ -81,11 +80,11 @@ export default { }, timeWindowText() { - const timeWindow = getTimeWindow({ start: this.start, end: this.end }); + const timeWindow = getTimeWindowKey({ start: this.start, end: this.end }, this.timeWindows); if (timeWindow) { - return this.timeWindows[timeWindow]; + return this.timeWindows[timeWindow].label; } else if (isValidDate(this.start) && isValidDate(this.end)) { - return sprintf(s__('%{start} to %{end}'), { + return sprintf(__('%{start} to %{end}'), { start: this.formatDate(this.start), end: this.formatDate(this.end), }); @@ -104,7 +103,7 @@ export default { return truncateZerosInDateTime(ISODateToString(date)); }, setTimeWindow(key) { - const { start, end } = getTimeDiff(key); + const { start, end } = getTimeRange(key, this.timeWindows); this.startDate = start; this.endDate = end; @@ -161,18 +160,18 @@ export default { class="col-md-4 p-0 m-0" > <gl-dropdown-item - v-for="(value, key) in timeWindows" + v-for="(timeWindow, key) in timeWindows" :key="key" - :active="value === timeWindowText" + :active="timeWindow.label === timeWindowText" active-class="active" @click="setTimeWindow(key)" > <icon name="mobile-issue-close" class="align-bottom" - :class="{ invisible: value !== timeWindowText }" + :class="{ invisible: timeWindow.label !== timeWindowText }" /> - {{ value }} + {{ timeWindow.label }} </gl-dropdown-item> </gl-form-group> </div> diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue index c3beae18726..b27a379c46a 100644 --- a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue +++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue @@ -1,14 +1,14 @@ <script> import _ from 'underscore'; import { GlFormGroup, GlFormInput } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; -import { dateFormats } from '~/monitoring/constants'; +import { __, sprintf } from '~/locale'; +import { dateFormats } from './date_time_picker_lib'; const inputGroupText = { - invalidFeedback: sprintf(s__('Format: %{dateFormat}'), { - dateFormat: dateFormats.dateTimePicker.format, + invalidFeedback: sprintf(__('Format: %{dateFormat}'), { + dateFormat: dateFormats.stringDate, }), - placeholder: dateFormats.dateTimePicker.format, + placeholder: dateFormats.stringDate, }; export default { diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js new file mode 100644 index 00000000000..604b17baab9 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js @@ -0,0 +1,112 @@ +import dateformat from 'dateformat'; +import { __ } from '~/locale'; +import { secondsToMilliseconds } from '~/lib/utils/datetime_utility'; + +/** + * Valid strings for this regex are + * 2019-10-01 and 2019-10-01 01:02:03 + */ +const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/; + +export const defaultTimeWindows = { + thirtyMinutes: { + label: __('30 minutes'), + seconds: 60 * 30, + }, + threeHours: { + label: __('3 hours'), + seconds: 60 * 60 * 3, + }, + eightHours: { + label: __('8 hours'), + seconds: 60 * 60 * 8, + default: true, + }, + oneDay: { + label: __('1 day'), + seconds: 60 * 60 * 24 * 1, + }, + threeDays: { + label: __('3 days'), + seconds: 60 * 60 * 24 * 3, + }, +}; + +export const dateFormats = { + ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'", + stringDate: 'yyyy-mm-dd HH:MM:ss', +}; + +/** + * The URL params start and end need to be validated + * before passing them down to other components. + * + * @param {string} dateString + * @returns true if the string is a valid date, false otherwise + */ +export const isValidDate = dateString => { + try { + // dateformat throws error that can be caught. + // This is better than using `new Date()` + if (dateString && dateString.trim()) { + dateformat(dateString, 'isoDateTime'); + return true; + } + return false; + } catch (e) { + return false; + } +}; + +export const getTimeRange = (timeWindowKey, timeWindows = defaultTimeWindows) => { + let difference; + if (timeWindows[timeWindowKey]) { + difference = timeWindows[timeWindowKey].seconds; + } else { + const [defaultEntry] = Object.entries(timeWindows).filter( + ([, timeWindow]) => timeWindow.default, + ); + // find default time window + difference = defaultEntry[1].seconds; + } + + const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds + const start = end - difference; + + return { + start: new Date(secondsToMilliseconds(start)).toISOString(), + end: new Date(secondsToMilliseconds(end)).toISOString(), + }; +}; + +export const getTimeWindowKey = ({ start, end }, timeWindows = defaultTimeWindows) => + Object.entries(timeWindows).reduce((acc, [timeWindowKey, timeWindow]) => { + if (new Date(end) - new Date(start) === secondsToMilliseconds(timeWindow.seconds)) { + return timeWindowKey; + } + return acc; + }, null); + +/** + * Convert the input in Time picker component to ISO date. + * + * @param {string} val + * @returns {string} + */ +export const stringToISODate = val => + dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true); + +/** + * Convert the ISO date received from the URL to string + * for the Time picker component. + * + * @param {Date} date + * @returns {string} + */ +export const ISODateToString = date => dateformat(date, dateFormats.stringDate); + +export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', ''); + +export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val); + +export default {}; diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue index 2f562071764..10c081070d7 100644 --- a/app/assets/javascripts/monitoring/components/embed.vue +++ b/app/assets/javascripts/monitoring/components/embed.vue @@ -3,7 +3,7 @@ import { mapActions, mapState, mapGetters } from 'vuex'; import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue'; import { getParameterValues, removeParams } from '~/lib/utils/url_utility'; import { sidebarAnimationDuration } from '../constants'; -import { getTimeDiff } from '../utils'; +import { getTimeRange } from './date_time_picker/date_time_picker_lib'; let sidebarMutationObserver; @@ -18,7 +18,7 @@ export default { }, }, data() { - const defaultRange = getTimeDiff(); + const defaultRange = getTimeRange(); const start = getParameterValues('start', this.dashboardUrl)[0] || defaultRange.start; const end = getParameterValues('end', this.dashboardUrl)[0] || defaultRange.end; diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index 398b45b9012..2d5361a5029 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -50,11 +50,6 @@ export const metricStates = { export const sidebarAnimationDuration = 300; // milliseconds. export const chartHeight = 300; -/** - * Valid strings for this regex are - * 2019-10-01 and 2019-10-01 01:02:03 - */ -export const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/; export const graphTypes = { deploymentData: 'scatter', @@ -83,38 +78,39 @@ export const lineWidths = { default: 2, }; -export const timeWindows = { - thirtyMinutes: __('30 minutes'), - threeHours: __('3 hours'), - eightHours: __('8 hours'), - oneDay: __('1 day'), - threeDays: __('3 days'), - oneWeek: __('1 week'), -}; - export const dateFormats = { timeOfDay: 'h:MM TT', default: 'dd mmm yyyy, h:MMTT', - dateTimePicker: { - format: 'yyyy-mm-dd hh:mm:ss', - ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'", - stringDate: 'yyyy-mm-dd HH:MM:ss', - }, }; -export const secondsIn = { - thirtyMinutes: 60 * 30, - threeHours: 60 * 60 * 3, - eightHours: 60 * 60 * 8, - oneDay: 60 * 60 * 24 * 1, - threeDays: 60 * 60 * 24 * 3, - oneWeek: 60 * 60 * 24 * 7 * 1, +export const datePickerTimeWindows = { + thirtyMinutes: { + label: __('30 minutes'), + seconds: 60 * 30, + }, + threeHours: { + label: __('3 hours'), + seconds: 60 * 60 * 3, + }, + eightHours: { + label: __('8 hours'), + seconds: 60 * 60 * 8, + default: true, + }, + oneDay: { + label: __('1 day'), + seconds: 60 * 60 * 24 * 1, + }, + threeDays: { + label: __('3 days'), + seconds: 60 * 60 * 24 * 3, + }, + oneWeek: { + label: __('1 week'), + seconds: 60 * 60 * 24 * 7 * 1, + }, + twoWeeks: { + label: __('2 weeks'), + seconds: 60 * 60 * 24 * 7 * 2, + }, }; - -export const timeWindowsKeyNames = Object.keys(secondsIn).reduce( - (otherTimeWindows, timeWindow) => ({ - ...otherTimeWindows, - [timeWindow]: timeWindow, - }), - {}, -); diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js index c824d6d4ddb..3847d885f9a 100644 --- a/app/assets/javascripts/monitoring/utils.js +++ b/app/assets/javascripts/monitoring/utils.js @@ -1,68 +1,3 @@ -import dateformat from 'dateformat'; -import { secondsIn, dateTimePickerRegex, dateFormats } from './constants'; -import { secondsToMilliseconds } from '~/lib/utils/datetime_utility'; - -export const getTimeDiff = timeWindow => { - const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds - const difference = secondsIn[timeWindow] || secondsIn.eightHours; - const start = end - difference; - - return { - start: new Date(secondsToMilliseconds(start)).toISOString(), - end: new Date(secondsToMilliseconds(end)).toISOString(), - }; -}; - -export const getTimeWindow = ({ start, end }) => - Object.entries(secondsIn).reduce((acc, [timeRange, value]) => { - if (new Date(end) - new Date(start) === secondsToMilliseconds(value)) { - return timeRange; - } - return acc; - }, null); - -export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val); - -export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', ''); - -/** - * The URL params start and end need to be validated - * before passing them down to other components. - * - * @param {string} dateString - */ -export const isValidDate = dateString => { - try { - // dateformat throws error that can be caught. - // This is better than using `new Date()` - if (dateString && dateString.trim()) { - dateformat(dateString, 'isoDateTime'); - return true; - } - return false; - } catch (e) { - return false; - } -}; - -/** - * Convert the input in Time picker component to ISO date. - * - * @param {string} val - * @returns {string} - */ -export const stringToISODate = val => - dateformat(new Date(val.replace(/-/g, '/')), dateFormats.dateTimePicker.ISODate, true); - -/** - * Convert the ISO date received from the URL to string - * for the Time picker component. - * - * @param {Date} date - * @returns {string} - */ -export const ISODateToString = date => dateformat(date, dateFormats.dateTimePicker.stringDate); - /** * This method is used to validate if the graph data format for a chart component * that needs a time series as a response from a prometheus query (query_range) is |