feat(ui): Add hover labels to system ram and load information

Hypfer · Dec 30, 2021 · 62ed252 · 62ed252
1 parent 88b810c
commit 62ed252
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 26 deletions.
diff --git a/frontend/src/components/RatioBar.tsx b/frontend/src/components/RatioBar.tsx
@@ -4,12 +4,14 @@ import {darken, lighten, useTheme} from "@mui/material";
 
 type RatioBarPartition = {
     label: string;
+    valueLabel?: string;
     value: number;
     color: NonNullable<CSSProperties["color"]>;
 };
 
 type RatioBarProps = {
     total: number;
+    totalLabel?: string;
     partitions: Array<RatioBarPartition>;
 };
 
@@ -27,6 +29,7 @@ const RatioBar: FunctionComponent<RatioBarProps> = (props) => {
 
         return {
             label: p.label,
+            valueLabel: p.valueLabel,
             color: p.color,
             percent: percent,
             totalPercent: totalPercent,
@@ -39,9 +42,13 @@ const RatioBar: FunctionComponent<RatioBarProps> = (props) => {
         darken(theme.palette.primary.main, 0.5);
     return (
         <>
-            <span className={styles.ratioBarBase} style={{
-                backgroundColor: progressBackgroundColor
-            }}>
+            <span
+                className={styles.ratioBarBase}
+                style={{
+                    backgroundColor: progressBackgroundColor
+                }}
+                title={props.totalLabel}
+            >
                 {mappedPartitions.reverse().map((mp, i) => {
                     return (
                         <span
@@ -51,6 +58,7 @@ const RatioBar: FunctionComponent<RatioBarProps> = (props) => {
                                 transform: `translateX(${-100 + mp.totalPercent}%)`,
                                 backgroundColor: mp.color,
                             }}
+                            title={mp.valueLabel}
                         >
                         </span>
                     );

diff --git a/frontend/src/settings/About.tsx b/frontend/src/settings/About.tsx
@@ -287,6 +287,7 @@ const About = (): JSX.Element => {
             );
         }
 
+
         return (
             <Grid container spacing={2}>
                 <Grid item>
@@ -316,36 +317,51 @@ const About = (): JSX.Element => {
 
                     <RatioBar
                         total={systemHostInfo.mem.total}
-                        partitions={[
-                            {
-                                label: "System",
-                                value: systemHostInfo.mem.total - systemHostInfo.mem.free - systemHostInfo.mem.valetudo_current,
-                                color: "#7AC037"
-                            },
-                            {
-                                label: "Valetudo",
-                                value: systemHostInfo.mem.valetudo_current,
-                                color: "#DF5618"
-                            },
-                            {
-                                label: "Valetudo (Max)",
-                                value: systemHostInfo.mem.valetudo_max - systemHostInfo.mem.valetudo_current,
-                                color: "#19A1A1"
-                            },
-                        ]}
+                        totalLabel={`${((systemHostInfo.mem.free) / 1024 / 1024).toFixed(2)} MiB`}
+                        partitions={
+                            [
+                                {
+                                    label: "System",
+                                    value: systemHostInfo.mem.total - systemHostInfo.mem.free - systemHostInfo.mem.valetudo_current,
+                                    valueLabel: `${((systemHostInfo.mem.total - systemHostInfo.mem.free - systemHostInfo.mem.valetudo_current) / 1024 / 1024).toFixed(2)} MiB`,
+                                    color: "#7AC037"
+                                },
+                                {
+                                    label: "Valetudo",
+                                    value: systemHostInfo.mem.valetudo_current,
+                                    valueLabel: `${((systemHostInfo.mem.valetudo_current) / 1024 / 1024).toFixed(2)} MiB`,
+                                    color: "#DF5618"
+                                },
+                                {
+                                    label: "Valetudo (Max)",
+                                    value: systemHostInfo.mem.valetudo_max - systemHostInfo.mem.valetudo_current,
+                                    valueLabel: `${((systemHostInfo.mem.valetudo_max) / 1024 / 1024).toFixed(2)} MiB`,
+                                    color: "#19A1A1"
+                                }
+                            ]
+                        }
                     />
                 </Grid>
                 <Grid item xs={12}>
                     <Typography variant="caption" color="textSecondary">
                         System Load (1, 5, 15 Minutes)
                     </Typography>
 
-                    <ThickLinearProgressWithTopMargin variant="determinate"
-                        value={Math.min(100, systemHostInfo.load["1"] * 100)}/>
-                    <ThickLinearProgressWithTopMargin variant="determinate"
-                        value={Math.min(100, systemHostInfo.load["5"] * 100)}/>
-                    <ThickLinearProgressWithTopMargin variant="determinate"
-                        value={Math.min(100, systemHostInfo.load["15"] * 100)}/>
+                    <ThickLinearProgressWithTopMargin
+                        variant="determinate"
+                        value={Math.min(100, systemHostInfo.load["1"] * 100)}
+                        title={systemHostInfo.load["1"].toFixed(2)}
+                    />
+                    <ThickLinearProgressWithTopMargin
+                        variant="determinate"
+                        value={Math.min(100, systemHostInfo.load["5"] * 100)}
+                        title={systemHostInfo.load["5"].toFixed(2)}
+                    />
+                    <ThickLinearProgressWithTopMargin
+                        variant="determinate"
+                        value={Math.min(100, systemHostInfo.load["15"] * 100)}
+                        title={systemHostInfo.load["15"].toFixed(2)}
+                    />
                 </Grid>
             </Grid>