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

80
frontend/src/pages/VTLDetail.tsx
View File

@@ -28,17 +28,17 @@ export default function VTLDetail() {
})
if (isLoading) {
return <div className="text-sm text-gray-500">Loading library details...</div>
return <div className="text-sm text-text-secondary min-h-screen bg-background-dark p-6">Loading library details...</div>
}
if (!data) {
return <div className="text-sm text-red-500">Library not found</div>
return <div className="text-sm text-red-400 min-h-screen bg-background-dark p-6">Library not found</div>
}
const { library, drives, tapes } = 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">
@@ -47,8 +47,8 @@ export default function VTLDetail() {
Back
</Button>
<div>
<h1 className="text-3xl font-bold text-gray-900">{library.name}</h1>
<p className="mt-1 text-sm text-gray-600">
<h1 className="text-3xl font-bold text-white">{library.name}</h1>
<p className="mt-1 text-sm text-text-secondary">
Virtual Tape Library • {library.slot_count} slots • {library.drive_count} drives
</p>
</div>
@@ -75,18 +75,18 @@ export default function VTLDetail() {
<CardContent>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-500">Status:</span>
<span className={library.is_active ? 'text-green-600' : 'text-gray-600'}>
<span className="text-text-secondary">Status:</span>
<span className={library.is_active ? 'text-green-400' : 'text-text-secondary'}>
{library.is_active ? 'Active' : 'Inactive'}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">mhVTL ID:</span>
<span className="font-medium">{library.mhvtl_library_id}</span>
<span className="text-text-secondary">mhVTL ID:</span>
<span className="font-medium text-white">{library.mhvtl_library_id}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Storage Path:</span>
<span className="font-mono text-xs">{library.storage_path}</span>
<span className="text-text-secondary">Storage Path:</span>
<span className="font-mono text-xs text-white">{library.storage_path}</span>
</div>
</div>
</CardContent>
@@ -99,16 +99,16 @@ export default function VTLDetail() {
<CardContent>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-500">Total Slots:</span>
<span className="font-medium">{library.slot_count}</span>
<span className="text-text-secondary">Total Slots:</span>
<span className="font-medium text-white">{library.slot_count}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Used Slots:</span>
<span className="font-medium">{tapes.length}</span>
<span className="text-text-secondary">Used Slots:</span>
<span className="font-medium text-white">{tapes.length}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Free Slots:</span>
<span className="font-medium">{library.slot_count - tapes.length}</span>
<span className="text-text-secondary">Free Slots:</span>
<span className="font-medium text-white">{library.slot_count - tapes.length}</span>
</div>
</div>
</CardContent>
@@ -121,18 +121,18 @@ export default function VTLDetail() {
<CardContent>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-500">Total Drives:</span>
<span className="font-medium">{library.drive_count}</span>
<span className="text-text-secondary">Total Drives:</span>
<span className="font-medium text-white">{library.drive_count}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Idle:</span>
<span className="font-medium">
<span className="text-text-secondary">Idle:</span>
<span className="font-medium text-white">
{drives.filter((d) => d.status === 'idle').length}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Ready:</span>
<span className="font-medium">
<span className="text-text-secondary">Ready:</span>
<span className="font-medium text-white">
{drives.filter((d) => d.status === 'ready').length}
</span>
</div>
@@ -169,7 +169,7 @@ export default function VTLDetail() {
))}
</div>
) : (
<p className="text-sm text-gray-500">No drives configured</p>
<p className="text-sm text-text-secondary">No drives configured</p>
)}
</CardContent>
</Card>
@@ -194,35 +194,35 @@ export default function VTLDetail() {
{tapes.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">
Barcode
</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">
Slot
</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">
Size
</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>
<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">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tbody className="bg-card-dark divide-y divide-border-dark">
{tapes.map((tape) => (
<tr key={tape.id}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<tr key={tape.id} className="hover:bg-[#233648]">
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
{tape.barcode}
</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">
{tape.slot_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">
{formatBytes(tape.size_bytes)}
</td>
<td className="px-6 py-4 whitespace-nowrap">
@@ -259,7 +259,7 @@ export default function VTLDetail() {
</table>
</div>
) : (
<p className="text-sm text-gray-500">No tapes created yet</p>
<p className="text-sm text-text-secondary">No tapes created yet</p>
)}
</CardContent>
</Card>
@@ -299,12 +299,12 @@ function DriveCard({ drive, tapes, isSelected, onSelect }: DriveCardProps) {
</span>
</div>
{currentTape ? (
<div className="text-sm text-gray-600">
<p>Tape: {currentTape.barcode}</p>
<p className="text-xs text-gray-500">{formatBytes(currentTape.size_bytes)}</p>
<div className="text-sm text-text-secondary">
<p className="text-white">Tape: {currentTape.barcode}</p>
<p className="text-xs text-text-secondary">{formatBytes(currentTape.size_bytes)}</p>
</div>
) : (
<p className="text-sm text-gray-400">No tape loaded</p>
<p className="text-sm text-text-secondary">No tape loaded</p>
)}
{isSelected && (
<div className="mt-2 pt-2 border-t">