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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user