feat(docker): agent-client helper, Docker container list page
- lib/agent-client.ts: server-side execAgent() that calls the ops-agent directly via OPS_AGENT_URL/OPS_AGENT_SECRET and streams SSE output - lib/parse-docker.ts: pure parser for fixed-width docker ps table output - app/docker/page.tsx: server component that fetches initial container list and passes it to the client component - app/docker/_components/docker-table.tsx: client component with 5s auto-refresh via useEffect, status badge, and Link to /docker/[name] - app/docker/[name]/page.tsx: placeholder detail page (logs in Story 3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent
parent
92d450609c
commit
90eacc963d
5 changed files with 335 additions and 0 deletions
34
app/docker/[name]/page.tsx
Normal file
34
app/docker/[name]/page.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { getCurrentUser } from '@/lib/session'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ name: string }>
|
||||
}
|
||||
|
||||
export default async function DockerDetailPage({ params }: Props) {
|
||||
const user = await getCurrentUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
const { name } = await params
|
||||
const containerName = decodeURIComponent(name)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/docker" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
← Containers
|
||||
</Link>
|
||||
<span className="text-muted-foreground">/</span>
|
||||
<h1 className="text-2xl font-semibold tracking-tight font-mono">{containerName}</h1>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">
|
||||
Log viewer coming in Story 3.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
169
app/docker/_components/docker-table.tsx
Normal file
169
app/docker/_components/docker-table.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { type Container, parseDockerPs } from '@/lib/parse-docker'
|
||||
|
||||
async function fetchContainers(): Promise<Container[]> {
|
||||
const res = await fetch('/api/agent/exec', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ command_key: 'docker_ps' }),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text()
|
||||
throw new Error(`agent ${res.status}: ${text}`)
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) throw new Error('no response body')
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
let output = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() ?? ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data:')) {
|
||||
try {
|
||||
const parsed = JSON.parse(line.slice(5).trim()) as { data?: string }
|
||||
if (parsed.data !== undefined) output += parsed.data
|
||||
} catch {
|
||||
// ignore malformed
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return parseDockerPs(output)
|
||||
}
|
||||
|
||||
function statusBadge(status: string) {
|
||||
const up = status.toLowerCase().startsWith('up')
|
||||
return (
|
||||
<span
|
||||
className={
|
||||
'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ' +
|
||||
(up
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400')
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
'size-1.5 rounded-full ' +
|
||||
(up ? 'bg-green-500 dark:bg-green-400' : 'bg-zinc-400 dark:bg-zinc-500')
|
||||
}
|
||||
/>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
type Props = {
|
||||
initialContainers: Container[]
|
||||
initialError: string | null
|
||||
}
|
||||
|
||||
export default function DockerTable({ initialContainers, initialError }: Props) {
|
||||
const [containers, setContainers] = useState<Container[]>(initialContainers)
|
||||
const [error, setError] = useState<string | null>(initialError)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setRefreshing(true)
|
||||
try {
|
||||
const data = await fetchContainers()
|
||||
setContainers(data)
|
||||
setError(null)
|
||||
setLastUpdated(new Date())
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'refresh failed')
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(refresh, 5000)
|
||||
return () => clearInterval(id)
|
||||
}, [refresh])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{containers.length} container{containers.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
{refreshing && (
|
||||
<span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
updated {lastUpdated.toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto rounded-lg border border-border">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-muted/50">
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Name</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Image</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">Ports</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Uptime</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{containers.length === 0 && !error ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
|
||||
No containers running
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
containers.map((c) => (
|
||||
<tr
|
||||
key={c.id}
|
||||
className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-xs">
|
||||
<Link
|
||||
href={`/docker/${encodeURIComponent(c.name)}`}
|
||||
className="font-medium text-foreground hover:underline"
|
||||
>
|
||||
{c.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-muted-foreground">{c.image}</td>
|
||||
<td className="px-4 py-3">{statusBadge(c.status)}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-muted-foreground">
|
||||
{c.ports || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground">{c.created}</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
34
app/docker/page.tsx
Normal file
34
app/docker/page.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { redirect } from 'next/navigation'
|
||||
import { getCurrentUser } from '@/lib/session'
|
||||
import { execAgent } from '@/lib/agent-client'
|
||||
import { parseDockerPs, type Container } from '@/lib/parse-docker'
|
||||
import DockerTable from './_components/docker-table'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function DockerPage() {
|
||||
const user = await getCurrentUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
let initialContainers: Container[] = []
|
||||
let initialError: string | null = null
|
||||
|
||||
try {
|
||||
const output = await execAgent('docker_ps')
|
||||
initialContainers = parseDockerPs(output)
|
||||
} catch (err) {
|
||||
initialError = err instanceof Error ? err.message : 'Failed to fetch containers'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Docker Containers</h1>
|
||||
<p className="text-sm text-muted-foreground">Auto-refreshes every 5 seconds</p>
|
||||
</div>
|
||||
<DockerTable initialContainers={initialContainers} initialError={initialError} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
lib/agent-client.ts
Normal file
58
lib/agent-client.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import 'server-only'
|
||||
|
||||
const AGENT_URL = process.env.OPS_AGENT_URL ?? 'http://127.0.0.1:3099'
|
||||
const AGENT_SECRET = process.env.OPS_AGENT_SECRET ?? ''
|
||||
|
||||
export async function execAgent(
|
||||
commandKey: string,
|
||||
args: string[] = [],
|
||||
onChunk?: (chunk: string) => void,
|
||||
): Promise<string> {
|
||||
const response = await fetch(`${AGENT_URL}/agent/v1/exec`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${AGENT_SECRET}`,
|
||||
},
|
||||
body: JSON.stringify({ command_key: commandKey, args }),
|
||||
cache: 'no-store',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text()
|
||||
throw new Error(`agent error ${response.status}: ${text}`)
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader()
|
||||
if (!reader) throw new Error('no response body')
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
let output = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() ?? ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data:')) {
|
||||
const jsonStr = line.slice(5).trim()
|
||||
try {
|
||||
const parsed = JSON.parse(jsonStr) as { data?: string }
|
||||
if (parsed.data !== undefined) {
|
||||
output += parsed.data
|
||||
onChunk?.(parsed.data)
|
||||
}
|
||||
} catch {
|
||||
// skip malformed SSE data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
40
lib/parse-docker.ts
Normal file
40
lib/parse-docker.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
export type Container = {
|
||||
id: string
|
||||
image: string
|
||||
command: string
|
||||
created: string
|
||||
status: string
|
||||
ports: string
|
||||
name: string
|
||||
}
|
||||
|
||||
// Parse the fixed-width table output of `docker ps --format table`
|
||||
export function parseDockerPs(output: string): Container[] {
|
||||
const lines = output.trim().split('\n').filter(Boolean)
|
||||
if (lines.length < 2) return []
|
||||
|
||||
const header = lines[0]
|
||||
|
||||
const COLS = ['CONTAINER ID', 'IMAGE', 'COMMAND', 'CREATED', 'STATUS', 'PORTS', 'NAMES'] as const
|
||||
const positions = COLS.map((col) => header.indexOf(col))
|
||||
|
||||
// Must find at least NAMES (last) to produce useful output
|
||||
if (positions[6] === -1) return []
|
||||
|
||||
const extract = (line: string, i: number): string => {
|
||||
const start = positions[i]
|
||||
if (start === -1) return ''
|
||||
const nextIdx = positions.slice(i + 1).find((p) => p !== -1)
|
||||
return line.slice(start, nextIdx).trim()
|
||||
}
|
||||
|
||||
return lines.slice(1).map((line) => ({
|
||||
id: extract(line, 0),
|
||||
image: extract(line, 1),
|
||||
command: extract(line, 2),
|
||||
created: extract(line, 3),
|
||||
status: extract(line, 4),
|
||||
ports: extract(line, 5),
|
||||
name: extract(line, 6),
|
||||
}))
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue