1import React from 'react';
2import { FieldOverrideEditorProps, rangeUtil, SelectableValue } from '@grafana/data';
3import { HorizontalGroup, Input, RadioButtonGroup } from '@grafana/ui';
4
5const GAPS_OPTIONS: Array<SelectableValue<boolean | number>> = [
6  {
7    label: 'Never',
8    value: false,
9  },
10  {
11    label: 'Always',
12    value: true,
13  },
14  {
15    label: 'Threshold',
16    value: 3600000, // 1h
17  },
18];
19
20export const SpanNullsEditor: React.FC<FieldOverrideEditorProps<boolean | number, any>> = ({ value, onChange }) => {
21  const isThreshold = typeof value === 'number';
22  const formattedTime = isThreshold ? rangeUtil.secondsToHms((value as number) / 1000) : undefined;
23  GAPS_OPTIONS[2].value = isThreshold ? (value as number) : 3600000; // 1h
24
25  const checkAndUpdate = (txt: string) => {
26    let val: boolean | number = false;
27    if (txt) {
28      try {
29        val = rangeUtil.intervalToSeconds(txt) * 1000;
30      } catch (err) {
31        console.warn('ERROR', err);
32      }
33    }
34    onChange(val);
35  };
36
37  const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
38    if (e.key !== 'Enter') {
39      return;
40    }
41    checkAndUpdate((e.target as any).value);
42  };
43
44  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
45    checkAndUpdate(e.target.value);
46  };
47
48  return (
49    <HorizontalGroup>
50      <RadioButtonGroup value={value} options={GAPS_OPTIONS} onChange={onChange} />
51      {isThreshold && (
52        <Input
53          autoFocus={false}
54          placeholder="never"
55          width={10}
56          defaultValue={formattedTime}
57          onKeyDown={handleEnterKey}
58          onBlur={handleBlur}
59          prefix={<div>&lt;</div>}
60          spellCheck={false}
61        />
62      )}
63    </HorizontalGroup>
64  );
65};
66