105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import { InlineLabel, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
|
|
|
|
import { OpenTsdbQuery } from '../types';
|
|
|
|
export interface RateSectionProps {
|
|
query: OpenTsdbQuery;
|
|
onChange: (query: OpenTsdbQuery) => void;
|
|
onRunQuery: () => void;
|
|
tsdbVersion: number;
|
|
}
|
|
|
|
export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSectionProps) {
|
|
return (
|
|
<Stack gap={0} data-testid={testIds.section}>
|
|
<InlineFormLabel className="query-keyword" width={8}>
|
|
Rate
|
|
</InlineFormLabel>
|
|
<InlineSwitch
|
|
data-testid={testIds.shouldComputeRate}
|
|
value={query.shouldComputeRate ?? false}
|
|
onChange={() => {
|
|
const shouldComputeRate = query.shouldComputeRate ?? false;
|
|
onChange({ ...query, shouldComputeRate: !shouldComputeRate });
|
|
onRunQuery();
|
|
}}
|
|
/>
|
|
|
|
{query.shouldComputeRate && (
|
|
<>
|
|
<InlineFormLabel className="query-keyword" width={'auto'}>
|
|
Counter
|
|
</InlineFormLabel>
|
|
<InlineSwitch
|
|
data-testid={testIds.isCounter}
|
|
value={query.isCounter ?? false}
|
|
onChange={() => {
|
|
const isCounter = query.isCounter ?? false;
|
|
onChange({ ...query, isCounter: !isCounter });
|
|
onRunQuery();
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{query.shouldComputeRate && query.isCounter && (
|
|
<Stack gap={0}>
|
|
<InlineLabel width={'auto'} className="query-keyword">
|
|
Counter max
|
|
</InlineLabel>
|
|
<Input
|
|
data-testid={testIds.counterMax}
|
|
placeholder="max value"
|
|
value={query.counterMax ?? ''}
|
|
onChange={(e) => {
|
|
const value = e.currentTarget.value;
|
|
onChange({ ...query, counterMax: value });
|
|
}}
|
|
onBlur={() => onRunQuery()}
|
|
/>
|
|
<InlineLabel width={'auto'} className="query-keyword">
|
|
Reset value
|
|
</InlineLabel>
|
|
<Input
|
|
data-testid={testIds.counterResetValue}
|
|
placeholder="reset value"
|
|
value={query.counterResetValue ?? ''}
|
|
onChange={(e) => {
|
|
const value = e.currentTarget.value;
|
|
onChange({ ...query, counterResetValue: value });
|
|
}}
|
|
onBlur={() => onRunQuery()}
|
|
/>
|
|
</Stack>
|
|
)}
|
|
{tsdbVersion > 2 && (
|
|
<>
|
|
<InlineFormLabel className="query-keyword" width={'auto'}>
|
|
Explicit tags
|
|
</InlineFormLabel>
|
|
<InlineSwitch
|
|
data-testid={testIds.explicitTags}
|
|
value={query.explicitTags ?? false}
|
|
onChange={() => {
|
|
const explicitTags = query.explicitTags ?? false;
|
|
onChange({ ...query, explicitTags: !explicitTags });
|
|
onRunQuery();
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
<Stack gap={0} grow={1}>
|
|
<InlineLabel> </InlineLabel>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export const testIds = {
|
|
section: 'opentsdb-rate',
|
|
shouldComputeRate: 'opentsdb-shouldComputeRate',
|
|
isCounter: 'opentsdb-is-counter',
|
|
counterMax: 'opentsdb-counter-max',
|
|
counterResetValue: 'opentsdb-counter-reset-value',
|
|
explicitTags: 'opentsdb-explicit-tags',
|
|
};
|