IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimePicker: Fixes app crash when changing custom range to nothing (#26775)

Browse Source
This commit is contained in:
Hugo Häggmark 2020-08-04 09:00:52 +02:00 committed by GitHub
parent 4e2ab785d6
commit 353b3822c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.test.tsx Normal file
View File

@ -0,0 +1,53 @@
import { dateTime } from '@grafana/data';
import { inputToValue } from './TimePickerCalendar';
describe('inputToValue', () => {
describe('when called with valid dates', () => {
describe('and from is after to', () => {
it('then to should be first in the result', () => {
const from = dateTime('2020-04-16T11:00:00.000Z');
const to = dateTime('2020-04-16T10:00:00.000Z');
const result = inputToValue(from, to);
expect(result).toEqual([new Date('2020-04-16T10:00:00.000Z'), new Date('2020-04-16T11:00:00.000Z')]);
});
});
describe('and from is before to', () => {
it('then to should be second in the result', () => {
const from = dateTime('2020-04-16T10:00:00.000Z');
const to = dateTime('2020-04-16T11:00:00.000Z');
const result = inputToValue(from, to);
expect(result).toEqual([new Date('2020-04-16T10:00:00.000Z'), new Date('2020-04-16T11:00:00.000Z')]);
});
});
});
describe('when called with an invalid from datetime', () => {
it('then from should replaced with specified default', () => {
const from = dateTime('2020-04-32T10:00:00.000Z'); // invalid date
const to = dateTime('2020-04-16T10:00:00.000Z');
const invalidDateDefault = new Date('2020-04-16T11:00:00.000Z');
const result = inputToValue(from, to, invalidDateDefault);
expect(result).toEqual([new Date('2020-04-16T10:00:00.000Z'), new Date('2020-04-16T11:00:00.000Z')]);
});
});
describe('when called with an invalid to datetime', () => {
it('then to should replaced with specified default', () => {
const from = dateTime('2020-04-16T10:00:00.000Z');
const to = dateTime('2020-04-32T10:00:00.000Z'); // invalid date
const invalidDateDefault = new Date('2020-04-16T11:00:00.000Z');
const result = inputToValue(from, to, invalidDateDefault);
expect(result).toEqual([new Date('2020-04-16T10:00:00.000Z'), new Date('2020-04-16T11:00:00.000Z')]);
});
});
});

16
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
View File

@ -1,8 +1,8 @@
import React, { memo, useState, useEffect, useCallback, FormEvent } from 'react'; import React, { FormEvent, memo, useCallback, useEffect, useState } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import Calendar from 'react-calendar/dist/entry.nostyle'; import Calendar from 'react-calendar/dist/entry.nostyle';
import { GrafanaTheme, DateTime, TimeZone, dateTimeParse } from '@grafana/data'; import { dateTime, DateTime, dateTimeParse, GrafanaTheme, TimeZone } from '@grafana/data';
import { useTheme, stylesFactory } from '../../../themes'; import { stylesFactory, useTheme } from '../../../themes';
import { TimePickerTitle } from './TimePickerTitle'; import { TimePickerTitle } from './TimePickerTitle';
import { Button } from '../../Button'; import { Button } from '../../Button';
import { Icon } from '../../Icon/Icon'; import { Icon } from '../../Icon/Icon';
@ -285,14 +285,16 @@ const Footer = memo<Props>(({ onClose, onApply }) => {
); );
}); });
function inputToValue(from: DateTime, to: DateTime): Date[] { export function inputToValue(from: DateTime, to: DateTime, invalidDateDefault: Date = new Date()): Date[] {
const fromAsDate = from.toDate(); const fromAsDate = from.toDate();
const toAsDate = to.toDate(); const toAsDate = to.toDate();
const fromAsValidDate = dateTime(fromAsDate).isValid() ? fromAsDate : invalidDateDefault;
const toAsValidDate = dateTime(toAsDate).isValid() ? toAsDate : invalidDateDefault;
if (fromAsDate > toAsDate) { if (fromAsValidDate > toAsValidDate) {
return [toAsDate, fromAsDate]; return [toAsValidDate, fromAsValidDate];
} }
return [fromAsDate, toAsDate]; return [fromAsValidDate, toAsValidDate];
} }
function useOnCalendarChange(onChange: (from: DateTime, to: DateTime) => void, timeZone?: TimeZone) { function useOnCalendarChange(onChange: (from: DateTime, to: DateTime) => void, timeZone?: TimeZone) {