import { memo } from 'react'; import { OperationExplainedBox, OperationListExplained, RawQuery } from '@grafana/plugin-ui'; import { Stack } from '@grafana/ui'; import { lokiGrammar } from '../../syntax'; import { lokiQueryModeller } from '../LokiQueryModeller'; import { buildVisualQueryFromString } from '../parsing'; import { LokiVisualQuery } from '../types'; export const EXPLAIN_LABEL_FILTER_CONTENT = 'Fetch all log lines matching label filters.'; export interface Props { query: string; } export const LokiQueryBuilderExplained = memo<Props>(({ query }) => { const visQuery = buildVisualQueryFromString(query || '').query; const lang = { grammar: lokiGrammar, name: 'lokiql' }; return ( <Stack gap={0} direction="column"> <OperationExplainedBox stepNumber={1} title={<RawQuery query={`${lokiQueryModeller.renderLabels(visQuery.labels)}`} language={lang} />} > {EXPLAIN_LABEL_FILTER_CONTENT} </OperationExplainedBox> <OperationListExplained<LokiVisualQuery> stepNumber={2} queryModeller={lokiQueryModeller} query={visQuery} language={lang} /> </Stack> ); }); LokiQueryBuilderExplained.displayName = 'LokiQueryBuilderExplained';