40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
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';
|