Build basic sysinfo page

virtweb_frontend/src/api/ServerApi.ts

@@ -30,7 +30,7 @@ interface HypervisorInfo {
     number_of_numa_cell: number;
     number_of_cpu_socket_per_node: number;
     number_of_core_per_sockets: number;
-    number_of_threads_per_sockets: number;
+    number_of_threads_per_core: number;
   };
 }
 

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -1,6 +1,21 @@
+import { mdiInformation, mdiMemory, mdiPackageVariantClosed } from "@mdi/js";
+import Icon from "@mdi/react";
+import {
+  Box,
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { PieChart } from "@mui/x-charts";
 import React from "react";
 import { 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";
 
 export function SysInfoRoute(): React.ReactElement {
   const [info, setInfo] = React.useState<ServerSystemInfo>();
@@ -22,5 +37,210 @@ export function SysInfoRoute(): React.ReactElement {
 export function SysInfoRouteInner(p: {
   info: ServerSystemInfo;
 }): React.ReactElement {
-  return <>todo</>;
+  const sumDiskUsage = p.info.system.disks.reduce(
+    (prev, disk) => {
+      return {
+        used: prev.used + disk.total_space - disk.available_space,
+        free: prev.free + disk.available_space,
+      };
+    },
+    { used: 0, free: 0 }
+  );
+
+  return (
+    <VirtWebRouteContainer label="Sysinfo">
+      <Grid container spacing={2}>
+        {/* Memory */}
+        <Grid xs={4}>
+          <Box flexGrow={1}>
+            <Typography style={{ textAlign: "center" }}>Memory</Typography>
+            <PieChart
+              series={[
+                {
+                  data: [
+                    {
+                      id: 3,
+                      value: p.info.system.free_memory,
+                      label: "Free",
+                    },
+                    {
+                      id: 2,
+                      value: p.info.system.available_memory,
+                      label: "Available",
+                    },
+                    {
+                      id: 1,
+                      value: p.info.system.used_memory,
+                      label: "Used",
+                    },
+                  ],
+                },
+              ]}
+              width={400}
+              height={200}
+            />
+          </Box>
+        </Grid>
+
+        {/* Disk usage */}
+        <Grid xs={4}>
+          <Box flexGrow={1}>
+            <Typography style={{ textAlign: "center" }}>Disk usage</Typography>
+            <PieChart
+              series={[
+                {
+                  data: [
+                    {
+                      id: 1,
+                      value: sumDiskUsage.free,
+                      label: "Free",
+                    },
+
+                    {
+                      id: 2,
+                      value: sumDiskUsage.used,
+                      label: "Used",
+                    },
+                  ],
+                },
+              ]}
+              width={400}
+              height={200}
+            />
+          </Box>
+        </Grid>
+
+        {/* CPU usage */}
+        <Grid xs={4}>
+          <Box flexGrow={1}>
+            <Typography style={{ textAlign: "center" }}>CPU usage</Typography>
+            <PieChart
+              series={[
+                {
+                  data: [
+                    {
+                      id: 1,
+                      value: 100 - p.info.system.global_cpu_info.cpu_usage,
+                      label: "Free",
+                    },
+
+                    {
+                      id: 2,
+                      value: p.info.system.global_cpu_info.cpu_usage,
+                      label: "Used",
+                    },
+                  ],
+                },
+              ]}
+              width={400}
+              height={200}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+
+      <SysInfoDetailsTable
+        label="General"
+        icon={<Icon size={"1rem"} path={mdiInformation} />}
+        entries={[
+          {
+            label: "Load",
+            value: `${p.info.system.load_average.one} ${p.info.system.load_average.five} ${p.info.system.load_average.fifteen}`,
+          },
+          {
+            label: "Uptime",
+            value: humanizeDuration(p.info.system.uptime * 1000),
+          },
+          {
+            label: "Bootime",
+            value: new Date(p.info.system.boot_time * 1000).toString(),
+          },
+          {
+            label: "Hypvervisor type",
+            value: p.info.hypervisor.type,
+          },
+        ]}
+      />
+
+      <SysInfoDetailsTable
+        label="CPU info"
+        icon={<Icon size={"1rem"} path={mdiMemory} />}
+        entries={[
+          { label: "Brand", value: p.info.system.global_cpu_info.brand },
+          {
+            label: "Vendor ID",
+            value: p.info.system.global_cpu_info.vendor_id,
+          },
+          {
+            label: "CPU usage",
+            value: p.info.system.global_cpu_info.cpu_usage,
+          },
+          {
+            label: "Name",
+            value: p.info.system.global_cpu_info.name,
+          },
+          {
+            label: "CPU model",
+            value: p.info.hypervisor.node.cpu_model,
+          },
+          {
+            label: "CPU frequency (MHz)",
+            value: p.info.hypervisor.node.cpu_frequency_mhz,
+          },
+          {
+            label: "Number of socket",
+            value: p.info.hypervisor.node.number_of_cpu_socket_per_node,
+          },
+          {
+            label: "Number of cores per socket",
+            value: p.info.hypervisor.node.number_of_core_per_sockets,
+          },
+          {
+            label: "Number of threads per core",
+            value: p.info.hypervisor.node.number_of_threads_per_core,
+          },
+        ]}
+      />
+
+      <SysInfoDetailsTable
+        label="OS info"
+        icon={<Icon size={"1rem"} path={mdiPackageVariantClosed} />}
+        entries={[
+          { label: "Name", value: p.info.system.name },
+          { label: "Host name", value: p.info.system.host_name },
+          { label: "Long OS version", value: p.info.system.long_os_version },
+          { label: "Kernel version", value: p.info.system.kernel_version },
+        ]}
+      />
+    </VirtWebRouteContainer>
+  );
+}
+
+function SysInfoDetailsTable(p: {
+  label: string;
+  icon: React.ReactElement;
+  entries: Array<{ label: string; value: string | number }>;
+}): React.ReactElement {
+  return (
+    <VirtWebPaper
+      label={
+        <>
+          {p.icon} {p.label}
+        </>
+      }
+    >
+      <Table>
+        <TableBody>
+          {p.entries.map((e, c) => (
+            <TableRow hover key={c}>
+              <TableCell style={{ padding: 5, fontWeight: "bold" }}>
+                {e.label}
+              </TableCell>
+              <TableCell style={{ padding: 5 }}>{e.value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </VirtWebPaper>
+  );
 }

virtweb_frontend/src/widgets/VirtWebPaper.tsx

@@ -1,8 +1,8 @@
 import { Paper, Typography } from "@mui/material";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 export function VirtWebPaper(
-  p: { label: string } & PropsWithChildren
+  p: { label: string | React.ReactElement } & PropsWithChildren
 ): React.ReactElement {
   return (
     <Paper elevation={2} style={{ padding: "10px", margin: "20px" }}>