diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx index 3143f0b41d..4ce42d9059 100644 --- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx +++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx @@ -23,10 +23,10 @@ import { Fragment, useEffect, useMemo } from "react"; import { StateMultiSelect } from "../components/StateMultiSelect"; import { IconInfoCircle, IconSearch } from "@tabler/icons-react"; import { LabelBadges } from "../components/LabelBadges"; +import { useLocalStorage } from "@mantine/hooks"; import { useSettings } from "../state/settingsSlice"; import { ArrayParam, - BooleanParam, NumberParam, StringParam, useQueryParam, @@ -162,10 +162,10 @@ export default function AlertsPage() { withDefault(StringParam, "") ); const [debouncedSearch] = useDebouncedValue(searchFilter.trim(), 250); - const [showEmptyGroups, setShowEmptyGroups] = useQueryParam( - "showEmptyGroups", - withDefault(BooleanParam, true) - ); + const [showEmptyGroups, setShowEmptyGroups] = useLocalStorage({ + key: "alertsPage.showEmptyGroups", + defaultValue: true, + }); const { alertGroupsPerPage } = useSettings(); const [activePage, setActivePage] = useQueryParam( diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx index be91b149bb..1e29c568e1 100644 --- a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx +++ b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx @@ -25,6 +25,7 @@ import { humanizeDuration, now, } from "../../lib/formatTime"; +import { useLocalStorage } from "@mantine/hooks"; import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { setCollapsedPools, @@ -38,7 +39,6 @@ import panelClasses from "../../Panel.module.css"; import TargetLabels from "./TargetLabels"; import { useDebouncedValue } from "@mantine/hooks"; import { targetPoolDisplayLimit } from "./TargetsPage"; -import { BooleanParam, useQueryParam, withDefault } from "use-query-params"; import { badgeIconStyle } from "../../styles"; type ScrapePool = { @@ -165,10 +165,10 @@ const ScrapePoolList: FC = ({ }); const dispatch = useAppDispatch(); - const [showEmptyPools, setShowEmptyPools] = useQueryParam( - "showEmptyPools", - withDefault(BooleanParam, true) - ); + const [showEmptyPools, setShowEmptyPools] = useLocalStorage({ + key: "targetsPage.showEmptyPools", + defaultValue: true, + }); const { collapsedPools, showLimitAlert } = useAppSelector( (state) => state.targetsPage