40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
// client/src/features/machines/MachineTile.tsx
|
|
import type { MachineView } from "@shared/types.js";
|
|
|
|
interface Props {
|
|
machine: MachineView;
|
|
packageCount: number;
|
|
onSelect: (id: string) => void;
|
|
onRefresh: (id: string) => void;
|
|
onUpgrade: (id: string) => void;
|
|
onReboot: (id: string) => void;
|
|
}
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
ok: "var(--ok)", updates_available: "var(--warn)", error: "var(--err)",
|
|
running: "var(--info)", unknown: "var(--ink-4)",
|
|
};
|
|
|
|
export function MachineTile({ machine, packageCount, onSelect, onRefresh, onUpgrade, onReboot }: Props) {
|
|
return (
|
|
<div className="glass" style={{ padding: 16, borderRadius: 10 }} onClick={() => onSelect(machine.id)}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
<span style={{ width: 10, height: 10, borderRadius: 999, background: STATUS_COLOR[machine.status] }} />
|
|
<strong>{machine.name}</strong>
|
|
</div>
|
|
<div className="mono" style={{ color: "var(--ink-3)", fontSize: 12 }}>
|
|
{machine.hostname}:{machine.port} · {machine.osFamily}
|
|
</div>
|
|
<div style={{ margin: "10px 0", fontSize: 13 }}>
|
|
<span className="label">UPDATES</span>{" "}
|
|
<span className="mono">{packageCount}</span>
|
|
</div>
|
|
<div style={{ display: "flex", gap: 6, flexWrap: "wrap" }} onClick={(e) => e.stopPropagation()}>
|
|
<button className="interactive" onClick={() => onRefresh(machine.id)}>Refresh</button>
|
|
<button className="interactive" onClick={() => onUpgrade(machine.id)}>Upgrade</button>
|
|
<button className="interactive" onClick={() => onReboot(machine.id)}>Reboot</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|