mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
1abbb477cf
* draft on a unified TimeZonePicker. * most of the data structures is in place. * wip. * wip. * wip: timezone selector in progress.2 * fixed so we have proper data on all timezones. * started to add timezone into time picker. * addeing time zone footer. * footer is working. * fixed so we use the timeZone picker in shared preferences. * Added so we can change timeZone from picker. * did some styling changes. * will update timezone on all places that we need to update it. * removed console.log * removed magic string. * fixed border on calendar. * ignoring eslint cache. * cleaned up the code a bit. * made the default selectable. * corrected so the behaviour about default works as expected. * excluded timezone from change tracker. * revert so default will always be the intial value. * default will always fallback to the one in the config. * do the country mapping on startup. * fixed nit. * updated snapshots for timepicker. * fixed build errors. * updating so snapshot tests is in sync. * removed Date.now from prop since it will change each run in the snapshot tests. * fixed so e2e tests works as before. * moved files into separate folders.
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
// Libaries
|
|
import React, { Component } from 'react';
|
|
|
|
// Types
|
|
import { ExploreId } from 'app/types';
|
|
import { TimeRange, TimeZone, RawTimeRange, dateTimeForTimeZone } from '@grafana/data';
|
|
|
|
// State
|
|
|
|
// Components
|
|
import { TimeSyncButton } from './TimeSyncButton';
|
|
import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
|
|
|
|
// Utils & Services
|
|
import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
|
|
|
|
export interface Props {
|
|
exploreId: ExploreId;
|
|
hideText?: boolean;
|
|
range: TimeRange;
|
|
timeZone: TimeZone;
|
|
splitted: boolean;
|
|
syncedTimes: boolean;
|
|
onChangeTimeSync: () => void;
|
|
onChangeTime: (range: RawTimeRange) => void;
|
|
onChangeTimeZone: (timeZone: TimeZone) => void;
|
|
}
|
|
|
|
export class ExploreTimeControls extends Component<Props> {
|
|
onMoveTimePicker = (direction: number) => {
|
|
const { range, onChangeTime, timeZone } = this.props;
|
|
const { from, to } = getShiftedTimeRange(direction, range);
|
|
const nextTimeRange = {
|
|
from: dateTimeForTimeZone(timeZone, from),
|
|
to: dateTimeForTimeZone(timeZone, to),
|
|
};
|
|
|
|
onChangeTime(nextTimeRange);
|
|
};
|
|
|
|
onMoveForward = () => this.onMoveTimePicker(1);
|
|
onMoveBack = () => this.onMoveTimePicker(-1);
|
|
|
|
onChangeTimePicker = (timeRange: TimeRange) => {
|
|
this.props.onChangeTime(timeRange.raw);
|
|
};
|
|
|
|
onZoom = () => {
|
|
const { range, onChangeTime, timeZone } = this.props;
|
|
const { from, to } = getZoomedTimeRange(range, 2);
|
|
const nextTimeRange = {
|
|
from: dateTimeForTimeZone(timeZone, from),
|
|
to: dateTimeForTimeZone(timeZone, to),
|
|
};
|
|
|
|
onChangeTime(nextTimeRange);
|
|
};
|
|
|
|
render() {
|
|
const { range, timeZone, splitted, syncedTimes, onChangeTimeSync, hideText, onChangeTimeZone } = this.props;
|
|
const timeSyncButton = splitted ? <TimeSyncButton onClick={onChangeTimeSync} isSynced={syncedTimes} /> : undefined;
|
|
const timePickerCommonProps = {
|
|
value: range,
|
|
timeZone,
|
|
onMoveBackward: this.onMoveBack,
|
|
onMoveForward: this.onMoveForward,
|
|
onZoom: this.onZoom,
|
|
hideText,
|
|
};
|
|
|
|
return (
|
|
<TimePickerWithHistory
|
|
{...timePickerCommonProps}
|
|
timeSyncButton={timeSyncButton}
|
|
isSynced={syncedTimes}
|
|
onChange={this.onChangeTimePicker}
|
|
onChangeTimeZone={onChangeTimeZone}
|
|
/>
|
|
);
|
|
}
|
|
}
|