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