Remove settings from setting menu

Signed-off-by: leonnicolas <leonloechner@gmx.de>

web/ui/mantine-ui/src/components/SettingsMenu.tsx

@@ -21,10 +21,8 @@ const SettingsMenu: FC = () => {
     enableSyntaxHighlighting,
     enableLinter,
     showAnnotations,
-    hideEmptyGroups,
     ruleGroupsPerPage,
     alertGroupsPerPage,
-    showEmptyPools,
   } = useSettings();
   const dispatch = useAppDispatch();
 
@@ -105,24 +103,10 @@ const SettingsMenu: FC = () => {
                 />
               </Stack>
             </Fieldset>
-            <Fieldset p="md" legend="Targets page settings">
-              <Checkbox
-                checked={showEmptyPools}
-                label="Show empty pools"
-                onChange={(event) =>
-                  dispatch(
-                    updateSettings({
-                      showEmptyPools: event.currentTarget.checked,
-                    })
-                  )
-                }
-              />
-            </Fieldset>
           </Stack>
 
           <Stack>
             <Fieldset p="md" legend="Alerts page settings">
-              <Stack>
               <Checkbox
                 checked={showAnnotations}
                 label="Show expanded annotations"
@@ -134,18 +118,6 @@ const SettingsMenu: FC = () => {
                   )
                 }
               />
-                <Checkbox
-                  checked={hideEmptyGroups}
-                  label="Hide empty groups"
-                  onChange={(event) =>
-                    dispatch(
-                      updateSettings({
-                        hideEmptyGroups: event.currentTarget.checked,
-                      })
-                    )
-                  }
-                />
-              </Stack>
             </Fieldset>
             <Fieldset p="md" legend="Alerts page settings">
               <NumberInput

web/ui/mantine-ui/src/pages/AlertsPage.tsx

@@ -23,8 +23,8 @@ import { Fragment, useEffect, useMemo } from "react";
 import { StateMultiSelect } from "../components/StateMultiSelect";
 import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
 import { LabelBadges } from "../components/LabelBadges";
-import { useSettings, updateSettings } from "../state/settingsSlice";
-import { useAppDispatch } from "../state/hooks";
+import { useLocalStorage } from "@mantine/hooks";
+import { useSettings } from "../state/settingsSlice";
 import {
   ArrayParam,
   NumberParam,
@@ -150,8 +150,7 @@ export default function AlertsPage() {
     },
   });
 
-  const { hideEmptyGroups, showAnnotations } = useSettings();
-  const dispatch = useAppDispatch();
+  const { showAnnotations } = useSettings();
 
   // Define URL query params.
   const [stateFilter, setStateFilter] = useQueryParam(
@@ -163,6 +162,10 @@ export default function AlertsPage() {
     withDefault(StringParam, "")
   );
   const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
+  const [showEmptyGroups, setShowEmptyGroups] = useLocalStorage<boolean>({
+    key: "alerts-page-show-empty-groups",
+    defaultValue: true,
+  });
 
   const { alertGroupsPerPage } = useSettings();
   const [activePage, setActivePage] = useQueryParam(
@@ -178,10 +181,10 @@ export default function AlertsPage() {
 
   const shownGroups = useMemo(
     () =>
-      !hideEmptyGroups
+      showEmptyGroups
         ? alertsPageData.groups
         : alertsPageData.groups.filter((g) => g.rules.length > 0),
-    [alertsPageData.groups, hideEmptyGroups]
+    [alertsPageData.groups, showEmptyGroups]
   );
 
   // If we were e.g. on page 10 and the number of total pages decreases to 5 (due to filtering
@@ -252,13 +255,7 @@ export default function AlertsPage() {
               <Anchor
                 ml="md"
                 fz="1em"
-                onClick={() => {
-                  dispatch(
-                    updateSettings({
-                      hideEmptyGroups: true,
-                    })
-                  );
-                }}
+                onClick={() => setShowEmptyGroups(false)}
               >
                 Hide empty groups
               </Anchor>
@@ -270,13 +267,7 @@ export default function AlertsPage() {
               <Anchor
                 ml="md"
                 fz="1em"
-                onClick={() => {
-                  dispatch(
-                    updateSettings({
-                      hideEmptyGroups: true,
-                    })
-                  );
-                }}
+                onClick={() => setShowEmptyGroups(false)}
               >
                 Hide empty groups
               </Anchor>
@@ -412,7 +403,7 @@ export default function AlertsPage() {
           )}
         </Card>
       )),
-    [currentPageGroups, showAnnotations, dispatch]
+    [currentPageGroups, showAnnotations, setShowEmptyGroups]
   );
 
   return (
@@ -451,7 +442,7 @@ export default function AlertsPage() {
           No rules found.
         </Alert>
       ) : (
-        hideEmptyGroups &&
+        !showEmptyGroups &&
         alertsPageData.groups.length !== shownGroups.length && (
           <Alert
             title="Hiding groups with no matching rules"
@@ -459,13 +450,7 @@ export default function AlertsPage() {
           >
             Hiding {alertsPageData.groups.length - shownGroups.length} empty
             groups due to filters or no rules.
-            <Anchor
-              ml="md"
-              fz="1em"
-              onClick={() =>
-                dispatch(updateSettings({ hideEmptyGroups: false }))
-              }
-            >
+            <Anchor ml="md" fz="1em" onClick={() => setShowEmptyGroups(true)}>
               Show empty groups
             </Anchor>
           </Alert>

web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx

@@ -25,12 +25,12 @@ import {
   humanizeDuration,
   now,
 } from "../../lib/formatTime";
+import { useLocalStorage } from "@mantine/hooks";
 import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import {
   setCollapsedPools,
   setShowLimitAlert,
 } from "../../state/targetsPageSlice";
-import { useSettings, updateSettings } from "../../state/settingsSlice";
 import EndpointLink from "../../components/EndpointLink";
 import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
 
@@ -164,8 +164,11 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
     },
   });
 
-  const { showEmptyPools } = useSettings();
   const dispatch = useAppDispatch();
+  const [showEmptyPools, setShowEmptyPools] = useLocalStorage<boolean>({
+    key: "targets-page-show-empty-pools",
+    defaultValue: true,
+  });
 
   const { collapsedPools, showLimitAlert } = useAppSelector(
     (state) => state.targetsPage
@@ -204,11 +207,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
           >
             Hiding {allPoolNames.length - shownPoolNames.length} empty pools due
             to filters or no targets.
-            <Anchor
-              ml="md"
-              fz="1em"
-              onClick={() => dispatch(updateSettings({ showEmptyPools: true }))}
-            >
+            <Anchor ml="md" fz="1em" onClick={() => setShowEmptyPools(true)}>
               Show empty pools
             </Anchor>
           </Alert>
@@ -282,9 +281,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                     <Anchor
                       ml="md"
                       fz="1em"
-                      onClick={() =>
-                        dispatch(updateSettings({ showEmptyPools: false }))
-                      }
+                      onClick={() => setShowEmptyPools(false)}
                     >
                       Hide empty pools
                     </Anchor>
@@ -296,9 +293,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                     <Anchor
                       ml="md"
                       fz="1em"
-                      onClick={() =>
-                        dispatch(updateSettings({ showEmptyPools: false }))
-                      }
+                      onClick={() => setShowEmptyPools(false)}
                     >
                       Hide empty pools
                     </Anchor>

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

@@ -62,10 +62,8 @@ startAppListening({
         case "enableAutocomplete":
         case "enableSyntaxHighlighting":
         case "enableLinter":
-        case "hideEmptyGroups":
         case "showAnnotations":
         case "ruleGroupsPerPage":
-        case "showEmptyPools":
           return persistToLocalStorage(`settings.${key}`, value);
       }
     });

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

@@ -13,11 +13,9 @@ interface Settings {
   enableAutocomplete: boolean;
   enableSyntaxHighlighting: boolean;
   enableLinter: boolean;
-  hideEmptyGroups: boolean;
   showAnnotations: boolean;
   ruleGroupsPerPage: number;
   alertGroupsPerPage: number;
-  showEmptyPools: boolean;
 }
 
 // Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
@@ -32,11 +30,9 @@ export const localStorageKeyEnableAutocomplete = "settings.enableAutocomplete";
 export const localStorageKeyEnableSyntaxHighlighting =
   "settings.enableSyntaxHighlighting";
 export const localStorageKeyEnableLinter = "settings.enableLinter";
-export const localStorageKeyHideEmptyGroups = "settings.hideEmptyGroups";
 export const localStorageKeyShowAnnotations = "settings.showAnnotations";
 export const localStorageKeyRuleGroupsPerPage = "settings.ruleGroupsPerPage";
 export const localStorageKeyAlertGroupsPerPage = "settings.alertGroupsPerPage";
-export const localStorageKeyShowEmptyPools = "settings.showEmptyPools";
 
 // This dynamically/generically determines the pathPrefix by stripping the first known
 // endpoint suffix from the window location path. It works out of the box for both direct
@@ -99,10 +95,6 @@ export const initialState: Settings = {
     localStorageKeyEnableLinter,
     true
   ),
-  hideEmptyGroups: initializeFromLocalStorage<boolean>(
-    localStorageKeyHideEmptyGroups,
-    false
-  ),
   showAnnotations: initializeFromLocalStorage<boolean>(
     localStorageKeyShowAnnotations,
     true
@@ -115,10 +107,6 @@ export const initialState: Settings = {
     localStorageKeyAlertGroupsPerPage,
     10
   ),
-  showEmptyPools: initializeFromLocalStorage<boolean>(
-    localStorageKeyShowEmptyPools,
-    true
-  ),
 };
 
 export const settingsSlice = createSlice({