fix(cluster-health): storage items multiply (#3206)

This commit is contained in:
Meier Lukas
2025-05-30 20:52:51 +02:00
committed by GitHub
parent c8202ab3c6
commit 11149348fc
3 changed files with 38 additions and 28 deletions

View File

@@ -69,6 +69,7 @@ const mapResource = (resource: Proxmox.clusterResourcesResources): Resource | nu
const mapComputeResource = (resource: Proxmox.clusterResourcesResources): Omit<ComputeResourceBase<string>, "type"> => { const mapComputeResource = (resource: Proxmox.clusterResourcesResources): Omit<ComputeResourceBase<string>, "type"> => {
return { return {
id: resource.id,
cpu: { cpu: {
utilization: resource.cpu ?? 0, utilization: resource.cpu ?? 0,
cores: resource.maxcpu ?? 0, cores: resource.maxcpu ?? 0,
@@ -114,6 +115,7 @@ const mapVmResource = (resource: Proxmox.clusterResourcesResources): LxcResource
const mapStorageResource = (resource: Proxmox.clusterResourcesResources): StorageResource => { const mapStorageResource = (resource: Proxmox.clusterResourcesResources): StorageResource => {
return { return {
id: resource.id,
type: "storage", type: "storage",
name: resource.storage ?? "", name: resource.storage ?? "",
node: resource.node ?? "", node: resource.node ?? "",

View File

@@ -7,6 +7,7 @@ interface ResourceBase<TType extends string> {
} }
export interface ComputeResourceBase<TType extends string> extends ResourceBase<TType> { export interface ComputeResourceBase<TType extends string> extends ResourceBase<TType> {
id: string;
cpu: { cpu: {
utilization: number; // previously cpu (0-1) utilization: number; // previously cpu (0-1)
cores: number; // previously cpuCores cores: number; // previously cpuCores
@@ -40,6 +41,7 @@ export interface QemuResource extends ComputeResourceBase<"qemu"> {
} }
export interface StorageResource extends ResourceBase<"storage"> { export interface StorageResource extends ResourceBase<"storage"> {
id: string;
storagePlugin: string; storagePlugin: string;
used: number; // previously disk used: number; // previously disk
total: number; // previously maxDisk total: number; // previously maxDisk

View File

@@ -38,34 +38,40 @@ export const ResourceTable = ({ type, data, isTiny }: ResourceTableProps) => {
</TableTr> </TableTr>
</TableThead> </TableThead>
<TableTbody> <TableTbody>
{data.map((item) => { {data
return ( .sort((itemA, itemB) => {
<ResourcePopover key={item.name} item={item}> const nodeResult = itemA.node.localeCompare(itemB.node);
<Popover.Target> if (nodeResult !== 0) return nodeResult;
<TableTr fz={isTiny ? "8px" : "xs"}> return itemA.name.localeCompare(itemB.name);
<td> })
<Group wrap="nowrap" gap={isTiny ? 8 : "xs"}> .map((item) => {
<Indicator size={isTiny ? 4 : 8} children={null} color={item.isRunning ? "green" : "yellow"} /> return (
<Text lineClamp={1} fz={isTiny ? "8px" : "xs"}> <ResourcePopover key={item.id} item={item}>
{item.name} <Popover.Target>
</Text> <TableTr fz={isTiny ? "8px" : "xs"}>
</Group> <td>
</td> <Group wrap="nowrap" gap={isTiny ? 8 : "xs"}>
{item.type === "storage" ? ( <Indicator size={isTiny ? 4 : 8} children={null} color={item.isRunning ? "green" : "yellow"} />
<td style={{ WebkitLineClamp: "1" }}>{item.node}</td> <Text lineClamp={1} fz={isTiny ? "8px" : "xs"}>
) : ( {item.name}
<> </Text>
<td style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</td> </Group>
<td style={{ whiteSpace: "nowrap" }}> </td>
{(item.memory.total ? (item.memory.used / item.memory.total) * 100 : 0).toFixed(1)}% {item.type === "storage" ? (
</td> <td style={{ WebkitLineClamp: "1" }}>{item.node}</td>
</> ) : (
)} <>
</TableTr> <td style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</td>
</Popover.Target> <td style={{ whiteSpace: "nowrap" }}>
</ResourcePopover> {(item.memory.total ? (item.memory.used / item.memory.total) * 100 : 0).toFixed(1)}%
); </td>
})} </>
)}
</TableTr>
</Popover.Target>
</ResourcePopover>
);
})}
</TableTbody> </TableTbody>
</Table> </Table>
); );