[pull] main from prometheus:main

docs/migration.md

@@ -15,7 +15,6 @@ This document offers guidance on migrating from Prometheus 2.x to Prometheus 3.0
   default behavior of Prometheus v3:
   - `promql-at-modifier`
   - `promql-negative-offset`
-  - `remote-write-receiver`
   - `new-service-discovery-manager`
   - `expand-external-labels`
       - Environment variable references `${var}` or `$var` in external label values 
@@ -31,6 +30,8 @@ This document offers guidance on migrating from Prometheus 2.x to Prometheus 3.0
       `http://example.com/metrics:80` respectively, add them to your target URLs
   - `agent`
       - Instead use the dedicated `--agent` CLI flag.
+  - `remote-write-receiver`
+      - Instead use the dedicated `--web.enable-remote-write-receiver` CLI flag to enable the remote write receiver.
   - `auto-gomemlimit`
       - Prometheus v3 will automatically set `GOMEMLIMIT` to match the Linux 
       container memory limit. If there is no container limit, or the process is 

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,39 +1,27 @@
-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";
 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/AlertsPage.tsx

@@ -164,7 +164,7 @@ export default function AlertsPage() {
   const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
   const [showEmptyGroups, setShowEmptyGroups] = useLocalStorage<boolean>({
     key: "alertsPage.showEmptyGroups",
-    defaultValue: true,
+    defaultValue: false,
   });
 
   const { alertGroupsPerPage } = useSettings();

web/ui/mantine-ui/src/pages/service-discovery/ServiceDiscoveryPoolsList.tsx

@@ -25,9 +25,8 @@ import {
 } from "../../state/serviceDiscoveryPageSlice";
 import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
 
-import { useDebouncedValue } from "@mantine/hooks";
+import { useDebouncedValue, useLocalStorage } from "@mantine/hooks";
 import { targetPoolDisplayLimit } from "./ServiceDiscoveryPage";
-import { BooleanParam, useQueryParam, withDefault } from "use-query-params";
 import { LabelBadges } from "../../components/LabelBadges";
 
 type TargetLabels = {
@@ -154,10 +153,10 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
   searchFilter,
 }) => {
   const dispatch = useAppDispatch();
-  const [showEmptyPools, setShowEmptyPools] = useQueryParam(
-    "showEmptyPools",
-    withDefault(BooleanParam, true)
-  );
+  const [showEmptyPools, setShowEmptyPools] = useLocalStorage<boolean>({
+    key: "serviceDiscoveryPage.showEmptyPools",
+    defaultValue: false,
+  });
 
   // Based on the selected pool (if any), load the list of targets.
   const {

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

@@ -167,7 +167,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
   const dispatch = useAppDispatch();
   const [showEmptyPools, setShowEmptyPools] = useLocalStorage<boolean>({
     key: "targetsPage.showEmptyPools",
-    defaultValue: true,
+    defaultValue: false,
   });
 
   const { collapsedPools, showLimitAlert } = useAppSelector(

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

@@ -35,10 +35,21 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
       </Group>
 
       <Collapse in={showDiscovered}>
-        <Text fw={700} size="1em" my="lg" c="gray.7">
-          Discovered labels:
-        </Text>
-        <LabelBadges color="blue" labels={discoveredLabels} />
+        {/* Additionally remove DOM elements when not expanded (helps performance) */}
+        {showDiscovered && (
+          <>
+            <Text fw={700} size="1em" my="lg" c="gray.7">
+              Discovered labels:
+            </Text>
+            <LabelBadges
+              labels={discoveredLabels}
+              style={{
+                color: "var(--mantine-color-blue-light-color)",
+                backgroundColor: "var(--mantine-color-blue-light)",
+              }}
+            />
+          </>
+        )}
       </Collapse>
     </Stack>
   );