Implement simpler custom badges for label displays (#16343)

* Implement simpler custom badges for label displays

Should help a little bit with https://github.com/prometheus/prometheus/issues/16308

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

* Don't wrap text inside custom labels

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

---------

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

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

@@ -12,6 +12,23 @@
     var(--mantine-color-gray-8)
   );
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5));
+
+  /* We have all these manual styles here because we manually build label badges in the
+     same style as the Mantine ones, but with just one DOM element instead of two. This
+     is important because we have pages with thousands of labels and care about their
+     performance more than other badges. We also don't require icons for label badges,
+     so we can get away with more simplicity and less computation overall. */
+  border-radius: calc(62.5rem * var(--mantine-scale));
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  font-weight: 700;
+  padding: 0 calc(0.625rem * var(--mantine-scale));
+  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  line-height: calc(
+    calc(1.25rem * var(--mantine-scale)) - calc(0.125rem * var(--mantine-scale))
+  );
+  height: calc(1.25rem * var(--mantine-scale));
+  letter-spacing: calc(0.015625rem * var(--mantine-scale));
+  white-space: nowrap;
 }
 
 .healthOk {

web/ui/mantine-ui/src/components/LabelBadges.tsx

@@ -1,4 +1,4 @@
-import { Badge, BadgeVariant, Group, MantineColor, Stack } from "@mantine/core";
+import { Group, Stack } from "@mantine/core";
 import { FC } from "react";
 import { escapeString } from "../lib/escapeString";
 import badgeClasses from "../Badge.module.css";
@@ -6,34 +6,22 @@ import { maybeQuoteLabelName } from "../promql/utils";
 
 export interface LabelBadgesProps {
   labels: Record<string, string>;
-  variant?: BadgeVariant;
-  color?: MantineColor;
   wrapper?: typeof Group | typeof Stack;
+  style?: React.CSSProperties;
 }
 
 export const LabelBadges: FC<LabelBadgesProps> = ({
   labels,
-  variant,
-  color,
   wrapper: Wrapper = Group,
+  style,
 }) => (
   <Wrapper gap="xs">
-    {Object.entries(labels).map(([k, v]) => {
-      return (
-        <Badge
-          variant={variant ? variant : "light"}
-          color={color ? color : undefined}
-          className={color ? undefined : badgeClasses.labelBadge}
-          styles={{
-            label: {
-              textTransform: "none",
-            },
-          }}
-          key={k}
-        >
-          {maybeQuoteLabelName(k)}="{escapeString(v)}"
-        </Badge>
-      );
-    })}
+    {Object.entries(labels).map(([k, v]) => (
+      // We build our own Mantine-style badges here for performance
+      // reasons (see comment in Badge.module.css).
+      <span key={k} className={badgeClasses.labelBadge} style={style}>
+        {maybeQuoteLabelName(k)}="{escapeString(v)}"
+      </span>
+    ))}
   </Wrapper>
 );

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

@@ -41,7 +41,13 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
             <Text fw={700} size="1em" my="lg" c="gray.7">
               Discovered labels:
             </Text>
-            <LabelBadges color="blue" labels={discoveredLabels} />
+            <LabelBadges
+              labels={discoveredLabels}
+              style={{
+                color: "var(--mantine-color-blue-light-color)",
+                backgroundColor: "var(--mantine-color-blue-light)",
+              }}
+            />
           </>
         )}
       </Collapse>