Show units in details panel (#198)

* Show units in details panel

* Show raw units next to chart tite

* fixup! Show raw units next to chart tite

* Show only raw units on title

* Add tooltip

Author: kapantzak

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")

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>
   )
 }

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

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 (
+    <Row title="Units" color="key" data-testid="cartDetails-units">
+      <Info title="Raw data units">{rawUnits}</Info>
+    </Row>
+  )
+}
+
+export default Units

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 => {
         </CopyToClipboard>
       )}
       {!!units && !isMinimal && (
-        <TextSmall color="textLite" whiteSpace="nowrap">
+        <TextWithTooltip
+          color="textLite"
+          whiteSpace="nowrap"
+          title="Source unit (alerts)"
+          tooltipProps={{ align: "top" }}
+        >
           • [{units}]
-        </TextSmall>
+        </TextWithTooltip>
       )}
     </Flex>
   )