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