feat(caddy): /caddy page with config view and cert status table
- app/caddy/page.tsx: server component fetches caddy_show_config (shiki-highlighted Caddyfile) and caddy_list_certs (parsed CertInfo[]) - app/caddy/_components/caddy-view.tsx: client component shows cert table (domain, issuer CN, notBefore, notAfter) with Valid/Expiring soon/Expired badges; auto-refreshes every 60 seconds Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent
parent
1c51a0868f
commit
30f1b452a8
2 changed files with 226 additions and 0 deletions
165
app/caddy/_components/caddy-view.tsx
Normal file
165
app/caddy/_components/caddy-view.tsx
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { parseCertList, type CertInfo } from '@/lib/parse-caddy'
|
||||
|
||||
async function fetchCerts(): Promise<CertInfo[]> {
|
||||
const res = await fetch('/api/agent/exec', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ command_key: 'caddy_list_certs', args: [] }),
|
||||
})
|
||||
|
||||
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 parseCertList(output)
|
||||
}
|
||||
|
||||
type Props = {
|
||||
initialCerts: CertInfo[]
|
||||
certsError: string | null
|
||||
}
|
||||
|
||||
export default function CaddyView({ initialCerts, certsError }: Props) {
|
||||
const [certs, setCerts] = useState<CertInfo[]>(initialCerts)
|
||||
const [error, setError] = useState<string | null>(certsError)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setRefreshing(true)
|
||||
try {
|
||||
const updated = await fetchCerts()
|
||||
setCerts(updated)
|
||||
setError(null)
|
||||
setLastUpdated(new Date())
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'failed')
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(refresh, 60000)
|
||||
return () => clearInterval(id)
|
||||
}, [refresh])
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium tracking-tight">TLS Certificates</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
{refreshing && (
|
||||
<span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
updated {lastUpdated.toLocaleTimeString()}
|
||||
</span>
|
||||
<button
|
||||
onClick={refresh}
|
||||
disabled={refreshing}
|
||||
className="rounded-md border border-border px-3 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
) : certs.length === 0 ? (
|
||||
<div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">
|
||||
No certificates found in <code className="font-mono">/data/caddy/certificates/</code>.
|
||||
</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">Domain</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Issuer</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Valid from</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Expires</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{certs.map((cert) => (
|
||||
<tr
|
||||
key={cert.domain}
|
||||
className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-xs font-medium">{cert.domain}</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground">{cert.issuerCN}</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground">{cert.notBefore || '—'}</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground">{cert.notAfter || '—'}</td>
|
||||
<td className="px-4 py-3">
|
||||
<CertStatusBadge cert={cert} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function CertStatusBadge({ cert }: { cert: CertInfo }) {
|
||||
if (cert.expired) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
|
||||
<span className="size-1.5 rounded-full bg-red-500" />
|
||||
Expired
|
||||
</span>
|
||||
)
|
||||
}
|
||||
if (cert.expiringWarning) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
|
||||
<span className="size-1.5 rounded-full bg-amber-500" />
|
||||
Expiring soon
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
||||
<span className="size-1.5 rounded-full bg-green-500" />
|
||||
Valid
|
||||
</span>
|
||||
)
|
||||
}
|
||||
61
app/caddy/page.tsx
Normal file
61
app/caddy/page.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import { redirect } from 'next/navigation'
|
||||
import { codeToHtml } from 'shiki'
|
||||
import { getCurrentUser } from '@/lib/session'
|
||||
import { execAgent } from '@/lib/agent-client'
|
||||
import { parseCertList, type CertInfo } from '@/lib/parse-caddy'
|
||||
import CaddyView from './_components/caddy-view'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function CaddyPage() {
|
||||
const user = await getCurrentUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
let configHtml = ''
|
||||
let configError: string | null = null
|
||||
try {
|
||||
const raw = await execAgent('caddy_show_config')
|
||||
configHtml = await codeToHtml(raw || '# (empty)', {
|
||||
lang: 'caddyfile',
|
||||
theme: 'github-dark',
|
||||
})
|
||||
} catch (err) {
|
||||
configError = err instanceof Error ? err.message : 'failed'
|
||||
}
|
||||
|
||||
let initialCerts: CertInfo[] = []
|
||||
let certsError: string | null = null
|
||||
try {
|
||||
const raw = await execAgent('caddy_list_certs')
|
||||
initialCerts = parseCertList(raw)
|
||||
} catch (err) {
|
||||
certsError = err instanceof Error ? err.message : 'failed'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Caddy</h1>
|
||||
<p className="text-sm text-muted-foreground">Config view and TLS certificate status</p>
|
||||
</div>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-medium tracking-tight">Caddyfile</h2>
|
||||
{configError ? (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
{configError}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="overflow-x-auto rounded-lg border border-border text-sm [&>pre]:p-4"
|
||||
dangerouslySetInnerHTML={{ __html: configHtml }}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<CaddyView initialCerts={initialCerts} certsError={certsError} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue