import React from 'react'; import { Stack } from '@grafana/ui'; import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox'; import { OperationListExplained } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationListExplained'; import { RawQuery } from 'app/plugins/datasource/prometheus/querybuilder/shared/RawQuery'; 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 = React.memo(({ query }) => { const visQuery = buildVisualQueryFromString(query || '').query; const lang = { grammar: lokiGrammar, name: 'lokiql' }; return ( } > {EXPLAIN_LABEL_FILTER_CONTENT} stepNumber={2} queryModeller={lokiQueryModeller} query={visQuery} lang={lang} /> ); }); LokiQueryBuilderExplained.displayName = 'LokiQueryBuilderExplained';