still working on frontend UI

frontend/src/pages/ISCSITargetDetail.tsx

@@ -0,0 +1,435 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { scstAPI, type SCSTHandler } 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 } from 'lucide-react'
+import { useState } 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)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['scst-target', id],
+    queryFn: () => scstAPI.getTarget(id!),
+    enabled: !!id,
+  })
+
+  const { data: handlers } = useQuery<SCSTHandler[]>({
+    queryKey: ['scst-handlers'],
+    queryFn: scstAPI.listHandlers,
+  })
+
+  if (isLoading) {
+    return <div className="text-sm text-gray-500">Loading target details...</div>
+  }
+
+  if (!data) {
+    return <div className="text-sm text-red-500">Target not found</div>
+  }
+
+  const { target, luns } = data
+
+  return (
+    <div className="space-y-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-gray-900 font-mono text-lg">{target.iqn}</h1>
+            {target.alias && (
+              <p className="mt-1 text-sm text-gray-600">{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-gray-500">Status:</span>
+                <span className={target.is_active ? 'text-green-600' : 'text-gray-600'}>
+                  {target.is_active ? 'Active' : 'Inactive'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">IQN:</span>
+                <span className="font-mono text-xs">{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-gray-500">Total LUNs:</span>
+                <span className="font-medium">{luns.length}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Active:</span>
+                <span className="font-medium">
+                  {luns.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" />
+                Add LUN
+              </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={() => setShowAddLUN(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add LUN
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {luns.length > 0 ? (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      LUN #
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Handler
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Device Path
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Type
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {luns.map((lun) => (
+                    <tr key={lun.id}>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        {lun.lun_number}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {lun.handler}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-xs">
+                        {lun.device_path}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {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>
+                    </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-gray-500 mb-4">No LUNs configured</p>
+              <Button variant="outline" onClick={() => setShowAddLUN(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                Add First LUN
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Add LUN Form */}
+      {showAddLUN && (
+        <AddLUNForm
+          targetId={target.id}
+          handlers={handlers || []}
+          onClose={() => setShowAddLUN(false)}
+          onSuccess={() => {
+            setShowAddLUN(false)
+            queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
+          }}
+        />
+      )}
+
+      {/* Add Initiator Form */}
+      {showAddInitiator && (
+        <AddInitiatorForm
+          targetId={target.id}
+          onClose={() => setShowAddInitiator(false)}
+          onSuccess={() => {
+            setShowAddInitiator(false)
+            queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+interface AddLUNFormProps {
+  targetId: string
+  handlers: SCSTHandler[]
+  onClose: () => void
+  onSuccess: () => void
+}
+
+function AddLUNForm({ targetId, handlers, onClose, onSuccess }: AddLUNFormProps) {
+  const [handlerType, setHandlerType] = useState('')
+  const [devicePath, setDevicePath] = useState('')
+  const [deviceName, setDeviceName] = useState('')
+  const [lunNumber, setLunNumber] = useState(0)
+
+  const addLUNMutation = useMutation({
+    mutationFn: (data: { device_name: string; device_path: string; lun_number: number; handler_type: string }) =>
+      scstAPI.addLUN(targetId, data),
+    onSuccess: () => {
+      onSuccess()
+    },
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!handlerType || !devicePath || !deviceName || lunNumber < 0) {
+      alert('All fields are required')
+      return
+    }
+
+    addLUNMutation.mutate({
+      handler_type: handlerType.trim(),
+      device_path: devicePath.trim(),
+      device_name: deviceName.trim(),
+      lun_number: lunNumber,
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Add LUN</CardTitle>
+        <CardDescription>Add a storage device to this target</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="handlerType" className="block text-sm font-medium text-gray-700 mb-1">
+              Handler Type *
+            </label>
+            <select
+              id="handlerType"
+              value={handlerType}
+              onChange={(e) => setHandlerType(e.target.value)}
+              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"
+              required
+            >
+              <option value="">Select a handler</option>
+              {handlers.map((h) => (
+                <option key={h.name} value={h.name}>
+                  {h.name} {h.description && `- ${h.description}`}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="deviceName" className="block text-sm font-medium text-gray-700 mb-1">
+              Device Name *
+            </label>
+            <input
+              id="deviceName"
+              type="text"
+              value={deviceName}
+              onChange={(e) => setDeviceName(e.target.value)}
+              placeholder="device1"
+              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"
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="devicePath" className="block text-sm font-medium text-gray-700 mb-1">
+              Device Path *
+            </label>
+            <input
+              id="devicePath"
+              type="text"
+              value={devicePath}
+              onChange={(e) => setDevicePath(e.target.value)}
+              placeholder="/dev/sda or /dev/calypso/vg1/lv1"
+              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
+            />
+          </div>
+
+          <div>
+            <label htmlFor="lunNumber" className="block text-sm font-medium text-gray-700 mb-1">
+              LUN Number *
+            </label>
+            <input
+              id="lunNumber"
+              type="number"
+              value={lunNumber}
+              onChange={(e) => setLunNumber(parseInt(e.target.value) || 0)}
+              min="0"
+              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"
+              required
+            />
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={addLUNMutation.isPending}>
+              {addLUNMutation.isPending ? 'Adding...' : 'Add LUN'}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
+
+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-gray-500">
+              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>
+  )
+}
+