-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
ExploreTimeControls.tsx
101 lines (88 loc) · 3.06 KB
/
ExploreTimeControls.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { Component } from 'react';
import { TimeRange, TimeZone, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
import { ExploreId } from 'app/types';
import { TimeSyncButton } from './TimeSyncButton';
export interface Props {
exploreId: ExploreId;
hideText?: boolean;
range: TimeRange;
timeZone: TimeZone;
fiscalYearStartMonth: number;
splitted: boolean;
syncedTimes: boolean;
onChangeTimeSync: () => void;
onChangeTime: (range: RawTimeRange) => void;
onChangeTimeZone: (timeZone: TimeZone) => void;
onChangeFiscalYearStartMonth: (fiscalYearStartMonth: number) => 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) => {
const adjustedFrom = dateMath.isMathString(timeRange.raw.from) ? timeRange.raw.from : timeRange.from;
const adjustedTo = dateMath.isMathString(timeRange.raw.to) ? timeRange.raw.to : timeRange.to;
this.props.onChangeTime({
from: adjustedFrom,
to: adjustedTo,
});
reportInteraction('grafana_explore_time_picker_time_range_changed', {
timeRangeFrom: adjustedFrom,
timeRangeTo: adjustedTo,
});
};
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,
fiscalYearStartMonth,
splitted,
syncedTimes,
onChangeTimeSync,
hideText,
onChangeTimeZone,
onChangeFiscalYearStartMonth,
} = this.props;
const timeSyncButton = splitted ? <TimeSyncButton onClick={onChangeTimeSync} isSynced={syncedTimes} /> : undefined;
const timePickerCommonProps = {
value: range,
timeZone,
fiscalYearStartMonth,
onMoveBackward: this.onMoveBack,
onMoveForward: this.onMoveForward,
onZoom: this.onZoom,
hideText,
};
return (
<TimePickerWithHistory
{...timePickerCommonProps}
timeSyncButton={timeSyncButton}
isSynced={syncedTimes}
widthOverride={splitted ? window.innerWidth / 2 : undefined}
onChange={this.onChangeTimePicker}
onChangeTimeZone={onChangeTimeZone}
onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
/>
);
}
}