pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases 5 Wiki Activity

Build basic sysinfo page

Browse Source
This commit is contained in:
Pierre HUBERT
2023-09-08 12:23:15 +02:00
parent f14e8a8e58
commit dac50600e3
6 changed files with 471 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
virtweb_frontend/src/api/ServerApi.ts
View File

@ -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;
};
}

222
virtweb_frontend/src/routes/SysInfoRoute.tsx
View File

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

4
virtweb_frontend/src/widgets/VirtWebPaper.tsx
View File

@ -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" }}>