90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { SyntheticEvent, useId } from 'react';
|
|
|
|
import { DataSourceSettings, SelectableValue } from '@grafana/data';
|
|
import { Select, Input, Field, FieldSet } from '@grafana/ui';
|
|
|
|
import { OpenTsdbOptions } from '../types';
|
|
|
|
const tsdbVersions = [
|
|
{ label: '<=2.1', value: 1 },
|
|
{ label: '==2.2', value: 2 },
|
|
{ label: '==2.3', value: 3 },
|
|
{ label: '==2.4', value: 4 },
|
|
];
|
|
|
|
const tsdbResolutions = [
|
|
{ label: 'second', value: 1 },
|
|
{ label: 'millisecond', value: 2 },
|
|
];
|
|
|
|
interface Props {
|
|
value: DataSourceSettings<OpenTsdbOptions>;
|
|
onChange: (value: DataSourceSettings<OpenTsdbOptions>) => void;
|
|
}
|
|
|
|
export const OpenTsdbDetails = (props: Props) => {
|
|
const { onChange, value } = props;
|
|
|
|
const idSuffix = useId();
|
|
|
|
return (
|
|
<>
|
|
<FieldSet label="OpenTSDB settings">
|
|
<Field htmlFor={`select-version-${idSuffix}`} label="Version">
|
|
<Select
|
|
inputId={`select-version-${idSuffix}`}
|
|
options={tsdbVersions}
|
|
value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
|
|
onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
|
|
width={20}
|
|
/>
|
|
</Field>
|
|
<Field htmlFor={`select-resolution-${idSuffix}`} label="Resolution">
|
|
<Select
|
|
inputId={`select-resolution-${idSuffix}`}
|
|
options={tsdbResolutions}
|
|
value={
|
|
tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??
|
|
tsdbResolutions[0]
|
|
}
|
|
onChange={onSelectChangeHandler('tsdbResolution', value, onChange)}
|
|
width={20}
|
|
/>
|
|
</Field>
|
|
<Field htmlFor={`lookup-input-${idSuffix}`} label="Lookup limit">
|
|
<Input
|
|
id={`lookup-input-${idSuffix}`}
|
|
type="number"
|
|
value={value.jsonData.lookupLimit ?? 1000}
|
|
onChange={onInputChangeHandler('lookupLimit', value, onChange)}
|
|
width={20}
|
|
/>
|
|
</Field>
|
|
</FieldSet>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const onSelectChangeHandler =
|
|
(key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (newValue: SelectableValue) => {
|
|
onChange({
|
|
...value,
|
|
jsonData: {
|
|
...value.jsonData,
|
|
[key]: newValue.value,
|
|
},
|
|
});
|
|
};
|
|
|
|
const onInputChangeHandler =
|
|
(key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) =>
|
|
(event: SyntheticEvent<HTMLInputElement>) => {
|
|
onChange({
|
|
...value,
|
|
jsonData: {
|
|
...value.jsonData,
|
|
[key]: event.currentTarget.value,
|
|
},
|
|
});
|
|
};
|