IntelliSense: Fix autocomplete and highlighting for Loki, Prometheus, Cloudwatch (#29381)

* Pass languages directly to SlatePrism plugin

* Update

* Remove unused variables

* Update packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Update public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Update public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Update public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Update public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Try Prism import instead of languages

* Update webpack

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
This commit is contained in:
Ivana Huckova
2020-12-02 14:09:55 +01:00
committed by GitHub
parent 3dcfe54d8d
commit 2a61d7ff9f
13 changed files with 69 additions and 48 deletions

View File

@@ -192,7 +192,7 @@ const CLIQ_EXAMPLES: QueryExample[] = [
];
function renderHighlightedMarkup(code: string, keyPrefix: string) {
const grammar = Prism.languages['cloudwatch'] ?? tokenizer;
const grammar = tokenizer;
const tokens = flattenTokens(Prism.tokenize(code, grammar));
const spans = tokens
.filter(token => typeof token !== 'string')

View File

@@ -24,7 +24,7 @@ import syntax from '../syntax';
import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, AppEvents } from '@grafana/data';
import { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
import { CloudWatchDatasource } from '../datasource';
import Prism, { Grammar } from 'prismjs';
import { Grammar, LanguageMap, languages as prismLanguages } from 'prismjs';
import { CloudWatchLanguageProvider } from '../language_provider';
import { css } from 'emotion';
import { ExploreId } from 'app/types';
@@ -95,13 +95,15 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
constructor(props: CloudWatchLogsQueryFieldProps, context: React.Context<any>) {
super(props, context);
Prism.languages['cloudwatch'] = syntax;
this.plugins = [
BracesPlugin(),
SlatePrism({
onlyIn: (node: Node) => node.object === 'block' && node.type === 'code_block',
getSyntax: (node: Node) => 'cloudwatch',
}),
SlatePrism(
{
onlyIn: (node: Node) => node.object === 'block' && node.type === 'code_block',
getSyntax: (node: Node) => 'cloudwatch',
},
{ ...(prismLanguages as LanguageMap), cloudwatch: syntax }
),
];
}