Kiu/VictoriaMetrics
Kiu/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-01-19 23:09:18 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

vmui: replace @codemirror to text field (#2003)

Browse Source 
* 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 2022-01-03 22:00:54 +03:00 committed by GitHub
parent 042570584f
commit 89ff7b2465
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 84 additions and 716 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

537
app/vmui/packages/vmui/package-lock.json generated
View File

@ -8,12 +8,6 @@
"name": "vmui", "name": "vmui",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "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", "@date-io/dayjs": "^2.11.0",
"@emotion/react": "^11.7.1", "@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0", "@emotion/styled": "^11.6.0",
@ -34,7 +28,6 @@
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"@types/react-measure": "^2.0.8", "@types/react-measure": "^2.0.8",
"codemirror-promql": "^0.18.0",
"dayjs": "^1.10.7", "dayjs": "^1.10.7",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
@ -1922,229 +1915,6 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" "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": { "node_modules/@csstools/normalize.css": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", "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" "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": { "node_modules/@mui/base": {
"version": "5.0.0-alpha.60", "version": "5.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.60.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.60.tgz",
@ -5705,26 +5462,6 @@
"node": ">=4" "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": { "node_modules/collect-v8-coverage": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@ -5972,11 +5709,6 @@
"node": ">=10" "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": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -14618,11 +14350,6 @@
"webpack": "^5.0.0" "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": { "node_modules/stylehacks": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
@ -15382,11 +15109,6 @@
"browser-process-hrtime": "^1.0.0" "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": { "node_modules/w3c-xmlserializer": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" "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": { "@csstools/normalize.css": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", "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": { "@mui/base": {
"version": "5.0.0-alpha.60", "version": "5.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.60.tgz", "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": { "collect-v8-coverage": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@ -20471,11 +19949,6 @@
"yaml": "^1.10.0" "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": { "cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -26689,11 +26162,6 @@
"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
"requires": {} "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": { "stylehacks": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
@ -27252,11 +26720,6 @@
"browser-process-hrtime": "^1.0.0" "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": { "w3c-xmlserializer": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",

7
app/vmui/packages/vmui/package.json
View File

@ -4,12 +4,6 @@
"private": true, "private": true,
"homepage": "./", "homepage": "./",
"dependencies": { "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", "@date-io/dayjs": "^2.11.0",
"@emotion/react": "^11.7.1", "@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0", "@emotion/styled": "^11.6.0",
@ -30,7 +24,6 @@
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"@types/react-measure": "^2.0.8", "@types/react-measure": "^2.0.8",
"codemirror-promql": "^0.18.0",
"dayjs": "^1.10.7", "dayjs": "^1.10.7",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",

2
app/vmui/packages/vmui/src/api/query-range.ts
View File

@ -5,3 +5,5 @@ export const getQueryRangeUrl = (server: string, query: string, period: TimePara
export const getQueryUrl = (server: string, query: string, period: TimeParams): string => 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}`; `${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`;

11
app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryConfigurator.tsx
View File

@ -15,10 +15,11 @@ import AdditionalSettings from "./AdditionalSettings";
import {ErrorTypes} from "../../../../types"; import {ErrorTypes} from "../../../../types";
export interface QueryConfiguratorProps { 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 {serverUrl, query, queryHistory, queryControls: {autocomplete}} = useAppState();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -91,10 +92,8 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error}) => {
{query.map((q, i) => {query.map((q, i) =>
<Box key={i} display="grid" gridTemplateColumns="1fr auto" gap="4px" width="100%" <Box key={i} display="grid" gridTemplateColumns="1fr auto" gap="4px" width="100%"
mb={i === query.length - 1 ? 0 : 2}> mb={i === query.length - 1 ? 0 : 2}>
<QueryEditor server={serverUrl} query={query[i]} index={i} oneLiner={!expanded} <QueryEditor query={query[i]} index={i} autocomplete={autocomplete} queryOptions={queryOptions}
autocomplete={autocomplete} queryHistory={queryHistory[i]} error={error} error={error} setHistoryIndex={setHistoryIndex} runQuery={onRunQuery} setQuery={onSetQuery}/>
setHistoryIndex={setHistoryIndex} runQuery={onRunQuery}
setQuery={onSetQuery}/>
{i === 0 && <Tooltip title="Execute Query"> {i === 0 && <Tooltip title="Execute Query">
<IconButton onClick={onRunQuery}> <IconButton onClick={onRunQuery}>
<PlayCircleOutlineIcon/> <PlayCircleOutlineIcon/>

111
app/vmui/packages/vmui/src/components/Home/Configurator/Query/QueryEditor.tsx
View File

@ -1,83 +1,45 @@
import {EditorState} from "@codemirror/state"; import React, {FC, useEffect, useState} from "react";
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 {ErrorTypes} from "../../../../types"; import {ErrorTypes} from "../../../../types";
import {Autocomplete, TextField} from "@mui/material";
import {queryToBreakLine} from "../../../../utils/query-string";
export interface QueryEditorProps { export interface QueryEditorProps {
setHistoryIndex: (step: number, index: number) => void; setHistoryIndex: (step: number, index: number) => void;
setQuery: (query: string, index: number) => void; setQuery: (query: string, index: number) => void;
runQuery: () => void; runQuery: () => void;
query: string; query: string;
index: number; index: number;
queryHistory: QueryHistory; oneLiner?: boolean;
server: string; autocomplete: boolean;
oneLiner?: boolean; error?: ErrorTypes | string;
autocomplete: boolean; queryOptions: string[];
error?: ErrorTypes | string;
} }
const QueryEditor: FC<QueryEditorProps> = ({ const QueryEditor: FC<QueryEditorProps> = ({
index, index,
query, query,
queryHistory,
setHistoryIndex, setHistoryIndex,
setQuery, setQuery,
runQuery, runQuery,
server,
oneLiner = false,
autocomplete, 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(() => { useEffect(() => {
if (ref.current) { setValue(queryToBreakLine(query));
setEditorView(new EditorView( }, [query]);
{
parent: ref.current
})
);
}
return () => editorView?.destroy();
}, []);
// update state on change of autocomplete server const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
useEffect(() => { if (e.ctrlKey || e.metaKey) setDownMetaKeys([...downMetaKeys, e.key]);
const promQL = new PromQLExtension(); };
promQL.activateCompletion(autocomplete);
promQL.setComplete({remote: {url: server}});
const listenerExtension = EditorView.updateListener.of(editorUpdate => { const handleKeyUp = (e: React.KeyboardEvent<HTMLDivElement>): void => {
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 {key, ctrlKey, metaKey} = e; const {key, ctrlKey, metaKey} = e;
if (downMetaKeys.includes(key)) setDownMetaKeys(downMetaKeys.filter(k => k !== key));
const ctrlMetaKey = ctrlKey || metaKey; const ctrlMetaKey = ctrlKey || metaKey;
if (key === "Enter" && ctrlMetaKey) { if (key === "Enter" && ctrlMetaKey) {
runQuery(); runQuery();
@ -88,14 +50,25 @@ const QueryEditor: FC<QueryEditorProps> = ({
} }
}; };
return <div className={`query-editor-container return <Autocomplete
${focusEditor ? "query-editor-container_focus" : ""} freeSolo
query-editor-container-${oneLiner ? "one-line" : "multi-line"} fullWidth
${error === ErrorTypes.validQuery ? "query-editor-container_error" : ""}`}> disableClearable
{/*Class one-line-scroll and other codemirror styles are declared in index.css*/} options={autocomplete && !downMetaKeys.length ? queryOptions : []}
<label className="query-editor-label">Query {index + 1}</label> onChange={(event, value) => setQuery(value, index)}
<div className="query-editor" ref={ref} onKeyUp={onKeyUp}/> onKeyDown={handleKeyDown}
</div>; 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; export default QueryEditor;

38
app/vmui/packages/vmui/src/components/Home/Configurator/Query/useFetchQuery.ts
View File

@ -1,5 +1,5 @@
import {useEffect, useMemo, useState} from "react"; 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 {useAppState} from "../../../../state/common/StateContext";
import {InstantMetricResult, MetricBase, MetricResult} from "../../../../api/types"; import {InstantMetricResult, MetricBase, MetricResult} from "../../../../api/types";
import {isValidHttpUrl} from "../../../../utils/url"; import {isValidHttpUrl} from "../../../../utils/url";
@ -17,12 +17,14 @@ export const useFetchQuery = (): {
graphData?: MetricResult[], graphData?: MetricResult[],
liveData?: InstantMetricResult[], liveData?: InstantMetricResult[],
error?: ErrorTypes | string, error?: ErrorTypes | string,
queryOptions: string[],
} => { } => {
const {query, displayType, serverUrl, time: {period}, queryControls: {nocache, autoRefresh}} = useAppState(); const {query, displayType, serverUrl, time: {period}, queryControls: {nocache, autoRefresh}} = useAppState();
const {basicData, bearerData, authMethod} = useAuthState(); const {basicData, bearerData, authMethod} = useAuthState();
const {customStep} = useGraphState(); const {customStep} = useGraphState();
const [queryOptions, setQueryOptions] = useState([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [graphData, setGraphData] = useState<MetricResult[]>(); const [graphData, setGraphData] = useState<MetricResult[]>();
const [liveData, setLiveData] = useState<InstantMetricResult[]>(); const [liveData, setLiveData] = useState<InstantMetricResult[]>();
@ -83,6 +85,21 @@ export const useFetchQuery = (): {
setIsLoading(false); 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 fetchUrl = useMemo(() => {
const server = appModeEnable ? appServerUrl : serverUrl; const server = appModeEnable ? appServerUrl : serverUrl;
if (!period) return; if (!period) return;
@ -103,27 +120,22 @@ export const useFetchQuery = (): {
}, },
[serverUrl, period, displayType, customStep]); [serverUrl, period, displayType, customStep]);
useEffect(() => {
fetchOptions();
}, [serverUrl]);
useEffect(() => { useEffect(() => {
setPrevPeriod(undefined); setPrevPeriod(undefined);
}, [query]); }, [query]);
// TODO: this should depend on query as well, but need to decide when to do the request. // 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
// Doing it on each query change - looks to be a bad idea. Probably can be done on blur
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [serverUrl, displayType, customStep]); }, [serverUrl, displayType, customStep]);
useEffect(() => { useEffect(() => {
if (needUpdateData) { if (needUpdateData) fetchData();
fetchData();
}
}, [period]); }, [period]);
return { return { fetchUrl, isLoading, graphData, liveData, error, queryOptions: queryOptions };
fetchUrl,
isLoading,
graphData,
liveData,
error
};
}; };

4
app/vmui/packages/vmui/src/components/Home/HomeLayout.tsx
View File

@ -12,14 +12,14 @@ const HomeLayout: FC = () => {
const {displayType, time: {period}} = useAppState(); const {displayType, time: {period}} = useAppState();
const {isLoading, liveData, graphData, error} = useFetchQuery(); const {isLoading, liveData, graphData, error, queryOptions} = useFetchQuery();
return ( return (
<Box id="homeLayout"> <Box id="homeLayout">
<Header/> <Header/>
<Box p={4} display="grid" gridTemplateRows="auto 1fr" gap={"20px"} style={{minHeight: "calc(100vh - 64px)"}}> <Box p={4} display="grid" gridTemplateRows="auto 1fr" gap={"20px"} style={{minHeight: "calc(100vh - 64px)"}}>
<Box> <Box>
<QueryConfigurator error={error}/> <QueryConfigurator error={error} queryOptions={queryOptions}/>
</Box> </Box>
<Box height={"100%"}> <Box height={"100%"}>
{isLoading && <Fade in={isLoading} style={{ {isLoading && <Fade in={isLoading} style={{

80
app/vmui/packages/vmui/src/index.css
View File

@ -14,82 +14,4 @@ code {
.MuiAccordionSummary-content { .MuiAccordionSummary-content {
margin: 0 !important; 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;
}

4
app/vmui/packages/vmui/src/state/common/reducer.ts
View File

@ -11,7 +11,7 @@ import {
} from "../../utils/time"; } from "../../utils/time";
import {getFromStorage} from "../../utils/storage"; import {getFromStorage} from "../../utils/storage";
import {getDefaultServer} from "../../utils/default-server-url"; 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"; import dayjs from "dayjs";
export interface TimeState { export interface TimeState {
@ -88,7 +88,7 @@ export function reducer(state: AppState, action: Action): AppState {
case "SET_QUERY": case "SET_QUERY":
return { return {
...state, ...state,
query: action.payload query: action.payload.map(q => breakLineToQuery(q))
}; };
case "SET_QUERY_HISTORY": case "SET_QUERY_HISTORY":
return { return {

6
app/vmui/packages/vmui/src/utils/query-string.ts
View File

@ -48,7 +48,7 @@ export const setQueryStringValue = (newValue: Record<string, unknown>): void =>
newQsValue.push(`g${i}.${queryKey}=${valueEncoded}`); newQsValue.push(`g${i}.${queryKey}=${valueEncoded}`);
} }
}); });
newQsValue.push(`g${i}.expr=${q}`); newQsValue.push(`g${i}.expr=${breakLineToQuery(q)}`);
}); });
setQueryStringWithoutPageReload(newQsValue.join("&")); setQueryStringWithoutPageReload(newQsValue.join("&"));
@ -69,3 +69,7 @@ export const getQueryArray = (): string[] => {
return getQueryStringValue(`g${i}.expr`, "") as 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");