diff --git a/web/ui/mantine-ui/src/components/SettingsMenu.tsx b/web/ui/mantine-ui/src/components/SettingsMenu.tsx index e5376eef2c..706eba3efe 100644 --- a/web/ui/mantine-ui/src/components/SettingsMenu.tsx +++ b/web/ui/mantine-ui/src/components/SettingsMenu.tsx @@ -21,6 +21,8 @@ const SettingsMenu: FC = () => { enableSyntaxHighlighting, enableLinter, showAnnotations, + showQueryWarnings, + showQueryInfoNotices, ruleGroupsPerPage, alertGroupsPerPage, } = useSettings(); @@ -101,6 +103,28 @@ const SettingsMenu: FC = () => { ) } /> + + dispatch( + updateSettings({ + showQueryWarnings: event.currentTarget.checked, + }) + ) + } + /> + + dispatch( + updateSettings({ + showQueryInfoNotices: event.currentTarget.checked, + }) + ) + } + /> diff --git a/web/ui/mantine-ui/src/pages/query/Graph.tsx b/web/ui/mantine-ui/src/pages/query/Graph.tsx index 5a4b95baa8..bd92e28b23 100644 --- a/web/ui/mantine-ui/src/pages/query/Graph.tsx +++ b/web/ui/mantine-ui/src/pages/query/Graph.tsx @@ -15,6 +15,7 @@ import { useElementSize } from "@mantine/hooks"; import UPlotChart, { UPlotChartRange } from "./UPlotChart"; import ASTNode, { nodeType } from "../../promql/ast"; import serializeNode from "../../promql/serialize"; +import { useSettings } from "../../state/settingsSlice"; export interface GraphProps { expr: string; @@ -41,6 +42,7 @@ const Graph: FC = ({ }) => { const { ref, width } = useElementSize(); const [rerender, setRerender] = useState(true); + const { showQueryWarnings, showQueryInfoNotices } = useSettings(); const effectiveExpr = node === null @@ -88,26 +90,28 @@ const Graph: FC = ({ const renderAlerts = (warnings?: string[], infos?: string[]) => { return ( <> - {warnings?.map((w, idx) => ( - } - > - {w} - - ))} - {infos?.map((w, idx) => ( - } - > - {w} - - ))} + {showQueryWarnings && + warnings?.map((w, idx) => ( + } + > + {w} + + ))} + {showQueryInfoNotices && + infos?.map((w, idx) => ( + } + > + {w} + + ))} ); }; diff --git a/web/ui/mantine-ui/src/pages/query/TableTab.tsx b/web/ui/mantine-ui/src/pages/query/TableTab.tsx index e0d2ed7dff..d819ec55ba 100644 --- a/web/ui/mantine-ui/src/pages/query/TableTab.tsx +++ b/web/ui/mantine-ui/src/pages/query/TableTab.tsx @@ -10,6 +10,7 @@ import { setVisualizer } from "../../state/queryPageSlice"; import TimeInput from "./TimeInput"; import DataTable from "./DataTable"; import QueryStatsDisplay from "./QueryStatsDisplay"; +import { useSettings } from "../../state/settingsSlice"; dayjs.extend(timezone); export interface TableTabProps { @@ -26,6 +27,7 @@ const TableTab: FC = ({ panelIdx, retriggerIdx, expr }) => { (state) => state.queryPage.panels[panelIdx] ); const dispatch = useAppDispatch(); + const { showQueryWarnings, showQueryInfoNotices } = useSettings(); const { endTime, range } = visualizer; @@ -99,27 +101,29 @@ const TableTab: FC = ({ panelIdx, retriggerIdx, expr }) => { )} - {data.warnings?.map((w, idx) => ( - } - > - {w} - - ))} + {showQueryWarnings && + data.warnings?.map((w, idx) => ( + } + > + {w} + + ))} - {data.infos?.map((w, idx) => ( - } - > - {w} - - ))} + {showQueryInfoNotices && + data.infos?.map((w, idx) => ( + } + > + {w} + + ))} ( + localStorageKeyShowQueryWarnings, + true + ), + showQueryInfoNotices: initializeFromLocalStorage( + localStorageKeyShowQueryInfoNotices, + true + ), ruleGroupsPerPage: initializeFromLocalStorage( localStorageKeyRuleGroupsPerPage, 10