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>

web/ui/mantine-ui/src/components/NotificationsIcon.tsx

@@ -1,16 +1,29 @@
-import { ActionIcon, Indicator, Popover, Card, Text, Stack, ScrollArea, Group } from "@mantine/core";
+import {
-import { IconBell, IconAlertTriangle, IconNetworkOff } from "@tabler/icons-react";
+  ActionIcon,
-import { useNotifications } from '../state/useNotifications';
+  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 (
+  return notifications.length === 0 && !isConnectionError ? null : (
-    (notifications.length === 0 && !isConnectionError) ? null : (
     <Indicator
       color={"red"}
       size={16}
@@ -18,44 +31,75 @@ const NotificationsIcon = () => {
     >
       <Popover position="bottom-end" shadow="md" withArrow>
         <Popover.Target>
-            <ActionIcon color="gray" title="Notifications" aria-label="Notifications" size={32}>
+          <ActionIcon
-              <IconBell  style={actionIconStyle}/>
+            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>
+            <Text fw={700} size="xs" c="dimmed" ta="center">
+              Notifications
+            </Text>
             <ScrollArea.Autosize mah={200}>
-                { isConnectionError ? (
+              {isConnectionError ? (
                 <Card p="xs" color="red">
                   <Group wrap="nowrap">
-                      <IconNetworkOff color="red" size={20} />
+                    <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="sm" fw={500}>
-                        <Text size="xs" color="dimmed">Please refresh the page or check your connection.</Text>
+                        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" color="dimmed">No notifications</Text>
+                <Text ta="center" c="dimmed">
-                ) : (notifications.map((notification, index) => (
+                  No notifications
+                </Text>
+              ) : (
+                notifications.map((notification, index) => (
                   <Card key={index} p="xs">
-                    <Group wrap="nowrap">
+                    <Group wrap="nowrap" align="flex-start">
-                      <IconAlertTriangle color="red" size={20} />
+                      <IconAlertTriangle
-                      <Stack style={{ maxWidth: 250 }} gap={0}>
+                        color="red"
-                        <Text size="sm" fw={500}>{notification.text}</Text>
+                        style={{
-                        <Text size="xs" color="dimmed">{formatTimestamp(new Date(notification.date).valueOf() / 1000, useLocalTime)}</Text>
+                          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>
-    )
   );
 };
 

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,10 +57,8 @@ const ReadinessLoader: FC = () => {
   // Only call WAL replay status API if the service is starting up.
   const shouldQueryWALReplay = statusMessage === STATUS_STARTING;
 
-  const {
+  const { data: walData, isSuccess: walSuccess } =
-    data: walData,
+    useSuspenseAPIQuery<WALReplayStatus>({
-    isSuccess: walSuccess,
-  } = useSuspenseAPIQuery<WALReplayStatus>({
       path: "/status/walreplay",
       key: ["walreplay", queryKey],
       enabled: shouldQueryWALReplay, // Only enabled when service is starting up.
@@ -80,14 +78,18 @@ const ReadinessLoader: FC = () => {
   return (
     <Alert
       color="yellow"
-      title={"Prometheus " + (agentMode && "Agent "||"") + (statusMessage || STATUS_LOADING)}
+      title={
-      icon={<IconAlertTriangle/>}
+        "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>
   );

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>

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