From af6287b232c884615e1078bc09d2ae89800ff197 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 5 Aug 2024 19:07:20 +0200
Subject: [PATCH] Add more tooltips to the /rules page, move health indicator
 to the right

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/pages/RulesPage.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index a96f1a831..a9351ead5 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -22,6 +22,7 @@ import {
   IconInfoCircle,
   IconRefresh,
   IconRepeat,
+  IconTimeline,
 } from "@tabler/icons-react";
 import { useSuspenseAPIQuery } from "../api/api";
 import { RulesResult } from "../api/responseTypes/rules";
@@ -133,17 +134,17 @@ export default function RulesPage() {
                   <Group wrap="nowrap" justify="space-between" mr="lg">
                     <Group gap="xs" wrap="nowrap">
                       {r.type === "alerting" ? (
-                        <IconBell size={15} />
+                        <Tooltip label="Alerting rule" withArrow>
+                          <IconBell size={15} />
+                        </Tooltip>
                       ) : (
-                        <IconDatabaseImport size={15} />
+                        <Tooltip label="Recording rule" withArrow>
+                          <IconTimeline size={15} />
+                        </Tooltip>
                       )}
                       <Text>{r.name}</Text>
                     </Group>
-                    <Group mt="md" gap="xs">
-                      <Badge className={healthBadgeClass(r.health)}>
-                        {r.health}
-                      </Badge>
-
+                    <Group mt="md" gap="xs" wrap="nowrap">
                       <Group gap="xs" wrap="wrap">
                         <Tooltip label="Last rule evaluation" withArrow>
                           <Badge
@@ -172,6 +173,9 @@ export default function RulesPage() {
                           </Badge>
                         </Tooltip>
                       </Group>
+                      <Badge className={healthBadgeClass(r.health)}>
+                        {r.health}
+                      </Badge>
                     </Group>
                   </Group>
                 </Accordion.Control>