Merge pull request #16901 from prometheus/configurable-notice-alerts

Make query warning/info notice display configurable

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 = () => {
                     )
                   }
                 />
+                <Checkbox
+                  checked={showQueryWarnings}
+                  label="Show query warnings"
+                  onChange={(event) =>
+                    dispatch(
+                      updateSettings({
+                        showQueryWarnings: event.currentTarget.checked,
+                      })
+                    )
+                  }
+                />
+                <Checkbox
+                  checked={showQueryInfoNotices}
+                  label="Show query info notices"
+                  onChange={(event) =>
+                    dispatch(
+                      updateSettings({
+                        showQueryInfoNotices: event.currentTarget.checked,
+                      })
+                    )
+                  }
+                />
               </Stack>
             </Fieldset>
           </Stack>

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<GraphProps> = ({
 }) => {
   const { ref, width } = useElementSize();
   const [rerender, setRerender] = useState(true);
+  const { showQueryWarnings, showQueryInfoNotices } = useSettings();
 
   const effectiveExpr =
     node === null
@@ -88,26 +90,28 @@ const Graph: FC<GraphProps> = ({
   const renderAlerts = (warnings?: string[], infos?: string[]) => {
     return (
       <>
-        {warnings?.map((w, idx) => (
+        {showQueryWarnings &&
-          <Alert
+          warnings?.map((w, idx) => (
-            key={idx}
+            <Alert
-            color="red"
+              key={idx}
-            title="Query warning"
+              color="red"
-            icon={<IconAlertTriangle />}
+              title="Query warning"
-          >
+              icon={<IconAlertTriangle />}
-            {w}
+            >
-          </Alert>
+              {w}
-        ))}
+            </Alert>
-        {infos?.map((w, idx) => (
+          ))}
-          <Alert
+        {showQueryInfoNotices &&
-            key={idx}
+          infos?.map((w, idx) => (
-            color="yellow"
+            <Alert
-            title="Query notice"
+              key={idx}
-            icon={<IconInfoCircle />}
+              color="yellow"
-          >
+              title="Query notice"
-            {w}
+              icon={<IconInfoCircle />}
-          </Alert>
+            >
-        ))}
+              {w}
+            </Alert>
+          ))}
       </>
     );
   };

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<TableTabProps> = ({ 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<TableTabProps> = ({ panelIdx, retriggerIdx, expr }) => {
             </Alert>
           )}
 
-          {data.warnings?.map((w, idx) => (
+          {showQueryWarnings &&
-            <Alert
+            data.warnings?.map((w, idx) => (
-              key={idx}
+              <Alert
-              color="red"
+                key={idx}
-              title="Query warning"
+                color="red"
-              icon={<IconAlertTriangle />}
+                title="Query warning"
-            >
+                icon={<IconAlertTriangle />}
-              {w}
+              >
-            </Alert>
+                {w}
-          ))}
+              </Alert>
+            ))}
 
-          {data.infos?.map((w, idx) => (
+          {showQueryInfoNotices &&
-            <Alert
+            data.infos?.map((w, idx) => (
-              key={idx}
+              <Alert
-              color="yellow"
+                key={idx}
-              title="Query notice"
+                color="yellow"
-              icon={<IconInfoCircle />}
+                title="Query notice"
-            >
+                icon={<IconInfoCircle />}
-              {w}
+              >
-            </Alert>
+                {w}
-          ))}
+              </Alert>
+            ))}
           <DataTable
             data={data.data}
             limitResults={limitResults}

web/ui/mantine-ui/src/state/localStorageMiddleware.ts

@@ -63,6 +63,8 @@ startAppListening({
         case "enableSyntaxHighlighting":
         case "enableLinter":
         case "showAnnotations":
+        case "showQueryWarnings":
+        case "showQueryInfoNotices":
         case "alertGroupsPerPage":
         case "ruleGroupsPerPage":
           return persistToLocalStorage(`settings.${key}`, value);

web/ui/mantine-ui/src/state/settingsSlice.ts

@@ -14,6 +14,8 @@ interface Settings {
   enableSyntaxHighlighting: boolean;
   enableLinter: boolean;
   showAnnotations: boolean;
+  showQueryWarnings: boolean;
+  showQueryInfoNotices: boolean;
   ruleGroupsPerPage: number;
   alertGroupsPerPage: number;
 }
@@ -31,6 +33,9 @@ export const localStorageKeyEnableSyntaxHighlighting =
   "settings.enableSyntaxHighlighting";
 export const localStorageKeyEnableLinter = "settings.enableLinter";
 export const localStorageKeyShowAnnotations = "settings.showAnnotations";
+export const localStorageKeyShowQueryWarnings = "settings.showQueryWarnings";
+export const localStorageKeyShowQueryInfoNotices =
+  "settings.showQueryInfoNotices";
 export const localStorageKeyRuleGroupsPerPage = "settings.ruleGroupsPerPage";
 export const localStorageKeyAlertGroupsPerPage = "settings.alertGroupsPerPage";
 
@@ -99,6 +104,14 @@ export const initialState: Settings = {
     localStorageKeyShowAnnotations,
     true
   ),
+  showQueryWarnings: initializeFromLocalStorage<boolean>(
+    localStorageKeyShowQueryWarnings,
+    true
+  ),
+  showQueryInfoNotices: initializeFromLocalStorage<boolean>(
+    localStorageKeyShowQueryInfoNotices,
+    true
+  ),
   ruleGroupsPerPage: initializeFromLocalStorage<number>(
     localStorageKeyRuleGroupsPerPage,
     10