Enhancement: better support for raw values in block highlighting (#6434)

src/components/services/widget/block.jsx

@@ -6,7 +6,7 @@ import { BlockHighlightContext } from "./highlight-context";
 
 import { evaluateHighlight, getHighlightClass } from "utils/highlights";
 
-export default function Block({ value, label, field }) {
+export default function Block({ value, highlightValue, label, field }) {
   const { t } = useTranslation();
   const highlightConfig = useContext(BlockHighlightContext);
 
@@ -20,12 +20,12 @@ export default function Block({ value, label, field }) {
     }
 
     for (const candidate of candidates) {
-      const result = evaluateHighlight(candidate, value, highlightConfig);
+      const result = evaluateHighlight(candidate, highlightValue ?? value, highlightConfig);
       if (result) return result;
     }
 
     return null;
-  }, [field, label, value, highlightConfig]);
+  }, [field, label, value, highlightValue, highlightConfig]);
 
   const highlightClass = useMemo(() => {
     if (!highlight?.level) return undefined;

src/components/services/widget/block.test.jsx

@@ -38,4 +38,27 @@ describe("components/services/widget/block", () => {
     expect(el.getAttribute("data-highlight-level")).toBe("danger");
     expect(el.className).toContain("danger-class");
   });
+
+  it("prefers highlightValue over the rendered value for numeric highlighting", () => {
+    const highlightConfig = {
+      levels: { warn: "warn-class" },
+      fields: {
+        foo: {
+          numeric: { when: "gt", value: 5, level: "warn" },
+        },
+      },
+    };
+
+    const { container } = renderWithProviders(
+      <BlockHighlightContext.Provider value={highlightConfig}>
+        <Block label="foo.label" field="foo" value="5.791 ms" highlightValue={5.791} />
+      </BlockHighlightContext.Provider>,
+      { settings: {} },
+    );
+
+    const el = container.querySelector(".service-block");
+    expect(el).not.toBeNull();
+    expect(el.getAttribute("data-highlight-level")).toBe("warn");
+    expect(el.className).toContain("warn-class");
+  });
 });