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 }) => (
-
- {title}
-
- {children}
-
-
-)
+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 = () => {
{nodeName && }
+
)
}
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 }) => (
+
+ {title}
+
+ {children}
+
+
+)
+
+export default Info
diff --git a/src/components/details/units.js b/src/components/details/units.js
new file mode 100644
index 00000000..e06a3087
--- /dev/null
+++ b/src/components/details/units.js
@@ -0,0 +1,16 @@
+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 })
+
+ return (
+
+ {rawUnits}
+
+ )
+}
+
+export default Units
diff --git a/src/components/title/index.js b/src/components/title/index.js
index 023d5c3f..39ecffe6 100644
--- a/src/components/title/index.js
+++ b/src/components/title/index.js
@@ -8,10 +8,13 @@ import {
useIsMinimal,
useAttributeValue,
} from "@/components/provider"
+import { withTooltip } from "@/components/tooltip"
+
+const TextWithTooltip = withTooltip(TextSmall)
export const Title = props => {
const title = useTitle()
- const units = useUnitSign({ long: true })
+ const units = useUnitSign({ withoutConversion: true, long: true })
const name = useName()
const isMinimal = useIsMinimal()
const contextScope = useAttributeValue("contextScope")
@@ -39,9 +42,14 @@ export const Title = props => {
)}
{!!units && !isMinimal && (
-
+
• [{units}]
-
+
)}
)