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 <[email protected]>
Maniktherana · Oct 4, 2024 · 3d2194f · 3d2194f
1 parent 023146e
commit 3d2194f
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 63 deletions.
diff --git 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 : (
-      <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>
   );
 };
 

diff --git 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<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,24 +78,32 @@ 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>
           <Progress
             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>
   );

diff --git 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() {
                     <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>

diff --git 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<LabelsExplorerProps> = ({
                             title="Cancel"
                             style={{ flexShrink: 0 }}
                           >
-                            <IconX size={18} />
+                            <IconX
+                              style={{ width: rem(18), height: rem(18) }}
+                            />
                           </Button>
                         </Group>
                       ) : (