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