feat(ui): live service add/remove on fleet DeckyCard
DeckyCard grows the same per-chip × + dashed '+ ADD' affordances we
just shipped on the MazeNET Inspector. Wired to POST/DELETE
/api/v1/deckies/{name}/services{,/svc}; the response's services list
flows back through onServicesChanged to update the parent's deckies
state without a refetch.
Gated on isAdmin && !decky.swarm — swarm deckies live on a remote
agent and the W3 endpoint runs docker compose locally, same gap as
the canary planter has for agent-pinned topologies. Out of scope
here; flagged as a known limitation.
stopPropagation on the inline buttons + add-row container keeps the
card-level click (which selects the decky for inspection) from firing
on intra-row interactions.
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Cpu, Database, Globe, Monitor, Network, PlusCircle, PowerOff,
|
||||
RefreshCw, Server, Shield, Terminal,
|
||||
RefreshCw, Server, Shield, Terminal, Plus, X,
|
||||
} from '../icons';
|
||||
import api from '../utils/api';
|
||||
import { ARCHETYPES as FALLBACK_ARCHETYPES, DEFAULT_SERVICES } from './MazeNET/data';
|
||||
import { useToast } from './Toasts/useToast';
|
||||
import Modal from './Modal/Modal';
|
||||
import { useServiceRegistry } from '../hooks/useServiceRegistry';
|
||||
import './DeckyFleet.css';
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────
|
||||
@@ -130,10 +131,16 @@ interface DeckyCardProps {
|
||||
onIntervalChange: (name: string, current: number | null) => void;
|
||||
onInspect: (d: Decky) => void;
|
||||
innerRef?: React.Ref<HTMLDivElement>;
|
||||
/** Per-decky-eligible service slugs from useServiceRegistry. */
|
||||
availableServices: string[];
|
||||
/** Called after a successful live add/remove so the parent can
|
||||
* optimistically apply the response's services list. */
|
||||
onServicesChanged: (deckyName: string, services: string[]) => void;
|
||||
}
|
||||
|
||||
const DeckyCard: React.FC<DeckyCardProps> = ({
|
||||
decky, mutating, isAdmin, armed, tdBusy, onForce, onTeardown, onIntervalChange, onInspect, innerRef,
|
||||
decky, mutating, isAdmin, armed, tdBusy, onForce, onTeardown, onIntervalChange, onInspect,
|
||||
innerRef, availableServices, onServicesChanged,
|
||||
}) => {
|
||||
const dot = _dotFor(decky);
|
||||
const hits = _hitsFor(decky);
|
||||
@@ -141,6 +148,54 @@ const DeckyCard: React.FC<DeckyCardProps> = ({
|
||||
const dotClass = mutating ? 'mutating' : dot;
|
||||
const tdKey = decky.swarm ? `td:${decky.swarm.host_uuid}:${decky.name}` : '';
|
||||
|
||||
// Live service mutation is local-only (admin, non-swarm). Swarm
|
||||
// deckies live on a remote agent — the W3 path runs docker compose
|
||||
// locally and won't reach the agent's containers (same gap as the
|
||||
// canary planter has for agent-pinned topologies; out of scope here).
|
||||
const liveServicesEnabled = isAdmin && !decky.swarm;
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [addSlug, setAddSlug] = useState('');
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
const [opError, setOpError] = useState<string | null>(null);
|
||||
|
||||
const removeService = async (slug: string) => {
|
||||
setOpError(null);
|
||||
setBusy(slug);
|
||||
try {
|
||||
const { data } = await api.delete<{ services: string[] }>(
|
||||
`/deckies/${encodeURIComponent(decky.name)}/services/${encodeURIComponent(slug)}`,
|
||||
);
|
||||
onServicesChanged(decky.name, data.services);
|
||||
} catch (err) {
|
||||
const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
|
||||
?? 'Remove failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const addService = async () => {
|
||||
if (!addSlug) return;
|
||||
setOpError(null);
|
||||
setBusy(addSlug);
|
||||
try {
|
||||
const { data } = await api.post<{ services: string[] }>(
|
||||
`/deckies/${encodeURIComponent(decky.name)}/services`,
|
||||
{ name: addSlug },
|
||||
);
|
||||
onServicesChanged(decky.name, data.services);
|
||||
setAddOpen(false);
|
||||
setAddSlug('');
|
||||
} catch (err) {
|
||||
const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
|
||||
?? 'Add failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={innerRef}
|
||||
@@ -212,8 +267,78 @@ const DeckyCard: React.FC<DeckyCardProps> = ({
|
||||
<div>
|
||||
<div className="type-label" style={{ marginBottom: 6 }}>EXPOSED</div>
|
||||
<div className="decky-services">
|
||||
{decky.services.map((s) => <span key={s} className="service-tag">{s}</span>)}
|
||||
{decky.services.map((s) => (
|
||||
<span key={s} className="service-tag" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
<span>{s}</span>
|
||||
{liveServicesEnabled && (
|
||||
<button
|
||||
type="button"
|
||||
title={`Remove ${s}`}
|
||||
disabled={busy === s}
|
||||
onClick={(e) => { e.stopPropagation(); removeService(s); }}
|
||||
style={{
|
||||
background: 'transparent', border: 'none', padding: 0,
|
||||
color: 'inherit', cursor: busy === s ? 'wait' : 'pointer',
|
||||
opacity: busy === s ? 0.4 : 0.7, lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
<X size={9} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{liveServicesEnabled && !addOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="service-tag"
|
||||
onClick={(e) => { e.stopPropagation(); setAddOpen(true); setAddSlug(''); }}
|
||||
style={{ cursor: 'pointer', borderStyle: 'dashed' }}
|
||||
title="Add service (live)"
|
||||
>
|
||||
<Plus size={10} /> ADD
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{liveServicesEnabled && addOpen && (
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}
|
||||
>
|
||||
<select
|
||||
value={addSlug}
|
||||
onChange={(e) => setAddSlug(e.target.value)}
|
||||
style={{
|
||||
flex: 1, fontSize: '0.75rem', padding: '4px 6px',
|
||||
background: 'rgba(255,255,255,0.04)',
|
||||
border: '1px solid var(--border-color, #30363d)',
|
||||
color: 'var(--text-color)',
|
||||
}}
|
||||
>
|
||||
<option value="">— pick a service —</option>
|
||||
{availableServices
|
||||
.filter((s) => !decky.services.includes(s))
|
||||
.map((s) => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!addSlug || busy === addSlug}
|
||||
onClick={addService}
|
||||
className="btn violet small"
|
||||
>
|
||||
{busy === addSlug ? 'ADDING' : 'ADD'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setAddOpen(false); setAddSlug(''); }}
|
||||
className="btn small"
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{opError && (
|
||||
<div className="alert-text" style={{ fontSize: '0.7rem', marginTop: 6 }}>{opError}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="decky-footer">
|
||||
@@ -744,6 +869,7 @@ interface FleetProps {
|
||||
|
||||
const DeckyFleet: React.FC<FleetProps> = ({ searchQuery = '' }) => {
|
||||
const { push } = useToast();
|
||||
const serviceRegistry = useServiceRegistry();
|
||||
const [deckies, setDeckies] = useState<Decky[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mutating, setMutating] = useState<string | null>(null);
|
||||
@@ -1083,6 +1209,12 @@ const DeckyFleet: React.FC<FleetProps> = ({ searchQuery = '' }) => {
|
||||
if (el) cardRefs.current.set(d.name, el);
|
||||
else cardRefs.current.delete(d.name);
|
||||
}}
|
||||
availableServices={serviceRegistry.perDecky}
|
||||
onServicesChanged={(name, services) => {
|
||||
setDeckies((prev) => prev.map((row) =>
|
||||
row.name === name ? { ...row, services } : row,
|
||||
));
|
||||
}}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user