Feature: fields highlighting (#5868)

src/components/services/widget/block.jsx

@@ -1,16 +1,47 @@
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
+import { useContext, useMemo } from "react";
 
-export default function Block({ value, label }) {
+import { BlockHighlightContext } from "./highlight-context";
+
+import { evaluateHighlight, getHighlightClass } from "utils/highlights";
+
+export default function Block({ value, label, field }) {
   const { t } = useTranslation();
+  const highlightConfig = useContext(BlockHighlightContext);
+
+  const highlight = useMemo(() => {
+    if (!highlightConfig) return null;
+    const labels = Array.isArray(label) ? label : [label];
+    const candidates = [];
+    if (typeof field === "string") candidates.push(field);
+    for (const candidateLabel of labels) {
+      if (typeof candidateLabel === "string") candidates.push(candidateLabel);
+    }
+
+    for (const candidate of candidates) {
+      const result = evaluateHighlight(candidate, value, highlightConfig);
+      if (result) return result;
+    }
+
+    return null;
+  }, [field, label, value, highlightConfig]);
+
+  const highlightClass = useMemo(() => {
+    if (!highlight?.level) return undefined;
+    return getHighlightClass(highlight.level, highlightConfig);
+  }, [highlight, highlightConfig]);
 
   return (
     <div
       className={classNames(
         "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
         value === undefined ? "animate-pulse" : "",
+        highlightClass,
         "service-block",
       )}
+      data-highlight-level={highlight?.level}
+      data-highlight-source={highlight?.source}
     >
       <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
       <div className="font-bold text-xs uppercase">{t(label)}</div>

src/components/services/widget/container.jsx

@@ -1,7 +1,10 @@
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { SettingsContext } from "utils/contexts/settings";
 
 import Error from "./error";
+import { BlockHighlightContext } from "./highlight-context";
+
+import { buildHighlightConfig } from "utils/highlights";
 
 const ALIASED_WIDGETS = {
   pialert: "netalertx",
@@ -11,6 +14,11 @@ const ALIASED_WIDGETS = {
 export default function Container({ error = false, children, service }) {
   const { settings } = useContext(SettingsContext);
 
+  const highlightConfig = useMemo(
+    () => buildHighlightConfig(settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type),
+    [settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type],
+  );
+
   if (error) {
     if (settings.hideErrors || service.widget.hide_errors) {
       return null;
@@ -51,6 +59,11 @@ export default function Container({ error = false, children, service }) {
       }),
     );
   }
+  const content = <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
 
-  return <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
+  if (!highlightConfig) {
+    return content;
+  }
+
+  return <BlockHighlightContext.Provider value={highlightConfig}>{content}</BlockHighlightContext.Provider>;
 }

src/components/services/widget/highlight-context.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const BlockHighlightContext = createContext(null);