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:
@@ -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>
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
api,
|
||||
type DockerSettingsView,
|
||||
type DockerStackRow,
|
||||
type MachineHardwareView,
|
||||
type ProbeResultView,
|
||||
type ProfileManifestView,
|
||||
type ProfileValues,
|
||||
@@ -49,8 +50,9 @@ export function MachineTile({
|
||||
}: Props) {
|
||||
const [dockerOpen, setDockerOpen] = useState(false);
|
||||
const [postOpen, setPostOpen] = useState(false);
|
||||
const [hwOpen, setHwOpen] = useState(false);
|
||||
const [configOpen, setConfigOpen] = useState(false);
|
||||
const expanded = dockerOpen || postOpen;
|
||||
const expanded = dockerOpen || postOpen || hwOpen;
|
||||
const isError = machine.status === "error" || machine.status === "unknown";
|
||||
|
||||
return (
|
||||
@@ -154,6 +156,14 @@ export function MachineTile({
|
||||
onToggle={() => setPostOpen((value) => !value)}
|
||||
/>
|
||||
{postOpen && <PostInstallSection machine={machine} onSelect={onSelect} />}
|
||||
|
||||
<SectionToggle
|
||||
icon="cpu"
|
||||
title="Hardware"
|
||||
open={hwOpen}
|
||||
onToggle={() => setHwOpen((value) => !value)}
|
||||
/>
|
||||
{hwOpen && <HardwareSection machineId={machine.id} />}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
@@ -776,6 +786,48 @@ function PostInstallSection({ machine, onSelect }: { machine: MachineView; onSel
|
||||
);
|
||||
}
|
||||
|
||||
function HardwareSection({ machineId }: { machineId: string }) {
|
||||
const [hw, setHw] = useState<MachineHardwareView | null>(null);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
void (async () => {
|
||||
try {
|
||||
setHw(await api.machineHardware(machineId));
|
||||
} catch (e) {
|
||||
setErr((e as Error).message);
|
||||
}
|
||||
})();
|
||||
}, [machineId]);
|
||||
|
||||
if (err) return <div className="machine-section-body"><span className="docker-msg docker-msg-err">{err}</span></div>;
|
||||
if (!hw) return <div className="machine-section-body"><span className="machine-placeholder">Chargement…</span></div>;
|
||||
|
||||
return (
|
||||
<div className="machine-section-body">
|
||||
<div className="machine-detail-card">
|
||||
<InfoRow k="OS" v={`${hw.osFamily}${hw.osVersion ? ` ${hw.osVersion}` : ""}`} />
|
||||
<InfoRow k="Type" v={hw.machineKind ?? "—"} />
|
||||
<InfoRow k="Virtualisation" v={hw.virtualization ?? "—"} />
|
||||
<InfoRow k="Architecture" v={hw.arch ?? "—"} mono />
|
||||
<InfoRow k="GPU" v={hw.gpus.length ? `${hw.gpus.length} détecté(s)` : "aucun"} />
|
||||
</div>
|
||||
{hw.gpus.length > 0 && (
|
||||
<div className="machine-detail-card">
|
||||
<span className="label">GPU</span>
|
||||
{hw.gpus.map((g, i) => <span key={i} className="mono pi-desc">{g}</span>)}
|
||||
</div>
|
||||
)}
|
||||
{hw.network.length > 0 && (
|
||||
<div className="machine-detail-card">
|
||||
<span className="label">Réseau</span>
|
||||
{hw.network.map((n, i) => <InfoRow key={i} k={n.iface} v={n.addr} mono />)}
|
||||
</div>
|
||||
)}
|
||||
{!hw.probed && <span className="machine-placeholder">Données limitées — lance ⚙ Sonder pour détecter GPU/réseau.</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileFieldInput({
|
||||
field,
|
||||
value,
|
||||
@@ -888,6 +940,7 @@ export function MachineDetailPanel({
|
||||
// Mode liste : sections dépliées par défaut (inverse du mode tuile).
|
||||
const [dockerOpen, setDockerOpen] = useState(true);
|
||||
const [postOpen, setPostOpen] = useState(true);
|
||||
const [hwOpen, setHwOpen] = useState(true);
|
||||
const [configOpen, setConfigOpen] = useState(false);
|
||||
const isError = machine.status === "error" || machine.status === "unknown";
|
||||
|
||||
@@ -936,6 +989,8 @@ export function MachineDetailPanel({
|
||||
{dockerOpen && <DockerSection machineId={machine.id} onSelect={onSelect} />}
|
||||
<SectionToggle icon="script" title="Post-install" open={postOpen} onToggle={() => setPostOpen((v) => !v)} />
|
||||
{postOpen && <PostInstallSection machine={machine} onSelect={onSelect} />}
|
||||
<SectionToggle icon="cpu" title="Hardware" open={hwOpen} onToggle={() => setHwOpen((v) => !v)} />
|
||||
{hwOpen && <HardwareSection machineId={machine.id} />}
|
||||
</div>
|
||||
|
||||
{configOpen && (
|
||||
|
||||
@@ -59,6 +59,7 @@ export const api = {
|
||||
updateMachine: (id: string, body: UpdateMachineBody) =>
|
||||
req<MachineView>(`/machines/${id}`, { method: "PATCH", body: JSON.stringify(body) }),
|
||||
probe: (id: string) => req<ProbeResultView>(`/machines/${id}/probe`, { method: "POST" }),
|
||||
machineHardware: (id: string) => req<MachineHardwareView>(`/machines/${id}/hardware`),
|
||||
|
||||
// --- Docker ---
|
||||
dockerSettings: (id: string) => req<DockerSettingsView>(`/machines/${id}/docker/settings`),
|
||||
@@ -182,6 +183,17 @@ export interface UpdateMachineBody {
|
||||
aptProxyUrl?: string | null;
|
||||
}
|
||||
|
||||
export interface MachineHardwareView {
|
||||
osFamily: string;
|
||||
osVersion: string | null;
|
||||
arch: string | null;
|
||||
machineKind: string | null;
|
||||
virtualization: string | null;
|
||||
gpus: string[];
|
||||
network: { iface: string; addr: string }[];
|
||||
probed: boolean;
|
||||
}
|
||||
|
||||
export interface ProbeResultView {
|
||||
probe: {
|
||||
osId: string | null;
|
||||
|
||||
Reference in New Issue
Block a user