From 20de22a46c43bd294f818e8133c51f083c8792eb Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Fri, 14 Nov 2025 13:41:11 +0200
Subject: [PATCH 1/5] Show units in details panel

---
 src/components/details/context.js | 11 +----------
 src/components/details/index.js   |  2 ++
 src/components/details/info.js    | 13 +++++++++++++
 src/components/details/units.js   | 18 ++++++++++++++++++
 4 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 src/components/details/info.js
 create mode 100644 src/components/details/units.js

diff --git a/src/components/details/context.js b/src/components/details/context.js
index e03f9039..517ed3ce 100644
--- a/src/components/details/context.js
+++ b/src/components/details/context.js
@@ -1,16 +1,7 @@
 import React from "react"
-import { TextSmall, Flex } from "@netdata/netdata-ui"
 import { useAttributeValue } from "@/components/provider"
 import Row from "./row"
-
-const Info = ({ title, children }) => (
-  <Flex gap={2}>
-    <TextSmall color="textDescription">{title}</TextSmall>
-    <Flex as={TextSmall} background="elementBackground">
-      {children}
-    </Flex>
-  </Flex>
-)
+import Info from "./info"
 
 const Context = () => {
   const contextScope = useAttributeValue("contextScope")
diff --git a/src/components/details/index.js b/src/components/details/index.js
index 59779d90..03ef2390 100644
--- a/src/components/details/index.js
+++ b/src/components/details/index.js
@@ -5,6 +5,7 @@ import { useAttributeValue } from "@/components/provider"
 import Context from "./context"
 import Source from "./source"
 import Description from "./description"
+import Units from "./units"
 
 const Container = styled(Flex).attrs({
   column: true,
@@ -23,6 +24,7 @@ const Details = () => {
       <Description />
       {nodeName && <Source />}
       <Context />
+      <Units />
     </Container>
   )
 }
diff --git a/src/components/details/info.js b/src/components/details/info.js
new file mode 100644
index 00000000..71d353ed
--- /dev/null
+++ b/src/components/details/info.js
@@ -0,0 +1,13 @@
+import React from "react"
+import { TextSmall, Flex } from "@netdata/netdata-ui"
+
+const Info = ({ title, children }) => (
+  <Flex gap={2}>
+    <TextSmall color="textDescription">{title}</TextSmall>
+    <Flex as={TextSmall} background="elementBackground">
+      {children}
+    </Flex>
+  </Flex>
+)
+
+export default Info
diff --git a/src/components/details/units.js b/src/components/details/units.js
new file mode 100644
index 00000000..2b54e501
--- /dev/null
+++ b/src/components/details/units.js
@@ -0,0 +1,18 @@
+import React from "react"
+import { useUnitSign } from "@/components/provider"
+import Row from "./row"
+import Info from "./info"
+
+const Units = () => {
+  const rawUnits = useUnitSign({ withoutConversion: true, long: true })
+  const viewUnits = useUnitSign({ long: true })
+
+  return (
+    <Row title="Units" color="key" data-testid="cartDetails-units">
+      <Info title="Raw data units">{rawUnits}</Info>
+      <Info title="Visualization units">{viewUnits}</Info>
+    </Row>
+  )
+}
+
+export default Units

From e2f7d6362e07fa567f850c6d2efc83055b707ab8 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 19 Nov 2025 09:04:47 +0200
Subject: [PATCH 2/5] Show raw units next to chart tite

---
 src/components/details/units.js |  2 --
 src/components/title/index.js   | 21 ++++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/details/units.js b/src/components/details/units.js
index 2b54e501..e06a3087 100644
--- a/src/components/details/units.js
+++ b/src/components/details/units.js
@@ -5,12 +5,10 @@ import Info from "./info"
 
 const Units = () => {
   const rawUnits = useUnitSign({ withoutConversion: true, long: true })
-  const viewUnits = useUnitSign({ long: true })
 
   return (
     <Row title="Units" color="key" data-testid="cartDetails-units">
       <Info title="Raw data units">{rawUnits}</Info>
-      <Info title="Visualization units">{viewUnits}</Info>
     </Row>
   )
 }
diff --git a/src/components/title/index.js b/src/components/title/index.js
index 023d5c3f..e84156dd 100644
--- a/src/components/title/index.js
+++ b/src/components/title/index.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { Flex, TextSmall, CopyToClipboard } from "@netdata/netdata-ui"
 import {
   useTitle,
@@ -11,11 +11,22 @@ import {
 
 export const Title = props => {
   const title = useTitle()
-  const units = useUnitSign({ long: true })
+  const viewUnits = useUnitSign({ long: true })
+  const rawUnits = useUnitSign({ withoutConversion: true, long: true })
   const name = useName()
   const isMinimal = useIsMinimal()
   const contextScope = useAttributeValue("contextScope")
 
+  const unitsText = useMemo(() => {
+    if (isMinimal || (!rawUnits && !viewUnits)) return null
+    return (
+      <TextSmall color="textLite" whiteSpace="nowrap">
+        • {rawUnits && `[${rawUnits}]`}
+        {viewUnits && viewUnits !== rawUnits && ` scaled to [${viewUnits}]`}
+      </TextSmall>
+    )
+  }, [rawUnits, viewUnits, isMinimal])
+
   return (
     <Flex
       overflow="hidden"
@@ -38,11 +49,7 @@ export const Title = props => {
           </TextSmall>
         </CopyToClipboard>
       )}
-      {!!units && !isMinimal && (
-        <TextSmall color="textLite" whiteSpace="nowrap">
-          • [{units}]
-        </TextSmall>
-      )}
+      {unitsText}
     </Flex>
   )
 }

From 9c8a24501ff6d9169e1bb724fb0f6358b9ef3801 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 19 Nov 2025 09:08:03 +0200
Subject: [PATCH 3/5] fixup! Show raw units next to chart tite

---
 src/components/title/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/title/index.js b/src/components/title/index.js
index e84156dd..0f39b2ff 100644
--- a/src/components/title/index.js
+++ b/src/components/title/index.js
@@ -18,7 +18,7 @@ export const Title = props => {
   const contextScope = useAttributeValue("contextScope")
 
   const unitsText = useMemo(() => {
-    if (isMinimal || (!rawUnits && !viewUnits)) return null
+    if (isMinimal || !rawUnits) return null
     return (
       <TextSmall color="textLite" whiteSpace="nowrap">
         • {rawUnits && `[${rawUnits}]`}

From 1dfbdc1ee5eedec0e8203337ec1303b24b91fd25 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 19 Nov 2025 11:40:27 +0200
Subject: [PATCH 4/5] Show only raw units on title

---
 src/components/title/index.js | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/title/index.js b/src/components/title/index.js
index 0f39b2ff..3cdffe97 100644
--- a/src/components/title/index.js
+++ b/src/components/title/index.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React from "react"
 import { Flex, TextSmall, CopyToClipboard } from "@netdata/netdata-ui"
 import {
   useTitle,
@@ -11,22 +11,11 @@ import {
 
 export const Title = props => {
   const title = useTitle()
-  const viewUnits = useUnitSign({ long: true })
-  const rawUnits = useUnitSign({ withoutConversion: true, long: true })
+  const units = useUnitSign({ withoutConversion: true, long: true })
   const name = useName()
   const isMinimal = useIsMinimal()
   const contextScope = useAttributeValue("contextScope")
 
-  const unitsText = useMemo(() => {
-    if (isMinimal || !rawUnits) return null
-    return (
-      <TextSmall color="textLite" whiteSpace="nowrap">
-        • {rawUnits && `[${rawUnits}]`}
-        {viewUnits && viewUnits !== rawUnits && ` scaled to [${viewUnits}]`}
-      </TextSmall>
-    )
-  }, [rawUnits, viewUnits, isMinimal])
-
   return (
     <Flex
       overflow="hidden"
@@ -49,7 +38,11 @@ export const Title = props => {
           </TextSmall>
         </CopyToClipboard>
       )}
-      {unitsText}
+      {!!units && !isMinimal && (
+        <TextSmall color="textLite" whiteSpace="nowrap">
+          • [{units}]
+        </TextSmall>
+      )}
     </Flex>
   )
 }

From fb8d3deb935a177c364e01f4e507d87d676bc51d Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 19 Nov 2025 12:10:13 +0200
Subject: [PATCH 5/5] Add tooltip

---
 src/components/title/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/title/index.js b/src/components/title/index.js
index 3cdffe97..39ecffe6 100644
--- a/src/components/title/index.js
+++ b/src/components/title/index.js
@@ -8,6 +8,9 @@ import {
   useIsMinimal,
   useAttributeValue,
 } from "@/components/provider"
+import { withTooltip } from "@/components/tooltip"
+
+const TextWithTooltip = withTooltip(TextSmall)
 
 export const Title = props => {
   const title = useTitle()
@@ -39,9 +42,14 @@ export const Title = props => {
         </CopyToClipboard>
       )}
       {!!units && !isMinimal && (
-        <TextSmall color="textLite" whiteSpace="nowrap">
+        <TextWithTooltip
+          color="textLite"
+          whiteSpace="nowrap"
+          title="Source unit (alerts)"
+          tooltipProps={{ align: "top" }}
+        >
           • [{units}]
-        </TextSmall>
+        </TextWithTooltip>
       )}
     </Flex>
   )