gilles/system_update
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
gilles soulier
2026-06-06 14:07:46 +02:00
parent 3b16fdd52a
commit 58abebf687
12 changed files with 167 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+6
View File
@@ -4,6 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>System Update</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="alternate icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="mask-icon" href="/favicon.svg" color="#fe8019" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#fe8019" />
</head>
<body>
<div id="root"></div>
client/public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

client/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

client/public/favicon.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="System Update">
<rect x="1" y="1" width="30" height="30" rx="6" fill="#2a231d" stroke="#fe8019" stroke-width="2"/>
<rect x="7" y="8" width="18" height="6" rx="1.5" fill="none" stroke="#f2e5c7" stroke-width="1.6"/>
<circle cx="10" cy="11" r="1.3" fill="#4dbb26"/>
<line x1="14" y1="11" x2="22" y2="11" stroke="#d5c4a1" stroke-width="1.4" stroke-linecap="round"/>
<rect x="7" y="18" width="18" height="6" rx="1.5" fill="none" stroke="#f2e5c7" stroke-width="1.6"/>
<circle cx="10" cy="21" r="1.3" fill="#fe8019"/>
<line x1="14" y1="21" x2="22" y2="21" stroke="#d5c4a1" stroke-width="1.4" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 737 B

client/public/site.webmanifest
+14
View File
@@ -0,0 +1,14 @@
{
"name": "System Update",
"short_name": "SysUpdate",
"description": "Dashboard de mise à jour distante de machines Linux (SSH agentless).",
"start_url": "/",
"display": "standalone",
"background_color": "#2a231d",
"theme_color": "#fe8019",
"icons": [
{ "src": "/favicon.svg", "type": "image/svg+xml", "sizes": "any", "purpose": "any" },
{ "src": "/web-app-manifest-192x192.png", "type": "image/png", "sizes": "192x192", "purpose": "any maskable" },
{ "src": "/web-app-manifest-512x512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
]
}
client/public/web-app-manifest-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

client/public/web-app-manifest-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

client/src/features/machines/AddMachineModal.tsx
+37 -1
View File
@@ -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>
client/src/features/machines/MachineTile.tsx
+56 -1
View File
@@ -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 && (
client/src/lib/api.ts
+12
View File
@@ -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;
server/routes/machines.ts
+9
View File
@@ -2,6 +2,7 @@
import { Hono } from "hono";
import {
listMachines, createMachine, deleteMachine, updateMachine, getMachineRow, getCreds, testConnection,
getMachineHardware,
type CreateMachineInput, type UpdateMachineInput,
} from "../services/machines.js";
import { refreshMachine, getLatestSnapshot } from "../services/refresh.js";
@@ -53,6 +54,14 @@ machinesRoutes.patch("/:id", async (c) => {
}
});
machinesRoutes.get("/:id/hardware", (c) => {
try {
return c.json(getMachineHardware(c.req.param("id")));
} catch (err) {
return c.json({ error: (err as Error).message }, 404);
}
});
// Sonde synchrone (lecture seule) : renvoie faits + proposition de correction.
machinesRoutes.post("/:id/probe", async (c) => {
try {
server/services/machines.ts
+24 -2
View File
@@ -17,6 +17,8 @@ export interface CreateMachineInput {
sudoPassword?: string | null;
aptProxyMode?: AptProxyMode;
aptProxyUrl?: string | null;
osFamily?: OsFamily; // choix manuel ; sinon auto-détecté via os-release
machineKind?: MachineKind;
}
type MachineRow = typeof schema.machines.$inferSelect;
@@ -118,11 +120,11 @@ export async function createMachine(input: CreateMachineInput): Promise<MachineV
name: input.name,
hostname: input.hostname,
port: input.port,
osFamily: os.family,
osFamily: input.osFamily && input.osFamily !== "unknown" ? input.osFamily : os.family, // manuel prioritaire, "unknown" => auto
osVersion: os.version || null,
osCodename: null,
arch: null,
machineKind: null,
machineKind: input.machineKind ?? null,
virtualization: null,
hardwareProfile: null,
username: input.username,
@@ -146,6 +148,26 @@ export function deleteMachine(id: string): void {
db.delete(schema.machines).where(eq(schema.machines.id, id)).run();
}
/** Faits matériels d'une machine (machine_hardware rempli par machine_probe + colonnes machines). */
export function getMachineHardware(id: string) {
const m = getMachineRow(id);
if (!m) throw new Error("Machine introuvable");
const hw = db.select().from(schema.machineHardware).where(eq(schema.machineHardware.machineId, id)).get();
const parse = <T>(j: string | null | undefined): T[] => {
try { return j ? (JSON.parse(j) as T[]) : []; } catch { return []; }
};
return {
osFamily: m.osFamily,
osVersion: m.osVersion,
arch: m.arch,
machineKind: m.machineKind,
virtualization: m.virtualization,
gpus: parse<string>(hw?.gpusJson),
network: parse<{ iface: string; addr: string }>(hw?.networkJson),
probed: !!hw,
};
}
/** Applique un proxy APT à toutes les machines. Renvoie le nombre de machines modifiées. */
export function applyProxyToAllMachines(mode: AptProxyMode, url: string | null): number {
const res = db