/usr/share/grafana/public/app/plugins/datasource/opentsdb/components
import { css } from '@emotion/css'; import { useEffect, useState } from 'react'; import { GrafanaTheme2, QueryEditorProps, textUtil } from '@grafana/data'; import { useStyles2, Stack } from '@grafana/ui'; import OpenTsDatasource from '../datasource'; import { OpenTsdbOptions, OpenTsdbQuery } from '../types'; import { DownSample } from './DownSample'; import { FilterSection } from './FilterSection'; import { MetricSection } from './MetricSection'; import { RateSection } from './RateSection'; import { TagSection } from './TagSection'; export type OpenTsdbQueryEditorProps = QueryEditorProps<OpenTsDatasource, OpenTsdbQuery, OpenTsdbOptions>; export function OpenTsdbQueryEditor({ datasource, onRunQuery, onChange, query, range, queries, }: OpenTsdbQueryEditorProps) { const styles = useStyles2(getStyles); const [aggregators, setAggregators] = useState<string[]>([ 'avg', 'sum', 'min', 'max', 'dev', 'zimsum', 'mimmin', 'mimmax', ]); const fillPolicies: string[] = ['none', 'nan', 'null', 'zero']; const [filterTypes, setFilterTypes] = useState<string[]>([ 'wildcard', 'iliteral_or', 'not_iliteral_or', 'not_literal_or', 'iwildcard', 'literal_or', 'regexp', ]); const tsdbVersion: number = datasource.tsdbVersion; if (!query.aggregator) { query.aggregator = 'sum'; } if (!query.downsampleAggregator) { query.downsampleAggregator = 'avg'; } if (!query.downsampleFillPolicy) { query.downsampleFillPolicy = 'none'; } useEffect(() => { datasource.getAggregators().then((aggs: string[]) => { if (aggs.length !== 0) { setAggregators(aggs); } }); }, [datasource]); useEffect(() => { datasource.getFilterTypes().then((newFilterTypes: string[]) => { if (newFilterTypes.length !== 0) { setFilterTypes(newFilterTypes); } }); }, [datasource]); async function suggestMetrics(value: string): Promise<Array<{ value: string; description: string }>> { return datasource.metricFindQuery(`metrics(${value})`).then(getTextValues); } // previously called as an autocomplete on every input, // in this we call it once on init and filter in the MetricSection component async function suggestTagValues(value: string): Promise<Array<{ value: string; description: string }>> { return datasource.metricFindQuery(`suggest_tagv(${value})`).then(getTextValues); } async function suggestTagKeys(query: OpenTsdbQuery): Promise<string[]> { return datasource.suggestTagKeys(query); } function getTextValues(metrics: Array<{ text: string }>) { const variables = datasource.getVariables().map((value) => { return { value: textUtil.escapeHtml(value), description: value, }; }); const values = metrics.map((value: { text: string }) => { return { value: textUtil.escapeHtml(value.text), description: value.text, }; }); return variables.concat(values); } return ( <div className={styles.container} data-testid={testIds.editor}> <Stack gap={0.5} direction="column" grow={1}> <MetricSection query={query} onChange={onChange} onRunQuery={onRunQuery} suggestMetrics={suggestMetrics} aggregators={aggregators} /> <DownSample query={query} onChange={onChange} onRunQuery={onRunQuery} aggregators={aggregators} fillPolicies={fillPolicies} tsdbVersion={tsdbVersion} /> {tsdbVersion >= 2 && ( <FilterSection query={query} onChange={onChange} onRunQuery={onRunQuery} filterTypes={filterTypes} suggestTagValues={suggestTagValues} suggestTagKeys={suggestTagKeys} /> )} <TagSection query={query} onChange={onChange} onRunQuery={onRunQuery} suggestTagValues={suggestTagValues} suggestTagKeys={suggestTagKeys} tsdbVersion={tsdbVersion} /> <RateSection query={query} onChange={onChange} onRunQuery={onRunQuery} tsdbVersion={tsdbVersion} /> </Stack> </div> ); } function getStyles(theme: GrafanaTheme2) { return { container: css({ display: 'flex', }), toggleButton: css({ marginLeft: theme.spacing(0.5), }), }; } export const testIds = { editor: 'opentsdb-editor', };
.
Edit
..
Edit
AnnotationEditor.tsx
Edit
ConfigEditor.tsx
Edit
DownSample.test.tsx
Edit
DownSample.tsx
Edit
FilterSection.test.tsx
Edit
FilterSection.tsx
Edit
MetricSection.test.tsx
Edit
MetricSection.tsx
Edit
OpenTsdbDetails.tsx
Edit
OpenTsdbQueryEditor.test.tsx
Edit
OpenTsdbQueryEditor.tsx
Edit
RateSection.test.tsx
Edit
RateSection.tsx
Edit
TagSection.test.tsx
Edit
TagSection.tsx
Edit
styles.ts
Edit