1import React, { ChangeEvent, FC } from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui'; 4import { downsamplingTypes, ExpressionQuery, upsamplingTypes } from '../types'; 5 6interface Props { 7 refIds: Array<SelectableValue<string>>; 8 query: ExpressionQuery; 9 labelWidth: number; 10 onChange: (query: ExpressionQuery) => void; 11} 12 13export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) => { 14 const downsampler = downsamplingTypes.find((o) => o.value === query.downsampler); 15 const upsampler = upsamplingTypes.find((o) => o.value === query.upsampler); 16 17 const onWindowChange = (event: ChangeEvent<HTMLInputElement>) => { 18 onChange({ ...query, window: event.target.value }); 19 }; 20 21 const onRefIdChange = (value: SelectableValue<string>) => { 22 onChange({ ...query, expression: value.value }); 23 }; 24 25 const onSelectDownsampler = (value: SelectableValue<string>) => { 26 onChange({ ...query, downsampler: value.value }); 27 }; 28 29 const onSelectUpsampler = (value: SelectableValue<string>) => { 30 onChange({ ...query, upsampler: value.value }); 31 }; 32 33 return ( 34 <> 35 <InlineFieldRow> 36 <InlineField label="Input" labelWidth={labelWidth}> 37 <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} /> 38 </InlineField> 39 </InlineFieldRow> 40 <InlineFieldRow> 41 <InlineField label="Resample to" labelWidth={labelWidth} tooltip="10s, 1m, 30m, 1h"> 42 <Input onChange={onWindowChange} value={query.window} width={15} /> 43 </InlineField> 44 <InlineField label="Downsample"> 45 <Select 46 menuShouldPortal 47 options={downsamplingTypes} 48 value={downsampler} 49 onChange={onSelectDownsampler} 50 width={25} 51 /> 52 </InlineField> 53 <InlineField label="Upsample"> 54 <Select 55 menuShouldPortal 56 options={upsamplingTypes} 57 value={upsampler} 58 onChange={onSelectUpsampler} 59 width={25} 60 /> 61 </InlineField> 62 </InlineFieldRow> 63 </> 64 ); 65}; 66