Add dropdown for discovered labels on /targets page

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

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

@@ -20,7 +20,7 @@ export const LabelBadges: FC<LabelBadgesProps> = ({
         <Badge
           variant={variant ? variant : "light"}
           color={color ? color : undefined}
-          className={badgeClasses.labelBadge}
+          className={color ? undefined : badgeClasses.labelBadge}
           styles={{
             label: {
               textTransform: "none",

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

@@ -27,6 +27,7 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
 
 import badgeClasses from "../../Badge.module.css";
 import panelClasses from "../../Panel.module.css";
+import TargetLabels from "./TargetLabels";
 
 type ScrapePool = {
   targets: Target[];
@@ -312,7 +313,10 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                   </Badge>
                                 </Table.Td>
                                 <Table.Td>
-                                  <LabelBadges labels={target.labels} />
+                                  <TargetLabels
+                                    labels={target.labels}
+                                    discoveredLabels={target.discoveredLabels}
+                                  />
                                 </Table.Td>
                                 <Table.Td>
                                   {humanizeDurationRelative(

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

@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { Labels } from "../../api/responseTypes/targets";
+import { LabelBadges } from "../../components/LabelBadges";
+import {
+  ActionIcon,
+  Collapse,
+  Divider,
+  Group,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+
+type TargetLabelsProps = {
+  labels: Labels;
+  discoveredLabels: Labels;
+};
+
+const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
+  const [showDiscovered, { toggle: toggleDiscovered }] = useDisclosure(false);
+
+  return (
+    <Stack my={showDiscovered ? "sm" : undefined}>
+      <Group wrap="nowrap" align="flex-start">
+        <LabelBadges labels={labels} />
+
+        <ActionIcon
+          size="xs"
+          color="gray"
+          variant="light"
+          onClick={toggleDiscovered}
+          title={`${showDiscovered ? "Hide" : "Show"} discovered (pre-relabeling) labels`}
+        >
+          {showDiscovered ? (
+            <IconChevronUp
+              style={{ width: "70%", height: "70%" }}
+              stroke={1.5}
+            />
+          ) : (
+            <IconChevronDown style={{ width: "70%", height: "70%" }} />
+          )}
+        </ActionIcon>
+      </Group>
+
+      <Collapse in={showDiscovered}>
+        <Text fw={700} size="1em" my="lg" c="gray.7">
+          Discovered labels:
+        </Text>
+        <LabelBadges color="blue" labels={discoveredLabels} />
+      </Collapse>
+    </Stack>
+  );
+};
+
+export default TargetLabels;