replace tape library body layout
This commit is contained in:
Warp Agent
@@ -1,190 +1,537 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { physicalTapeAPI, vtlAPI, type PhysicalTapeLibrary, type VirtualTapeLibrary } from '@/api/tape'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { HardDrive, Plus, RefreshCw } from 'lucide-react'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { physicalTapeAPI, vtlAPI, type PhysicalTapeLibrary, type VirtualTapeLibrary, type VirtualTape } from '@/api/tape'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { formatBytes } from '@/lib/format'
|
||||
|
||||
export default function TapeLibraries() {
|
||||
const [activeTab, setActiveTab] = useState<'physical' | 'vtl'>('vtl')
|
||||
const [selectedLibrary, setSelectedLibrary] = useState<string | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data: physicalLibraries, isLoading: loadingPhysical } = useQuery<PhysicalTapeLibrary[]>({
|
||||
const { data: physicalLibraries = [], isLoading: loadingPhysical } = useQuery<PhysicalTapeLibrary[]>({
|
||||
queryKey: ['physical-tape-libraries'],
|
||||
queryFn: physicalTapeAPI.listLibraries,
|
||||
enabled: activeTab === 'physical',
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
const { data: vtlLibraries, isLoading: loadingVTL } = useQuery<VirtualTapeLibrary[]>({
|
||||
const { data: vtlLibraries = [], isLoading: loadingVTL } = useQuery<VirtualTapeLibrary[]>({
|
||||
queryKey: ['vtl-libraries'],
|
||||
queryFn: vtlAPI.listLibraries,
|
||||
enabled: activeTab === 'vtl',
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
// Get tapes for selected library
|
||||
const { data: libraryTapes = [] } = useQuery<VirtualTape[]>({
|
||||
queryKey: ['vtl-library-tapes', selectedLibrary],
|
||||
queryFn: () => vtlAPI.getLibraryTapes(selectedLibrary!),
|
||||
enabled: !!selectedLibrary && activeTab === 'vtl',
|
||||
})
|
||||
|
||||
// Calculate stats
|
||||
const totalLibraries = activeTab === 'vtl' ? vtlLibraries.length : physicalLibraries.length
|
||||
const onlineLibraries = activeTab === 'vtl'
|
||||
? vtlLibraries.filter(l => l.is_active).length
|
||||
: physicalLibraries.filter(l => l.is_active).length
|
||||
|
||||
const totalSlots = activeTab === 'vtl'
|
||||
? vtlLibraries.reduce((sum, l) => sum + l.slot_count, 0)
|
||||
: physicalLibraries.reduce((sum, l) => sum + l.slot_count, 0)
|
||||
|
||||
const usedSlots = libraryTapes.filter(t => t.slot_number > 0).length
|
||||
|
||||
// Filter libraries by search
|
||||
const filteredLibraries = (activeTab === 'vtl' ? vtlLibraries : physicalLibraries).filter(lib =>
|
||||
lib.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
(activeTab === 'vtl' && 'mhvtl_library_id' in lib && lib.mhvtl_library_id.toString().includes(searchQuery))
|
||||
)
|
||||
|
||||
const handleRefresh = () => {
|
||||
queryClient.invalidateQueries({ queryKey: activeTab === 'vtl' ? ['vtl-libraries'] : ['physical-tape-libraries'] })
|
||||
}
|
||||
|
||||
return (
|
||||
<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-white">Tape Libraries</h1>
|
||||
<p className="mt-2 text-sm text-text-secondary">
|
||||
Manage physical and virtual tape libraries
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{activeTab === 'vtl' && (
|
||||
<Link to="/tape/vtl/create">
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create VTL
|
||||
</Button>
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden relative bg-background-dark">
|
||||
{/* Top Header & Breadcrumbs */}
|
||||
<header className="flex-none px-6 py-5 border-b border-border-dark bg-[#111a22]/95 backdrop-blur z-10">
|
||||
<div className="max-w-[1400px] mx-auto w-full flex flex-col gap-4">
|
||||
{/* Breadcrumbs */}
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<Link to="/" className="text-text-secondary text-sm font-medium hover:text-primary transition-colors">
|
||||
Home
|
||||
</Link>
|
||||
)}
|
||||
{activeTab === 'physical' && (
|
||||
<Button variant="outline">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Discover Libraries
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-text-secondary text-xs">/</span>
|
||||
<span className="text-white text-sm font-medium">Virtual Tape Libraries</span>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<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-primary text-primary'
|
||||
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
|
||||
}`}
|
||||
>
|
||||
Virtual Tape Libraries ({vtlLibraries?.length || 0})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('physical')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'physical'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
|
||||
}`}
|
||||
>
|
||||
Physical Libraries ({physicalLibraries?.length || 0})
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{activeTab === 'vtl' && (
|
||||
<div>
|
||||
{loadingVTL ? (
|
||||
<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) => (
|
||||
<LibraryCard key={library.id} library={library} type="vtl" />
|
||||
))}
|
||||
{/* Page Heading & Actions */}
|
||||
<div className="flex flex-wrap justify-between items-end gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h2 className="text-white text-3xl font-bold tracking-tight">Virtual Tape Libraries</h2>
|
||||
<p className="text-text-secondary text-base max-w-2xl">
|
||||
Manage virtual tape devices, emulation profiles, and storage targets.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<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-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">
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create VTL Library
|
||||
</Button>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className="px-4 py-2 bg-surface-dark hover:bg-[#2a3b4d] border border-border-dark rounded-lg text-white text-sm font-medium flex items-center gap-2 transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-lg">refresh</span>
|
||||
Refresh
|
||||
</button>
|
||||
{activeTab === 'vtl' && (
|
||||
<Link
|
||||
to="/tape/vtl/create"
|
||||
className="px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold shadow-lg shadow-blue-900/20 flex items-center gap-2 transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-lg">add</span>
|
||||
Create VTL
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{activeTab === 'physical' && (
|
||||
<div>
|
||||
{loadingPhysical ? (
|
||||
<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) => (
|
||||
<LibraryCard key={library.id} library={library} type="physical" />
|
||||
{/* Scrollable Content */}
|
||||
<div className="flex-1 overflow-y-auto bg-background-dark">
|
||||
<div className="max-w-[1400px] mx-auto p-6 flex flex-col gap-6 pb-20">
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-border-dark">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveTab('vtl')
|
||||
setSelectedLibrary(null)
|
||||
}}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'vtl'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
|
||||
}`}
|
||||
>
|
||||
Virtual Tape Libraries ({vtlLibraries.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveTab('physical')
|
||||
setSelectedLibrary(null)
|
||||
}}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'physical'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
|
||||
}`}
|
||||
>
|
||||
Physical Libraries ({physicalLibraries.length})
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Stat Card 1 */}
|
||||
<div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
|
||||
<div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span className="material-symbols-outlined text-6xl text-white">dns</span>
|
||||
</div>
|
||||
<p className="text-text-secondary text-sm font-medium">Total Libraries</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-white text-3xl font-bold tracking-tight">{totalLibraries}</p>
|
||||
<span className="text-green-500 text-xs font-medium mb-1.5 flex items-center">
|
||||
<span className="material-symbols-outlined text-sm mr-0.5">check_circle</span>
|
||||
{onlineLibraries === totalLibraries ? 'All Online' : `${onlineLibraries} Online`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Card 2 */}
|
||||
<div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
|
||||
<div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span className="material-symbols-outlined text-6xl text-white">database</span>
|
||||
</div>
|
||||
<p className="text-text-secondary text-sm font-medium">Total Capacity</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-white text-3xl font-bold tracking-tight">
|
||||
{formatBytes(
|
||||
activeTab === 'vtl'
|
||||
? vtlLibraries.reduce((sum, l) => sum + (l.slot_count * 15 * 1024 * 1024 * 1024 * 1024), 0)
|
||||
: 0,
|
||||
1
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Card 3 */}
|
||||
<div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
|
||||
<div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span className="material-symbols-outlined text-6xl text-white">album</span>
|
||||
</div>
|
||||
<p className="text-text-secondary text-sm font-medium">Tapes Online</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-white text-3xl font-bold tracking-tight">{usedSlots}</p>
|
||||
<span className="text-text-secondary text-xs font-medium mb-1.5">/ {totalSlots} Slots</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Card 4 */}
|
||||
<div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
|
||||
<div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span className="material-symbols-outlined text-6xl text-white">swap_horiz</span>
|
||||
</div>
|
||||
<p className="text-text-secondary text-sm font-medium">Active Sessions</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-white text-3xl font-bold tracking-tight">
|
||||
{activeTab === 'vtl'
|
||||
? vtlLibraries.reduce((sum, l) => sum + l.drive_count, 0)
|
||||
: physicalLibraries.reduce((sum, l) => sum + l.drive_count, 0)}
|
||||
</p>
|
||||
<span className="text-blue-400 text-xs font-medium mb-1.5">Drives</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Progress Section */}
|
||||
<div className="p-5 rounded-xl bg-surface-dark border border-border-dark flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-text-secondary">pie_chart</span>
|
||||
<h3 className="text-white text-sm font-semibold">VTL Partition Usage (ZFS Pool)</h3>
|
||||
</div>
|
||||
<p className="text-white text-sm font-medium">
|
||||
{formatBytes(usedSlots * 15 * 1024 * 1024 * 1024 * 1024, 1)} /{' '}
|
||||
{formatBytes(totalSlots * 15 * 1024 * 1024 * 1024 * 1024, 1)} Used
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#111a22] rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-blue-600 to-primary h-3 rounded-full"
|
||||
style={{ width: `${totalSlots > 0 ? (usedSlots / totalSlots) * 100 : 0}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs text-text-secondary">
|
||||
<span>
|
||||
Compression Ratio: <span className="text-white font-mono">1.5x</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-green-400">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span> Pool Healthy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Data Table Section */}
|
||||
<div className="flex flex-col rounded-xl border border-border-dark bg-surface-dark overflow-hidden">
|
||||
{/* Toolbar */}
|
||||
<div className="p-4 border-b border-border-dark flex flex-col sm:flex-row gap-4 justify-between items-center bg-[#1c2834]">
|
||||
<div className="relative w-full sm:w-96">
|
||||
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary text-lg">
|
||||
search
|
||||
</span>
|
||||
<input
|
||||
className="w-full bg-[#111a22] border border-border-dark text-white text-sm rounded-lg pl-10 pr-4 py-2 focus:ring-1 focus:ring-primary focus:border-primary placeholder-gray-600 outline-none transition-all"
|
||||
placeholder="Search libraries by name or ID..."
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 w-full sm:w-auto">
|
||||
<button className="px-3 py-2 bg-[#111a22] hover:bg-[#1a2632] border border-border-dark rounded-lg text-text-secondary text-sm font-medium flex items-center gap-2 transition-colors">
|
||||
<span className="material-symbols-outlined text-lg">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
<button className="px-3 py-2 bg-[#111a22] hover:bg-[#1a2632] border border-border-dark rounded-lg text-text-secondary text-sm font-medium flex items-center gap-2 transition-colors">
|
||||
<span className="material-symbols-outlined text-lg">settings</span>
|
||||
Columns
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{loadingVTL || loadingPhysical ? (
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-text-secondary">Loading libraries...</p>
|
||||
</div>
|
||||
) : filteredLibraries.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<span className="material-symbols-outlined text-6xl text-text-secondary mb-4 block">database</span>
|
||||
<h3 className="text-lg font-medium text-white mb-2">
|
||||
No {activeTab === 'vtl' ? 'Virtual' : 'Physical'} Tape Libraries
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
{activeTab === 'vtl'
|
||||
? 'Create your first virtual tape library to get started'
|
||||
: 'Discover physical tape libraries connected to the system'}
|
||||
</p>
|
||||
{activeTab === 'vtl' && (
|
||||
<Link
|
||||
to="/tape/vtl/create"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold"
|
||||
>
|
||||
<span className="material-symbols-outlined text-lg">add</span>
|
||||
Create VTL Library
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#151e29] border-b border-border-dark">
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary w-12">
|
||||
<input
|
||||
className="rounded border-border-dark bg-[#111a22] text-primary focus:ring-offset-background-dark focus:ring-primary h-4 w-4"
|
||||
type="checkbox"
|
||||
/>
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
|
||||
Library Name
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
|
||||
Status
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
|
||||
Emulation
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
|
||||
Tapes / Slots
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
|
||||
iSCSI Target
|
||||
</th>
|
||||
<th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border-dark">
|
||||
{filteredLibraries.map((library) => {
|
||||
const isVTL = activeTab === 'vtl'
|
||||
const libraryId = isVTL ? (library as VirtualTapeLibrary).mhvtl_library_id : library.id
|
||||
const status = library.is_active ? 'Ready' : 'Offline'
|
||||
const statusColor = library.is_active ? 'green' : 'gray'
|
||||
const tapesCount = isVTL && selectedLibrary === library.id ? libraryTapes.length : 0
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={library.id}
|
||||
className="group hover:bg-[#233342] transition-colors cursor-pointer"
|
||||
onClick={() => isVTL && setSelectedLibrary(selectedLibrary === library.id ? null : library.id)}
|
||||
>
|
||||
<td className="py-4 px-6">
|
||||
<input
|
||||
className="rounded border-border-dark bg-[#111a22] text-primary focus:ring-offset-background-dark focus:ring-primary h-4 w-4"
|
||||
type="checkbox"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`size-8 rounded flex items-center justify-center ${
|
||||
library.is_active
|
||||
? 'bg-blue-900/30 text-primary'
|
||||
: 'bg-gray-700/30 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<span className="material-symbols-outlined text-lg">shelves</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-bold">{library.name}</p>
|
||||
<p className="text-text-secondary text-xs">ID: {libraryId}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${
|
||||
statusColor === 'green'
|
||||
? 'bg-green-500/10 text-green-400 border-green-500/20'
|
||||
: 'bg-gray-500/10 text-gray-400 border-gray-500/20'
|
||||
}`}
|
||||
>
|
||||
{statusColor === 'green' && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
|
||||
)}
|
||||
{statusColor === 'gray' && <span className="w-1.5 h-1.5 rounded-full bg-gray-500"></span>}
|
||||
{status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<p className="text-white text-sm font-medium">
|
||||
{isVTL ? 'MHVTL' : 'physical' in library ? (library as PhysicalTapeLibrary).vendor : 'N/A'}
|
||||
</p>
|
||||
<p className="text-text-secondary text-xs">
|
||||
LTO-8 • {library.drive_count} {library.drive_count === 1 ? 'Drive' : 'Drives'}
|
||||
</p>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-text-secondary text-lg">album</span>
|
||||
<span className="text-white text-sm">
|
||||
{tapesCount || 0} / {library.slot_count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-24 bg-[#111a22] rounded-full h-1 mt-1.5">
|
||||
<div
|
||||
className={`h-1 rounded-full ${
|
||||
library.is_active ? 'bg-primary' : 'bg-gray-500'
|
||||
}`}
|
||||
style={{
|
||||
width: `${library.slot_count > 0 ? ((tapesCount || 0) / library.slot_count) * 100 : 0}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<div className="flex items-center gap-2 group/copy cursor-pointer">
|
||||
<code className="text-xs text-text-secondary font-mono bg-[#111a22] px-2 py-1 rounded border border-border-dark group-hover/copy:text-white transition-colors">
|
||||
iqn.2023-10.com.vtl:{library.name.toLowerCase().replace(/\s+/g, '')}
|
||||
</code>
|
||||
<span className="material-symbols-outlined text-text-secondary text-sm opacity-0 group-hover/copy:opacity-100 transition-opacity">
|
||||
content_copy
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Link
|
||||
to={isVTL ? `/tape/vtl/${library.id}` : `/tape/physical/${library.id}`}
|
||||
className="p-2 text-text-secondary hover:text-white hover:bg-[#324d67] rounded-lg transition-colors"
|
||||
title="Manage Tapes"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span className="material-symbols-outlined text-xl">cable</span>
|
||||
</Link>
|
||||
<button
|
||||
className="p-2 text-text-secondary hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
|
||||
title="Edit Configuration"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span className="material-symbols-outlined text-xl">edit</span>
|
||||
</button>
|
||||
<button
|
||||
className="p-2 text-text-secondary hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
|
||||
title="Delete Library"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span className="material-symbols-outlined text-xl">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-[#1c2834]">
|
||||
<p className="text-text-secondary text-sm">
|
||||
Showing <span className="text-white font-medium">1-{filteredLibraries.length}</span> of{' '}
|
||||
<span className="text-white font-medium">{filteredLibraries.length}</span> libraries
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="px-3 py-1.5 rounded-lg border border-border-dark bg-[#111a22] text-text-secondary text-sm hover:text-white disabled:opacity-50"
|
||||
disabled
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1.5 rounded-lg border border-border-dark bg-[#111a22] text-text-secondary text-sm hover:text-white disabled:opacity-50"
|
||||
disabled
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tape Detail Drawer */}
|
||||
{selectedLibrary && activeTab === 'vtl' && libraryTapes.length > 0 && (
|
||||
<div className="bg-surface-dark border-t border-border-dark p-6 absolute bottom-0 w-full transform translate-y-0 transition-transform z-30 shadow-2xl shadow-black">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="material-symbols-outlined text-primary text-2xl">cable</span>
|
||||
<div>
|
||||
<h3 className="text-white text-lg font-bold">
|
||||
Tape Management: {vtlLibraries.find((l) => l.id === selectedLibrary)?.name}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-sm">
|
||||
Manage virtual cartridges, import/export slots, and barcodes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button className="px-3 py-2 bg-[#111a22] border border-border-dark rounded-lg text-text-secondary hover:text-white text-sm font-medium transition-colors">
|
||||
Bulk Format
|
||||
</button>
|
||||
<Link
|
||||
to={`/tape/vtl/${selectedLibrary}/tapes/create`}
|
||||
className="px-3 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold transition-colors flex items-center gap-2"
|
||||
>
|
||||
<span className="material-symbols-outlined text-lg">add</span>
|
||||
Add Tapes
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setSelectedLibrary(null)}
|
||||
className="lg:hidden p-2 text-text-secondary hover:text-white"
|
||||
>
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
{libraryTapes.map((tape) => (
|
||||
<div
|
||||
key={tape.id}
|
||||
className={`p-3 rounded border flex flex-col gap-2 relative group hover:border-primary transition-colors cursor-pointer ${
|
||||
tape.status === 'in_drive'
|
||||
? 'bg-[#111a22] border-green-500/30'
|
||||
: 'bg-[#111a22] border-border-dark'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<span
|
||||
className={`material-symbols-outlined text-xl ${
|
||||
tape.status === 'in_drive' ? 'text-green-500' : 'text-text-secondary'
|
||||
}`}
|
||||
>
|
||||
album
|
||||
</span>
|
||||
<span className="text-[10px] uppercase font-bold text-text-secondary bg-[#1c2834] px-1 rounded">
|
||||
Slot {tape.slot_number}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white text-xs font-mono font-bold">{tape.barcode}</p>
|
||||
<p className="text-text-secondary text-[10px]">
|
||||
{formatBytes(tape.size_bytes, 1)} / {formatBytes(tape.size_bytes, 1)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/60 hidden group-hover:flex items-center justify-center gap-2 backdrop-blur-[1px] rounded">
|
||||
<span className="material-symbols-outlined text-white hover:text-primary text-lg">eject</span>
|
||||
<span className="material-symbols-outlined text-white hover:text-red-400 text-lg">delete</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<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-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">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Discover Libraries
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface LibraryCardProps {
|
||||
library: PhysicalTapeLibrary | VirtualTapeLibrary
|
||||
type: 'physical' | 'vtl'
|
||||
}
|
||||
|
||||
function LibraryCard({ library, type }: LibraryCardProps) {
|
||||
const isPhysical = type === 'physical'
|
||||
const libraryPath = isPhysical ? `/tape/physical/${library.id}` : `/tape/vtl/${library.id}`
|
||||
|
||||
return (
|
||||
<Link to={libraryPath}>
|
||||
<Card className="hover:border-blue-500 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{library.name}</CardTitle>
|
||||
{library.is_active ? (
|
||||
<span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">
|
||||
Active
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded">
|
||||
Inactive
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isPhysical && 'serial_number' in library && (
|
||||
<CardDescription>Serial: {library.serial_number}</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<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-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-text-secondary">Vendor:</span>
|
||||
<span className="font-medium text-white">{library.vendor} {library.model}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user