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', };