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:
parent
b74cf3d75f
commit
3781fce1e2
8 changed files with 1019 additions and 2 deletions
|
|
@ -3,6 +3,9 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { type Container, parseDockerPs } from '@/lib/parse-docker'
|
||||
import { useFlowRun } from '@/hooks/useFlowRun'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog'
|
||||
import StreamingTerminal from '@/components/StreamingTerminal'
|
||||
|
||||
async function fetchContainers(): Promise<Container[]> {
|
||||
const res = await fetch('/api/agent/exec', {
|
||||
|
|
@ -68,6 +71,13 @@ function statusBadge(status: string) {
|
|||
)
|
||||
}
|
||||
|
||||
type ActionDef = {
|
||||
commandKey: string
|
||||
args: string[]
|
||||
preview: string
|
||||
title: string
|
||||
}
|
||||
|
||||
type Props = {
|
||||
initialContainers: Container[]
|
||||
initialError: string | null
|
||||
|
|
@ -78,6 +88,8 @@ export default function DockerTable({ initialContainers, initialError }: Props)
|
|||
const [error, setError] = useState<string | null>(initialError)
|
||||
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)
|
||||
|
|
@ -98,6 +110,12 @@ export default function DockerTable({ initialContainers, initialError }: 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">
|
||||
|
|
@ -129,12 +147,13 @@ export default function DockerTable({ initialContainers, initialError }: Props)
|
|||
<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">Ports</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>
|
||||
{containers.length === 0 && !error ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
|
||||
No containers running
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -158,12 +177,69 @@ export default function DockerTable({ initialContainers, initialError }: Props)
|
|||
{c.ports || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground">{c.created}</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
setPendingAction({
|
||||
commandKey: 'docker_compose_restart',
|
||||
args: [c.name],
|
||||
preview: `docker compose restart ${c.name}`,
|
||||
title: `Restart ${c.name}`,
|
||||
})
|
||||
}
|
||||
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>
|
||||
<button
|
||||
onClick={() =>
|
||||
setPendingAction({
|
||||
commandKey: 'docker_compose_stop',
|
||||
args: [c.name],
|
||||
preview: `docker compose stop ${c.name}`,
|
||||
title: `Stop ${c.name}`,
|
||||
})
|
||||
}
|
||||
disabled={flowRun.status === 'running'}
|
||||
className="rounded-md border border-destructive/30 px-2 py-1 text-xs text-destructive hover:bg-destructive/10 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue