Add disk and network info

virtweb_frontend/src/api/ServerApi.ts

@@ -54,7 +54,7 @@ interface SystemInfo {
   components: SysComponent;
   users: [];
   disks: DiskInfo[];
-  networks: [];
+  networks: NetworkInfo[];
   uptime: number;
   boot_time: number;
   load_average: SysLoadAverage;
@@ -89,7 +89,7 @@ interface SysComponent {
   label: string;
 }
 
-interface DiskInfo {
+export interface DiskInfo {
   DiskKind: "HDD" | "SSD";
   name: string;
   file_system: number[];
@@ -99,6 +99,23 @@ interface DiskInfo {
   is_removable: boolean;
 }
 
+export type NetworkInfo = [string, NetworkDetails];
+interface NetworkDetails {
+  received: number;
+  total_received: number;
+  transmitted: number;
+  total_transmitted: number;
+  packets_received: number;
+  total_packets_received: number;
+  packets_transmitted: number;
+  total_packets_transmitted: number;
+  errors_on_received: number;
+  total_errors_on_received: number;
+  errors_on_transmitted: number;
+  total_errors_on_transmitted: number;
+  mac_address: number[];
+}
+
 interface SysLoadAverage {
   one: number;
   five: number;

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