Paul Payne
f422c1879d
Rework the dashboard around convergence:
- ServiceControls / ServiceCard / JobCard: replace start/restart/stop
with a Power toggle (set enabled → apply, i.e. activate/deactivate)
plus Restart (the one imperative bounce).
- ToolDetail: install/uninstall becomes an Enable/Disable toggle;
`installed` stays the live state, `enabled` the desired one.
- ConfigPanel Apply and CreateDeploymentForm now POST /apply (one
converge that renders + restarts only what changed) instead of
/deploy + a separate start/restart.
- New ConvergePanel on Overview: a terraform-style Preview (POST /apply
plan=true) showing would-activate/restart/deactivate, then Apply.
- useApply + useSetEnabled hooks; `enabled` added to Service/Job/
Deployment types; both handle the self-restart connection drop.
Backend: PUT /config/deployments/{name}/enabled sets desired on/off
(edit config; caller runs apply) — the declarative toggle the UI uses.
Dashboard builds clean (tsc + vite); 59 API tests pass; live /apply and
/services?enabled verified after an api restart.
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Power, RefreshCw } from "lucide-react"
|
|
import { useServiceAction, useSetEnabled } from "@/services/api/hooks"
|
|
|
|
interface ServiceControlsProps {
|
|
name: string
|
|
enabled: boolean
|
|
}
|
|
|
|
// Lifecycle is convergence: the Power toggle sets desired on/off state and applies
|
|
// (activate/deactivate); Restart is the one imperative bounce. No raw start/stop.
|
|
export function ServiceControls({ name, enabled }: ServiceControlsProps) {
|
|
const restart = useServiceAction()
|
|
const setEnabled = useSetEnabled()
|
|
const busy = restart.isPending || setEnabled.isPending
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => setEnabled.mutate({ name, enabled: !enabled })}
|
|
disabled={busy}
|
|
className={`p-1.5 rounded transition-colors disabled:opacity-40 ${
|
|
enabled
|
|
? "hover:bg-red-800/30 text-red-400"
|
|
: "hover:bg-green-800/30 text-green-400"
|
|
}`}
|
|
title={enabled ? "Disable (stop & keep off)" : "Enable (start)"}
|
|
>
|
|
<Power size={16} />
|
|
</button>
|
|
{enabled && (
|
|
<button
|
|
onClick={() => restart.mutate({ name, action: "restart" })}
|
|
disabled={busy}
|
|
className="p-1.5 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
|
|
title="Restart"
|
|
>
|
|
<RefreshCw size={16} className={restart.isPending ? "animate-spin" : ""} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|