Nicer panel health colors for both light and dark modes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/Badge.module.css

@@ -9,7 +9,7 @@
 .labelBadge {
   background-color: light-dark(
     var(--mantine-color-gray-1),
-    var(--mantine-color-gray-9)
+    var(--mantine-color-gray-8)
   );
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5));
 }

web/ui/mantine-ui/src/Panel.module.css

@@ -0,0 +1,19 @@
+.panelHealthOk {
+  border-left: 5px solid
+    light-dark(var(--mantine-color-green-3), var(--mantine-color-green-8)) !important;
+}
+
+.panelHealthErr {
+  border-left: 5px solid
+    light-dark(var(--mantine-color-red-3), var(--mantine-color-red-9)) !important;
+}
+
+.panelHealthWarn {
+  border-left: 5px solid
+    light-dark(var(--mantine-color-orange-3), var(--mantine-color-yellow-9)) !important;
+}
+
+.panelHealthUnknown {
+  border-left: 5px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-6)) !important;
+}

web/ui/mantine-ui/src/pages/AlertsPage.tsx

@@ -14,6 +14,7 @@ import {
 import { useSuspenseAPIQuery } from "../api/api";
 import { AlertingRulesResult } from "../api/responseTypes/rules";
 import badgeClasses from "../Badge.module.css";
+import panelClasses from "../Panel.module.css";
 import RuleDefinition from "../components/RuleDefinition";
 import { humanizeDurationRelative, now } from "../lib/formatTime";
 import { Fragment } from "react";
@@ -113,16 +114,24 @@ export default function AlertsPage() {
 
                   return (
                     <Accordion.Item
+                      styles={{
+                        item: {
+                          // TODO: This transparency hack is an OK workaround to make the collapsed items
+                          // have a different background color than their surrounding group card in dark mode,
+                          // but it would be better to use CSS to override the light/dark colors for
+                          // collapsed/expanded accordion items.
+                          backgroundColor: "#c0c0c015",
+                        },
+                      }}
                       key={j}
                       value={j.toString()}
-                      style={{
+                      className={
-                        borderLeft:
+                        numFiring > 0
-                          numFiring > 0
+                          ? panelClasses.panelHealthErr
-                            ? "5px solid var(--mantine-color-red-4)"
+                          : numPending > 0
-                            : numPending > 0
+                            ? panelClasses.panelHealthWarn
-                              ? "5px solid var(--mantine-color-orange-5)"
+                            : panelClasses.panelHealthOk
-                              : "5px solid var(--mantine-color-green-4)",
+                      }
-                      }}
                     >
                       <Accordion.Control>
                         <Group wrap="nowrap" justify="space-between" mr="lg">

web/ui/mantine-ui/src/pages/RulesPage.tsx

@@ -109,6 +109,15 @@ export default function RulesPage() {
           <Accordion multiple variant="separated">
             {g.rules.map((r, j) => (
               <Accordion.Item
+                styles={{
+                  item: {
+                    // TODO: This transparency hack is an OK workaround to make the collapsed items
+                    // have a different background color than their surrounding group card in dark mode,
+                    // but it would be better to use CSS to override the light/dark colors for
+                    // collapsed/expanded accordion items.
+                    backgroundColor: "#c0c0c015",
+                  },
+                }}
                 key={j}
                 value={j.toString()}
                 style={{
@@ -116,8 +125,8 @@ export default function RulesPage() {
                     r.health === "err"
                       ? "5px solid var(--mantine-color-red-4)"
                       : r.health === "unknown"
-                      ? "5px solid var(--mantine-color-gray-5)"
+                        ? "5px solid var(--mantine-color-gray-5)"
-                      : "5px solid var(--mantine-color-green-4)",
+                        : "5px solid var(--mantine-color-green-4)",
                 }}
               >
                 <Accordion.Control>

web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx

@@ -14,7 +14,6 @@ import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
 import { useSuspenseAPIQuery } from "../../api/api";
 import { Target, TargetsResult } from "../../api/responseTypes/targets";
 import React, { FC, useState } from "react";
-import badgeClasses from "../../Badge.module.css";
 import {
   humanizeDurationRelative,
   humanizeDuration,
@@ -26,6 +25,9 @@ import { setCollapsedPools } from "../../state/targetsPageSlice";
 import EndpointLink from "../../components/EndpointLink";
 import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
 
+import badgeClasses from "../../Badge.module.css";
+import panelClasses from "../../Panel.module.css";
+
 type ScrapePool = {
   targets: Target[];
   count: number;
@@ -38,6 +40,15 @@ type ScrapePools = {
   [scrapePool: string]: ScrapePool;
 };
 
+const poolPanelHealthClass = (pool: ScrapePool) =>
+  pool.count > 1 && pool.downCount === pool.count
+    ? panelClasses.panelHealthErr
+    : pool.downCount >= 1
+      ? panelClasses.panelHealthWarn
+      : pool.unknownCount === pool.count
+        ? panelClasses.panelHealthUnknown
+        : panelClasses.panelHealthOk;
+
 const healthBadgeClass = (state: string) => {
   switch (state.toLowerCase()) {
     case "up":
@@ -47,7 +58,8 @@ const healthBadgeClass = (state: string) => {
     case "unknown":
       return badgeClasses.healthUnknown;
     default:
-      return badgeClasses.warn;
+      // Should never happen.
+      return badgeClasses.healthWarn;
   }
 };
 
@@ -206,14 +218,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
             <Accordion.Item
               key={poolName}
               value={poolName}
-              style={{
+              className={poolPanelHealthClass(pool)}
-                borderLeft:
-                  pool.upCount === 0
-                    ? "5px solid var(--mantine-color-red-4)"
-                    : pool.upCount !== pool.count
-                      ? "5px solid var(--mantine-color-orange-5)"
-                      : "5px solid var(--mantine-color-green-4)",
-              }}
             >
               <Accordion.Control>
                 <Group wrap="nowrap" justify="space-between" mr="lg">