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: fixed so you can enter a relative range in the time picker without being converted to absolute range (#24534)

Browse Source 
* fixed so you can enter a relative date in the time range form.

* did some small adjustments to make sure proper value is stored.
This commit is contained in:
Marcus Andersson 2020-05-12 09:47:50 +02:00 committed by GitHub
parent 64046e9a27
commit 28f54bc2f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/grafana-data/src/datetime/rangeutil.ts
View File

@ -63,10 +63,33 @@ const rangeOptions = [
{ from: 'now-5y', to: 'now', display: 'Last 5 years', section: 0 },
];
const hiddenRangeOptions = [
{ from: 'now', to: 'now+1m', display: 'Next minute', section: 3 },
{ from: 'now', to: 'now+5m', display: 'Next 5 minutes', section: 3 },
{ from: 'now', to: 'now+15m', display: 'Next 15 minutes', section: 3 },
{ from: 'now', to: 'now+30m', display: 'Next 30 minutes', section: 3 },
{ from: 'now', to: 'now+1h', display: 'Next hour', section: 3 },
{ from: 'now', to: 'now+3h', display: 'Next 3 hours', section: 3 },
{ from: 'now', to: 'now+6h', display: 'Next 6 hours', section: 3 },
{ from: 'now', to: 'now+12h', display: 'Next 12 hours', section: 3 },
{ from: 'now', to: 'now+24h', display: 'Next 24 hours', section: 3 },
{ from: 'now', to: 'now+2d', display: 'Next 2 days', section: 0 },
{ from: 'now', to: 'now+7d', display: 'Next 7 days', section: 0 },
{ from: 'now', to: 'now+30d', display: 'Next 30 days', section: 0 },
{ from: 'now', to: 'now+90d', display: 'Next 90 days', section: 0 },
{ from: 'now', to: 'now+6M', display: 'Next 6 months', section: 0 },
{ from: 'now', to: 'now+1y', display: 'Next year', section: 0 },
{ from: 'now', to: 'now+2y', display: 'Next 2 years', section: 0 },
{ from: 'now', to: 'now+5y', display: 'Next 5 years', section: 0 },
];
const rangeIndex: any = {};
each(rangeOptions, (frame: any) => {
rangeIndex[frame.from + ' to ' + frame.to] = frame;
});
each(hiddenRangeOptions, (frame: any) => {
rangeIndex[frame.from + ' to ' + frame.to] = frame;
});
export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
const groups = groupBy(rangeOptions, (option: any) => {
@ -188,8 +211,13 @@ export const describeTimeRangeAbbrevation = (range: TimeRange, timeZone?: TimeZo
return parsed ? timeZoneAbbrevation(parsed, { timeZone }) : '';
};
export const convertRawToRange = (raw: RawTimeRange): TimeRange => {
const from = dateTimeParse(raw.from, { roundUp: false });
const to = dateTimeParse(raw.to, { roundUp: true });
return { from, to, raw };
export const convertRawToRange = (raw: RawTimeRange, timeZone?: TimeZone): TimeRange => {
const from = dateTimeParse(raw.from, { roundUp: false, timeZone });
const to = dateTimeParse(raw.to, { roundUp: true, timeZone });
if (dateMath.isMathString(raw.from) || dateMath.isMathString(raw.to)) {
return { from, to, raw };
}
return { from, to, raw: { from, to } };
};

7
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx
View File

@ -8,6 +8,7 @@ import {
dateTimeFormat,
dateTimeParse,
rangeUtil,
RawTimeRange,
} from '@grafana/data';
import { TimePickerCalendar } from './TimePickerCalendar';
import { Field } from '../../Forms/Field';
@ -59,10 +60,8 @@ export const TimeRangeForm: React.FC<Props> = props => {
return;
}
const timeRange = rangeUtil.convertRawToRange({
from: dateTimeParse(from.value, { timeZone }),
to: dateTimeParse(to.value, { timeZone }),
});
const raw: RawTimeRange = { from: from.value, to: to.value };
const timeRange = rangeUtil.convertRawToRange(raw, timeZone);
props.onApply(timeRange);
}, [from, to, roundup, timeZone]);

2
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeList.tsx
View File

@ -69,7 +69,7 @@ const Options: React.FC<Props> = ({ options, value, onSelect, timeZone }) => {
key={keyForOption(option, index)}
value={option}
selected={isEqual(option, value)}
onSelect={option => onSelect(mapOptionToTimeRange(option))}
onSelect={option => onSelect(mapOptionToTimeRange(option, timeZone))}
/>
))}
</div>

4
packages/grafana-ui/src/components/TimePicker/TimePickerContent/mapper.ts
View File

@ -1,7 +1,7 @@
import { TimeOption, TimeRange, TimeZone, rangeUtil, dateTimeFormat, dateTimeFormatISO } from '@grafana/data';
export const mapOptionToTimeRange = (option: TimeOption): TimeRange => {
return rangeUtil.convertRawToRange({ from: option.from, to: option.to });
export const mapOptionToTimeRange = (option: TimeOption, timeZone?: TimeZone): TimeRange => {
return rangeUtil.convertRawToRange({ from: option.from, to: option.to }, timeZone);
};
export const mapRangeToTimeOption = (range: TimeRange, timeZone?: TimeZone): TimeOption => {