/usr/share/grafana/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code
import { useId } from 'react'; import { Stack, InlineField, Input, Select, TextArea } from '@grafana/ui'; import { InfluxQuery } from '../../../../../types'; import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants'; import { useShadowedState } from '../hooks/useShadowedState'; type Props = { query: InfluxQuery; onChange: (query: InfluxQuery) => void; onRunQuery: () => void; }; // we handle 3 fields: "query", "alias", "resultFormat" // "resultFormat" changes are applied immediately // "query" and "alias" changes only happen on onblur export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.Element => { const [currentQuery, setCurrentQuery] = useShadowedState(query.query); const [currentAlias, setCurrentAlias] = useShadowedState(query.alias); const aliasElementId = useId(); const selectElementId = useId(); const resultFormat = query.resultFormat ?? DEFAULT_RESULT_FORMAT; const applyDelayedChangesAndRunQuery = () => { onChange({ ...query, query: currentQuery, alias: currentAlias, resultFormat, }); onRunQuery(); }; return ( <Stack direction={'column'}> <TextArea aria-label="query" rows={3} spellCheck={false} placeholder="InfluxDB Query" onBlur={applyDelayedChangesAndRunQuery} onChange={(e) => { setCurrentQuery(e.currentTarget.value); }} value={currentQuery ?? ''} /> <Stack> <InlineField htmlFor={selectElementId} label="Format as"> <Select inputId={selectElementId} onChange={(v) => { onChange({ ...query, resultFormat: v.value }); onRunQuery(); }} value={resultFormat} options={RESULT_FORMATS} /> </InlineField> <InlineField htmlFor={aliasElementId} label="Alias by"> <Input id={aliasElementId} type="text" spellCheck={false} placeholder="Naming pattern" onBlur={applyDelayedChangesAndRunQuery} onChange={(e) => { setCurrentAlias(e.currentTarget.value); }} value={currentAlias ?? ''} /> </InlineField> </Stack> </Stack> ); };
.
Edit
..
Edit
RawInfluxQLEditor.test.tsx
Edit
RawInfluxQLEditor.tsx
Edit