1import React, { useCallback, useMemo } from 'react';
2import { Select } from '@grafana/ui';
3import { SelectableValue } from '@grafana/data';
4
5import { Field } from '../Field';
6import TimegrainConverter from '../../time_grain_converter';
7import { AzureQueryEditorFieldProps, AzureMonitorOption } from '../../types';
8import { setTimeGrain } from './setQueryValue';
9
10interface TimeGrainFieldProps extends AzureQueryEditorFieldProps {
11  timeGrainOptions: AzureMonitorOption[];
12}
13
14const TimeGrainField: React.FC<TimeGrainFieldProps> = ({
15  query,
16  timeGrainOptions,
17  variableOptionGroup,
18  onQueryChange,
19}) => {
20  const handleChange = useCallback(
21    (change: SelectableValue<string>) => {
22      if (!change.value) {
23        return;
24      }
25
26      const newQuery = setTimeGrain(query, change.value);
27      onQueryChange(newQuery);
28    },
29    [onQueryChange, query]
30  );
31
32  const timeGrains = useMemo(() => {
33    const autoInterval = TimegrainConverter.findClosestTimeGrain(
34      '1m',
35      timeGrainOptions.map((o) => TimegrainConverter.createKbnUnitFromISO8601Duration(o.value)) || [
36        '1m',
37        '5m',
38        '15m',
39        '30m',
40        '1h',
41        '6h',
42        '12h',
43        '1d',
44      ]
45    );
46
47    const baseTimeGrains = timeGrainOptions.map((v) => (v.value === 'auto' ? { ...v, description: autoInterval } : v));
48
49    return [...baseTimeGrains, variableOptionGroup];
50  }, [timeGrainOptions, variableOptionGroup]);
51
52  return (
53    <Field label="Time grain">
54      <Select
55        menuShouldPortal
56        inputId="azure-monitor-metrics-time-grain-field"
57        value={query.azureMonitor?.timeGrain}
58        onChange={handleChange}
59        options={timeGrains}
60        width={38}
61      />
62    </Field>
63  );
64};
65
66export default TimeGrainField;
67