Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
1import * as React from 'react';
2import { EditOutlined } from '@ant-design/icons';
3import { DatePicker } from 'antd';
4import type { RangePickerProps } from 'antd/lib/date-picker';
5import moment, { Moment } from 'moment';
6
7import { DefaultIntervals } from '../../types/QueryTypes';
8import Text, { TextColors, TextSizes, TextWeights } from '../../uikit/Text';
9import { localizeAndFormatTimestamp } from '../../utils/DateUtils';
10import { CUSTOM_RANGE_OPTION, isEmptyDateRange } from '../../utils/QueryUtils';
11
12import { DATE_FORMAT } from '../../Constants';
13import styles from './QueryDatePicker.module.css';
14
15interface QueryDatePickerProps {
16 onIntervalChange: (interval: DefaultIntervals) => void;
17 onDateRangeChange: (dateRange: { start: string; end: string }) => void;
18 interval: DefaultIntervals;
19 dateRange: { start: string; end: string };
20}
21
22const QueryDatePicker = ({ onIntervalChange, onDateRangeChange, interval, dateRange }: QueryDatePickerProps) => {
23 const handleRangePickerChange: RangePickerProps['onChange'] = (dates, _) => {
24 if (dates == null) return;
25
26 const start = dates[0];
27 const end = dates[1];
28 if (start == null || end == null) return;
29
30 // Convert to UTC format for backend API
31 onDateRangeChange({ start: start.utc().format(), end: end.utc().format() });
32 };
33
34 const handleSwitchToCustomRange = () => {
35 onIntervalChange(CUSTOM_RANGE_OPTION);
36 };
37
38 const renderQueryIntervalOrDatePicker = () => {
39 if (interval === CUSTOM_RANGE_OPTION) {
40 const value = isEmptyDateRange(dateRange.start, dateRange.end)
41 ? undefined
42 : ([moment(dateRange.start), moment(dateRange.end)] as unknown as RangePickerProps['value']);
43
44 return (
45 <DatePicker.RangePicker
46 showTime={{ format: 'hh:mma', use12Hours: true }}
47 format={DATE_FORMAT}
48 placeholder={['Start Date', 'End Date']}
49 onChange={handleRangePickerChange}
50 value={value}
51 />
52 );
53 }
54
55 if (isEmptyDateRange(dateRange.start, dateRange.end)) return null;
56
57 return (
58 <Text
59 className={styles.interval}
60 size={TextSizes.SMALL}
61 weight={TextWeights.SEMIBOLD}
62 color={TextColors.LIGHT_SECONDARY}
63 >
64 Queried {`${localizeAndFormatTimestamp(dateRange.start)} - ${localizeAndFormatTimestamp(dateRange.end)}`}
65 <EditOutlined className={styles.editIcon} onClick={handleSwitchToCustomRange} />
66 </Text>
67 );
68 };
69
70 return <div className={styles.datePickerWrapper}>{renderQueryIntervalOrDatePicker()}</div>;
71};
72
73export default QueryDatePicker;