From 3d2194f56179300c3aa6653d1d72b225f85f7e9f Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Fri, 4 Oct 2024 13:54:03 +0200 Subject: [PATCH] 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 --- .../src/components/NotificationsIcon.tsx | 136 ++++++++++++------ .../src/components/ReadinessWrapper.tsx | 34 +++-- web/ui/mantine-ui/src/pages/RulesPage.tsx | 9 +- .../query/MetricsExplorer/LabelsExplorer.tsx | 5 +- 4 files changed, 121 insertions(+), 63 deletions(-) diff --git a/web/ui/mantine-ui/src/components/NotificationsIcon.tsx b/web/ui/mantine-ui/src/components/NotificationsIcon.tsx index 5ab28b037..6d5afa190 100644 --- a/web/ui/mantine-ui/src/components/NotificationsIcon.tsx +++ b/web/ui/mantine-ui/src/components/NotificationsIcon.tsx @@ -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 : ( - - - - - - - + return notifications.length === 0 && !isConnectionError ? null : ( + + + + + + + - - - Notifications - - { isConnectionError ? ( - - - - - Real-time notifications interrupted. - Please refresh the page or check your connection. - - - - ) : notifications.length === 0 ? ( - No notifications - ) : (notifications.map((notification, index) => ( + + + + Notifications + + + {isConnectionError ? ( + + + + + + Real-time notifications interrupted. + + + Please refresh the page or check your connection. + + + + + ) : notifications.length === 0 ? ( + + No notifications + + ) : ( + notifications.map((notification, index) => ( - - - - {notification.text} - {formatTimestamp(new Date(notification.date).valueOf() / 1000, useLocalTime)} + + + + + {notification.text} + + + {formatTimestamp( + new Date(notification.date).valueOf() / 1000, + useLocalTime + )} + - )))} - - - - - - ) + )) + )} + + + + + ); }; diff --git a/web/ui/mantine-ui/src/components/ReadinessWrapper.tsx b/web/ui/mantine-ui/src/components/ReadinessWrapper.tsx index dbfcba555..2e471de5e 100644 --- a/web/ui/mantine-ui/src/components/ReadinessWrapper.tsx +++ b/web/ui/mantine-ui/src/components/ReadinessWrapper.tsx @@ -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({ - path: "/status/walreplay", - key: ["walreplay", queryKey], - enabled: shouldQueryWALReplay, // Only enabled when service is starting up. - }); + const { data: walData, isSuccess: walSuccess } = + useSuspenseAPIQuery({ + 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 ( } + title={ + "Prometheus " + + ((agentMode && "Agent ") || "") + + (statusMessage || STATUS_LOADING) + } + icon={} maw={500} mx="auto" mt="lg" > {shouldQueryWALReplay && walSuccess && walData && ( - <> + Replaying WAL ({walData.data.current}/{walData.data.max}) @@ -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 + } /> - + )} ); diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx index ce0097776..a4ed44e7c 100644 --- a/web/ui/mantine-ui/src/pages/RulesPage.tsx +++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx @@ -4,6 +4,7 @@ import { Badge, Card, Group, + rem, Stack, Text, Tooltip, @@ -135,11 +136,15 @@ export default function RulesPage() { {r.type === "alerting" ? ( - + ) : ( - + )} {r.name} diff --git a/web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx b/web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx index 782fb5cf4..d18c017b1 100644 --- a/web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx +++ b/web/ui/mantine-ui/src/pages/query/MetricsExplorer/LabelsExplorer.tsx @@ -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 = ({ title="Cancel" style={{ flexShrink: 0 }} > - + ) : (