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

40
frontend/src/pages/TapeLibraries.tsx
View File

@@ -22,11 +22,11 @@ export default function TapeLibraries() {
})
return (
<div className="space-y-6">
<div className="space-y-6 min-h-screen bg-background-dark p-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">Tape Libraries</h1>
<p className="mt-2 text-sm text-gray-600">
<h1 className="text-3xl font-bold text-white">Tape Libraries</h1>
<p className="mt-2 text-sm text-text-secondary">
Manage physical and virtual tape libraries
</p>
</div>
@@ -49,14 +49,14 @@ export default function TapeLibraries() {
</div>
{/* Tabs */}
<div className="border-b border-gray-200">
<div className="border-b border-border-dark">
<nav className="-mb-px flex space-x-8">
<button
onClick={() => setActiveTab('vtl')}
className={`py-4 px-1 border-b-2 font-medium text-sm ${
activeTab === 'vtl'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
? 'border-primary text-primary'
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
}`}
>
Virtual Tape Libraries ({vtlLibraries?.length || 0})
@@ -65,8 +65,8 @@ export default function TapeLibraries() {
onClick={() => setActiveTab('physical')}
className={`py-4 px-1 border-b-2 font-medium text-sm ${
activeTab === 'physical'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
? 'border-primary text-primary'
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
}`}
>
Physical Libraries ({physicalLibraries?.length || 0})
@@ -78,7 +78,7 @@ export default function TapeLibraries() {
{activeTab === 'vtl' && (
<div>
{loadingVTL ? (
<p className="text-sm text-gray-500">Loading VTL libraries...</p>
<p className="text-sm text-text-secondary">Loading VTL libraries...</p>
) : vtlLibraries && vtlLibraries.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{vtlLibraries.map((library: VirtualTapeLibrary) => (
@@ -89,8 +89,8 @@ export default function TapeLibraries() {
<Card>
<CardContent className="p-12 text-center">
<HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">No Virtual Tape Libraries</h3>
<p className="text-sm text-gray-500 mb-4">
<h3 className="text-lg font-medium text-white mb-2">No Virtual Tape Libraries</h3>
<p className="text-sm text-text-secondary mb-4">
Create your first virtual tape library to get started
</p>
<Link to="/tape/vtl/create">
@@ -108,7 +108,7 @@ export default function TapeLibraries() {
{activeTab === 'physical' && (
<div>
{loadingPhysical ? (
<p className="text-sm text-gray-500">Loading physical libraries...</p>
<p className="text-sm text-text-secondary">Loading physical libraries...</p>
) : physicalLibraries && physicalLibraries.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{physicalLibraries.map((library: PhysicalTapeLibrary) => (
@@ -119,8 +119,8 @@ export default function TapeLibraries() {
<Card>
<CardContent className="p-12 text-center">
<HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">No Physical Tape Libraries</h3>
<p className="text-sm text-gray-500 mb-4">
<h3 className="text-lg font-medium text-white mb-2">No Physical Tape Libraries</h3>
<p className="text-sm text-text-secondary mb-4">
Discover physical tape libraries connected to the system
</p>
<Button variant="outline">
@@ -168,17 +168,17 @@ function LibraryCard({ library, type }: LibraryCardProps) {
<CardContent>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-500">Slots:</span>
<span className="font-medium">{library.slot_count}</span>
<span className="text-text-secondary">Slots:</span>
<span className="font-medium text-white">{library.slot_count}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Drives:</span>
<span className="font-medium">{library.drive_count}</span>
<span className="text-text-secondary">Drives:</span>
<span className="font-medium text-white">{library.drive_count}</span>
</div>
{isPhysical && 'vendor' in library && library.vendor && (
<div className="flex justify-between">
<span className="text-gray-500">Vendor:</span>
<span className="font-medium">{library.vendor} {library.model}</span>
<span className="text-text-secondary">Vendor:</span>
<span className="font-medium text-white">{library.vendor} {library.model}</span>
</div>
)}
</div>