feat(19-02): create BulkAddForm component for IP list bulk operations
- Credential profile dropdown filtered by device type (routeros/snmp) - IP textarea parses one-per-line IPv4 addresses with deduplication - Optional hostname prefix generates numbered names (e.g., tower-ap-01) - SNMP variant shows SNMP port and device profile selector - RouterOS variant shows API port and TLS API port fields - Results display with per-device CheckCircle2/XCircle success/failure icons - Calls devicesApi.bulkAddWithProfile for backend bulk add endpoint Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
352
frontend/src/components/fleet/BulkAddForm.tsx
Normal file
352
frontend/src/components/fleet/BulkAddForm.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { CheckCircle2, XCircle, ArrowLeft } from 'lucide-react'
|
||||
import {
|
||||
credentialProfilesApi,
|
||||
snmpProfilesApi,
|
||||
devicesApi,
|
||||
type BulkAddWithProfileRequest,
|
||||
type BulkAddWithProfileResult,
|
||||
type CredentialProfileResponse,
|
||||
type SNMPProfileResponse,
|
||||
} from '@/lib/api'
|
||||
import { toast } from '@/components/ui/toast'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
|
||||
interface BulkAddFormProps {
|
||||
tenantId: string
|
||||
deviceType: 'routeros' | 'snmp'
|
||||
onClose: () => void
|
||||
onBack?: () => void
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a newline-separated list of IP addresses.
|
||||
* Each line is trimmed; blank lines and duplicates are removed.
|
||||
* Lines that don't look like a valid IPv4 address are skipped.
|
||||
*/
|
||||
function parseIPList(text: string): string[] {
|
||||
const ipv4Re = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/
|
||||
const seen = new Set<string>()
|
||||
const result: string[] = []
|
||||
|
||||
for (const raw of text.split('\n')) {
|
||||
const line = raw.trim()
|
||||
if (!line) continue
|
||||
|
||||
// TODO: CIDR and range expansion (e.g., 10.0.1.0/24, 10.0.1.1-10.0.1.50)
|
||||
if (line.includes('/') || line.includes('-')) continue
|
||||
|
||||
if (ipv4Re.test(line) && !seen.has(line)) {
|
||||
seen.add(line)
|
||||
result.push(line)
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export function BulkAddForm({
|
||||
tenantId,
|
||||
deviceType,
|
||||
onClose,
|
||||
onBack,
|
||||
onSuccess,
|
||||
}: BulkAddFormProps) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const [profileId, setProfileId] = useState('')
|
||||
const [snmpProfileId, setSnmpProfileId] = useState('')
|
||||
const [ipText, setIpText] = useState('')
|
||||
const [hostnamePrefix, setHostnamePrefix] = useState('')
|
||||
const [snmpPort, setSnmpPort] = useState('161')
|
||||
const [apiPort, setApiPort] = useState('8728')
|
||||
const [apiSslPort, setApiSslPort] = useState('8729')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Credential profiles filtered by device type
|
||||
const credType = deviceType === 'snmp' ? 'snmp_v2c' : 'routeros'
|
||||
const { data: profiles } = useQuery({
|
||||
queryKey: ['credential-profiles', tenantId, credType],
|
||||
queryFn: () => credentialProfilesApi.list(tenantId, credType),
|
||||
})
|
||||
|
||||
// SNMP device profiles (only when deviceType is snmp)
|
||||
const { data: snmpProfiles } = useQuery({
|
||||
queryKey: ['snmp-profiles', tenantId],
|
||||
queryFn: () => snmpProfilesApi.list(tenantId),
|
||||
enabled: deviceType === 'snmp',
|
||||
})
|
||||
|
||||
const profileList: CredentialProfileResponse[] = profiles?.profiles ?? []
|
||||
const snmpProfileList: SNMPProfileResponse[] = Array.isArray(snmpProfiles)
|
||||
? snmpProfiles
|
||||
: snmpProfiles?.profiles ?? []
|
||||
|
||||
const parsedIPs = useMemo(() => parseIPList(ipText), [ipText])
|
||||
|
||||
const bulkMutation = useMutation({
|
||||
mutationFn: (data: BulkAddWithProfileRequest) =>
|
||||
devicesApi.bulkAddWithProfile(tenantId, data),
|
||||
onSuccess: (result: BulkAddWithProfileResult) => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||
void queryClient.invalidateQueries({ queryKey: ['tenants'] })
|
||||
if (result.succeeded > 0) {
|
||||
toast({
|
||||
title: `${result.succeeded} device${result.succeeded !== 1 ? 's' : ''} added`,
|
||||
})
|
||||
}
|
||||
onSuccess?.()
|
||||
},
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (parsedIPs.length === 0) {
|
||||
setError('Enter at least one valid IP address')
|
||||
return
|
||||
}
|
||||
if (!profileId) {
|
||||
setError('Select a credential profile')
|
||||
return
|
||||
}
|
||||
setError(null)
|
||||
|
||||
const devices = parsedIPs.map((ip, i) => ({
|
||||
ip_address: ip,
|
||||
hostname: hostnamePrefix
|
||||
? `${hostnamePrefix}${String(i + 1).padStart(2, '0')}`
|
||||
: undefined,
|
||||
}))
|
||||
|
||||
const request: BulkAddWithProfileRequest = {
|
||||
credential_profile_id: profileId,
|
||||
device_type: deviceType,
|
||||
defaults:
|
||||
deviceType === 'snmp'
|
||||
? {
|
||||
snmp_port: parseInt(snmpPort) || 161,
|
||||
snmp_profile_id: snmpProfileId || undefined,
|
||||
}
|
||||
: {
|
||||
api_port: parseInt(apiPort) || 8728,
|
||||
api_ssl_port: parseInt(apiSslPort) || 8729,
|
||||
},
|
||||
devices,
|
||||
}
|
||||
bulkMutation.mutate(request)
|
||||
}
|
||||
|
||||
// Show results after successful bulk add
|
||||
if (bulkMutation.isSuccess && bulkMutation.data) {
|
||||
const result = bulkMutation.data
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="text-text-secondary">
|
||||
{result.succeeded} succeeded
|
||||
</span>
|
||||
{result.failed > 0 && (
|
||||
<span className="text-error">{result.failed} failed</span>
|
||||
)}
|
||||
<span className="text-text-muted text-xs">
|
||||
of {result.total} total
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-48 overflow-y-auto space-y-1">
|
||||
{result.results.map((r) => (
|
||||
<div
|
||||
key={r.ip_address}
|
||||
className="flex items-center gap-2 text-xs py-1 border-b border-border/50"
|
||||
>
|
||||
{r.success ? (
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-success flex-shrink-0" />
|
||||
) : (
|
||||
<XCircle className="h-3.5 w-3.5 text-error flex-shrink-0" />
|
||||
)}
|
||||
<span className="font-mono">{r.ip_address}</span>
|
||||
{r.hostname && (
|
||||
<span className="text-text-muted">{r.hostname}</span>
|
||||
)}
|
||||
{r.error && <span className="text-error ml-auto">{r.error}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 mt-3">
|
||||
<Button size="sm" onClick={onClose}>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to single add
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Credential Profile *</Label>
|
||||
<Select value={profileId} onValueChange={setProfileId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select credential profile..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{profileList.map((p) => (
|
||||
<SelectItem key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{deviceType === 'snmp' && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="bulk-snmp-port">SNMP Port</Label>
|
||||
<Input
|
||||
id="bulk-snmp-port"
|
||||
value={snmpPort}
|
||||
onChange={(e) => setSnmpPort(e.target.value)}
|
||||
placeholder="161"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Device Profile</Label>
|
||||
<Select value={snmpProfileId} onValueChange={setSnmpProfileId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Auto-detect" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{snmpProfileList.map((p) => (
|
||||
<SelectItem key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{deviceType === 'routeros' && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="bulk-api-port">API Port</Label>
|
||||
<Input
|
||||
id="bulk-api-port"
|
||||
value={apiPort}
|
||||
onChange={(e) => setApiPort(e.target.value)}
|
||||
placeholder="8728"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="bulk-ssl-port">TLS API Port</Label>
|
||||
<Input
|
||||
id="bulk-ssl-port"
|
||||
value={apiSslPort}
|
||||
onChange={(e) => setApiSslPort(e.target.value)}
|
||||
placeholder="8729"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label htmlFor="bulk-ips">
|
||||
IP Addresses *{' '}
|
||||
{parsedIPs.length > 0 && (
|
||||
<span className="text-text-muted font-normal">
|
||||
({parsedIPs.length} detected)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
<textarea
|
||||
id="bulk-ips"
|
||||
value={ipText}
|
||||
onChange={(e) => {
|
||||
setIpText(e.target.value)
|
||||
if (error) setError(null)
|
||||
}}
|
||||
placeholder={'Enter IPs, one per line\n10.0.1.1\n10.0.1.2\n10.0.1.3'}
|
||||
rows={6}
|
||||
className="flex w-full rounded-md border border-border bg-surface-primary px-3 py-2 text-xs text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent font-mono resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label htmlFor="bulk-prefix">Hostname Prefix</Label>
|
||||
<Input
|
||||
id="bulk-prefix"
|
||||
value={hostnamePrefix}
|
||||
onChange={(e) => setHostnamePrefix(e.target.value)}
|
||||
placeholder="tower-ap- (generates tower-ap-01, tower-ap-02, ...)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-error/10 border border-error/50 px-3 py-2">
|
||||
<XCircle className="h-4 w-4 text-error flex-shrink-0" />
|
||||
<p className="text-xs text-error">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bulkMutation.isError && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-error/10 border border-error/50 px-3 py-2">
|
||||
<XCircle className="h-4 w-4 text-error flex-shrink-0" />
|
||||
<p className="text-xs text-error">
|
||||
{(
|
||||
bulkMutation.error as {
|
||||
response?: { data?: { detail?: string } }
|
||||
}
|
||||
)?.response?.data?.detail ?? 'Bulk add failed'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={onClose} size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleSubmit}
|
||||
disabled={bulkMutation.isPending || parsedIPs.length === 0}
|
||||
>
|
||||
{bulkMutation.isPending
|
||||
? 'Adding...'
|
||||
: `Add ${parsedIPs.length} Device${parsedIPs.length !== 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user