feat(ui): ajout machine OS/type, section Hardware, identité app (tâche 3)

- AddMachineModal : sélecteurs OS + Type machine ; createMachine accepte
  osFamily/machineKind (manuel prioritaire, "Autre/auto" → détection os-release)
- section Hardware sur la tuile + panneau détail : os/type/virt/arch/gpu/réseau
  depuis machine_hardware (sonde) via GET /machines/:id/hardware
- identité : favicon.svg (serveur + LED Gruvbox), favicon.ico, apple-touch-icon,
  PWA 192/512, site.webmanifest ; liens + theme-color dans index.html

tsc 0 · 104 tests · build OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-06 14:07:46 +02:00
parent 3b16fdd52a
commit 58abebf687
12 changed files with 167 additions and 4 deletions
@@ -1,12 +1,33 @@
// client/src/features/machines/AddMachineModal.tsx
import { useEffect, useState } from "react";
import type { AptProxyMode, MachineKind, OsFamily } from "@shared/types.js";
import type { DefaultAptProxy } from "../../lib/api.js";
import { api } from "../../lib/api.js";
interface Props { onClose: () => void; onCreated: () => void; }
const OS_OPTIONS: { value: OsFamily; label: string }[] = [
{ value: "debian", label: "Debian" },
{ value: "ubuntu", label: "Ubuntu" },
{ value: "proxmox", label: "Proxmox VE" },
{ value: "raspbian", label: "Raspberry Pi OS" },
{ value: "unknown", label: "Autre / auto" },
];
const KIND_OPTIONS: { value: MachineKind; label: string }[] = [
{ value: "vm", label: "VM" },
{ value: "physical", label: "Physique" },
{ value: "proxmox_host", label: "Hôte Proxmox" },
{ value: "lxc", label: "LXC / conteneur" },
{ value: "raspberry_pi", label: "Raspberry Pi" },
{ value: "workstation", label: "Workstation / GPU" },
{ value: "unknown", label: "Inconnu" },
];
export function AddMachineModal({ onClose, onCreated }: Props) {
const [form, setForm] = useState({ name: "", hostname: "", port: 22, username: "", password: "", sudoPassword: "" });
const [form, setForm] = useState({
name: "", hostname: "", port: 22, username: "", password: "", sudoPassword: "",
osFamily: "debian" as OsFamily, machineKind: "vm" as MachineKind,
});
const [error, setError] = useState<string | null>(null);
const [busy, setBusy] = useState(false);
const [proxyDefault, setProxyDefault] = useState<DefaultAptProxy | null>(null);
@@ -46,6 +67,18 @@ export function AddMachineModal({ onClose, onCreated }: Props) {
<input key={k} placeholder={k} value={form[k]} onChange={(e) => set(k, e.target.value)} />
))}
<input placeholder="port" type="number" value={form.port} onChange={(e) => set("port", e.target.value)} />
<label style={{ display: "grid", gap: 4 }}>
<span className="label">OS</span>
<select value={form.osFamily} onChange={(e) => setForm({ ...form, osFamily: e.target.value as OsFamily })}>
{OS_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
</select>
</label>
<label style={{ display: "grid", gap: 4 }}>
<span className="label">Type machine</span>
<select value={form.machineKind} onChange={(e) => setForm({ ...form, machineKind: e.target.value as MachineKind })}>
{KIND_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
</select>
</label>
<input placeholder="password" type="password" value={form.password} onChange={(e) => set("password", e.target.value)} />
<input placeholder="sudo password (optionnel)" type="password" value={form.sudoPassword} onChange={(e) => set("sudoPassword", e.target.value)} />
{proxyDefault?.url && (
@@ -54,6 +87,9 @@ export function AddMachineModal({ onClose, onCreated }: Props) {
<span>Proxy APT par défaut <span className="mono">{proxyDefault.url}</span></span>
</label>
)}
<div style={{ fontSize: 11, color: "var(--ink-3)" }}>
« Autre / auto » détecte l'OS via os-release. Détection complète (type, virt) ensuite via Sonder.
</div>
{error && <div style={{ color: "var(--err)", fontSize: 12 }}>{error}</div>}
<div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
<button onClick={onClose}>Annuler</button>