Loki, Prometheus: Fix PromQL and LogQL syntax highlighting (#21944)

* Loki, Prometheus: Fix syntax to not highlight # in quotes as a comment in queryField

* Loki, Prometheus: Fix syntax to not highlight # in quotes as a comment in queryField

* Fix regex

* PromQL, LogQL: Update syntax

* LogQL, PromQL highlighting: Add tests
This commit is contained in:
Ivana Huckova 2020-02-12 15:45:36 +01:00 committed by GitHub
parent fa1602daea
commit 1448767c08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 5 deletions

View File

@ -0,0 +1,22 @@
import syntax from './syntax';
import Prism from 'prismjs';
describe('Loki syntax', () => {
it('should highlight Loki query correctly', () => {
expect(Prism.highlight('{key="val#ue"}', syntax, 'loki')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"val#ue"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('{key="#value"}', syntax, 'loki')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"#value"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('{key="value#"}', syntax, 'loki')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"value#"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('#test{key="value"}', syntax, 'loki')).toBe(
'<span class="token comment">#test{key="value"}</span>'
);
expect(Prism.highlight('{key="value"}#test', syntax, 'loki')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"value"</span></span><span class="token punctuation">}</span><span class="token comment">#test</span>'
);
});
});

View File

@ -69,8 +69,7 @@ export const FUNCTIONS = [...AGGREGATION_OPERATORS, ...RANGE_VEC_FUNCTIONS];
const tokenizer: Grammar = {
comment: {
pattern: /(^|[^\n])#.*/,
lookbehind: true,
pattern: /#.*/,
},
'context-aggregation': {
pattern: /((without|by)\s*)\([^)]*\)/, // by ()
@ -85,11 +84,15 @@ const tokenizer: Grammar = {
},
'context-labels': {
pattern: /\{[^}]*(?=})/,
lookbehind: true,
greedy: true,
inside: {
comment: {
pattern: /#.*/,
},
'label-key': {
pattern: /[a-z_]\w*(?=\s*(=|!=|=~|!~))/,
alias: 'attr-name',
greedy: true,
},
'label-value': {
pattern: /"(?:\\.|[^\\"])*"/,

View File

@ -0,0 +1,22 @@
import promql from './promql';
import Prism from 'prismjs';
describe('Loki syntax', () => {
it('should highlight Loki query correctly', () => {
expect(Prism.highlight('{key="val#ue"}', promql, 'promql')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"val#ue"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('{key="#value"}', promql, 'promql')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"#value"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('{key="value#"}', promql, 'promql')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"value#"</span></span><span class="token punctuation">}</span>'
);
expect(Prism.highlight('#test{key="value"}', promql, 'promql')).toBe(
'<span class="token comment">#test{key="value"}</span>'
);
expect(Prism.highlight('{key="value"}#test', promql, 'promql')).toBe(
'<span class="token context-labels"><span class="token punctuation">{</span><span class="token label-key attr-name">key</span>=<span class="token label-value attr-value">"value"</span></span><span class="token punctuation">}</span><span class="token comment">#test</span>'
);
});
});

View File

@ -377,8 +377,7 @@ export const FUNCTIONS = [
const tokenizer = {
comment: {
pattern: /(^|[^\n])#.*/,
lookbehind: true,
pattern: /#.*/,
},
'context-aggregation': {
pattern: /((by|without)\s*)\([^)]*\)/, // by ()
@ -393,10 +392,15 @@ const tokenizer = {
},
'context-labels': {
pattern: /\{[^}]*(?=})/,
greedy: true,
inside: {
comment: {
pattern: /#.*/,
},
'label-key': {
pattern: /[a-z_]\w*(?=\s*(=|!=|=~|!~))/,
alias: 'attr-name',
greedy: true,
},
'label-value': {
pattern: /"(?:\\.|[^\\"])*"/,