othman.suseno/calypso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on storage dashboard

Browse Source
This commit is contained in:
Warp Agent
2025-12-25 09:01:49 +00:00
parent a08514b4f2
commit a5e6197bca
29 changed files with 4028 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/pages/ISCSITargetDetail.tsx
View File

@@ -25,17 +25,17 @@ export default function ISCSITargetDetail() {
})
if (isLoading) {
return <div className="text-sm text-gray-500">Loading target details...</div>
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-500">Target not found</div>
return <div className="text-sm text-red-400 min-h-screen bg-background-dark p-6">Target not found</div>
}
const { target, luns } = data
return (
<div className="space-y-6">
<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">
@@ -44,9 +44,9 @@ export default function ISCSITargetDetail() {
Back
</Button>
<div>
<h1 className="text-3xl font-bold text-gray-900 font-mono text-lg">{target.iqn}</h1>
<h1 className="text-3xl font-bold text-white font-mono text-lg">{target.iqn}</h1>
{target.alias && (
<p className="mt-1 text-sm text-gray-600">{target.alias}</p>
<p className="mt-1 text-sm text-text-secondary">{target.alias}</p>
)}
</div>
</div>
@@ -70,14 +70,14 @@ export default function ISCSITargetDetail() {
<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'}>
<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-gray-500">IQN:</span>
<span className="font-mono text-xs">{target.iqn}</span>
<span className="text-text-secondary">IQN:</span>
<span className="font-mono text-xs text-white">{target.iqn}</span>
</div>
</div>
</CardContent>
@@ -90,12 +90,12 @@ export default function ISCSITargetDetail() {
<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>
<span className="text-text-secondary">Total LUNs:</span>
<span className="font-medium text-white">{luns.length}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Active:</span>
<span className="font-medium">
<span className="text-text-secondary">Active:</span>
<span className="font-medium text-white">
{luns.filter((l) => l.is_active).length}
</span>
</div>
@@ -150,38 +150,38 @@ export default function ISCSITargetDetail() {
{luns.length > 0 ? (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<thead className="bg-[#1a2632]">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
<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-gray-500 uppercase">
<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-gray-500 uppercase">
<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-gray-500 uppercase">
<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-gray-500 uppercase">
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
Status
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tbody className="bg-card-dark divide-y divide-border-dark">
{luns.map((lun) => (
<tr key={lun.id}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<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-gray-500">
<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">
<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-gray-500">
<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">
@@ -203,7 +203,7 @@ export default function ISCSITargetDetail() {
) : (
<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>
<p className="text-sm text-text-secondary mb-4">No LUNs configured</p>
<Button variant="outline" onClick={() => setShowAddLUN(true)}>
<Plus className="h-4 w-4 mr-2" />
Add First LUN
@@ -414,7 +414,7 @@ function AddInitiatorForm({ targetId, onClose, onSuccess }: AddInitiatorFormProp
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">
<p className="mt-1 text-xs text-text-secondary">
Format: iqn.YYYY-MM.reverse.domain:identifier
</p>
</div>