mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
3d2194f561
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>
107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
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 { 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}
|
|
>
|
|
<IconMessageExclamation style={actionIconStyle} />
|
|
</ActionIcon>
|
|
</Popover.Target>
|
|
|
|
<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" 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>
|
|
);
|
|
};
|
|
|
|
export default NotificationsIcon;
|