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
202
frontend/src/components/maintenance/BatchLaunchModal.tsx
Normal file
202
frontend/src/components/maintenance/BatchLaunchModal.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, List, Clock, PenLine, ExternalLink } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { targetListsApi, batchLaunchApi } from '@/api'
|
||||
import type { TargetList, TargetEntry } from '@/types'
|
||||
|
||||
interface BatchLaunchModalProps {
|
||||
treeId: string
|
||||
treeName: string
|
||||
onClose: () => void
|
||||
onLaunched: (batchId: string, count: number) => void
|
||||
}
|
||||
|
||||
type TabId = 'manual' | 'saved' | 'previous' | 'psa'
|
||||
|
||||
export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: BatchLaunchModalProps) {
|
||||
const [activeTab, setActiveTab] = useState<TabId>('manual')
|
||||
const [savedLists, setSavedLists] = useState<TargetList[] | null>(null)
|
||||
const [selectedListId, setSelectedListId] = useState<string | null>(null)
|
||||
const [manualInput, setManualInput] = useState('')
|
||||
const [isLaunching, setIsLaunching] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'saved' && savedLists === null) {
|
||||
targetListsApi.list()
|
||||
.then(setSavedLists)
|
||||
.catch(() => toast.error('Failed to load saved lists'))
|
||||
}
|
||||
}, [activeTab, savedLists])
|
||||
|
||||
const getTargets = (): TargetEntry[] => {
|
||||
if (activeTab === 'saved' && selectedListId && savedLists) {
|
||||
const list = savedLists.find(l => l.id === selectedListId)
|
||||
return list?.targets ?? []
|
||||
}
|
||||
if (activeTab === 'manual') {
|
||||
return manualInput
|
||||
.split('\n')
|
||||
.map(l => l.trim())
|
||||
.filter(Boolean)
|
||||
.map(label => ({ label }))
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
const targets = getTargets()
|
||||
|
||||
const handleLaunch = async () => {
|
||||
if (targets.length === 0) {
|
||||
toast.error('Add at least one target before launching')
|
||||
return
|
||||
}
|
||||
if (targets.length > 100) {
|
||||
toast.error('Maximum 100 targets per batch')
|
||||
return
|
||||
}
|
||||
setIsLaunching(true)
|
||||
try {
|
||||
const result = await batchLaunchApi.launch({ tree_id: treeId, targets })
|
||||
toast.success(`${result.count} sessions created`)
|
||||
onLaunched(result.batch_id, result.count)
|
||||
} catch {
|
||||
toast.error('Failed to launch batch')
|
||||
} finally {
|
||||
setIsLaunching(false)
|
||||
}
|
||||
}
|
||||
|
||||
const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: 'manual', label: 'Manual Entry', icon: <PenLine className="h-3.5 w-3.5" /> },
|
||||
{ id: 'saved', label: 'Saved List', icon: <List className="h-3.5 w-3.5" /> },
|
||||
{ id: 'previous', label: 'Previous Run', icon: <Clock className="h-3.5 w-3.5" /> },
|
||||
{ id: 'psa', label: 'PSA / RMM', icon: <ExternalLink className="h-3.5 w-3.5" /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-foreground">Batch Launch</h2>
|
||||
<p className="text-[0.8125rem] text-muted-foreground">{treeName}</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="rounded-lg p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-border px-4 pt-2">
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-2 font-label text-[0.6875rem] uppercase tracking-wide transition-colors",
|
||||
activeTab === tab.id
|
||||
? "border-b-2 border-primary text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{activeTab === 'manual' && (
|
||||
<div className="space-y-2">
|
||||
<label className="font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
|
||||
Server names (one per line)
|
||||
</label>
|
||||
<textarea
|
||||
className="h-40 w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
|
||||
placeholder={"RDS-01\nRDS-02\nRDS-03"}
|
||||
value={manualInput}
|
||||
onChange={e => setManualInput(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'saved' && (
|
||||
<div className="space-y-2">
|
||||
{savedLists === null ? (
|
||||
<div className="flex h-24 items-center justify-center">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : savedLists.length === 0 ? (
|
||||
<p className="text-[0.875rem] text-muted-foreground">
|
||||
No saved lists yet. Create one in Team Settings → Target Lists.
|
||||
</p>
|
||||
) : (
|
||||
savedLists.map(list => (
|
||||
<button
|
||||
key={list.id}
|
||||
onClick={() => setSelectedListId(list.id)}
|
||||
className={cn(
|
||||
"w-full rounded-lg border px-4 py-3 text-left transition-colors",
|
||||
selectedListId === list.id
|
||||
? "border-primary/30 bg-primary/10 text-foreground"
|
||||
: "border-border text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<div className="font-medium">{list.name}</div>
|
||||
<div className="text-[0.8125rem]">{list.targets.length} targets</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'previous' && (
|
||||
<p className="text-[0.875rem] text-muted-foreground">Previous run history coming soon.</p>
|
||||
)}
|
||||
|
||||
{activeTab === 'psa' && (
|
||||
<div className="rounded-lg border border-border bg-accent/30 p-6 text-center">
|
||||
<ExternalLink className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
|
||||
<p className="font-medium text-foreground">PSA / RMM Import</p>
|
||||
<p className="mt-1 text-[0.8125rem] text-muted-foreground">
|
||||
ConnectWise, Kaseya, and RMM integrations coming soon.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{targets.length > 0 && (
|
||||
<div className="border-t border-border px-6 py-3">
|
||||
<p className="text-[0.8125rem] text-muted-foreground">
|
||||
Will create{' '}
|
||||
<span className="font-semibold text-foreground">{targets.length} sessions</span>:{' '}
|
||||
{targets.slice(0, 5).map(t => t.label).join(', ')}
|
||||
{targets.length > 5 && ` +${targets.length - 5} more`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLaunch}
|
||||
disabled={isLaunching || targets.length === 0}
|
||||
className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{isLaunching ? 'Launching\u2026' : targets.length > 0 ? `Launch ${targets.length} Sessions` : 'Launch'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -24,6 +24,7 @@ const TreeNavigationPage = lazy(() => import('@/pages/TreeNavigationPage'))
|
||||
const TreeEditorPage = lazy(() => import('@/pages/TreeEditorPage'))
|
||||
const ProceduralEditorPage = lazy(() => import('@/pages/ProceduralEditorPage'))
|
||||
const ProceduralNavigationPage = lazy(() => import('@/pages/ProceduralNavigationPage'))
|
||||
const MaintenanceFlowDetailPage = lazy(() => import('@/pages/MaintenanceFlowDetailPage'))
|
||||
const SessionHistoryPage = lazy(() => import('@/pages/SessionHistoryPage'))
|
||||
const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
|
||||
const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
|
||||
@@ -168,6 +169,14 @@ export const router = createBrowserRouter([
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'flows/:id/maintenance',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<MaintenanceFlowDetailPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'trees/:id/navigate',
|
||||
element: (
|
||||
|
||||
Reference in New Issue
Block a user