91 lines
4.7 KiB
JavaScript
91 lines
4.7 KiB
JavaScript
import StatusBadge from './StatusBadge';
|
|
|
|
/**
|
|
* @param {{ vms: Array<{ vmid: number; name: string; type: string; status: string; cpu: number; memory: { total: number; used: number }; disk: { total: number; used: number }; node: string }> }} props
|
|
* @returns {import('react').ReactNode}
|
|
*/
|
|
export default function VMList({ vms }) {
|
|
if (!vms?.length) {
|
|
return <p className="text-text-secondary text-sm">No VMs found.</p>;
|
|
}
|
|
|
|
const running = vms.filter((vm) => vm.status === 'running');
|
|
const stopped = vms.filter((vm) => vm.status !== 'running');
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{running.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-status-green">Running ({running.length})</h4>
|
|
<div className="overflow-x-auto rounded-xl border border-border-card bg-bg-card">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border-card">
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">VMID</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Name</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Node</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">CPU</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Memory</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{running.map((vm) => (
|
|
<tr key={vm.vmid} className="border-b border-border-card last:border-0">
|
|
<td className="px-4 py-2 text-text-secondary">{vm.vmid}</td>
|
|
<td className="px-4 py-2 font-medium text-text-primary">{vm.name}</td>
|
|
<td className="px-4 py-2 text-text-secondary">{vm.node}</td>
|
|
<td className="px-4 py-2 text-text-secondary">{(vm.cpu * 100).toFixed(1)}%</td>
|
|
<td className="px-4 py-2 text-text-secondary">{formatBytes(vm.memory?.used || 0)} / {formatBytes(vm.memory?.total || 0)}</td>
|
|
<td className="px-4 py-2"><StatusBadge status={vm.status} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{stopped.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-status-red">Stopped ({stopped.length})</h4>
|
|
<div className="overflow-x-auto rounded-xl border border-border-card bg-bg-card">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border-card">
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">VMID</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Name</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Node</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Disk</th>
|
|
<th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wider text-text-secondary">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{stopped.map((vm) => (
|
|
<tr key={vm.vmid} className="border-b border-border-card last:border-0">
|
|
<td className="px-4 py-2 text-text-secondary">{vm.vmid}</td>
|
|
<td className="px-4 py-2 font-medium text-text-primary">{vm.name}</td>
|
|
<td className="px-4 py-2 text-text-secondary">{vm.node}</td>
|
|
<td className="px-4 py-2 text-text-secondary">{formatBytes(vm.disk?.used || 0)}</td>
|
|
<td className="px-4 py-2"><StatusBadge status={vm.status} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** @param {number} bytes @returns {string} */
|
|
function formatBytes(bytes) {
|
|
if (!bytes) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
let i = 0;
|
|
let v = bytes;
|
|
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
|
|
return `${v.toFixed(1)} ${units[i]}`;
|
|
}
|