github
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make "show empty pools" setting persistent 

Just like for showing empty groups on the Alerts page, also make the
setting for showing empty pools on the Targets page persistent.

Signed-off-by: leonnicolas <leonloechner@gmx.de>
pull/15807/head
leonnicolas 2025-01-13 09:37:44 +01:00
parent 6ccd9add1e
commit b3531a12f3
No known key found for this signature in database
GPG Key ID: 088D0743E2B65C07
5 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/ui/mantine-ui/src/components/SettingsMenu.tsx
View File

@ -5,7 +5,7 @@ import {
Checkbox,
Stack,
Group,
NumberInput
NumberInput,
} from "@mantine/core";
import { IconSettings } from "@tabler/icons-react";
import { FC } from "react";
@ -23,7 +23,8 @@ const SettingsMenu: FC = () => {
showAnnotations,
hideEmptyGroups,
ruleGroupsPerPage,
alertGroupsPerPage
alertGroupsPerPage,
showEmptyPools,
} = useSettings();
const dispatch = useAppDispatch();
@ -49,7 +50,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
useLocalTime: event.currentTarget.checked
useLocalTime: event.currentTarget.checked,
})
)
}
@ -64,7 +65,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
enableQueryHistory: event.currentTarget.checked
enableQueryHistory: event.currentTarget.checked,
})
)
}
@ -75,7 +76,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
enableAutocomplete: event.currentTarget.checked
enableAutocomplete: event.currentTarget.checked,
})
)
}
@ -86,7 +87,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
enableSyntaxHighlighting: event.currentTarget.checked
enableSyntaxHighlighting: event.currentTarget.checked,
})
)
}
@ -97,13 +98,26 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
enableLinter: event.currentTarget.checked
enableLinter: event.currentTarget.checked,
})
)
}
/>
</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>
@ -115,7 +129,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
showAnnotations: event.currentTarget.checked
showAnnotations: event.currentTarget.checked,
})
)
}
@ -126,7 +140,7 @@ const SettingsMenu: FC = () => {
onChange={(event) =>
dispatch(
updateSettings({
hideEmptyGroups: event.currentTarget.checked
hideEmptyGroups: event.currentTarget.checked,
})
)
}
@ -146,7 +160,7 @@ const SettingsMenu: FC = () => {
dispatch(
updateSettings({
alertGroupsPerPage: value
alertGroupsPerPage: value,
})
);
}}
@ -165,7 +179,7 @@ const SettingsMenu: FC = () => {
dispatch(
updateSettings({
ruleGroupsPerPage: value
ruleGroupsPerPage: value,
})
);
}}

30
web/ui/mantine-ui/src/pages/AlertsPage.tsx
View File

@ -11,7 +11,7 @@ import {
Alert,
TextInput,
Anchor,
Pagination
Pagination,
} from "@mantine/core";
import { useSuspenseAPIQuery } from "../api/api";
import { AlertingRule, AlertingRulesResult } from "../api/responseTypes/rules";
@ -30,7 +30,7 @@ import {
NumberParam,
StringParam,
useQueryParam,
withDefault
withDefault,
} from "use-query-params";
import { useDebouncedValue } from "@mantine/hooks";
import { KVSearch } from "@nexucis/kvsearch";
@ -67,7 +67,7 @@ type AlertsPageData = {
const kvSearch = new KVSearch<AlertingRule>({
shouldSort: true,
indexedKeys: ["name", "labels", ["labels", /.*/]]
indexedKeys: ["name", "labels", ["labels", /.*/]],
});
const buildAlertsPageData = (
@ -79,9 +79,9 @@ const buildAlertsPageData = (
globalCounts: {
inactive: 0,
pending: 0,
firing: 0
firing: 0,
},
groups: []
groups: [],
};
for (const group of data.groups) {
@ -89,7 +89,7 @@ const buildAlertsPageData = (
total: 0,
inactive: 0,
pending: 0,
firing: 0
firing: 0,
};
for (const r of group.rules) {
@ -126,9 +126,9 @@ const buildAlertsPageData = (
rule: r,
counts: {
firing: r.alerts.filter((a) => a.state === "firing").length,
pending: r.alerts.filter((a) => a.state === "pending").length
}
}))
pending: r.alerts.filter((a) => a.state === "pending").length,
},
})),
});
}
@ -146,8 +146,8 @@ export default function AlertsPage() {
const { data } = useSuspenseAPIQuery<AlertingRulesResult>({
path: `/rules`,
params: {
type: "alert"
}
type: "alert",
},
});
const { hideEmptyGroups, showAnnotations } = useSettings();
@ -255,7 +255,7 @@ export default function AlertsPage() {
onClick={() => {
dispatch(
updateSettings({
hideEmptyGroups: true
hideEmptyGroups: true,
})
);
}}
@ -273,7 +273,7 @@ export default function AlertsPage() {
onClick={() => {
dispatch(
updateSettings({
hideEmptyGroups: true
hideEmptyGroups: true,
})
);
}}
@ -295,8 +295,8 @@ export default function AlertsPage() {
// have a different background color than their surrounding group card in dark mode,
// but it would be better to use CSS to override the light/dark colors for
// collapsed/expanded accordion items.
backgroundColor: "#c0c0c015"
}
backgroundColor: "#c0c0c015",
},
}}
key={j}
value={j.toString()}

21
web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
View File

@ -30,6 +30,7 @@ import {
setCollapsedPools,
setShowLimitAlert,
} from "../../state/targetsPageSlice";
import { useSettings, updateSettings } from "../../state/settingsSlice";
import EndpointLink from "../../components/EndpointLink";
import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
@ -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 = {
@ -164,11 +164,8 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
},
});
const { showEmptyPools } = useSettings();
const dispatch = useAppDispatch();
const [showEmptyPools, setShowEmptyPools] = useQueryParam(
"showEmptyPools",
withDefault(BooleanParam, true)
);
const { collapsedPools, showLimitAlert } = useAppSelector(
(state) => state.targetsPage
@ -207,7 +204,11 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
>
Hiding {allPoolNames.length - shownPoolNames.length} empty pools due
to filters or no targets.
<Anchor ml="md" fz="1em" onClick={() => setShowEmptyPools(true)}>
<Anchor
ml="md"
fz="1em"
onClick={() => dispatch(updateSettings({ showEmptyPools: true }))}
>
Show empty pools
</Anchor>
</Alert>
@ -281,7 +282,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
<Anchor
ml="md"
fz="1em"
onClick={() => setShowEmptyPools(false)}
onClick={() =>
dispatch(updateSettings({ showEmptyPools: false }))
}
>
Hide empty pools
</Anchor>
@ -293,7 +296,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
<Anchor
ml="md"
fz="1em"
onClick={() => setShowEmptyPools(false)}
onClick={() =>
dispatch(updateSettings({ showEmptyPools: false }))
}
>
Hide empty pools
</Anchor>

5
web/ui/mantine-ui/src/state/localStorageMiddleware.ts
View File

@ -37,7 +37,7 @@ startAppListening({
effect: ({ payload }) => {
persistToLocalStorage(
localStorageKeyServiceDiscoveryPageCollapsedPools,
payload,
payload
);
},
});
@ -47,7 +47,7 @@ startAppListening({
effect: (_, { getState }) => {
persistToLocalStorage(
localStorageKeyQueryHistory,
getState().queryPage.queryHistory,
getState().queryPage.queryHistory
);
},
});
@ -65,6 +65,7 @@ startAppListening({
case "hideEmptyGroups":
case "showAnnotations":
case "ruleGroupsPerPage":
case "showEmptyPools":
return persistToLocalStorage(`settings.${key}`, value);
}
});

14
web/ui/mantine-ui/src/state/settingsSlice.ts
View File

@ -17,6 +17,7 @@ interface Settings {
showAnnotations: boolean;
ruleGroupsPerPage: number;
alertGroupsPerPage: number;
showEmptyPools: boolean;
}
// Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
@ -35,6 +36,7 @@ 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
@ -55,7 +57,7 @@ const getPathPrefix = (path: string) => {
"/flags",
"/config",
"/alertmanager-discovery",
"/agent"
"/agent",
];
const pagePath = pagePaths.find((p) => path.endsWith(p));
@ -112,7 +114,11 @@ export const initialState: Settings = {
alertGroupsPerPage: initializeFromLocalStorage<number>(
localStorageKeyAlertGroupsPerPage,
10
)
),
showEmptyPools: initializeFromLocalStorage<boolean>(
localStorageKeyShowEmptyPools,
true
),
};
export const settingsSlice = createSlice({
@ -121,8 +127,8 @@ export const settingsSlice = createSlice({
reducers: {
updateSettings: (state, { payload }: PayloadAction<Partial<Settings>>) => {
Object.assign(state, payload);
}
}
},
},
});
export const { updateSettings } = settingsSlice.actions;