mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-25 05:34:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Use redux-based settings in expression input component

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-03-14 12:20:19 +01:00
parent 9fe8a5dba7
commit 64dabd4379
1 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
View file

@ -61,6 +61,7 @@ import {
} from "@tabler/icons-react";
import { useAPIQuery } from "../../api/api";
import { notifications } from "@mantine/notifications";
import { useAppSelector } from "../../state/hooks";
const promqlExtension = new PromQLExtension();
@ -120,6 +121,12 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
removePanel,
}) => {
const theme = useComputedColorScheme();
const {
pathPrefix,
enableAutocomplete,
enableSyntaxHighlighting,
enableLinter,
} = useAppSelector((state) => state.settings);
const [expr, setExpr] = useState(initialExpr);
useEffect(() => {
setExpr(initialExpr);
@ -159,11 +166,6 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
}
}, [formatResult, formatError]);
// TODO: make dynamic:
const enableAutocomplete = true;
const enableLinter = true;
const pathPrefix = "";
// const metricNames = ...
const queryHistory = [] as string[];
// (Re)initialize editor based on settings / setting changes.
@ -183,7 +185,7 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
queryHistory
),
});
}, [metricNames, enableAutocomplete, enableLinter, queryHistory]); // TODO: Make this depend on external settings changes, maybe use dynamic config compartment again.
}, [pathPrefix, metricNames, enableAutocomplete, enableLinter, queryHistory]); // TODO: Make this depend on external settings changes, maybe use dynamic config compartment again.
return (
<Group align="flex-start" wrap="nowrap" gap="xs">
@ -262,9 +264,11 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
...lintKeymap,
]),
placeholder("Enter expression (press Shift+Enter for newlines)"),
syntaxHighlighting(
theme === "light" ? promqlHighlighter : darkPromqlHighlighter
),
enableSyntaxHighlighting
? syntaxHighlighting(
theme === "light" ? promqlHighlighter : darkPromqlHighlighter
)
: [],
promqlExtension.asExtension(),
theme === "light" ? lightTheme : darkTheme,
keymap.of([