From 2c7bc9833a0eb260b76f4f85465ebc8f09552522 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Fri, 13 Sep 2024 08:21:26 +0200
Subject: [PATCH] WIP

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/App.tsx                 |   4 +-
 .../src/components/ErrorBoundary.tsx          |   4 +-
 .../src/components/InfoPageCard.tsx           |  31 +++++
 .../src/components/InfoPageStack.tsx          |  12 ++
 .../src/components/SettingsMenu.tsx           |  19 ++-
 web/ui/mantine-ui/src/mantine-overrides.css   |  35 ++++++
 .../src/pages/AlertmanagerDiscoveryPage.tsx   |  28 ++---
 web/ui/mantine-ui/src/pages/FlagsPage.tsx     | 109 +++++++++---------
 web/ui/mantine-ui/src/pages/StatusPage.tsx    |  28 ++---
 .../mantine-ui/src/pages/TSDBStatusPage.tsx   |  41 +++----
 web/ui/mantine-ui/vite.config.ts              |  12 +-
 11 files changed, 202 insertions(+), 121 deletions(-)
 create mode 100644 web/ui/mantine-ui/src/components/InfoPageCard.tsx
 create mode 100644 web/ui/mantine-ui/src/components/InfoPageStack.tsx
 create mode 100644 web/ui/mantine-ui/src/mantine-overrides.css

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index f677dd880..14bffdc8a 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -322,9 +322,9 @@ function App() {
         color="gray"
         title="Documentation"
         aria-label="Documentation"
-        size={32}
+        size={rem(32)}
       >
-        <IconBook size={20} />
+        <IconBook style={{ width: "70%", height: "70%" }} />
       </ActionIcon>
     </>
   );
diff --git a/web/ui/mantine-ui/src/components/ErrorBoundary.tsx b/web/ui/mantine-ui/src/components/ErrorBoundary.tsx
index 3416623d3..229938929 100644
--- a/web/ui/mantine-ui/src/components/ErrorBoundary.tsx
+++ b/web/ui/mantine-ui/src/components/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Alert } from "@mantine/core";
+import { Alert, rem } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { Component, ErrorInfo, ReactNode } from "react";
 import { useLocation } from "react-router-dom";
@@ -32,7 +32,7 @@ class ErrorBoundary extends Component<Props, State> {
         <Alert
           color="red"
           title={this.props.title || "Error querying page data"}
-          icon={<IconAlertTriangle size={14} />}
+          icon={<IconAlertTriangle size={rem(14)} />}
           maw={500}
           mx="auto"
           mt="lg"
diff --git a/web/ui/mantine-ui/src/components/InfoPageCard.tsx b/web/ui/mantine-ui/src/components/InfoPageCard.tsx
new file mode 100644
index 000000000..d86aea905
--- /dev/null
+++ b/web/ui/mantine-ui/src/components/InfoPageCard.tsx
@@ -0,0 +1,31 @@
+import { Card, em, Group } from "@mantine/core";
+import { TablerIconsProps } from "@tabler/icons-react";
+import { FC, ReactNode } from "react";
+
+const InfoPageCard: FC<{
+  children: ReactNode;
+  title?: string;
+  icon?: React.ComponentType<TablerIconsProps>;
+}> = ({ children, title, icon: Icon }) => {
+  return (
+    <Card shadow="xs" withBorder p="md">
+      {title && (
+        <Group
+          wrap="nowrap"
+          align="center"
+          ml="xs"
+          mb="sm"
+          gap="xs"
+          fz="xl"
+          fw={600}
+        >
+          {Icon && <Icon style={{ width: em(17.5), height: em(17.5) }} />}
+          {title}
+        </Group>
+      )}
+      {children}
+    </Card>
+  );
+};
+
+export default InfoPageCard;
diff --git a/web/ui/mantine-ui/src/components/InfoPageStack.tsx b/web/ui/mantine-ui/src/components/InfoPageStack.tsx
new file mode 100644
index 000000000..eacc4f831
--- /dev/null
+++ b/web/ui/mantine-ui/src/components/InfoPageStack.tsx
@@ -0,0 +1,12 @@
+import { Stack } from "@mantine/core";
+import { FC, ReactNode } from "react";
+
+const InfoPageStack: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
+      {children}
+    </Stack>
+  );
+};
+
+export default InfoPageStack;
diff --git a/web/ui/mantine-ui/src/components/SettingsMenu.tsx b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
index c0631b1b4..9241e707a 100644
--- a/web/ui/mantine-ui/src/components/SettingsMenu.tsx
+++ b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
@@ -1,4 +1,11 @@
-import { Popover, ActionIcon, Fieldset, Checkbox, Stack } from "@mantine/core";
+import {
+  Popover,
+  ActionIcon,
+  Fieldset,
+  Checkbox,
+  Stack,
+  Slider,
+} from "@mantine/core";
 import { IconSettings } from "@tabler/icons-react";
 import { FC } from "react";
 import { useAppDispatch } from "../state/hooks";
@@ -24,7 +31,7 @@ const SettingsMenu: FC = () => {
           aria-label="Settings"
           size={32}
         >
-          <IconSettings size={20} />
+          <IconSettings style={{ width: "70%", height: "70%" }} />
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown>
@@ -39,6 +46,14 @@ const SettingsMenu: FC = () => {
                 )
               }
             />
+            <Slider
+              defaultValue={100}
+              min={70}
+              max={130}
+              onChange={(value) => {
+                document.documentElement.style.fontSize = `${value}%`;
+              }}
+            />
           </Fieldset>
 
           <Fieldset p="md" legend="Query page settings">
diff --git a/web/ui/mantine-ui/src/mantine-overrides.css b/web/ui/mantine-ui/src/mantine-overrides.css
new file mode 100644
index 000000000..4f64aeb6c
--- /dev/null
+++ b/web/ui/mantine-ui/src/mantine-overrides.css
@@ -0,0 +1,35 @@
+.promql-code {
+  font-family: "DejaVu Sans Mono", monospace;
+}
+
+.promql-keyword {
+  color: light-dark(#008080, #14bfad);
+}
+
+.promql-metric-name {
+  /* Should already inherit the right color from the theme. */
+}
+
+.promql-label-name {
+  color: light-dark(#800000, #ff8585);
+}
+
+.promql-string {
+  color: light-dark(#a31515, #fca5a5);
+}
+
+.promql-paren,
+.promql-brace {
+}
+
+.promql-ellipsis {
+  color: light-dark(rgb(170, 170, 170), rgb(170, 170, 170));
+}
+
+.promql-duration {
+  color: light-dark(#09885a, #22c55e);
+}
+
+.promql-number {
+  color: light-dark(#09885a, #22c55e);
+}
diff --git a/web/ui/mantine-ui/src/pages/AlertmanagerDiscoveryPage.tsx b/web/ui/mantine-ui/src/pages/AlertmanagerDiscoveryPage.tsx
index 2ea248117..d1ffb2f5f 100644
--- a/web/ui/mantine-ui/src/pages/AlertmanagerDiscoveryPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertmanagerDiscoveryPage.tsx
@@ -1,9 +1,11 @@
-import { Alert, Card, Group, Stack, Table, Text } from "@mantine/core";
+import { Alert, Table } from "@mantine/core";
 import { IconBell, IconBellOff, IconInfoCircle } from "@tabler/icons-react";
 
 import { useSuspenseAPIQuery } from "../api/api";
 import { AlertmanagersResult } from "../api/responseTypes/alertmanagers";
 import EndpointLink from "../components/EndpointLink";
+import InfoPageCard from "../components/InfoPageCard";
+import InfoPageStack from "../components/InfoPageStack";
 
 export const targetPoolDisplayLimit = 20;
 
@@ -18,14 +20,8 @@ export default function AlertmanagerDiscoveryPage() {
   });
 
   return (
-    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
-      <Card shadow="xs" withBorder p="md">
-        <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
-          <IconBell size={22} />
-          <Text fz="xl" fw={600}>
-            Active Alertmanagers
-          </Text>
-        </Group>
+    <InfoPageStack>
+      <InfoPageCard title="Active Alertmanagers" icon={IconBell}>
         {activeAlertmanagers.length === 0 ? (
           <Alert title="No active alertmanagers" icon={<IconInfoCircle />}>
             No active alertmanagers found.
@@ -46,14 +42,8 @@ export default function AlertmanagerDiscoveryPage() {
             </Table.Tbody>
           </Table>
         )}
-      </Card>
-      <Card shadow="xs" withBorder p="md">
-        <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
-          <IconBellOff size={22} />
-          <Text fz="xl" fw={600}>
-            Dropped Alertmanagers
-          </Text>
-        </Group>
+      </InfoPageCard>
+      <InfoPageCard title="Dropped Alertmanagers" icon={IconBellOff}>
         {droppedAlertmanagers.length === 0 ? (
           <Alert title="No dropped alertmanagers" icon={<IconInfoCircle />}>
             No dropped alertmanagers found.
@@ -74,7 +64,7 @@ export default function AlertmanagerDiscoveryPage() {
             </Table.Tbody>
           </Table>
         )}
-      </Card>
-    </Stack>
+      </InfoPageCard>
+    </InfoPageStack>
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/FlagsPage.tsx b/web/ui/mantine-ui/src/pages/FlagsPage.tsx
index d90328f96..f91c726bf 100644
--- a/web/ui/mantine-ui/src/pages/FlagsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/FlagsPage.tsx
@@ -8,7 +8,6 @@ import {
   TextInput,
   rem,
   keys,
-  Card,
 } from "@mantine/core";
 import {
   IconSelector,
@@ -18,6 +17,8 @@ import {
 } from "@tabler/icons-react";
 import classes from "./FlagsPage.module.css";
 import { useSuspenseAPIQuery } from "../api/api";
+import InfoPageStack from "../components/InfoPageStack";
+import InfoPageCard from "../components/InfoPageCard";
 
 interface RowData {
   flag: string;
@@ -124,59 +125,61 @@ export default function FlagsPage() {
   ));
 
   return (
-    <Card shadow="xs" maw={1000} mx="auto" mt="xs" withBorder>
-      <TextInput
-        placeholder="Filter by flag name or value"
-        mb="md"
-        autoFocus
-        leftSection={
-          <IconSearch
-            style={{ width: rem(16), height: rem(16) }}
-            stroke={1.5}
-          />
-        }
-        value={search}
-        onChange={handleSearchChange}
-      />
-      <Table
-        horizontalSpacing="md"
-        verticalSpacing="xs"
-        miw={700}
-        layout="fixed"
-      >
-        <Table.Tbody>
-          <Table.Tr>
-            <Th
-              sorted={sortBy === "flag"}
-              reversed={reverseSortDirection}
-              onSort={() => setSorting("flag")}
-            >
-              Flag
-            </Th>
-
-            <Th
-              sorted={sortBy === "value"}
-              reversed={reverseSortDirection}
-              onSort={() => setSorting("value")}
-            >
-              Value
-            </Th>
-          </Table.Tr>
-        </Table.Tbody>
-        <Table.Tbody>
-          {rows.length > 0 ? (
-            rows
-          ) : (
+    <InfoPageStack>
+      <InfoPageCard>
+        <TextInput
+          placeholder="Filter by flag name or value"
+          mb="md"
+          autoFocus
+          leftSection={
+            <IconSearch
+              style={{ width: rem(16), height: rem(16) }}
+              stroke={1.5}
+            />
+          }
+          value={search}
+          onChange={handleSearchChange}
+        />
+        <Table
+          horizontalSpacing="md"
+          verticalSpacing="xs"
+          miw={700}
+          layout="fixed"
+        >
+          <Table.Tbody>
             <Table.Tr>
-              <Table.Td colSpan={2}>
-                <Text fw={500} ta="center">
-                  Nothing found
-                </Text>
-              </Table.Td>
+              <Th
+                sorted={sortBy === "flag"}
+                reversed={reverseSortDirection}
+                onSort={() => setSorting("flag")}
+              >
+                Flag
+              </Th>
+
+              <Th
+                sorted={sortBy === "value"}
+                reversed={reverseSortDirection}
+                onSort={() => setSorting("value")}
+              >
+                Value
+              </Th>
             </Table.Tr>
-          )}
-        </Table.Tbody>
-      </Table>
-    </Card>
+          </Table.Tbody>
+          <Table.Tbody>
+            {rows.length > 0 ? (
+              rows
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={2}>
+                  <Text fw={500} ta="center">
+                    Nothing found
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
+        </Table>
+      </InfoPageCard>
+    </InfoPageStack>
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/StatusPage.tsx b/web/ui/mantine-ui/src/pages/StatusPage.tsx
index 04d215cf5..71dc476a2 100644
--- a/web/ui/mantine-ui/src/pages/StatusPage.tsx
+++ b/web/ui/mantine-ui/src/pages/StatusPage.tsx
@@ -1,8 +1,10 @@
-import { Card, Group, Stack, Table, Text } from "@mantine/core";
+import { Table } from "@mantine/core";
 import { useSuspenseAPIQuery } from "../api/api";
 import { IconRun, IconWall } from "@tabler/icons-react";
 import { formatTimestamp } from "../lib/formatTime";
 import { useSettings } from "../state/settingsSlice";
+import InfoPageCard from "../components/InfoPageCard";
+import InfoPageStack from "../components/InfoPageStack";
 
 export default function StatusPage() {
   const { data: buildinfo } = useSuspenseAPIQuery<Record<string, string>>({
@@ -42,14 +44,8 @@ export default function StatusPage() {
   };
 
   return (
-    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
-      <Card shadow="xs" withBorder p="md">
-        <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
-          <IconWall size={22} />
-          <Text fz="xl" fw={600}>
-            Build information
-          </Text>
-        </Group>
+    <InfoPageStack>
+      <InfoPageCard title="Build information" icon={IconWall}>
         <Table layout="fixed">
           <Table.Tbody>
             {Object.entries(buildinfo.data).map(([k, v]) => (
@@ -60,14 +56,8 @@ export default function StatusPage() {
             ))}
           </Table.Tbody>
         </Table>
-      </Card>
-      <Card shadow="xs" withBorder p="md">
-        <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
-          <IconRun size={22} />
-          <Text fz="xl" fw={600}>
-            Runtime information
-          </Text>
-        </Group>
+      </InfoPageCard>
+      <InfoPageCard title="Runtime information" icon={IconRun}>
         <Table layout="fixed">
           <Table.Tbody>
             {Object.entries(runtimeinfo.data).map(([k, v]) => {
@@ -84,7 +74,7 @@ export default function StatusPage() {
             })}
           </Table.Tbody>
         </Table>
-      </Card>
-    </Stack>
+      </InfoPageCard>
+    </InfoPageStack>
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
index 721ac6904..cf7851c16 100644
--- a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
+++ b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
@@ -1,8 +1,10 @@
-import { Stack, Card, Table, Text } from "@mantine/core";
+import { Table } from "@mantine/core";
 import { useSuspenseAPIQuery } from "../api/api";
 import { TSDBStatusResult } from "../api/responseTypes/tsdbStatus";
 import { formatTimestamp } from "../lib/formatTime";
 import { useSettings } from "../state/settingsSlice";
+import InfoPageStack from "../components/InfoPageStack";
+import InfoPageCard from "../components/InfoPageCard";
 
 export default function TSDBStatusPage() {
   const {
@@ -41,7 +43,7 @@ export default function TSDBStatusPage() {
   ];
 
   return (
-    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
+    <InfoPageStack>
       {[
         {
           title: "TSDB Head Status",
@@ -70,10 +72,7 @@ export default function TSDBStatusPage() {
           formatAsCode: true,
         },
       ].map(({ title, unit = "Count", stats, formatAsCode }) => (
-        <Card shadow="xs" withBorder p="md">
-          <Text fz="xl" fw={600} ml="xs" mb="sm">
-            {title}
-          </Text>
+        <InfoPageCard title={title}>
           <Table layout="fixed">
             <Table.Thead>
               <Table.Tr>
@@ -82,24 +81,22 @@ export default function TSDBStatusPage() {
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {stats.map(({ name, value }) => {
-                return (
-                  <Table.Tr key={name}>
-                    <Table.Td
-                      style={{
-                        wordBreak: "break-all",
-                      }}
-                    >
-                      {formatAsCode ? <code>{name}</code> : name}
-                    </Table.Td>
-                    <Table.Td>{value}</Table.Td>
-                  </Table.Tr>
-                );
-              })}
+              {stats.map(({ name, value }) => (
+                <Table.Tr key={name}>
+                  <Table.Td
+                    style={{
+                      wordBreak: "break-all",
+                    }}
+                  >
+                    {formatAsCode ? <code>{name}</code> : name}
+                  </Table.Td>
+                  <Table.Td>{value}</Table.Td>
+                </Table.Tr>
+              ))}
             </Table.Tbody>
           </Table>
-        </Card>
+        </InfoPageCard>
       ))}
-    </Stack>
+    </InfoPageStack>
   );
 }
diff --git a/web/ui/mantine-ui/vite.config.ts b/web/ui/mantine-ui/vite.config.ts
index 079605403..0ba6aa84d 100644
--- a/web/ui/mantine-ui/vite.config.ts
+++ b/web/ui/mantine-ui/vite.config.ts
@@ -6,11 +6,19 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
+      // "/api": {
+      //   target: "http://localhost:9090",
+      // },
+      // "/-/": {
+      //   target: "http://localhost:9090",
+      // },
       "/api": {
-        target: "http://localhost:9090",
+        target: "https://demo-new.promlabs.com/",
+        changeOrigin: true,
       },
       "/-/": {
-        target: "http://localhost:9090",
+        target: "https://demo-new.promlabs.com/",
+        changeOrigin: true,
       },
       // "/api": {
       //   target: "https://prometheus.demo.do.prometheus.io/",