mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
vmui: remove monaco-editor (#4698)
* fix: remove monaco editor due to bundle size * vmui: update dependencies * fix: disable source map generation
This commit is contained in:
Yury Molodov
Aliaksandr Valialkin
parent
42af241d59
commit
9f440b1013
9 changed files with 633 additions and 607 deletions
1001
app/vmui/packages/vmui/package-lock.json
generated
1001
app/vmui/packages/vmui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,6 @@
|
|||
"private": true,
|
||||
"homepage": "./",
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.5.1",
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/lodash.get": "^4.4.6",
|
||||
"@types/lodash.throttle": "^4.1.6",
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import React, { FC } from "preact/compat";
|
||||
import Editor, { useMonaco } from "@monaco-editor/react";
|
||||
import useMonacoTheme from "./hooks/useMonacoTheme";
|
||||
import useLabelsSyntax from "./hooks/useLabelsSyntax";
|
||||
import useKeybindings from "./hooks/useKeybindings";
|
||||
import "./style.scss";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface MonacoEditorProps {
|
||||
value: string;
|
||||
label?: string;
|
||||
language?: string;
|
||||
disabled?: boolean;
|
||||
resize?: "vertical" | "horizontal" | "both" | "none";
|
||||
onChange: (val: string | undefined) => void;
|
||||
onEnter?: (val: string) => void;
|
||||
}
|
||||
|
||||
const MonacoEditor: FC<MonacoEditorProps> = ({ value, label, language, disabled, resize = "none", onChange, onEnter }) => {
|
||||
const monaco = useMonaco();
|
||||
useMonacoTheme(monaco);
|
||||
useLabelsSyntax(monaco);
|
||||
useKeybindings(monaco, onEnter);
|
||||
|
||||
return (
|
||||
<div className="vm-text-field vm-monaco-editor">
|
||||
<Editor
|
||||
className={classNames({
|
||||
"vm-text-field__input": true,
|
||||
"vm-monaco-editor__input": true,
|
||||
[`vm-monaco-editor__input_resize-${resize}`]: resize,
|
||||
})}
|
||||
defaultLanguage={language}
|
||||
value={value}
|
||||
theme={"vm-theme"}
|
||||
options={{
|
||||
readOnly: disabled,
|
||||
scrollBeyondLastLine: false,
|
||||
automaticLayout: true,
|
||||
lineNumbers: "off",
|
||||
minimap: {
|
||||
enabled: false
|
||||
},
|
||||
}}
|
||||
onChange={onChange}
|
||||
/>
|
||||
{label && <span className="vm-text-field__label">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonacoEditor;
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { Monaco } from "@monaco-editor/react";
|
||||
import { useEffect } from "preact/compat";
|
||||
import * as monaco from "monaco-editor";
|
||||
|
||||
const useKeybindings = (monaco: Monaco | null, onEnter?: (val: string) => void) => {
|
||||
|
||||
const handleRunEnter = (e: monaco.editor.ICodeEditor) => {
|
||||
onEnter && onEnter(e.getValue() || "");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!monaco) return;
|
||||
monaco.editor.addEditorAction({
|
||||
id: "execute-ctrl-enter",
|
||||
label: "Execute",
|
||||
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
|
||||
run: handleRunEnter
|
||||
});
|
||||
}, [monaco, onEnter]);
|
||||
};
|
||||
|
||||
export default useKeybindings;
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import { useEffect } from "preact/compat";
|
||||
import { Monaco } from "@monaco-editor/react";
|
||||
import * as monaco from "monaco-editor";
|
||||
|
||||
const languageId = "vm-labels";
|
||||
|
||||
export const language = {
|
||||
ignoreCase: false,
|
||||
defaultToken: "",
|
||||
tokenizer: {
|
||||
root: [
|
||||
// labels
|
||||
[ /[a-z_]\w*(?=\s*(=|!=|=~|!~))/, "tag" ],
|
||||
|
||||
// strings
|
||||
[ /"([^"\\]|\\.)*$/, "string.invalid" ],
|
||||
[ /'([^'\\]|\\.)*$/, "string.invalid" ],
|
||||
[ /"/, "string", "@string_double" ],
|
||||
[ /'/, "string", "@string_single" ],
|
||||
[ /`/, "string", "@string_backtick" ],
|
||||
|
||||
// delimiters and operators
|
||||
[ /[{}()[]]/, "@brackets" ],
|
||||
],
|
||||
|
||||
string_double: [
|
||||
[ /[^\\"]+/, "string" ],
|
||||
[ /\\./, "string.escape.invalid" ],
|
||||
[ /"/, "string", "@pop" ]
|
||||
],
|
||||
|
||||
string_single: [
|
||||
[ /[^\\']+/, "string" ],
|
||||
[ /\\./, "string.escape.invalid" ],
|
||||
[ /'/, "string", "@pop" ]
|
||||
],
|
||||
|
||||
string_backtick: [
|
||||
[ /[^\\`$]+/, "string" ],
|
||||
[ /\\./, "string.escape.invalid" ],
|
||||
[ /`/, "string", "@pop" ]
|
||||
],
|
||||
},
|
||||
} as monaco.languages.IMonarchLanguage;
|
||||
|
||||
export const languageConfiguration: monaco.languages.LanguageConfiguration = {
|
||||
wordPattern: /(-?\d*\.\d\w*)|([^`~!#%^&*()\-=+[{\]}\\|;:'",.<>/?\s]+)/g,
|
||||
comments: {
|
||||
lineComment: "#",
|
||||
},
|
||||
brackets: [
|
||||
[ "{", "}" ],
|
||||
[ "[", "]" ],
|
||||
[ "(", ")" ],
|
||||
],
|
||||
autoClosingPairs: [
|
||||
{ open: "{", close: "}" },
|
||||
{ open: "[", close: "]" },
|
||||
{ open: "(", close: ")" },
|
||||
{ open: "\"", close: "\"" },
|
||||
{ open: "'", close: "'" },
|
||||
],
|
||||
surroundingPairs: [
|
||||
{ open: "{", close: "}" },
|
||||
{ open: "[", close: "]" },
|
||||
{ open: "(", close: ")" },
|
||||
{ open: "\"", close: "\"" },
|
||||
{ open: "'", close: "'" },
|
||||
{ open: "<", close: ">" },
|
||||
],
|
||||
folding: {}
|
||||
};
|
||||
|
||||
const useLabelsSyntax = (monaco: Monaco | null) => {
|
||||
|
||||
useEffect(() => {
|
||||
if (!monaco) return;
|
||||
monaco.languages.register({ id: languageId });
|
||||
monaco.languages.setMonarchTokensProvider(languageId, language);
|
||||
monaco.languages.setLanguageConfiguration(languageId, languageConfiguration);
|
||||
}, [monaco]);
|
||||
};
|
||||
|
||||
export default useLabelsSyntax;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { useEffect } from "preact/compat";
|
||||
import { useAppState } from "../../../state/common/StateContext";
|
||||
import { Monaco } from "@monaco-editor/react";
|
||||
|
||||
const useMonacoTheme = (monaco: Monaco | null) => {
|
||||
const { isDarkTheme } = useAppState();
|
||||
|
||||
useEffect(() => {
|
||||
if (!monaco) return;
|
||||
monaco.editor.defineTheme("vm-theme", {
|
||||
base: isDarkTheme ? "vs-dark" : "vs",
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
// #00000000 - for transparent
|
||||
"editor.background": "#00000000",
|
||||
"editor.lineHighlightBackground": "#00000000",
|
||||
"editor.lineHighlightBorder": "#00000000"
|
||||
}
|
||||
});
|
||||
monaco.editor.setTheme("vm-theme");
|
||||
}, [monaco, isDarkTheme]);
|
||||
};
|
||||
|
||||
export default useMonacoTheme;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@use "src/styles/variables" as *;
|
||||
|
||||
.vm-monaco-editor {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
|
||||
&__input {
|
||||
height: 100%;
|
||||
padding: $padding-small 0;
|
||||
resize: none;
|
||||
|
||||
&_resize {
|
||||
&-vertical {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
&-both {
|
||||
resize: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import Spinner from "../../components/Main/Spinner/Spinner";
|
|||
import Alert from "../../components/Main/Alert/Alert";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import useStateSearchParams from "../../hooks/useStateSearchParams";
|
||||
import MonacoEditor from "../../components/MonacoEditor/MonacoEditor";
|
||||
import TextField from "../../components/Main/TextField/TextField";
|
||||
|
||||
const example = {
|
||||
config: `- if: '{bar_label=~"b.*"}'
|
||||
|
|
@ -70,21 +70,20 @@ const Relabel: FC = () => {
|
|||
{loading && <Spinner/>}
|
||||
<div className="vm-relabeling-header vm-block">
|
||||
<div className="vm-relabeling-header-configs">
|
||||
<MonacoEditor
|
||||
<TextField
|
||||
type="textarea"
|
||||
label="Relabel configs"
|
||||
value={config}
|
||||
language={"yaml"}
|
||||
resize={"vertical"}
|
||||
autofocus
|
||||
onChange={handleChangeConfig}
|
||||
onEnter={handleRunQuery}
|
||||
/>
|
||||
</div>
|
||||
<div className="vm-relabeling-header__labels">
|
||||
<MonacoEditor
|
||||
<TextField
|
||||
type="textarea"
|
||||
label="Labels"
|
||||
value={labels}
|
||||
language={"vm-labels"}
|
||||
resize={"vertical"}
|
||||
onChange={handleChangeLabels}
|
||||
onEnter={handleRunQuery}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,22 @@
|
|||
width: 100%;
|
||||
|
||||
&-configs {
|
||||
min-height: 200px;
|
||||
textarea {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
&__labels {
|
||||
min-height: 60px;
|
||||
textarea {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: $font-family-monospace;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
|
|
|
|||
Loading…
Reference in a new issue