From a699cbefae37ee17ccf36cf5f710f643ac639a46 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 14 Mar 2024 12:21:05 +0100
Subject: [PATCH] Try making /rules timing badges clearer by adding text

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

diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index 50708405b..c3d1db152 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -1,4 +1,13 @@
-import { Alert, Badge, Card, Group, Table, Text, Tooltip } from "@mantine/core";
+import {
+  Alert,
+  Badge,
+  Card,
+  Group,
+  Stack,
+  Table,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 // import { useQuery } from "react-query";
 import { formatRelative, humanizeDuration, now } from "../lib/formatTime";
 import {
@@ -57,7 +66,7 @@ export default function RulesPage() {
                   styles={{ label: { textTransform: "none" } }}
                   leftSection={<IconRefresh size={12} />}
                 >
-                  {formatRelative(g.lastEvaluation, now())}
+                  last run {formatRelative(g.lastEvaluation, now())}
                 </Badge>
               </Tooltip>
               <Tooltip label="Duration of last group evaluation" withArrow>
@@ -67,17 +76,17 @@ export default function RulesPage() {
                   styles={{ label: { textTransform: "none" } }}
                   leftSection={<IconHourglass size={12} />}
                 >
-                  {humanizeDuration(parseFloat(g.evaluationTime) * 1000)}
+                  took {humanizeDuration(parseFloat(g.evaluationTime) * 1000)}
                 </Badge>
               </Tooltip>
               <Tooltip label="Group evaluation interval" withArrow>
                 <Badge
-                  variant="light"
+                  variant="transparent"
                   className={badgeClasses.statsBadge}
                   styles={{ label: { textTransform: "none" } }}
                   leftSection={<IconRepeat size={12} />}
                 >
-                  {humanizeDuration(parseFloat(g.interval) * 1000)}
+                  every {humanizeDuration(parseFloat(g.interval) * 1000)}{" "}
                 </Badge>
               </Tooltip>
             </Group>