564 lines
21 KiB
TypeScript
564 lines
21 KiB
TypeScript
import { useParams, useNavigate } from 'react-router-dom'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { scstAPI, type SCSTTarget, type SCSTExtent } from '@/api/scst'
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ArrowLeft, Plus, RefreshCw, HardDrive, Users, Trash2 } from 'lucide-react'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export default function ISCSITargetDetail() {
|
|
const { id } = useParams<{ id: string }>()
|
|
const navigate = useNavigate()
|
|
const queryClient = useQueryClient()
|
|
const [showAddLUN, setShowAddLUN] = useState(false)
|
|
const [showAddInitiator, setShowAddInitiator] = useState(false)
|
|
|
|
useEffect(() => {
|
|
console.log('showAddLUN state:', showAddLUN)
|
|
}, [showAddLUN])
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['scst-target', id],
|
|
queryFn: () => scstAPI.getTarget(id!),
|
|
enabled: !!id,
|
|
})
|
|
|
|
const removeLUNMutation = useMutation({
|
|
mutationFn: ({ targetId, lunId }: { targetId: string; lunId: string }) =>
|
|
scstAPI.removeLUN(targetId, lunId),
|
|
onMutate: async ({ lunId }) => {
|
|
// Cancel any outgoing refetches
|
|
await queryClient.cancelQueries({ queryKey: ['scst-target', id] })
|
|
await queryClient.cancelQueries({ queryKey: ['scst-targets'] })
|
|
|
|
// Snapshot the previous value
|
|
const previousTarget = queryClient.getQueryData(['scst-target', id])
|
|
const previousTargets = queryClient.getQueryData<SCSTTarget[]>(['scst-targets'])
|
|
|
|
// Optimistically update to remove the LUN
|
|
queryClient.setQueryData(['scst-target', id], (old: any) => {
|
|
if (!old) return old
|
|
return {
|
|
...old,
|
|
luns: old.luns ? old.luns.filter((lun: any) => lun.id !== lunId) : []
|
|
}
|
|
})
|
|
|
|
// Optimistically update LUN count in targets list
|
|
queryClient.setQueryData<SCSTTarget[]>(['scst-targets'], (old) => {
|
|
if (!old) return old
|
|
return old.map(t =>
|
|
t.id === id
|
|
? { ...t, lun_count: Math.max(0, (t.lun_count || 0) - 1) }
|
|
: t
|
|
)
|
|
})
|
|
|
|
return { previousTarget, previousTargets }
|
|
},
|
|
onSuccess: () => {
|
|
// Invalidate queries to refetch data from the server.
|
|
// This is simpler and less prone to race conditions than the previous implementation.
|
|
queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
|
|
queryClient.invalidateQueries({ queryKey: ['scst-targets'] });
|
|
},
|
|
onError: (error: any, _variables, context) => {
|
|
// If 404, treat as success (LUN already deleted)
|
|
if (error.response?.status === 404) {
|
|
// LUN already deleted, just refresh to sync UI
|
|
queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
|
|
queryClient.invalidateQueries({ queryKey: ['scst-targets'] });
|
|
return
|
|
}
|
|
|
|
// Rollback optimistic update
|
|
if (context?.previousTarget) {
|
|
queryClient.setQueryData(['scst-target', id], context.previousTarget)
|
|
}
|
|
if (context?.previousTargets) {
|
|
queryClient.setQueryData<SCSTTarget[]>(['scst-targets'], context.previousTargets)
|
|
}
|
|
|
|
alert(`Failed to remove LUN: ${error.response?.data?.error || error.message}`)
|
|
},
|
|
})
|
|
|
|
if (isLoading) {
|
|
return <div className="text-sm text-text-secondary min-h-screen bg-background-dark p-6">Loading target details...</div>
|
|
}
|
|
|
|
if (!data) {
|
|
return <div className="text-sm text-red-400 min-h-screen bg-background-dark p-6">Target not found</div>
|
|
}
|
|
|
|
const { target, luns } = data
|
|
// Ensure luns is always an array, not null
|
|
const lunsArray = luns || []
|
|
|
|
return (
|
|
<div className="space-y-6 min-h-screen bg-background-dark p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<Button variant="ghost" size="sm" onClick={() => navigate('/iscsi')}>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white font-mono text-lg">{target.iqn}</h1>
|
|
{target.alias && (
|
|
<p className="mt-1 text-sm text-text-secondary">{target.alias}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
|
|
}}
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Target Info */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Target Status</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Status:</span>
|
|
<span className={target.is_active ? 'text-green-400' : 'text-text-secondary'}>
|
|
{target.is_active ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">IQN:</span>
|
|
<span className="font-mono text-xs text-white">{target.iqn}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">LUNs</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Total LUNs:</span>
|
|
<span className="font-medium text-white">{lunsArray.length}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Active:</span>
|
|
<span className="font-medium text-white">
|
|
{lunsArray.filter((l) => l.is_active).length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Actions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={() => setShowAddLUN(true)}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Assign Extent
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={() => setShowAddInitiator(true)}
|
|
>
|
|
<Users className="h-4 w-4 mr-2" />
|
|
Add Initiator
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* LUNs */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>LUNs (Logical Unit Numbers)</CardTitle>
|
|
<CardDescription>Storage devices exported by this target</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setShowAddLUN(true)
|
|
}}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Assign Extent
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{lunsArray.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-[#1a2632]">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
|
|
LUN #
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
|
|
Handler
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
|
|
Device Path
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
|
|
Type
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
|
|
Status
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-text-secondary uppercase">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-card-dark divide-y divide-border-dark">
|
|
{lunsArray.map((lun) => (
|
|
<tr key={lun.id} className="hover:bg-[#233648]">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
|
|
{lun.lun_number}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
|
|
{lun.handler}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-xs text-white">
|
|
{lun.device_path}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
|
|
{lun.device_type}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span
|
|
className={`px-2 py-1 text-xs font-medium rounded ${
|
|
lun.is_active
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-gray-100 text-gray-800'
|
|
}`}
|
|
>
|
|
{lun.is_active ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
if (confirm(`Remove LUN ${lun.lun_number} from this target?`)) {
|
|
removeLUNMutation.mutate({ targetId: target.id, lunId: lun.id })
|
|
}
|
|
}}
|
|
disabled={removeLUNMutation.isPending}
|
|
className="p-1.5 hover:bg-red-500/10 rounded text-text-secondary hover:text-red-400 transition-colors disabled:opacity-50"
|
|
title="Remove LUN"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
|
<p className="text-sm text-text-secondary mb-4">No LUNs configured</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setShowAddLUN(true)
|
|
}}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Assign First Extent
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Assign Extent Form */}
|
|
{showAddLUN && (
|
|
<AssignExtentForm
|
|
targetId={target.id}
|
|
onClose={() => setShowAddLUN(false)}
|
|
onSuccess={async () => {
|
|
setShowAddLUN(false)
|
|
// Invalidate queries to refetch data.
|
|
// Invalidate extents since one is now in use.
|
|
queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
|
|
queryClient.invalidateQueries({ queryKey: ['scst-extents'] });
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Add Initiator Form */}
|
|
{showAddInitiator && (
|
|
<AddInitiatorForm
|
|
targetId={target.id}
|
|
onClose={() => setShowAddInitiator(false)}
|
|
onSuccess={() => {
|
|
setShowAddInitiator(false)
|
|
queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface AssignExtentFormProps {
|
|
targetId: string
|
|
onClose: () => void
|
|
onSuccess: () => Promise<void>
|
|
}
|
|
|
|
function AssignExtentForm({ targetId, onClose, onSuccess }: AssignExtentFormProps) {
|
|
const [selectedExtent, setSelectedExtent] = useState('')
|
|
const [lunNumber, setLunNumber] = useState(0)
|
|
|
|
// Fetch available extents
|
|
const { data: extents = [], isLoading: extentsLoading } = useQuery<SCSTExtent[]>({
|
|
queryKey: ['scst-extents'],
|
|
queryFn: scstAPI.listExtents,
|
|
staleTime: 0,
|
|
refetchOnMount: true,
|
|
})
|
|
|
|
// Filter only extents that are not in use
|
|
const availableExtents = extents.filter(extent => !extent.is_in_use)
|
|
|
|
const addLUNMutation = useMutation({
|
|
mutationFn: (data: { device_name: string; device_path: string; lun_number: number; handler_type: string }) =>
|
|
scstAPI.addLUN(targetId, data),
|
|
onSuccess: async () => {
|
|
await onSuccess()
|
|
},
|
|
onError: (error: any) => {
|
|
const errorMessage = error.response?.data?.error || error.message || 'Failed to assign extent'
|
|
alert(errorMessage)
|
|
},
|
|
})
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!selectedExtent || lunNumber < 0) {
|
|
alert('Please select an extent and specify LUN number')
|
|
return
|
|
}
|
|
|
|
const extent = availableExtents.find(e => e.device_name === selectedExtent)
|
|
if (!extent) {
|
|
alert('Selected extent not found')
|
|
return
|
|
}
|
|
|
|
addLUNMutation.mutate({
|
|
device_name: extent.device_name,
|
|
device_path: extent.device_path,
|
|
handler_type: extent.handler_type,
|
|
lun_number: lunNumber,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-card-dark border border-border-dark rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="p-6 border-b border-border-dark">
|
|
<h2 className="text-xl font-bold text-white">Assign Extent</h2>
|
|
<p className="text-sm text-text-secondary mt-1">Assign an existing extent to this target as a LUN</p>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
<div>
|
|
<label htmlFor="extent" className="block text-sm font-medium text-white mb-1">
|
|
Available Extent *
|
|
</label>
|
|
{extentsLoading ? (
|
|
<div className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-text-secondary text-sm">
|
|
Loading extents...
|
|
</div>
|
|
) : availableExtents.length === 0 ? (
|
|
<div className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-text-secondary text-sm">
|
|
No available extents. Please create an extent first in the Extents tab.
|
|
</div>
|
|
) : (
|
|
<select
|
|
id="extent"
|
|
value={selectedExtent}
|
|
onChange={(e) => setSelectedExtent(e.target.value)}
|
|
className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-white text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
required
|
|
>
|
|
<option value="">Select an extent...</option>
|
|
{availableExtents.map((extent) => (
|
|
<option key={extent.device_name} value={extent.device_name}>
|
|
{extent.device_name} ({extent.handler_type}) - {extent.device_path}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
<p className="mt-1 text-xs text-text-secondary">
|
|
Select an extent that has been created in the Extents tab
|
|
</p>
|
|
</div>
|
|
|
|
{selectedExtent && (
|
|
<div className="p-4 bg-[#0f161d] border border-border-dark rounded-lg">
|
|
<p className="text-sm text-text-secondary mb-2">Extent Details:</p>
|
|
{(() => {
|
|
const extent = availableExtents.find(e => e.device_name === selectedExtent)
|
|
if (!extent) return null
|
|
return (
|
|
<div className="space-y-1 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Device Name:</span>
|
|
<span className="text-white font-mono">{extent.device_name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Handler:</span>
|
|
<span className="text-white">{extent.handler_type}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-text-secondary">Path:</span>
|
|
<span className="text-white font-mono text-xs">{extent.device_path}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})()}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label htmlFor="lunNumber" className="block text-sm font-medium text-white mb-1">
|
|
LUN Number *
|
|
</label>
|
|
<input
|
|
id="lunNumber"
|
|
type="number"
|
|
value={lunNumber}
|
|
onChange={(e) => setLunNumber(parseInt(e.target.value) || 0)}
|
|
min="0"
|
|
max="255"
|
|
className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-white text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
required
|
|
/>
|
|
<p className="mt-1 text-xs text-text-secondary">
|
|
Logical Unit Number (0-255, typically start from 0)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4 border-t border-border-dark">
|
|
<Button type="button" variant="outline" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={addLUNMutation.isPending || availableExtents.length === 0}
|
|
>
|
|
{addLUNMutation.isPending ? 'Assigning...' : 'Assign Extent'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface AddInitiatorFormProps {
|
|
targetId: string
|
|
onClose: () => void
|
|
onSuccess: () => void
|
|
}
|
|
|
|
function AddInitiatorForm({ targetId, onClose, onSuccess }: AddInitiatorFormProps) {
|
|
const [iqn, setIqn] = useState('')
|
|
|
|
const addInitiatorMutation = useMutation({
|
|
mutationFn: (data: { initiator_iqn: string }) =>
|
|
scstAPI.addInitiator(targetId, data),
|
|
onSuccess: () => {
|
|
onSuccess()
|
|
},
|
|
})
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!iqn) {
|
|
alert('Initiator IQN is required')
|
|
return
|
|
}
|
|
|
|
addInitiatorMutation.mutate({
|
|
initiator_iqn: iqn.trim(),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Add Initiator</CardTitle>
|
|
<CardDescription>Allow an iSCSI initiator to access this target</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="initiatorIqn" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Initiator IQN *
|
|
</label>
|
|
<input
|
|
id="initiatorIqn"
|
|
type="text"
|
|
value={iqn}
|
|
onChange={(e) => setIqn(e.target.value)}
|
|
placeholder="iqn.2024-01.com.client:initiator1"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
|
|
required
|
|
/>
|
|
<p className="mt-1 text-xs text-text-secondary">
|
|
Format: iqn.YYYY-MM.reverse.domain:identifier
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2">
|
|
<Button type="button" variant="outline" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={addInitiatorMutation.isPending}>
|
|
{addInitiatorMutation.isPending ? 'Adding...' : 'Add Initiator'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|