58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { memo, ChangeEvent, FormEvent } from 'react';
|
|
|
|
import { IntervalVariableModel, SelectableValue } from '@grafana/data';
|
|
import { IntervalVariableForm } from 'app/features/dashboard-scene/settings/variables/components/IntervalVariableForm';
|
|
|
|
import { VariableEditorProps } from '../editor/types';
|
|
|
|
export interface Props extends VariableEditorProps<IntervalVariableModel> {}
|
|
|
|
export const IntervalVariableEditor = memo(({ onPropChange, variable }: Props) => {
|
|
const onAutoChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
onPropChange({
|
|
propName: 'auto',
|
|
propValue: event.target.checked,
|
|
updateOptions: true,
|
|
});
|
|
};
|
|
|
|
const onQueryBlur = (event: FormEvent<HTMLInputElement>) => {
|
|
onPropChange({
|
|
propName: 'query',
|
|
propValue: event.currentTarget.value,
|
|
updateOptions: true,
|
|
});
|
|
};
|
|
|
|
const onAutoCountChanged = (option: SelectableValue<number>) => {
|
|
onPropChange({
|
|
propName: 'auto_count',
|
|
propValue: option.value,
|
|
updateOptions: true,
|
|
});
|
|
};
|
|
|
|
const onAutoMinChanged = (event: FormEvent<HTMLInputElement>) => {
|
|
onPropChange({
|
|
propName: 'auto_min',
|
|
propValue: event.currentTarget.value,
|
|
updateOptions: true,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<IntervalVariableForm
|
|
intervals={variable.query}
|
|
autoStepCount={variable.auto_count}
|
|
autoEnabled={variable.auto}
|
|
onAutoCountChanged={onAutoCountChanged}
|
|
onIntervalsChange={onQueryBlur}
|
|
onAutoEnabledChange={onAutoChange}
|
|
onAutoMinIntervalChanged={onAutoMinChanged}
|
|
autoMinInterval={variable.auto_min}
|
|
/>
|
|
);
|
|
});
|
|
|
|
IntervalVariableEditor.displayName = 'IntervalVariableEditor';
|