From adf6c105a748239ba7b7ccde273ce9ab159b33bc Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 9 Sep 2024 11:46:42 +0200
Subject: [PATCH] Show alert annotations on /rules page

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../src/components/RuleDefinition.tsx         | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/ui/mantine-ui/src/components/RuleDefinition.tsx b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
index 0865f58ad..4e22dd934 100644
--- a/web/ui/mantine-ui/src/components/RuleDefinition.tsx
+++ b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
@@ -94,20 +94,20 @@ const RuleDefinition: FC<{ rule: Rule }> = ({ rule }) => {
           <LabelBadges labels={rule.labels} />
         </Box>
       )}
-      {/* {Object.keys(r.annotations).length > 0 && (
-    <Group mt="md" gap="xs">
-      {Object.entries(r.annotations).map(([k, v]) => (
-        <Badge
-          variant="light"
-          color="orange.9"
-          styles={{ label: { textTransform: "none" } }}
-          key={k}
-        >
-          {k}: {v}
-        </Badge>
-      ))}
-    </Group>
-  )} */}
+      {rule.type === "alerting" && Object.keys(rule.annotations).length > 0 && (
+        <Table mt="lg" fz="sm">
+          <Table.Tbody>
+            {Object.entries(rule.annotations).map(([k, v]) => (
+              <Table.Tr key={k}>
+                <Table.Th c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4))">
+                  {k}
+                </Table.Th>
+                <Table.Td>{v}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      )}
     </>
   );
 };