Add disk and network info

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -1,21 +1,35 @@
-import { mdiInformation, mdiMemory, mdiPackageVariantClosed } from "@mdi/js";
+import {
+  mdiHarddisk,
+  mdiInformation,
+  mdiMemory,
+  mdiNetwork,
+  mdiPackageVariantClosed,
+} from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   Box,
   Grid,
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
+  TableHead,
   TableRow,
   Typography,
 } from "@mui/material";
 import { PieChart } from "@mui/x-charts";
 import React from "react";
-import { ServerApi, ServerSystemInfo } from "../api/ServerApi";
+import {
+  DiskInfo,
+  NetworkInfo,
+  ServerApi,
+  ServerSystemInfo,
+} from "../api/ServerApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import humanizeDuration from "humanize-duration";
+import { filesize } from "filesize";
 
 export function SysInfoRoute(): React.ReactElement {
   const [info, setInfo] = React.useState<ServerSystemInfo>();
@@ -212,6 +226,9 @@ export function SysInfoRouteInner(p: {
           { label: "Kernel version", value: p.info.system.kernel_version },
         ]}
       />
+
+      <DiskDetailsTable disks={p.info.system.disks} />
+      <NetworksDetailsTable networks={p.info.system.networks} />
     </VirtWebRouteContainer>
   );
 }
@@ -244,3 +261,83 @@ function SysInfoDetailsTable(p: {
     </VirtWebPaper>
   );
 }
+
+function DiskDetailsTable(p: { disks: DiskInfo[] }): React.ReactElement {
+  return (
+    <VirtWebPaper
+      label={
+        <>
+          <Icon size={1} path={mdiHarddisk} /> Storage
+        </>
+      }
+    >
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Kind</TableCell>
+            <TableCell>Mount point</TableCell>
+            <TableCell>Total space</TableCell>
+            <TableCell>Free space</TableCell>
+            <TableCell></TableCell>
+            <TableCell>Removable</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.disks.map((e, c) => (
+            <TableRow hover key={c}>
+              <TableCell>{e.name}</TableCell>
+              <TableCell>{e.DiskKind}</TableCell>
+              <TableCell>{e.mount_point}</TableCell>
+              <TableCell>{filesize(e.total_space)}</TableCell>
+              <TableCell>{filesize(e.available_space)}</TableCell>
+              <TableCell>
+                <LinearProgress
+                  variant="determinate"
+                  style={{ minWidth: "100px", width: "100%" }}
+                  value={
+                    100 * ((e.total_space - e.available_space) / e.total_space)
+                  }
+                />
+              </TableCell>
+              <TableCell>{e.is_removable ? "Yes" : "No"}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </VirtWebPaper>
+  );
+}
+
+function NetworksDetailsTable(p: {
+  networks: NetworkInfo[];
+}): React.ReactElement {
+  return (
+    <VirtWebPaper
+      label={
+        <>
+          <Icon size={1} path={mdiNetwork} /> Networks
+        </>
+      }
+    >
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Total received</TableCell>
+            <TableCell>Total transmitted</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.networks.map((e, c) => (
+            <TableRow hover key={c}>
+              <TableCell>{e[0]}</TableCell>
+              <TableCell>{filesize(e[1].total_received)}</TableCell>
+              <TableCell>{filesize(e[1].total_transmitted)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </VirtWebPaper>
+  );
+}