feat: BatchLaunchModal and MaintenanceFlowDetailPage with schedule panel and run history
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
chihlasm
198
frontend/src/pages/MaintenanceFlowDetailPage.tsx
Normal file
198
frontend/src/pages/MaintenanceFlowDetailPage.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { Wrench, Calendar, Play, Settings, Clock, CheckCircle, AlertCircle } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { sessionsApi } from '@/api/sessions'
|
||||
import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
|
||||
import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Tree, MaintenanceSchedule, Session } from '@/types'
|
||||
|
||||
export default function MaintenanceFlowDetailPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const [tree, setTree] = useState<Tree | null>(null)
|
||||
const [schedule, setSchedule] = useState<MaintenanceSchedule | null>(null)
|
||||
const [recentSessions, setRecentSessions] = useState<Session[]>([])
|
||||
const [showBatchModal, setShowBatchModal] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
const load = async () => {
|
||||
try {
|
||||
const treeData = await treesApi.get(id)
|
||||
setTree(treeData)
|
||||
|
||||
// Load recent sessions for this tree
|
||||
try {
|
||||
const sessionData = await sessionsApi.list({ tree_id: id, size: 30 })
|
||||
setRecentSessions(Array.isArray(sessionData) ? sessionData : [])
|
||||
} catch {
|
||||
// Sessions load is optional
|
||||
}
|
||||
|
||||
// Try to load schedule (404 is fine)
|
||||
try {
|
||||
const sched = await maintenanceSchedulesApi.getForTree(id)
|
||||
setSchedule(sched)
|
||||
} catch {
|
||||
// No schedule yet is fine
|
||||
}
|
||||
} catch {
|
||||
toast.error('Failed to load maintenance flow')
|
||||
navigate('/trees?type=maintenance')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
load()
|
||||
}, [id, navigate])
|
||||
|
||||
const handleLaunched = (_batchId: string, count: number) => {
|
||||
setShowBatchModal(false)
|
||||
toast.success(`${count} sessions created — view them in Sessions`)
|
||||
navigate('/sessions')
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!tree) return null
|
||||
|
||||
// Group sessions by batch_id for run history
|
||||
const batchMap = new Map<string, Session[]>()
|
||||
for (const s of recentSessions) {
|
||||
const key = (s as Session & { batch_id?: string }).batch_id ?? s.id
|
||||
const existing = batchMap.get(key) ?? []
|
||||
batchMap.set(key, [...existing, s])
|
||||
}
|
||||
const batches = Array.from(batchMap.entries()).slice(0, 10)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6 p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
|
||||
<Wrench className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
|
||||
{tree.description && (
|
||||
<p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/flows/${id}/edit`)}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
Edit Flow
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowBatchModal(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
|
||||
>
|
||||
<Play className="h-3.5 w-3.5" />
|
||||
Batch Launch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schedule Panel */}
|
||||
<div className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<h2 className="font-semibold text-foreground">Schedule</h2>
|
||||
</div>
|
||||
{schedule ? (
|
||||
<div className="space-y-2 text-[0.875rem]">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide",
|
||||
schedule.is_active
|
||||
? "bg-emerald-500/10 text-emerald-400"
|
||||
: "bg-muted text-muted-foreground"
|
||||
)}>
|
||||
{schedule.is_active
|
||||
? <CheckCircle className="h-3 w-3" />
|
||||
: <AlertCircle className="h-3 w-3" />}
|
||||
{schedule.is_active ? 'Active' : 'Paused'}
|
||||
</span>
|
||||
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
|
||||
{schedule.cron_expression}
|
||||
</code>
|
||||
<span className="text-muted-foreground">({schedule.timezone})</span>
|
||||
</div>
|
||||
{schedule.next_run_at && (
|
||||
<p className="text-muted-foreground">
|
||||
Next run: {new Date(schedule.next_run_at).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[0.875rem] text-muted-foreground">
|
||||
No schedule configured. Sessions can still be launched manually via Batch Launch.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Run History */}
|
||||
<div className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<h2 className="font-semibold text-foreground">Run History</h2>
|
||||
</div>
|
||||
{batches.length === 0 ? (
|
||||
<p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{batches.map(([batchKey, sessions]) => {
|
||||
const completed = sessions.filter(s => s.completed_at).length
|
||||
const total = sessions.length
|
||||
const date = sessions[0]?.started_at
|
||||
return (
|
||||
<div key={batchKey} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
|
||||
<div>
|
||||
<p className="text-[0.875rem] font-medium text-foreground">
|
||||
{total} target{total !== 1 ? 's' : ''}
|
||||
</p>
|
||||
{date && (
|
||||
<p className="text-[0.8125rem] text-muted-foreground">
|
||||
{new Date(date).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={cn(
|
||||
"font-label text-[0.75rem] uppercase tracking-wide",
|
||||
completed === total ? "text-emerald-400" : "text-amber-400"
|
||||
)}>
|
||||
{completed}/{total} complete
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showBatchModal && (
|
||||
<BatchLaunchModal
|
||||
treeId={id!}
|
||||
treeName={tree.name}
|
||||
onClose={() => setShowBatchModal(false)}
|
||||
onLaunched={handleLaunched}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user