mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 02:40:26 -06:00
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:
parent
fa1602daea
commit
1448767c08
22
public/app/plugins/datasource/loki/syntax.test.ts
Normal file
22
public/app/plugins/datasource/loki/syntax.test.ts
Normal 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>'
|
||||
);
|
||||
});
|
||||
});
|
@ -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: /"(?:\\.|[^\\"])*"/,
|
||||
|
22
public/app/plugins/datasource/prometheus/promql.test.ts
Normal file
22
public/app/plugins/datasource/prometheus/promql.test.ts
Normal 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>'
|
||||
);
|
||||
});
|
||||
});
|
@ -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: /"(?:\\.|[^\\"])*"/,
|
||||
|
Loading…
Reference in New Issue
Block a user