feat(ui): add action buttons to Docker, Git, systemd, and Caddy modules

- Docker table: Restart and Stop buttons per container row (docker_compose_restart / docker_compose_stop)
- Git repos list: Fetch and Pull buttons per repo; Pull disabled when working tree is dirty
- systemd units list: Restart button per unit (systemctl_restart)
- Caddy: Edit link on /caddy page, new /caddy/edit page with textarea + 3-step Validate → Save+Reload flow
- All buttons open ConfirmDialog with exact agent-call preview, then stream output via StreamingTerminal
- Add docker_compose_stop to ops-agent/commands.yml.example

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-13 19:14:49 +02:00
parent b74cf3d75f
commit 3781fce1e2
8 changed files with 1019 additions and 2 deletions

View file

@ -3,6 +3,9 @@
import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { parseSystemctlStatus, type UnitStatus, type ActiveState } from '@/lib/parse-systemd'
import { useFlowRun } from '@/hooks/useFlowRun'
import ConfirmDialog from '@/components/ConfirmDialog'
import StreamingTerminal from '@/components/StreamingTerminal'
interface UnitEntry {
unit: string
@ -84,6 +87,13 @@ function StatusBadge({ status }: { status: UnitStatus }) {
)
}
type ActionDef = {
commandKey: string
args: string[]
preview: string
title: string
}
type Props = {
initialUnits: UnitEntry[]
}
@ -92,6 +102,8 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
const [units, setUnits] = useState<UnitEntry[]>(initialUnits)
const [refreshing, setRefreshing] = useState(false)
const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
const [pendingAction, setPendingAction] = useState<ActionDef | null>(null)
const flowRun = useFlowRun()
const refresh = useCallback(async () => {
setRefreshing(true)
@ -118,6 +130,12 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
return () => clearInterval(id)
}, [refresh])
const handleConfirm = useCallback(() => {
if (!pendingAction) return
flowRun.start(pendingAction.commandKey, pendingAction.args)
setPendingAction(null)
}, [pendingAction, flowRun.start])
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
@ -142,6 +160,7 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Description</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
</tr>
</thead>
<tbody>
@ -173,11 +192,52 @@ export default function SystemdUnitsList({ initialUnits }: Props) {
<td className="px-4 py-3 text-xs text-muted-foreground">
{entry.status?.uptime || '—'}
</td>
<td className="px-4 py-3">
<button
onClick={() =>
setPendingAction({
commandKey: 'systemctl_restart',
args: [entry.unit],
preview: `sudo /usr/bin/systemctl restart ${entry.unit}`,
title: `Restart ${entry.unit}`,
})
}
disabled={flowRun.status === 'running'}
className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
>
Restart
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
{flowRun.status !== 'idle' && (
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground">Output</span>
{flowRun.status !== 'running' && (
<button
onClick={flowRun.reset}
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
>
Close
</button>
)}
</div>
<StreamingTerminal lines={flowRun.lines} status={flowRun.status} error={flowRun.error} />
</div>
)}
<ConfirmDialog
open={pendingAction !== null}
title={pendingAction?.title ?? ''}
commandPreview={pendingAction?.preview ?? ''}
onConfirm={handleConfirm}
onCancel={() => setPendingAction(null)}
/>
</div>
)
}