mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 5 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

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

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