56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { SelectableValue } from '@grafana/data';
|
|
import { Select } from '@grafana/ui';
|
|
|
|
import { getAlignmentPickerData } from '../functions';
|
|
import { PreprocessorType, SLOQuery, TimeSeriesList } from '../types/query';
|
|
import { MetricDescriptor } from '../types/types';
|
|
|
|
export interface Props {
|
|
inputId: string;
|
|
onChange: (query: TimeSeriesList | SLOQuery) => void;
|
|
query: TimeSeriesList | SLOQuery;
|
|
templateVariableOptions: Array<SelectableValue<string>>;
|
|
metricDescriptor?: MetricDescriptor;
|
|
preprocessor?: PreprocessorType;
|
|
}
|
|
|
|
export const AlignmentFunction = ({
|
|
inputId,
|
|
query,
|
|
templateVariableOptions,
|
|
onChange,
|
|
metricDescriptor,
|
|
preprocessor,
|
|
}: Props) => {
|
|
const { perSeriesAligner: psa } = query;
|
|
let { valueType, metricKind } = metricDescriptor || {};
|
|
|
|
const { perSeriesAligner, alignOptions } = useMemo(
|
|
() => getAlignmentPickerData(valueType, metricKind, psa, preprocessor),
|
|
[valueType, metricKind, psa, preprocessor]
|
|
);
|
|
|
|
return (
|
|
<Select
|
|
onChange={({ value }) => onChange({ ...query, perSeriesAligner: value! })}
|
|
value={[...alignOptions, ...templateVariableOptions].find((s) => s.value === perSeriesAligner)}
|
|
options={[
|
|
{
|
|
label: 'Template Variables',
|
|
options: templateVariableOptions,
|
|
},
|
|
{
|
|
label: 'Alignment options',
|
|
expanded: true,
|
|
options: alignOptions,
|
|
},
|
|
]}
|
|
placeholder="Select Alignment"
|
|
inputId={inputId}
|
|
menuPlacement="top"
|
|
/>
|
|
);
|
|
};
|