mirror of
https://github.com/prometheus/prometheus.git
synced 2024-12-25 05:34:05 -08:00
Style cleanups, mostly for web notifications and startup alert
Some of the changes are a bit unreadable because the previous files were not saved with the project's linter / auto-formatter settings applied. But it's basically: * For icons that are not Mantine-native components, use the rem() function for computing their size, so they scale correctly with the root font size. See https://mantine.dev/styles/rem/. * Try a different icon for the notifications tray, since the bell icon was already used for Prometheus alerts. Other candidates from https://tabler.io/icons would be IconExclamationCircle or IconDeviceDesktopExclamation or IconMessageCircleExclamation. * The server startup alert looked a bit cramped, introduced a Stack to add spacing between the text and the progress bar. * Added a bit of spacing between notification text and date. Things looked cramped. To make things look ok with that, I also top-aligned the notification text and icon. Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
parent
023146e918
commit
3d2194f561
|
@ -1,61 +1,105 @@
|
|||
import { ActionIcon, Indicator, Popover, Card, Text, Stack, ScrollArea, Group } from "@mantine/core";
|
||||
import { IconBell, IconAlertTriangle, IconNetworkOff } from "@tabler/icons-react";
|
||||
import { useNotifications } from '../state/useNotifications';
|
||||
import {
|
||||
ActionIcon,
|
||||
Indicator,
|
||||
Popover,
|
||||
Card,
|
||||
Text,
|
||||
Stack,
|
||||
ScrollArea,
|
||||
Group,
|
||||
rem,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconNetworkOff,
|
||||
IconMessageExclamation,
|
||||
} from "@tabler/icons-react";
|
||||
import { useNotifications } from "../state/useNotifications";
|
||||
import { actionIconStyle } from "../styles";
|
||||
import { useSettings } from '../state/settingsSlice';
|
||||
import { useSettings } from "../state/settingsSlice";
|
||||
import { formatTimestamp } from "../lib/formatTime";
|
||||
|
||||
const NotificationsIcon = () => {
|
||||
const { notifications, isConnectionError } = useNotifications();
|
||||
const { useLocalTime } = useSettings();
|
||||
|
||||
return (
|
||||
(notifications.length === 0 && !isConnectionError) ? null : (
|
||||
<Indicator
|
||||
color={"red"}
|
||||
size={16}
|
||||
label={isConnectionError ? "!" : notifications.length}
|
||||
>
|
||||
<Popover position="bottom-end" shadow="md" withArrow>
|
||||
<Popover.Target>
|
||||
<ActionIcon color="gray" title="Notifications" aria-label="Notifications" size={32}>
|
||||
<IconBell style={actionIconStyle}/>
|
||||
</ActionIcon>
|
||||
</Popover.Target>
|
||||
return notifications.length === 0 && !isConnectionError ? null : (
|
||||
<Indicator
|
||||
color={"red"}
|
||||
size={16}
|
||||
label={isConnectionError ? "!" : notifications.length}
|
||||
>
|
||||
<Popover position="bottom-end" shadow="md" withArrow>
|
||||
<Popover.Target>
|
||||
<ActionIcon
|
||||
color="gray"
|
||||
title="Notifications"
|
||||
aria-label="Notifications"
|
||||
size={32}
|
||||
>
|
||||
<IconMessageExclamation style={actionIconStyle} />
|
||||
</ActionIcon>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="xs">
|
||||
<Text fw={700} size="xs" color="dimmed" ta="center">Notifications</Text>
|
||||
<ScrollArea.Autosize mah={200}>
|
||||
{ isConnectionError ? (
|
||||
<Card p="xs" color="red">
|
||||
<Group wrap="nowrap">
|
||||
<IconNetworkOff color="red" size={20} />
|
||||
<Stack gap="0">
|
||||
<Text size="sm" fw={500}>Real-time notifications interrupted.</Text>
|
||||
<Text size="xs" color="dimmed">Please refresh the page or check your connection.</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
) : notifications.length === 0 ? (
|
||||
<Text ta="center" color="dimmed">No notifications</Text>
|
||||
) : (notifications.map((notification, index) => (
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="xs">
|
||||
<Text fw={700} size="xs" c="dimmed" ta="center">
|
||||
Notifications
|
||||
</Text>
|
||||
<ScrollArea.Autosize mah={200}>
|
||||
{isConnectionError ? (
|
||||
<Card p="xs" color="red">
|
||||
<Group wrap="nowrap">
|
||||
<IconNetworkOff
|
||||
color="red"
|
||||
style={{ width: rem(20), height: rem(20) }}
|
||||
/>
|
||||
<Stack gap="0">
|
||||
<Text size="sm" fw={500}>
|
||||
Real-time notifications interrupted.
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
Please refresh the page or check your connection.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
) : notifications.length === 0 ? (
|
||||
<Text ta="center" c="dimmed">
|
||||
No notifications
|
||||
</Text>
|
||||
) : (
|
||||
notifications.map((notification, index) => (
|
||||
<Card key={index} p="xs">
|
||||
<Group wrap="nowrap">
|
||||
<IconAlertTriangle color="red" size={20} />
|
||||
<Stack style={{ maxWidth: 250 }} gap={0}>
|
||||
<Text size="sm" fw={500}>{notification.text}</Text>
|
||||
<Text size="xs" color="dimmed">{formatTimestamp(new Date(notification.date).valueOf() / 1000, useLocalTime)}</Text>
|
||||
<Group wrap="nowrap" align="flex-start">
|
||||
<IconAlertTriangle
|
||||
color="red"
|
||||
style={{
|
||||
width: rem(20),
|
||||
height: rem(20),
|
||||
marginTop: rem(3),
|
||||
}}
|
||||
/>
|
||||
<Stack maw={250} gap={5}>
|
||||
<Text size="sm" fw={500}>
|
||||
{notification.text}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{formatTimestamp(
|
||||
new Date(notification.date).valueOf() / 1000,
|
||||
useLocalTime
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
)))}
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Indicator>
|
||||
)
|
||||
))
|
||||
)}
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Indicator>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import { useAppDispatch } from "../state/hooks";
|
|||
import { updateSettings, useSettings } from "../state/settingsSlice";
|
||||
import { useSuspenseAPIQuery } from "../api/api";
|
||||
import { WALReplayStatus } from "../api/responseTypes/walreplay";
|
||||
import { Progress, Alert } from "@mantine/core";
|
||||
import { Progress, Alert, Stack } from "@mantine/core";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
|
||||
const STATUS_STARTING = "is starting up...";
|
||||
|
@ -57,14 +57,12 @@ const ReadinessLoader: FC = () => {
|
|||
// Only call WAL replay status API if the service is starting up.
|
||||
const shouldQueryWALReplay = statusMessage === STATUS_STARTING;
|
||||
|
||||
const {
|
||||
data: walData,
|
||||
isSuccess: walSuccess,
|
||||
} = useSuspenseAPIQuery<WALReplayStatus>({
|
||||
path: "/status/walreplay",
|
||||
key: ["walreplay", queryKey],
|
||||
enabled: shouldQueryWALReplay, // Only enabled when service is starting up.
|
||||
});
|
||||
const { data: walData, isSuccess: walSuccess } =
|
||||
useSuspenseAPIQuery<WALReplayStatus>({
|
||||
path: "/status/walreplay",
|
||||
key: ["walreplay", queryKey],
|
||||
enabled: shouldQueryWALReplay, // Only enabled when service is starting up.
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (ready) {
|
||||
|
@ -80,14 +78,18 @@ const ReadinessLoader: FC = () => {
|
|||
return (
|
||||
<Alert
|
||||
color="yellow"
|
||||
title={"Prometheus " + (agentMode && "Agent "||"") + (statusMessage || STATUS_LOADING)}
|
||||
icon={<IconAlertTriangle/>}
|
||||
title={
|
||||
"Prometheus " +
|
||||
((agentMode && "Agent ") || "") +
|
||||
(statusMessage || STATUS_LOADING)
|
||||
}
|
||||
icon={<IconAlertTriangle />}
|
||||
maw={500}
|
||||
mx="auto"
|
||||
mt="lg"
|
||||
>
|
||||
{shouldQueryWALReplay && walSuccess && walData && (
|
||||
<>
|
||||
<Stack>
|
||||
<strong>
|
||||
Replaying WAL ({walData.data.current}/{walData.data.max})
|
||||
</strong>
|
||||
|
@ -95,9 +97,13 @@ const ReadinessLoader: FC = () => {
|
|||
size="xl"
|
||||
animated
|
||||
color="yellow"
|
||||
value={((walData.data.current - walData.data.min + 1) / (walData.data.max - walData.data.min + 1)) * 100}
|
||||
value={
|
||||
((walData.data.current - walData.data.min + 1) /
|
||||
(walData.data.max - walData.data.min + 1)) *
|
||||
100
|
||||
}
|
||||
/>
|
||||
</>
|
||||
</Stack>
|
||||
)}
|
||||
</Alert>
|
||||
);
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
Badge,
|
||||
Card,
|
||||
Group,
|
||||
rem,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
|
@ -135,11 +136,15 @@ export default function RulesPage() {
|
|||
<Group gap="xs" wrap="nowrap">
|
||||
{r.type === "alerting" ? (
|
||||
<Tooltip label="Alerting rule" withArrow>
|
||||
<IconBell size={15} />
|
||||
<IconBell
|
||||
style={{ width: rem(15), height: rem(15) }}
|
||||
/>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip label="Recording rule" withArrow>
|
||||
<IconTimeline size={15} />
|
||||
<IconTimeline
|
||||
style={{ width: rem(15), height: rem(15) }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Text>{r.name}</Text>
|
||||
|
|
|
@ -21,6 +21,7 @@ import {
|
|||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
rem,
|
||||
} from "@mantine/core";
|
||||
import { escapeString } from "../../../lib/escapeString";
|
||||
import serializeNode from "../../../promql/serialize";
|
||||
|
@ -326,7 +327,9 @@ const LabelsExplorer: FC<LabelsExplorerProps> = ({
|
|||
title="Cancel"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<IconX size={18} />
|
||||
<IconX
|
||||
style={{ width: rem(18), height: rem(18) }}
|
||||
/>
|
||||
</Button>
|
||||
</Group>
|
||||
) : (
|
||||
|
|
Loading…
Reference in a new issue