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

Merge pull request #15096 from prometheus/notification-style-cleanups 

Style cleanups, mostly for web notifications and startup alert
pull/15098/head
Julius Volz 2 months ago committed by GitHub
parent
4fc7b881a1 3d2194f561
commit
a1c2f59bc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 121 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 136
      web/ui/mantine-ui/src/components/NotificationsIcon.tsx
  2. 34
      web/ui/mantine-ui/src/components/ReadinessWrapper.tsx
  3. 9
      web/ui/mantine-ui/src/pages/RulesPage.tsx
  4. 5
      web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx

136
web/ui/mantine-ui/src/components/NotificationsIcon.tsx
Unescape View File

@ -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>
);
};

34
web/ui/mantine-ui/src/components/ReadinessWrapper.tsx
Unescape View File

@ -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>
);

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

@ -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>

5
web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx
Unescape View File

@ -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>
) : (

Write Preview
Loading…
Cancel
Save