98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import { toOption } from '@grafana/data';
|
|
import { InlineLabel, Select, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
|
|
|
|
import { OpenTsdbQuery } from '../types';
|
|
|
|
export interface DownSampleProps {
|
|
query: OpenTsdbQuery;
|
|
onChange: (query: OpenTsdbQuery) => void;
|
|
onRunQuery: () => void;
|
|
aggregators: string[];
|
|
fillPolicies: string[];
|
|
tsdbVersion: number;
|
|
}
|
|
|
|
export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolicies, tsdbVersion }: DownSampleProps) {
|
|
const aggregatorOptions = aggregators.map((value: string) => toOption(value));
|
|
const fillPolicyOptions = fillPolicies.map((value: string) => toOption(value));
|
|
|
|
return (
|
|
<Stack gap={0.5} alignItems="flex-start" data-testid={testIds.section}>
|
|
<Stack gap={0}>
|
|
<InlineFormLabel
|
|
className="query-keyword"
|
|
width={8}
|
|
tooltip={
|
|
<div>
|
|
Leave interval blank for auto or for example use <code>1m</code>
|
|
</div>
|
|
}
|
|
>
|
|
Down sample
|
|
</InlineFormLabel>
|
|
<Input
|
|
width={25}
|
|
data-testid={testIds.interval}
|
|
placeholder="interval"
|
|
value={query.downsampleInterval ?? ''}
|
|
onChange={(e) => {
|
|
const value = e.currentTarget.value;
|
|
onChange({ ...query, downsampleInterval: value });
|
|
}}
|
|
onBlur={() => onRunQuery()}
|
|
/>
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<InlineFormLabel width={'auto'} className="query-keyword">
|
|
Aggregator
|
|
</InlineFormLabel>
|
|
<Select
|
|
value={query.downsampleAggregator ? toOption(query.downsampleAggregator) : undefined}
|
|
options={aggregatorOptions}
|
|
onChange={({ value }) => {
|
|
if (value) {
|
|
onChange({ ...query, downsampleAggregator: value });
|
|
onRunQuery();
|
|
}
|
|
}}
|
|
/>
|
|
</Stack>
|
|
{tsdbVersion >= 2 && (
|
|
<Stack gap={0} alignItems="flex-start">
|
|
<InlineLabel className="width-6 query-keyword">Fill</InlineLabel>
|
|
<Select
|
|
inputId="opentsdb-fillpolicy-select"
|
|
value={query.downsampleFillPolicy ? toOption(query.downsampleFillPolicy) : undefined}
|
|
options={fillPolicyOptions}
|
|
onChange={({ value }) => {
|
|
if (value) {
|
|
onChange({ ...query, downsampleFillPolicy: value });
|
|
onRunQuery();
|
|
}
|
|
}}
|
|
/>
|
|
</Stack>
|
|
)}
|
|
<Stack gap={0}>
|
|
<InlineFormLabel className="query-keyword">Disable downsampling</InlineFormLabel>
|
|
<InlineSwitch
|
|
value={query.disableDownsampling ?? false}
|
|
onChange={() => {
|
|
const disableDownsampling = query.disableDownsampling ?? false;
|
|
onChange({ ...query, disableDownsampling: !disableDownsampling });
|
|
onRunQuery();
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<Stack gap={0} grow={1}>
|
|
<InlineLabel> </InlineLabel>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export const testIds = {
|
|
section: 'opentsdb-downsample',
|
|
interval: 'downsample-interval',
|
|
};
|