mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2026-05-05 12:26:14 +02:00
Code Issues Projects Releases Wiki Activity

Tighter spacing for /alerts and /rules pages (#16359)

Browse Source 
As discussed in https://github.com/prometheus/prometheus/issues/15717, this
should help show more information on one screen, to be more similar to the
old UI in this regard.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2025-03-31 19:19:03 +02:00 committed by GitHub
parent a721daf981
commit ad3e200e9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import {
TextInput,
Anchor,
Pagination,
rem,
} from "@mantine/core";
import { useSuspenseAPIQuery } from "../api/api";
import { AlertingRule, AlertingRulesResult } from "../api/responseTypes/rules";
@ -222,7 +223,7 @@ export default function AlertsPage() {
p="md"
key={i} // TODO: Find a stable and definitely unique key.
>
<Group mb="md" mt="xs" ml="xs" justify="space-between">
<Group mb="sm" justify="space-between">
<Group align="baseline">
<Text fz="xl" fw={600} c="var(--mantine-primary-color-filled)">
{g.name}
@ -280,6 +281,7 @@ export default function AlertsPage() {
{items.map((r, j) => {
return (
<Accordion.Item
mt={rem(5)}
styles={{
item: {
// TODO: This transparency hack is an OK workaround to make the collapsed items
@ -299,7 +301,9 @@ export default function AlertsPage() {
: panelClasses.panelHealthOk
}
>
<Accordion.Control>
<Accordion.Control
styles={{ label: { paddingBlock: rem(10) } }}
>
<Group wrap="nowrap" justify="space-between" mr="lg">
<Text>{r.rule.name}</Text>
<Group gap="xs">

8
web/ui/mantine-ui/src/pages/RulesPage.tsx
View File

@ -91,10 +91,9 @@ export default function RulesPage() {
shadow="xs"
withBorder
p="md"
mb="md"
key={i} // TODO: Find a stable and definitely unique key.
>
<Group mb="md" mt="xs" ml="xs" justify="space-between">
<Group mb="sm" justify="space-between">
<Group align="baseline">
<Text fz="xl" fw={600} c="var(--mantine-primary-color-filled)">
{g.name}
@ -147,6 +146,7 @@ export default function RulesPage() {
<Accordion multiple variant="separated">
{items.map((r, j) => (
<Accordion.Item
mt={rem(5)}
styles={{
item: {
// TODO: This transparency hack is an OK workaround to make the collapsed items
@ -167,7 +167,9 @@ export default function RulesPage() {
: "5px solid var(--mantine-color-green-4)",
}}
>
<Accordion.Control>
<Accordion.Control
styles={{ label: { paddingBlock: rem(10) } }}
>
<Group justify="space-between" mr="lg">
<Group gap="xs" wrap="nowrap">
{r.type === "alerting" ? (