mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2025-01-10 15:14:09 +00:00
vmui: replace @codemirror to text field (#2003)
* feat: replace @codemirror to text field * update package-lock.json Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov
GitHub
parent
042570584f
commit
89ff7b2465
10 changed files with 84 additions and 716 deletions
537
app/vmui/packages/vmui/package-lock.json
generated
537
app/vmui/packages/vmui/package-lock.json
generated
|
|
@ -8,12 +8,6 @@
|
|||
"name": "vmui",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^0.19.9",
|
||||
"@codemirror/basic-setup": "^0.19.1",
|
||||
"@codemirror/commands": "^0.19.6",
|
||||
"@codemirror/highlight": "^0.19.6",
|
||||
"@codemirror/state": "^0.19.6",
|
||||
"@codemirror/view": "^0.19.29",
|
||||
"@date-io/dayjs": "^2.11.0",
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
|
|
@ -34,7 +28,6 @@
|
|||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-measure": "^2.0.8",
|
||||
"codemirror-promql": "^0.18.0",
|
||||
"dayjs": "^1.10.7",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
|
|
@ -1922,229 +1915,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
|
||||
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
|
||||
},
|
||||
"node_modules/@codemirror/autocomplete": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.19.9.tgz",
|
||||
"integrity": "sha512-Ph1LWHtFFqNUIqEVrws6I263ihe5TH+TRBPwxQ78j7st7Q67FDAmgKX6mNbUPh02dxfqQrc9qxlo5JIqKeiVdg==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.4",
|
||||
"@codemirror/text": "^0.19.2",
|
||||
"@codemirror/tooltip": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/basic-setup": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.19.1.tgz",
|
||||
"integrity": "sha512-gLjD7YgZU/we6BzS/ecCmD3viw83dsgv5ZUaSydYbYx9X4w4w9RqYnckcJ+0GDyHfNr5Jtfv2Z5ZtFQnBj0UDA==",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^0.19.0",
|
||||
"@codemirror/closebrackets": "^0.19.0",
|
||||
"@codemirror/commands": "^0.19.0",
|
||||
"@codemirror/comment": "^0.19.0",
|
||||
"@codemirror/fold": "^0.19.0",
|
||||
"@codemirror/gutter": "^0.19.0",
|
||||
"@codemirror/highlight": "^0.19.0",
|
||||
"@codemirror/history": "^0.19.0",
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/lint": "^0.19.0",
|
||||
"@codemirror/matchbrackets": "^0.19.0",
|
||||
"@codemirror/rectangular-selection": "^0.19.0",
|
||||
"@codemirror/search": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.31"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/closebrackets": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz",
|
||||
"integrity": "sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/commands": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.19.6.tgz",
|
||||
"integrity": "sha512-Mjc3ZfTifOn0h5499xI3MfCVIZvO2I0ochgzxfRtPOFwfXX/k7HTgnK0/KzuGDINyxUVeDaFCkf53TyyWjdxMQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/matchbrackets": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.22",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/comment": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/comment/-/comment-0.19.0.tgz",
|
||||
"integrity": "sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/fold": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.1.tgz",
|
||||
"integrity": "sha512-3GwQpxgv03urb8BPBvX1JSjl+uMXKqngRG6qHZXSM2FefxFKvTuyL44MCb35aodtfKjGwoxizk+7b6CbAOLyOw==",
|
||||
"dependencies": {
|
||||
"@codemirror/gutter": "^0.19.0",
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/gutter": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.3.tgz",
|
||||
"integrity": "sha512-0lsW7Mbucs/CFmYaOJ8RYWmP1zI7sBdn/dseTL61TXS7TcCEw3X8XZtG4Fs2NL/dJ2CtW4fz3PHlQOyJZGsGCg==",
|
||||
"dependencies": {
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/highlight": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.6.tgz",
|
||||
"integrity": "sha512-+eibu6on9quY8uN3xJ/n3rH+YIDLlpX7YulVmFvqAIz/ukRQ5tWaBmB7fMixHmnmRIRBRZgB8rNtonuMwZSAHQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0",
|
||||
"style-mod": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/history": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/history/-/history-0.19.0.tgz",
|
||||
"integrity": "sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.3.tgz",
|
||||
"integrity": "sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.5",
|
||||
"@lezer/lr": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lint": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.19.2.tgz",
|
||||
"integrity": "sha512-477qvXWwuf24YsBi1DzjrGyzM+qfPe5L4xEHGxQTGOMq6R0+QAFKppOJsxN3y7gzDpLrZSYZdhJzWevOuliZQg==",
|
||||
"dependencies": {
|
||||
"@codemirror/panel": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/tooltip": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/matchbrackets": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz",
|
||||
"integrity": "sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/panel": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/panel/-/panel-0.19.0.tgz",
|
||||
"integrity": "sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/rangeset": {
|
||||
"version": "0.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.4.tgz",
|
||||
"integrity": "sha512-VOqdYJbLZj3EFVkDn13RLnzmRxrgs6dKGLD5LppPBxzbG1CWYbmqXKYWy9mVTEnYZ1PzH2w6vGzyUuToEWiFDQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/rectangular-selection": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/rectangular-selection/-/rectangular-selection-0.19.1.tgz",
|
||||
"integrity": "sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.4",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/search": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.19.2.tgz",
|
||||
"integrity": "sha512-TrRxUxyJ/a7HXtUvMZhgkOUbKE1xO33UhXjn1XACEHKWhgovw1vEeEEti9dZejN8/QOOFJed39InUxmp7oQ8HA==",
|
||||
"dependencies": {
|
||||
"@codemirror/panel": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/state": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.6.tgz",
|
||||
"integrity": "sha512-sqIQZE9VqwQj7D4c2oz9mfLhlT1ElAzGB5lO1lE33BPyrdNy1cJyCIOecT4cn4VeJOFrnjOeu+IftZ3zqdFETw==",
|
||||
"dependencies": {
|
||||
"@codemirror/text": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/text": {
|
||||
"version": "0.19.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.5.tgz",
|
||||
"integrity": "sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow=="
|
||||
},
|
||||
"node_modules/@codemirror/tooltip": {
|
||||
"version": "0.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.4.tgz",
|
||||
"integrity": "sha512-DTv6SOzjw8LbHdTd2FszpIkQCUKRl0dqh1pWqawR31Lu/ZCz1nOiOY1sxkiEZVXMTFg44V0Uff0YlY6mTVK2DQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/view": {
|
||||
"version": "0.19.35",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.35.tgz",
|
||||
"integrity": "sha512-PSBtbClHKvF9DHfYh0QH7puzjF268MrP8sK/I31Q0AgqBCiJvpGIXrbGTZJBDZ93F7tvsvj2BKd4jQuYlJPSYw==",
|
||||
"dependencies": {
|
||||
"@codemirror/rangeset": "^0.19.4",
|
||||
"@codemirror/state": "^0.19.3",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"style-mod": "^4.0.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@csstools/normalize.css": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
|
||||
|
|
@ -2866,19 +2636,6 @@
|
|||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/common": {
|
||||
"version": "0.15.7",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.7.tgz",
|
||||
"integrity": "sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ=="
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "0.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.4.tgz",
|
||||
"integrity": "sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/base": {
|
||||
"version": "5.0.0-alpha.60",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.60.tgz",
|
||||
|
|
@ -5705,26 +5462,6 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/codemirror-promql": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/codemirror-promql/-/codemirror-promql-0.18.0.tgz",
|
||||
"integrity": "sha512-vouziYRtzHhJnY4wacskGFKx2LkdJyhtmJuRV08ke1krJ9750u/CP2WeK8Q2eoTYf+tg3R9b3YP6hGITX37+0Q==",
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@codemirror/autocomplete": "^0.19.3",
|
||||
"@codemirror/highlight": "^0.19.5",
|
||||
"@codemirror/language": "^0.19.3",
|
||||
"@codemirror/lint": "^0.19.1",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/view": "^0.19.7",
|
||||
"@lezer/common": "^0.15.5"
|
||||
}
|
||||
},
|
||||
"node_modules/collect-v8-coverage": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
|
||||
|
|
@ -5972,11 +5709,6 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/crelt": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
|
||||
"integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
@ -14618,11 +14350,6 @@
|
|||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/style-mod": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
|
||||
"integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
|
||||
},
|
||||
"node_modules/stylehacks": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
|
||||
|
|
@ -15382,11 +15109,6 @@
|
|||
"browser-process-hrtime": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-keyname": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
|
||||
"integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
|
||||
|
|
@ -17510,229 +17232,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
|
||||
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
|
||||
},
|
||||
"@codemirror/autocomplete": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.19.9.tgz",
|
||||
"integrity": "sha512-Ph1LWHtFFqNUIqEVrws6I263ihe5TH+TRBPwxQ78j7st7Q67FDAmgKX6mNbUPh02dxfqQrc9qxlo5JIqKeiVdg==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.4",
|
||||
"@codemirror/text": "^0.19.2",
|
||||
"@codemirror/tooltip": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/basic-setup": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.19.1.tgz",
|
||||
"integrity": "sha512-gLjD7YgZU/we6BzS/ecCmD3viw83dsgv5ZUaSydYbYx9X4w4w9RqYnckcJ+0GDyHfNr5Jtfv2Z5ZtFQnBj0UDA==",
|
||||
"requires": {
|
||||
"@codemirror/autocomplete": "^0.19.0",
|
||||
"@codemirror/closebrackets": "^0.19.0",
|
||||
"@codemirror/commands": "^0.19.0",
|
||||
"@codemirror/comment": "^0.19.0",
|
||||
"@codemirror/fold": "^0.19.0",
|
||||
"@codemirror/gutter": "^0.19.0",
|
||||
"@codemirror/highlight": "^0.19.0",
|
||||
"@codemirror/history": "^0.19.0",
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/lint": "^0.19.0",
|
||||
"@codemirror/matchbrackets": "^0.19.0",
|
||||
"@codemirror/rectangular-selection": "^0.19.0",
|
||||
"@codemirror/search": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.31"
|
||||
}
|
||||
},
|
||||
"@codemirror/closebrackets": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz",
|
||||
"integrity": "sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/commands": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.19.6.tgz",
|
||||
"integrity": "sha512-Mjc3ZfTifOn0h5499xI3MfCVIZvO2I0ochgzxfRtPOFwfXX/k7HTgnK0/KzuGDINyxUVeDaFCkf53TyyWjdxMQ==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/matchbrackets": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.22",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/comment": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/comment/-/comment-0.19.0.tgz",
|
||||
"integrity": "sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/fold": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.1.tgz",
|
||||
"integrity": "sha512-3GwQpxgv03urb8BPBvX1JSjl+uMXKqngRG6qHZXSM2FefxFKvTuyL44MCb35aodtfKjGwoxizk+7b6CbAOLyOw==",
|
||||
"requires": {
|
||||
"@codemirror/gutter": "^0.19.0",
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/gutter": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.3.tgz",
|
||||
"integrity": "sha512-0lsW7Mbucs/CFmYaOJ8RYWmP1zI7sBdn/dseTL61TXS7TcCEw3X8XZtG4Fs2NL/dJ2CtW4fz3PHlQOyJZGsGCg==",
|
||||
"requires": {
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/highlight": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.6.tgz",
|
||||
"integrity": "sha512-+eibu6on9quY8uN3xJ/n3rH+YIDLlpX7YulVmFvqAIz/ukRQ5tWaBmB7fMixHmnmRIRBRZgB8rNtonuMwZSAHQ==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0",
|
||||
"style-mod": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/history": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/history/-/history-0.19.0.tgz",
|
||||
"integrity": "sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/language": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.3.tgz",
|
||||
"integrity": "sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.5",
|
||||
"@lezer/lr": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lint": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.19.2.tgz",
|
||||
"integrity": "sha512-477qvXWwuf24YsBi1DzjrGyzM+qfPe5L4xEHGxQTGOMq6R0+QAFKppOJsxN3y7gzDpLrZSYZdhJzWevOuliZQg==",
|
||||
"requires": {
|
||||
"@codemirror/panel": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/tooltip": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"@codemirror/matchbrackets": {
|
||||
"version": "0.19.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz",
|
||||
"integrity": "sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/panel": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/panel/-/panel-0.19.0.tgz",
|
||||
"integrity": "sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/rangeset": {
|
||||
"version": "0.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.4.tgz",
|
||||
"integrity": "sha512-VOqdYJbLZj3EFVkDn13RLnzmRxrgs6dKGLD5LppPBxzbG1CWYbmqXKYWy9mVTEnYZ1PzH2w6vGzyUuToEWiFDQ==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/rectangular-selection": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/rectangular-selection/-/rectangular-selection-0.19.1.tgz",
|
||||
"integrity": "sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/text": "^0.19.4",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/search": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.19.2.tgz",
|
||||
"integrity": "sha512-TrRxUxyJ/a7HXtUvMZhgkOUbKE1xO33UhXjn1XACEHKWhgovw1vEeEEti9dZejN8/QOOFJed39InUxmp7oQ8HA==",
|
||||
"requires": {
|
||||
"@codemirror/panel": "^0.19.0",
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.2",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"@codemirror/state": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.6.tgz",
|
||||
"integrity": "sha512-sqIQZE9VqwQj7D4c2oz9mfLhlT1ElAzGB5lO1lE33BPyrdNy1cJyCIOecT4cn4VeJOFrnjOeu+IftZ3zqdFETw==",
|
||||
"requires": {
|
||||
"@codemirror/text": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/text": {
|
||||
"version": "0.19.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.5.tgz",
|
||||
"integrity": "sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow=="
|
||||
},
|
||||
"@codemirror/tooltip": {
|
||||
"version": "0.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.4.tgz",
|
||||
"integrity": "sha512-DTv6SOzjw8LbHdTd2FszpIkQCUKRl0dqh1pWqawR31Lu/ZCz1nOiOY1sxkiEZVXMTFg44V0Uff0YlY6mTVK2DQ==",
|
||||
"requires": {
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/view": {
|
||||
"version": "0.19.35",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.35.tgz",
|
||||
"integrity": "sha512-PSBtbClHKvF9DHfYh0QH7puzjF268MrP8sK/I31Q0AgqBCiJvpGIXrbGTZJBDZ93F7tvsvj2BKd4jQuYlJPSYw==",
|
||||
"requires": {
|
||||
"@codemirror/rangeset": "^0.19.4",
|
||||
"@codemirror/state": "^0.19.3",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"style-mod": "^4.0.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"@csstools/normalize.css": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
|
||||
|
|
@ -18273,19 +17772,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@lezer/common": {
|
||||
"version": "0.15.7",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.7.tgz",
|
||||
"integrity": "sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ=="
|
||||
},
|
||||
"@lezer/lr": {
|
||||
"version": "0.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.4.tgz",
|
||||
"integrity": "sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==",
|
||||
"requires": {
|
||||
"@lezer/common": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"@mui/base": {
|
||||
"version": "5.0.0-alpha.60",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.60.tgz",
|
||||
|
|
@ -20274,14 +19760,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"codemirror-promql": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/codemirror-promql/-/codemirror-promql-0.18.0.tgz",
|
||||
"integrity": "sha512-vouziYRtzHhJnY4wacskGFKx2LkdJyhtmJuRV08ke1krJ9750u/CP2WeK8Q2eoTYf+tg3R9b3YP6hGITX37+0Q==",
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"collect-v8-coverage": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
|
||||
|
|
@ -20471,11 +19949,6 @@
|
|||
"yaml": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"crelt": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
|
||||
"integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
@ -26689,11 +26162,6 @@
|
|||
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"style-mod": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
|
||||
"integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
|
||||
},
|
||||
"stylehacks": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
|
||||
|
|
@ -27252,11 +26720,6 @@
|
|||
"browser-process-hrtime": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"w3c-keyname": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
|
||||
"integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
|
||||
},
|
||||
"w3c-xmlserializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
"private": true,
|
||||
"homepage": "./",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^0.19.9",
|
||||
"@codemirror/basic-setup": "^0.19.1",
|
||||
"@codemirror/commands": "^0.19.6",
|
||||
"@codemirror/highlight": "^0.19.6",
|
||||
"@codemirror/state": "^0.19.6",
|
||||
"@codemirror/view": "^0.19.29",
|
||||
"@date-io/dayjs": "^2.11.0",
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
|
|
@ -30,7 +24,6 @@
|
|||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-measure": "^2.0.8",
|
||||
"codemirror-promql": "^0.18.0",
|
||||
"dayjs": "^1.10.7",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
|
|
|
|||
|
|
@ -5,3 +5,5 @@ export const getQueryRangeUrl = (server: string, query: string, period: TimePara
|
|||
|
||||
export const getQueryUrl = (server: string, query: string, period: TimeParams): string =>
|
||||
`${server}/api/v1/query?query=${encodeURIComponent(query)}&start=${period.start}&end=${period.end}&step=${period.step}`;
|
||||
|
||||
export const getQueryOptions = (server: string) => `${server}/api/v1/label/__name__/values`;
|
||||
|
|
|
|||
|
|
@ -15,10 +15,11 @@ import AdditionalSettings from "./AdditionalSettings";
|
|||
import {ErrorTypes} from "../../../../types";
|
||||
|
||||
export interface QueryConfiguratorProps {
|
||||
error?: ErrorTypes | string;
|
||||
error?: ErrorTypes | string;
|
||||
queryOptions: string[]
|
||||
}
|
||||
|
||||
const QueryConfigurator: FC<QueryConfiguratorProps> = ({error}) => {
|
||||
const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) => {
|
||||
|
||||
const {serverUrl, query, queryHistory, queryControls: {autocomplete}} = useAppState();
|
||||
const dispatch = useAppDispatch();
|
||||
|
|
@ -91,10 +92,8 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error}) => {
|
|||
{query.map((q, i) =>
|
||||
<Box key={i} display="grid" gridTemplateColumns="1fr auto" gap="4px" width="100%"
|
||||
mb={i === query.length - 1 ? 0 : 2}>
|
||||
<QueryEditor server={serverUrl} query={query[i]} index={i} oneLiner={!expanded}
|
||||
autocomplete={autocomplete} queryHistory={queryHistory[i]} error={error}
|
||||
setHistoryIndex={setHistoryIndex} runQuery={onRunQuery}
|
||||
setQuery={onSetQuery}/>
|
||||
<QueryEditor query={query[i]} index={i} autocomplete={autocomplete} queryOptions={queryOptions}
|
||||
error={error} setHistoryIndex={setHistoryIndex} runQuery={onRunQuery} setQuery={onSetQuery}/>
|
||||
{i === 0 && <Tooltip title="Execute Query">
|
||||
<IconButton onClick={onRunQuery}>
|
||||
<PlayCircleOutlineIcon/>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,45 @@
|
|||
import {EditorState} from "@codemirror/state";
|
||||
import {EditorView, keymap} from "@codemirror/view";
|
||||
import {defaultKeymap} from "@codemirror/commands";
|
||||
import React, {FC, useEffect, useRef, useState} from "react";
|
||||
import {PromQLExtension} from "codemirror-promql";
|
||||
import {basicSetup} from "@codemirror/basic-setup";
|
||||
import {QueryHistory} from "../../../../state/common/reducer";
|
||||
import React, {FC, useEffect, useState} from "react";
|
||||
import {ErrorTypes} from "../../../../types";
|
||||
import {Autocomplete, TextField} from "@mui/material";
|
||||
import {queryToBreakLine} from "../../../../utils/query-string";
|
||||
|
||||
export interface QueryEditorProps {
|
||||
setHistoryIndex: (step: number, index: number) => void;
|
||||
setQuery: (query: string, index: number) => void;
|
||||
runQuery: () => void;
|
||||
query: string;
|
||||
index: number;
|
||||
queryHistory: QueryHistory;
|
||||
server: string;
|
||||
oneLiner?: boolean;
|
||||
autocomplete: boolean;
|
||||
error?: ErrorTypes | string;
|
||||
setHistoryIndex: (step: number, index: number) => void;
|
||||
setQuery: (query: string, index: number) => void;
|
||||
runQuery: () => void;
|
||||
query: string;
|
||||
index: number;
|
||||
oneLiner?: boolean;
|
||||
autocomplete: boolean;
|
||||
error?: ErrorTypes | string;
|
||||
queryOptions: string[];
|
||||
}
|
||||
|
||||
const QueryEditor: FC<QueryEditorProps> = ({
|
||||
index,
|
||||
query,
|
||||
queryHistory,
|
||||
setHistoryIndex,
|
||||
setQuery,
|
||||
runQuery,
|
||||
server,
|
||||
oneLiner = false,
|
||||
autocomplete,
|
||||
error
|
||||
error,
|
||||
queryOptions
|
||||
}) => {
|
||||
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [value, setValue] = useState(query);
|
||||
const [downMetaKeys, setDownMetaKeys] = useState<string[]>([]);
|
||||
|
||||
const [editorView, setEditorView] = useState<EditorView>();
|
||||
const [focusEditor, setFocusEditor] = useState(false);
|
||||
|
||||
// init editor view on load
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
setEditorView(new EditorView(
|
||||
{
|
||||
parent: ref.current
|
||||
})
|
||||
);
|
||||
}
|
||||
return () => editorView?.destroy();
|
||||
}, []);
|
||||
setValue(queryToBreakLine(query));
|
||||
}, [query]);
|
||||
|
||||
// update state on change of autocomplete server
|
||||
useEffect(() => {
|
||||
const promQL = new PromQLExtension();
|
||||
promQL.activateCompletion(autocomplete);
|
||||
promQL.setComplete({remote: {url: server}});
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
|
||||
if (e.ctrlKey || e.metaKey) setDownMetaKeys([...downMetaKeys, e.key]);
|
||||
};
|
||||
|
||||
const listenerExtension = EditorView.updateListener.of(editorUpdate => {
|
||||
if (editorUpdate.focusChanged) {
|
||||
setFocusEditor(editorView?.hasFocus || false);
|
||||
}
|
||||
if (editorUpdate.docChanged) {
|
||||
setQuery(editorUpdate.state.doc.toJSON().map(el => el.trim()).join(""), index);
|
||||
}
|
||||
});
|
||||
|
||||
editorView?.setState(EditorState.create({
|
||||
doc: query,
|
||||
extensions: [
|
||||
basicSetup,
|
||||
keymap.of(defaultKeymap),
|
||||
listenerExtension,
|
||||
promQL.asExtension(),
|
||||
]
|
||||
}));
|
||||
}, [server, editorView, autocomplete, queryHistory]);
|
||||
|
||||
const onKeyUp = (e: React.KeyboardEvent<HTMLDivElement>): void => {
|
||||
const handleKeyUp = (e: React.KeyboardEvent<HTMLDivElement>): void => {
|
||||
const {key, ctrlKey, metaKey} = e;
|
||||
if (downMetaKeys.includes(key)) setDownMetaKeys(downMetaKeys.filter(k => k !== key));
|
||||
const ctrlMetaKey = ctrlKey || metaKey;
|
||||
if (key === "Enter" && ctrlMetaKey) {
|
||||
runQuery();
|
||||
|
|
@ -88,14 +50,25 @@ const QueryEditor: FC<QueryEditorProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
return <div className={`query-editor-container
|
||||
${focusEditor ? "query-editor-container_focus" : ""}
|
||||
query-editor-container-${oneLiner ? "one-line" : "multi-line"}
|
||||
${error === ErrorTypes.validQuery ? "query-editor-container_error" : ""}`}>
|
||||
{/*Class one-line-scroll and other codemirror styles are declared in index.css*/}
|
||||
<label className="query-editor-label">Query {index + 1}</label>
|
||||
<div className="query-editor" ref={ref} onKeyUp={onKeyUp}/>
|
||||
</div>;
|
||||
return <Autocomplete
|
||||
freeSolo
|
||||
fullWidth
|
||||
disableClearable
|
||||
options={autocomplete && !downMetaKeys.length ? queryOptions : []}
|
||||
onChange={(event, value) => setQuery(value, index)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
value={value}
|
||||
renderInput={(params) =>
|
||||
<TextField
|
||||
{...params}
|
||||
label={`Query ${index + 1}`}
|
||||
multiline
|
||||
error={!!error}
|
||||
onChange={(e) => setQuery(e.target.value, index)}
|
||||
/>
|
||||
}
|
||||
/>;
|
||||
};
|
||||
|
||||
export default QueryEditor;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import {useEffect, useMemo, useState} from "react";
|
||||
import {getQueryRangeUrl, getQueryUrl} from "../../../../api/query-range";
|
||||
import {getQueryOptions, getQueryRangeUrl, getQueryUrl} from "../../../../api/query-range";
|
||||
import {useAppState} from "../../../../state/common/StateContext";
|
||||
import {InstantMetricResult, MetricBase, MetricResult} from "../../../../api/types";
|
||||
import {isValidHttpUrl} from "../../../../utils/url";
|
||||
|
|
@ -17,12 +17,14 @@ export const useFetchQuery = (): {
|
|||
graphData?: MetricResult[],
|
||||
liveData?: InstantMetricResult[],
|
||||
error?: ErrorTypes | string,
|
||||
queryOptions: string[],
|
||||
} => {
|
||||
const {query, displayType, serverUrl, time: {period}, queryControls: {nocache, autoRefresh}} = useAppState();
|
||||
|
||||
const {basicData, bearerData, authMethod} = useAuthState();
|
||||
const {customStep} = useGraphState();
|
||||
|
||||
const [queryOptions, setQueryOptions] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [graphData, setGraphData] = useState<MetricResult[]>();
|
||||
const [liveData, setLiveData] = useState<InstantMetricResult[]>();
|
||||
|
|
@ -83,6 +85,21 @@ export const useFetchQuery = (): {
|
|||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const fetchOptions = async () => {
|
||||
if (!serverUrl) return;
|
||||
const url = getQueryOptions(serverUrl);
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const resp = await response.json();
|
||||
if (response.ok) {
|
||||
setQueryOptions(resp.data);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof Error) setError(`${e.name}: ${e.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUrl = useMemo(() => {
|
||||
const server = appModeEnable ? appServerUrl : serverUrl;
|
||||
if (!period) return;
|
||||
|
|
@ -103,27 +120,22 @@ export const useFetchQuery = (): {
|
|||
},
|
||||
[serverUrl, period, displayType, customStep]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOptions();
|
||||
}, [serverUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
setPrevPeriod(undefined);
|
||||
}, [query]);
|
||||
|
||||
// TODO: this should depend on query as well, but need to decide when to do the request.
|
||||
// Doing it on each query change - looks to be a bad idea. Probably can be done on blur
|
||||
// TODO: this should depend on query as well, but need to decide when to do the request. Doing it on each query change - looks to be a bad idea. Probably can be done on blur
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [serverUrl, displayType, customStep]);
|
||||
|
||||
useEffect(() => {
|
||||
if (needUpdateData) {
|
||||
fetchData();
|
||||
}
|
||||
if (needUpdateData) fetchData();
|
||||
}, [period]);
|
||||
|
||||
return {
|
||||
fetchUrl,
|
||||
isLoading,
|
||||
graphData,
|
||||
liveData,
|
||||
error
|
||||
};
|
||||
return { fetchUrl, isLoading, graphData, liveData, error, queryOptions: queryOptions };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ const HomeLayout: FC = () => {
|
|||
|
||||
const {displayType, time: {period}} = useAppState();
|
||||
|
||||
const {isLoading, liveData, graphData, error} = useFetchQuery();
|
||||
const {isLoading, liveData, graphData, error, queryOptions} = useFetchQuery();
|
||||
|
||||
return (
|
||||
<Box id="homeLayout">
|
||||
<Header/>
|
||||
<Box p={4} display="grid" gridTemplateRows="auto 1fr" gap={"20px"} style={{minHeight: "calc(100vh - 64px)"}}>
|
||||
<Box>
|
||||
<QueryConfigurator error={error}/>
|
||||
<QueryConfigurator error={error} queryOptions={queryOptions}/>
|
||||
</Box>
|
||||
<Box height={"100%"}>
|
||||
{isLoading && <Fade in={isLoading} style={{
|
||||
|
|
|
|||
|
|
@ -14,82 +14,4 @@ code {
|
|||
|
||||
.MuiAccordionSummary-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*Codemirror classes*/
|
||||
|
||||
/* TODO: find better way to override codemirror styles */
|
||||
.cm-activeLine {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
.cm-editor {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
border-radius: 4px 0 0 4px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.cm-activeLineGutter {
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.query-editor .cm-scroller {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.query-editor .cm-editor.cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.query-editor-container {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
border: 1px solid #b9b9b9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.query-editor-container_focus {
|
||||
border: 1px solid #3F51B5;
|
||||
}
|
||||
|
||||
.query-editor-container_error {
|
||||
border-color: #FF4141;
|
||||
}
|
||||
|
||||
.query-editor-container-one-line .query-editor .cm-editor {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.query-editor-container-one-line {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.query-editor-label {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(133% - 24px);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: -0.71875em;
|
||||
z-index: 1;
|
||||
background-color: #FFFFFF;
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
.query-editor-container_error .query-editor-label {
|
||||
color: #FF4141;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ import {
|
|||
} from "../../utils/time";
|
||||
import {getFromStorage} from "../../utils/storage";
|
||||
import {getDefaultServer} from "../../utils/default-server-url";
|
||||
import {getQueryArray, getQueryStringValue} from "../../utils/query-string";
|
||||
import {breakLineToQuery, getQueryArray, getQueryStringValue} from "../../utils/query-string";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export interface TimeState {
|
||||
|
|
@ -88,7 +88,7 @@ export function reducer(state: AppState, action: Action): AppState {
|
|||
case "SET_QUERY":
|
||||
return {
|
||||
...state,
|
||||
query: action.payload
|
||||
query: action.payload.map(q => breakLineToQuery(q))
|
||||
};
|
||||
case "SET_QUERY_HISTORY":
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const setQueryStringValue = (newValue: Record<string, unknown>): void =>
|
|||
newQsValue.push(`g${i}.${queryKey}=${valueEncoded}`);
|
||||
}
|
||||
});
|
||||
newQsValue.push(`g${i}.expr=${q}`);
|
||||
newQsValue.push(`g${i}.expr=${breakLineToQuery(q)}`);
|
||||
});
|
||||
|
||||
setQueryStringWithoutPageReload(newQsValue.join("&"));
|
||||
|
|
@ -69,3 +69,7 @@ export const getQueryArray = (): string[] => {
|
|||
return getQueryStringValue(`g${i}.expr`, "") as string;
|
||||
});
|
||||
};
|
||||
|
||||
export const breakLineToQuery = (q: string): string => q.replace(/\n/g, "%20");
|
||||
|
||||
export const queryToBreakLine = (q: string): string => q.replace(/%20/g, "\n");
|
||||
|
|
|
|||
Loading…
Reference in a new issue