Skip to content

G
gitlab-ce
Commit edf6f2d2 authored by Miguel Rincon's avatar Miguel Rincon
Browse files
Options

Add UTC setting for the date time picker 

Users sometimes want to see the data in UTC format, this adds
a "utc" prop so the date time picker can support UTC mode rendering.

Some handling of dates had to change to make this change possible.
parent c8c9c638
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 405 additions and 228 deletions
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
View file @ edf6f2d2
<script>
import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
import Icon from '~/vue_shared/components/icon.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
import DateTimePickerInput from './date_time_picker_input.vue';
import {
defaultTimeRanges,
defaultTimeRange,
isValidDate,
stringToISODate,
ISODateToString,
truncateZerosInDateTime,
isDateTimePickerInputValid,
isValidInputString,
inputStringToIsoDate,
isoDateToInputString,
} from './date_time_picker_lib';
const events = {
......@@ -24,13 +21,13 @@ const events = {
export default {
components: {
Icon,
TooltipOnTruncate,
DateTimePickerInput,
GlFormGroup,
GlIcon,
GlDeprecatedButton,
GlDropdown,
GlDropdownItem,
GlFormGroup,
TooltipOnTruncate,
DateTimePickerInput,
},
props: {
value: {
......@@ -48,20 +45,41 @@ export default {
required: false,
default: true,
},
utc: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
timeRange: this.value,
startDate: '',
endDate: '',
/**
* Valid start iso date string, null if not valid value
*/
startDate: null,
/**
* Invalid start date string as input by the user
*/
startFallbackVal: '',
/**
* Valid end iso date string, null if not valid value
*/
endDate: null,
/**
* Invalid end date string as input by the user
*/
endFallbackVal: '',
};
},
computed: {
startInputValid() {
return isValidDate(this.startDate);
return isValidInputString(this.startDate);
},
endInputValid() {
return isValidDate(this.endDate);
return isValidInputString(this.endDate);
},
isValid() {
return this.startInputValid && this.endInputValid;
......@@ -69,21 +87,31 @@ export default {
startInput: {
get() {
return this.startInputValid ? this.formatDate(this.startDate) : this.startDate;
return this.dateToInput(this.startDate) || this.startFallbackVal;
},
set(val) {
// Attempt to set a formatted date if possible
this.startDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
try {
this.startDate = this.inputToDate(val);
this.startFallbackVal = null;
} catch (e) {
this.startDate = null;
this.startFallbackVal = val;
}
this.timeRange = null;
},
},
endInput: {
get() {
return this.endInputValid ? this.formatDate(this.endDate) : this.endDate;
return this.dateToInput(this.endDate) || this.endFallbackVal;
},
set(val) {
// Attempt to set a formatted date if possible
this.endDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
try {
this.endDate = this.inputToDate(val);
this.endFallbackVal = null;
} catch (e) {
this.endDate = null;
this.endFallbackVal = val;
}
this.timeRange = null;
},
},
......@@ -96,10 +124,10 @@ export default {
}
const { start, end } = convertToFixedRange(this.value);
if (isValidDate(start) && isValidDate(end)) {
if (isValidInputString(start) && isValidInputString(end)) {
return sprintf(__('%{start} to %{end}'), {
start: this.formatDate(start),
end: this.formatDate(end),
start: this.stripZerosInDateTime(this.dateToInput(start)),
end: this.stripZerosInDateTime(this.dateToInput(end)),
});
}
} catch {
......@@ -107,6 +135,13 @@ export default {
}
return '';
},
customLabel() {
if (this.utc) {
return __('Custom range (UTC)');
}
return __('Custom range');
},
},
watch: {
value(newValue) {
......@@ -132,8 +167,17 @@ export default {
}
},
methods: {
formatDate(date) {
return truncateZerosInDateTime(ISODateToString(date));
dateToInput(date) {
if (date === null) {
return null;
}
return isoDateToInputString(date, this.utc);
},
inputToDate(value) {
return inputStringToIsoDate(value, this.utc);
},
stripZerosInDateTime(str = '') {
return str.replace(' 00:00:00', '');
},
closeDropdown() {
this.$refs.dropdown.hide();
......@@ -169,10 +213,16 @@ export default {
menu-class="date-time-picker-menu"
toggle-class="date-time-picker-toggle text-truncate"
>
<template #button-content>
<span class="gl-flex-grow-1 text-truncate">{{ timeWindowText }}</span>
<span v-if="utc" class="text-muted gl-font-weight-bold gl-font-sm">{{ __('UTC') }}</span>
<gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
</template>
<div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
<gl-form-group
v-if="customEnabled"
:label="__('Custom range')"
:label="customLabel"
label-for="custom-from-time"
label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
......@@ -214,7 +264,7 @@ export default {
active-class="active"
@click="setQuickRange(option)"
>
<icon
<gl-icon
name="mobile-issue-close"
class="align-bottom"
:class="{ invisible: !isOptionActive(option) }"
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue
View file @ edf6f2d2
......@@ -6,9 +6,9 @@ import { dateFormats } from './date_time_picker_lib';
const inputGroupText = {
invalidFeedback: sprintf(__('Format: %{dateFormat}'), {
dateFormat: dateFormats.stringDate,
dateFormat: dateFormats.inputFormat,
}),
placeholder: dateFormats.stringDate,
placeholder: dateFormats.inputFormat,
};
export default {
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
View file @ edf6f2d2
import dateformat from 'dateformat';
import { __ } from '~/locale';
/**
* 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]))?$/;
/**
* Default time ranges for the date picker.
* @see app/assets/javascripts/lib/utils/datetime_range.js
......@@ -34,23 +28,33 @@ export const defaultTimeRanges = [
export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default);
export const dateFormats = {
ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'",
stringDate: 'yyyy-mm-dd HH:MM:ss',
/**
* Format used by users to input dates
*
* Note: Should be a format that can be parsed by Date.parse.
*/
inputFormat: 'yyyy-mm-dd HH:MM:ss',
/**
* Format used to strip timezone from inputs
*/
stripTimezoneFormat: "yyyy-mm-dd'T'HH:MM:ss'Z'",
};
/**
* The URL params start and end need to be validated
* before passing them down to other components.
* Returns true if the date can be parsed succesfully after
* being typed by a user.
*
* @param {string} dateString
* @returns true if the string is a valid date, false otherwise
* It allows some ambiguity so validation is not strict.
*
* @param {string} value - Value as typed by the user
* @returns true if the value can be parsed as a valid date, false otherwise
*/
export const isValidDate = dateString => {
export const isValidInputString = value => {
try {
// dateformat throws error that can be caught.
// This is better than using `new Date()`
if (dateString && dateString.trim()) {
dateformat(dateString, 'isoDateTime');
if (value && value.trim()) {
dateformat(value, 'isoDateTime');
return true;
}
return false;
......@@ -60,25 +64,30 @@ export const isValidDate = dateString => {
};
/**
* Convert the input in Time picker component to ISO date.
* Convert the input in time picker component to an ISO date.
*
* @param {string} val
* @returns {string}
* @param {string} value
* @param {Boolean} utc - If true, it forces the date to by
* formatted using UTC format, ignoring the local time.
* @returns {Date}
*/
export const stringToISODate = val =>
dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true);
export const inputStringToIsoDate = (value, utc = false) => {
let date = new Date(value);
if (utc) {
// Forces date to be interpreted as UTC by stripping the timezone
// by formatting to a string with 'Z' and skipping timezone
date = dateformat(date, dateFormats.stripTimezoneFormat);
}
return dateformat(date, 'isoUtcDateTime');
};
/**
* Convert the ISO date received from the URL to string
* for the Time picker component.
* Converts a iso date string to a formatted string for the Time picker component.
*
* @param {Date} date
* @param {String} ISO Formatted 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 const isoDateToInputString = (date, utc = false) =>
dateformat(date, dateFormats.inputFormat, utc);
export default {};
locale/gitlab.pot
View file @ edf6f2d2
......@@ -6665,6 +6665,9 @@ msgstr ""
msgid "Custom range"
msgstr ""
msgid "Custom range (UTC)"
msgstr ""
msgid "CustomCycleAnalytics|Add a stage"
msgstr ""
......@@ -23465,6 +23468,9 @@ msgstr ""
msgid "URL or request ID"
msgstr ""
msgid "UTC"
msgstr ""
msgid "Unable to apply suggestions to a deleted line."
msgstr ""
......
spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
View file @ edf6f2d2
import * as dateTimePickerLib from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
import timezoneMock from 'timezone-mock';
import {
isValidInputString,
inputStringToIsoDate,
isoDateToInputString,
} from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
describe('date time picker lib', () => {
describe('isValidDate', () => {
describe('isValidInputString', () => {
[
{
input: '2019-09-09T00:00:00.000Z',
......@@ -48,121 +54,137 @@ describe('date time picker lib', () => {
output: false,
},
].forEach(({ input, output }) => {
it(`isValidDate return ${output} for ${input}`, () => {
expect(dateTimePickerLib.isValidDate(input)).toBe(output);
it(`isValidInputString return ${output} for ${input}`, () => {
expect(isValidInputString(input)).toBe(output);
});
});
});
describe('stringToISODate', () => {
['', 'null', undefined, 'abc'].forEach(input => {
describe('inputStringToIsoDate', () => {
[
'',
'null',
undefined,
'abc',
'xxxx-xx-xx',
'9999-99-19',
'2019-19-23',
'2019-09-23 x',
'2019-09-29 24:24:24',
].forEach(input => {
it(`throws error for invalid input like ${input}`, () => {
expect(() => dateTimePickerLib.stringToISODate(input)).toThrow();
expect(() => inputStringToIsoDate(input)).toThrow();
});
});
[
{
input: '2019-09-09 01:01:01',
output: '2019-09-09T01:01:01Z',
input: '2019-09-08 01:01:01',
output: '2019-09-08T01:01:01Z',
},
{
input: '2019-09-09 00:00:00',
output: '2019-09-09T00:00:00Z',
input: '2019-09-08 00:00:00',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-09-09 23:59:59',
output: '2019-09-09T23:59:59Z',
input: '2019-09-08 23:59:59',
output: '2019-09-08T23:59:59Z',
},
{
input: '2019-09-09',
output: '2019-09-09T00:00:00Z',
input: '2019-09-08',
output: '2019-09-08T00:00:00Z',
},
].forEach(({ input, output }) => {
it(`returns ${output} from ${input}`, () => {
expect(dateTimePickerLib.stringToISODate(input)).toBe(output);
});
});
});
describe('truncateZerosInDateTime', () => {
[
{
input: '',
output: '',
input: '2019-09-08',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-10-10',
output: '2019-10-10',
input: '2019-09-08 00:00:00',
output: '2019-09-08T00:00:00Z',
},
{
input: '2019-10-10 00:00:01',
output: '2019-10-10 00:00:01',
input: '2019-09-08 23:24:24',
output: '2019-09-08T23:24:24Z',
},
{
input: '2019-10-10 00:00:00',
output: '2019-10-10',
input: '2019-09-08 0:0:0',
output: '2019-09-08T00:00:00Z',
},
].forEach(({ input, output }) => {
it(`truncateZerosInDateTime return ${output} for ${input}`, () => {
expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output);
it(`returns ${output} from ${input}`, () => {
expect(inputStringToIsoDate(input)).toBe(output);
});
});
describe('timezone formatting', () => {
const value = '2019-09-08 01:01:01';
const utcResult = '2019-09-08T01:01:01Z';
const localResult = '2019-09-08T08:01:01Z';
test.each`
val | locatTimezone | utc | result
${value} | ${'UTC'} | ${undefined} | ${utcResult}
${value} | ${'UTC'} | ${false} | ${utcResult}
${value} | ${'UTC'} | ${true} | ${utcResult}
${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
${value} | ${'US/Pacific'} | ${false} | ${localResult}
${value} | ${'US/Pacific'} | ${true} | ${utcResult}
`(
'when timezone is $locatTimezone, formats $result for utc = $utc',
({ val, locatTimezone, utc, result }) => {
timezoneMock.register(locatTimezone);
expect(inputStringToIsoDate(val, utc)).toBe(result);
timezoneMock.unregister();
},
);
});
});
describe('isDateTimePickerInputValid', () => {
describe('isoDateToInputString', () => {
[
{
input: null,
output: false,
},
{
input: '',
output: false,
input: '2019-09-08T01:01:01Z',
output: '2019-09-08 01:01:01',
},
{
input: 'xxxx-xx-xx',
output: false,
input: '2019-09-08T01:01:01.999Z',
output: '2019-09-08 01:01:01',
},
{
input: '9999-99-19',
output: false,
},
{
input: '2019-19-23',
output: false,
},
{
input: '2019-09-23',
output: true,
},
{
input: '2019-09-23 x',
output: false,
},
{
input: '2019-09-29 0:0:0',
output: false,
},
{
input: '2019-09-29 00:00:00',
output: true,
},
{
input: '2019-09-29 24:24:24',
output: false,
},
{
input: '2019-09-29 23:24:24',
output: true,
},
{
input: '2019-09-29 23:24:24 ',
output: false,
input: '2019-09-08T00:00:00Z',
output: '2019-09-08 00:00:00',
},
].forEach(({ input, output }) => {
it(`returns ${output} for ${input}`, () => {
expect(dateTimePickerLib.isDateTimePickerInputValid(input)).toBe(output);
expect(isoDateToInputString(input)).toBe(output);
});
});
describe('timezone formatting', () => {
const value = '2019-09-08T08:01:01Z';
const utcResult = '2019-09-08 08:01:01';
const localResult = '2019-09-08 01:01:01';
test.each`
val | locatTimezone | utc | result
${value} | ${'UTC'} | ${undefined} | ${utcResult}
${value} | ${'UTC'} | ${false} | ${utcResult}
${value} | ${'UTC'} | ${true} | ${utcResult}
${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
${value} | ${'US/Pacific'} | ${false} | ${localResult}
${value} | ${'US/Pacific'} | ${true} | ${utcResult}
`(
'when timezone is $locatTimezone, formats $result for utc = $utc',
({ val, locatTimezone, utc, result }) => {
timezoneMock.register(locatTimezone);
expect(isoDateToInputString(val, utc)).toBe(result);
timezoneMock.unregister();
},
);
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7