apitech
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Upgrade codemirror and lezer to the latest version (#10841)

Browse Source 
* bump codemirror to v0.20.x and lezer to v.0.16.x

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

* bump codemirror to v6 and lezer to v1

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

* stop treating warning as error for UI

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
pull/10148/head
Augustin Husson 4 years ago committed by GitHub
parent 5bd761fbfc
commit 5d1756c822
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 4929 additions and 4689 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      Makefile
  2. 2
      web/ui/module/codemirror-promql/jest.config.cjs
  3. 29
      web/ui/module/codemirror-promql/package.json
  4. 92
      web/ui/module/codemirror-promql/src/complete/hybrid.test.ts
  5. 2
      web/ui/module/codemirror-promql/src/complete/hybrid.ts
  6. 2
      web/ui/module/codemirror-promql/src/parser/matcher.ts
  7. 8
      web/ui/module/codemirror-promql/src/parser/path-finder.ts
  8. 21
      web/ui/module/codemirror-promql/src/promql.ts
  9. 8
      web/ui/module/lezer-promql/package.json
  10. 33
      web/ui/module/lezer-promql/src/highlight.js
  11. 2
      web/ui/module/lezer-promql/src/promql.grammar
  12. 9360
      web/ui/package-lock.json
  13. 22
      web/ui/react-app/package.json
  14. 3
      web/ui/react-app/src/pages/graph/CMTheme.tsx
  15. 32
      web/ui/react-app/src/pages/graph/ExpressionInput.tsx

2
Makefile
Unescape View File

@ -45,7 +45,7 @@ ui-install:
.PHONY: ui-build
ui-build:
cd $(UI_PATH) && npm run build
cd $(UI_PATH) && CI="" npm run build
.PHONY: ui-build-module
ui-build-module:

2
web/ui/module/codemirror-promql/jest.config.cjs
Unescape View File

@ -12,7 +12,7 @@ module.exports = {
},
},
moduleNameMapper: {
'lezer-promql': '<rootDir>/../../node_modules/@prometheus-io/lezer-promql/dist/index.es.js'
'lezer-promql': '<rootDir>/../../node_modules/@prometheus-io/lezer-promql/dist/index.cjs'
},
transformIgnorePatterns: ["<rootDir>/../../node_modules/(?!@prometheus-io/lezer-promql)/"]
};

29
web/ui/module/codemirror-promql/package.json
Unescape View File

@ -33,26 +33,25 @@
"lru-cache": "^6.0.0"
},
"devDependencies": {
"@codemirror/autocomplete": "^0.19.15",
"@codemirror/highlight": "^0.19.8",
"@codemirror/language": "^0.19.10",
"@codemirror/lint": "^0.19.6",
"@codemirror/state": "^0.19.9",
"@codemirror/view": "^0.19.48",
"@lezer/common": "^0.15.12",
"@lezer/lr": "^0.15.8",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@types/lru-cache": "^5.1.1",
"isomorphic-fetch": "^3.0.0",
"nock": "^13.2.4"
},
"peerDependencies": {
"@codemirror/autocomplete": "^0.19.15",
"@codemirror/highlight": "^0.19.8",
"@codemirror/language": "^0.19.10",
"@codemirror/lint": "^0.19.6",
"@codemirror/state": "^0.19.9",
"@codemirror/view": "^0.19.48",
"@lezer/common": "^0.15.12"
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
},
"prettier": {
"singleQuote": true,

92
web/ui/module/codemirror-promql/src/complete/hybrid.test.ts
Unescape View File

@ -734,7 +734,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 0,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -745,7 +745,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -756,7 +756,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 4,
to: 4,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -767,7 +767,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 4,
to: 6,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -778,7 +778,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 9,
to: 9,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -789,7 +789,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 25,
to: 33,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -800,7 +800,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, binOpModifierTerms, numberTerms, snippets),
from: 14,
to: 19,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -811,7 +811,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, binOpModifierTerms, numberTerms, snippets),
from: 40,
to: 41,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -822,7 +822,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 8,
to: 8,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -833,7 +833,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 8,
to: 11,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -844,7 +844,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 18,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -855,7 +855,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -866,7 +866,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 1,
to: 1,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -877,7 +877,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 15,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -888,7 +888,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 1,
to: 4,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -899,7 +899,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 23,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -910,7 +910,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -921,7 +921,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms),
from: 6,
to: 7,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -932,7 +932,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms),
from: 19,
to: 21,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -943,7 +943,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms, [{ label: 'offset' }]),
from: 4,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -954,7 +954,7 @@ describe('autocomplete promQL test', () => {
options: binOpTerms,
from: 12,
to: 13,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -965,7 +965,7 @@ describe('autocomplete promQL test', () => {
options: binOpTerms,
from: 12,
to: 13,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -976,7 +976,7 @@ describe('autocomplete promQL test', () => {
options: matchOpTerms,
from: 11,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -987,7 +987,7 @@ describe('autocomplete promQL test', () => {
options: matchOpTerms,
from: 21,
to: 22,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -998,7 +998,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 28,
to: 28,
span: undefined,
validFor: undefined,
},
},
{
@ -1009,7 +1009,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 46,
to: 46,
span: undefined,
validFor: undefined,
},
},
{
@ -1020,7 +1020,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 20,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1031,7 +1031,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 12,
to: 16,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1042,7 +1042,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 34,
to: 37,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1053,7 +1053,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 14,
to: 16,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1064,7 +1064,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 38,
to: 41,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1075,7 +1075,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1086,7 +1086,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 0,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1097,7 +1097,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 4,
to: 4,
span: undefined,
validFor: undefined,
},
},
{
@ -1108,7 +1108,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 6,
to: 6,
span: undefined,
validFor: undefined,
},
},
{
@ -1119,7 +1119,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 26,
to: 26,
span: undefined,
validFor: undefined,
},
},
{
@ -1130,7 +1130,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 28,
to: 28,
span: undefined,
validFor: undefined,
},
},
{
@ -1141,7 +1141,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 7,
to: 7,
span: undefined,
validFor: undefined,
},
},
{
@ -1152,7 +1152,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 9,
to: 9,
span: undefined,
validFor: undefined,
},
},
{
@ -1163,7 +1163,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 29,
to: 29,
span: undefined,
validFor: undefined,
},
},
{
@ -1174,7 +1174,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 31,
to: 31,
span: undefined,
validFor: undefined,
},
},
{
@ -1185,7 +1185,7 @@ describe('autocomplete promQL test', () => {
options: atModifierTerms,
from: 4,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1197,7 +1197,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(mockedMetricsTerms, functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1226,7 +1226,7 @@ describe('autocomplete promQL test', () => {
],
from: 20,
to: 20,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1243,7 +1243,7 @@ describe('autocomplete promQL test', () => {
],
from: 25,
to: 25,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1274,7 +1274,7 @@ describe('autocomplete promQL test', () => {
),
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
];

2
web/ui/module/codemirror-promql/src/complete/hybrid.ts
Unescape View File

@ -140,7 +140,7 @@ function arrayToCompletionResult(data: Completion[], from: number, to: number, i
from: from,
to: to,
options: options,
span: span ? /^[a-zA-Z0-9_:]+$/ : undefined,
validFor: span ? /^[a-zA-Z0-9_:]+$/ : undefined,
} as CompletionResult;
}

2
web/ui/module/codemirror-promql/src/parser/matcher.ts
Unescape View File

@ -18,7 +18,7 @@ import { Matcher } from '../types';
function createMatcher(labelMatcher: SyntaxNode, state: EditorState): Matcher {
const matcher = new Matcher(0, '', '');
const cursor = labelMatcher.cursor;
const cursor = labelMatcher.cursor();
if (!cursor.next()) {
// weird case, that would mean the labelMatcher doesn't have any child.
return matcher;

8
web/ui/module/codemirror-promql/src/parser/path-finder.ts
Unescape View File

@ -16,7 +16,7 @@ import { SyntaxNode } from '@lezer/common';
// walkBackward will iterate other the tree from the leaf to the root until it founds the given `exit` node.
// It returns null if the exit is not found.
export function walkBackward(node: SyntaxNode, exit: number): SyntaxNode | null {
const cursor = node.cursor;
const cursor = node.cursor();
let cursorIsMoving = true;
while (cursorIsMoving && cursor.type.id !== exit) {
cursorIsMoving = cursor.parent();
@ -29,7 +29,7 @@ export function walkBackward(node: SyntaxNode, exit: number): SyntaxNode | null
// Otherwise if it's not possible to reach the last id/name of the path, it will return `null`
// Note: the way followed during the iteration of the tree to find the given path, is only from the root to the leaf.
export function walkThrough(node: SyntaxNode, ...path: (number | string)[]): SyntaxNode | null {
const cursor = node.cursor;
const cursor = node.cursor();
let i = 0;
let cursorIsMoving = true;
path.unshift(cursor.type.id);
@ -50,7 +50,7 @@ export function walkThrough(node: SyntaxNode, ...path: (number | string)[]): Syn
}
export function containsAtLeastOneChild(node: SyntaxNode, ...child: (number | string)[]): boolean {
const cursor = node.cursor;
const cursor = node.cursor();
if (!cursor.next()) {
// let's try to move directly to the children level and
// return false immediately if the current node doesn't have any child
@ -64,7 +64,7 @@ export function containsAtLeastOneChild(node: SyntaxNode, ...child: (number | st
}
export function containsChild(node: SyntaxNode, ...child: (number | string)[]): boolean {
const cursor = node.cursor;
const cursor = node.cursor();
if (!cursor.next()) {
// let's try to move directly to the children level and
// return false immediately if the current node doesn't have any child

21
web/ui/module/codemirror-promql/src/promql.ts
Unescape View File

@ -12,7 +12,6 @@
// limitations under the License.
import { parser } from '@prometheus-io/lezer-promql';
import { styleTags, tags } from '@codemirror/highlight';
import { Extension } from '@codemirror/state';
import { CompleteConfiguration, CompleteStrategy, newCompleteStrategy } from './complete';
import { LintStrategy, newLintStrategy, promQLLinter } from './lint';
@ -28,26 +27,6 @@ export function promQLLanguage(top: LanguageType): LRLanguage {
return LRLanguage.define({
parser: parser.configure({
top: top,
props: [
styleTags({
LineComment: tags.comment,
LabelName: tags.labelName,
StringLiteral: tags.string,
NumberLiteral: tags.number,
Duration: tags.number,
'Abs Absent AbsentOverTime Acos Acosh Asin Asinh Atan Atanh AvgOverTime Ceil Changes Clamp ClampMax ClampMin Cos Cosh CountOverTime DaysInMonth DayOfMonth DayOfWeek DayOfYear Deg Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month Pi PredictLinear PresentOverTime QuantileOverTime Rad Rate Resets Round Scalar Sgn Sin Sinh Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Tan Tanh Time Timestamp Vector Year':
tags.function(tags.variableName),
'Avg Bottomk Count Count_values Group Max Min Quantile Stddev Stdvar Sum Topk': tags.operatorKeyword,
'By Without Bool On Ignoring GroupLeft GroupRight Offset Start End': tags.modifier,
'And Unless Or': tags.logicOperator,
'Sub Add Mul Mod Div Atan2 Eql Neq Lte Lss Gte Gtr EqlRegex EqlSingle NeqRegex Pow At': tags.operator,
UnaryOp: tags.arithmeticOperator,
'( )': tags.paren,
'[ ]': tags.squareBracket,
'{ }': tags.brace,
'⚠': tags.invalid,
}),
],
}),
languageData: {
closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },

8
web/ui/module/lezer-promql/package.json
Unescape View File

@ -30,10 +30,12 @@
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
},
"devDependencies": {
"@lezer/generator": "^0.15.4",
"@lezer/lr": "^0.15.8"
"@lezer/generator": "^1.0.0",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0"
},
"peerDependencies": {
"@lezer/lr": "^0.15.8"
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0"
}
}

33
web/ui/module/lezer-promql/src/highlight.js
Unescape View File

@ -0,0 +1,33 @@
// Copyright 2022 The Prometheus Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import {styleTags, tags} from "@lezer/highlight";
export const promQLHighLight = styleTags({
LineComment: tags.comment,
LabelName: tags.labelName,
StringLiteral: tags.string,
NumberLiteral: tags.number,
Duration: tags.number,
'Abs Absent AbsentOverTime Acos Acosh Asin Asinh Atan Atanh AvgOverTime Ceil Changes Clamp ClampMax ClampMin Cos Cosh CountOverTime DaysInMonth DayOfMonth DayOfWeek DayOfYear Deg Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month Pi PredictLinear PresentOverTime QuantileOverTime Rad Rate Resets Round Scalar Sgn Sin Sinh Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Tan Tanh Time Timestamp Vector Year':
tags.function(tags.variableName),
'Avg Bottomk Count Count_values Group Max Min Quantile Stddev Stdvar Sum Topk': tags.operatorKeyword,
'By Without Bool On Ignoring GroupLeft GroupRight Offset Start End': tags.modifier,
'And Unless Or': tags.logicOperator,
'Sub Add Mul Mod Div Atan2 Eql Neq Lte Lss Gte Gtr EqlRegex EqlSingle NeqRegex Pow At': tags.operator,
UnaryOp: tags.arithmeticOperator,
'( )': tags.paren,
'[ ]': tags.squareBracket,
'{ }': tags.brace,
'⚠': tags.invalid,
})

2
web/ui/module/lezer-promql/src/promql.grammar
Unescape View File

@ -357,6 +357,8 @@ NumberLiteral {
End
}
@external propSource promQLHighLight from "./highlight"
// FunctionIdentifier definitions
Abs { condFn<"abs"> }
Absent { condFn<"absent"> }

9360
web/ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
web/ui/react-app/package.json
Unescape View File

@ -3,22 +3,20 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@codemirror/autocomplete": "^0.19.9",
"@codemirror/closebrackets": "^0.19.0",
"@codemirror/commands": "^0.19.5",
"@codemirror/comment": "^0.19.0",
"@codemirror/highlight": "^0.19.6",
"@codemirror/history": "^0.19.2",
"@codemirror/language": "^0.19.7",
"@codemirror/lint": "^0.19.3",
"@codemirror/matchbrackets": "^0.19.3",
"@codemirror/search": "^0.19.3",
"@codemirror/state": "^0.19.6",
"@codemirror/view": "^0.19.27",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@forevolve/bootstrap-dark": "^1.0.0",
"@fortawesome/fontawesome-svg-core": "6.1.1",
"@fortawesome/free-solid-svg-icons": "6.1.1",
"@fortawesome/react-fontawesome": "0.1.17",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/common": "^1.0.0",
"@nexucis/fuzzy": "^0.4.0",
"@nexucis/kvsearch": "^0.7.0",
"@prometheus-io/codemirror-promql": "0.19.0",

3
web/ui/react-app/src/pages/graph/CMTheme.tsx
Unescape View File

@ -1,5 +1,6 @@
import { HighlightStyle, tags } from '@codemirror/highlight';
import { EditorView } from '@codemirror/view';
import { HighlightStyle } from '@codemirror/language';
import { tags } from '@lezer/highlight';
export const baseTheme = EditorView.theme({
'&.cm-editor': {

32
web/ui/react-app/src/pages/graph/ExpressionInput.tsx
Unescape View File

@ -3,15 +3,18 @@ import { Button, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'
import { EditorView, highlightSpecialChars, keymap, ViewUpdate, placeholder } from '@codemirror/view';
import { EditorState, Prec, Compartment } from '@codemirror/state';
import { indentOnInput, syntaxTree } from '@codemirror/language';
import { history, historyKeymap } from '@codemirror/history';
import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands';
import { bracketMatching } from '@codemirror/matchbrackets';
import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
import { bracketMatching, indentOnInput, syntaxHighlighting, syntaxTree } from '@codemirror/language';
import { defaultKeymap, history, historyKeymap, insertNewlineAndIndent } from '@codemirror/commands';
import { highlightSelectionMatches } from '@codemirror/search';
import { commentKeymap } from '@codemirror/comment';
import { lintKeymap } from '@codemirror/lint';
import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import {
autocompletion,
completionKeymap,
CompletionContext,
CompletionResult,
closeBrackets,
closeBracketsKeymap,
} from '@codemirror/autocomplete';
import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -67,7 +70,7 @@ export class HistoryCompleteStrategy implements CompleteStrategy {
apply: q,
info: q.length < 80 ? undefined : q,
})),
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
};
if (res !== null) {
@ -110,7 +113,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
),
});
const dynamicConfig = [
enableHighlighting ? promqlHighlighter : [],
enableHighlighting ? syntaxHighlighting(promqlHighlighter) : [],
promqlExtension.asExtension(),
theme === 'dark' ? darkTheme : lightTheme,
];
@ -136,14 +139,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
autocompletion(),
highlightSelectionMatches(),
EditorView.lineWrapping,
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...historyKeymap,
...commentKeymap,
...completionKeymap,
...lintKeymap,
]),
keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, ...completionKeymap, ...lintKeymap]),
placeholder('Expression (press Shift+Enter for newlines)'),
dynamicConfigCompartment.of(dynamicConfig),
// This keymap is added without precedence so that closing the autocomplete dropdown
@ -157,7 +153,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
},
},
]),
Prec.override(
Prec.highest(
keymap.of([
{
key: 'Enter',

Write Preview
Loading…
Cancel
Save