From 6d5f35f07ede58b9ee4cc94c5956ee35b2ea56df Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 4 Dec 2025 08:42:24 -0800
Subject: [PATCH] Enhancement: add valueOnly option to block highlighting
 feature (#6051)

---
 docs/configs/services.md                 | 13 +++++++++++++
 src/components/services/widget/block.jsx |  8 +++++++-
 src/utils/highlights.js                  |  6 +++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/configs/services.md b/docs/configs/services.md
index 9ae24b15e..06067bf6c 100644
--- a/docs/configs/services.md
+++ b/docs/configs/services.md
@@ -159,6 +159,19 @@ Widgets can tint their metric block text automatically based on rules defined al
 
 Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
 
+#### Value Only Highlighting
+
+You can optionally apply highlighting only to the value portion of a block (not the label) by setting `valueOnly: true` on the field configuration. This keeps the label visible while highlighting only the metric value itself.
+
+```yaml
+- Sonarr:
+    ...
+      highlight:
+        queued:
+          valueOnly: true
+          ...
+```
+
 ## Descriptions
 
 Services may have descriptions,
diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx
index 2ce5d441d..c61dd5d54 100644
--- a/src/components/services/widget/block.jsx
+++ b/src/components/services/widget/block.jsx
@@ -32,6 +32,8 @@ export default function Block({ value, label, field }) {
     return getHighlightClass(highlight.level, highlightConfig);
   }, [highlight, highlightConfig]);
 
+  const applyToValueOnly = highlight?.valueOnly === true;
+
   return (
     <div
       className={classNames(
@@ -44,7 +46,11 @@ export default function Block({ value, label, field }) {
       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>
+      <div
+        className={classNames("font-bold text-xs uppercase", applyToValueOnly && "text-theme-700 dark:text-theme-200")}
+      >
+        {t(label)}
+      </div>
     </div>
   );
 }
diff --git a/src/utils/highlights.js b/src/utils/highlights.js
index b9f6bc5e4..65a3eeffd 100644
--- a/src/utils/highlights.js
+++ b/src/utils/highlights.js
@@ -200,7 +200,7 @@ const ensureArray = (value) => {
 };
 
 const findHighlightLevel = (ruleSet, numericValue, stringValue) => {
-  const { numeric, string } = ruleSet;
+  const { numeric, string, valueOnly } = ruleSet;
 
   if (numeric && numericValue !== undefined) {
     const numericRules = ensureArray(numeric);
@@ -208,7 +208,7 @@ const findHighlightLevel = (ruleSet, numericValue, stringValue) => {
     for (const candidate of numericCandidates) {
       for (const rule of numericRules) {
         if (rule?.level && evaluateNumericRule(candidate, rule)) {
-          return { level: rule.level, source: "numeric", rule };
+          return { level: rule.level, source: "numeric", rule, valueOnly };
         }
       }
     }
@@ -218,7 +218,7 @@ const findHighlightLevel = (ruleSet, numericValue, stringValue) => {
     const stringRules = ensureArray(string);
     for (const rule of stringRules) {
       if (rule?.level && evaluateStringRule(stringValue, rule)) {
-        return { level: rule.level, source: "string", rule };
+        return { level: rule.level, source: "string", rule, valueOnly };
       }
     }
   }