working on system management
This commit is contained in:
Warp Agent
@@ -460,10 +460,10 @@ export default function TapeLibraries() {
|
||||
</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">
|
||||
{selectedLibrary && activeTab === 'vtl' && (
|
||||
<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 max-h-[70vh] overflow-y-auto">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="material-symbols-outlined text-primary text-2xl">cable</span>
|
||||
<div>
|
||||
@@ -475,7 +475,7 @@ export default function TapeLibraries() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<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>
|
||||
@@ -488,47 +488,71 @@ export default function TapeLibraries() {
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setSelectedLibrary(null)}
|
||||
className="lg:hidden p-2 text-text-secondary hover:text-white"
|
||||
className="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'
|
||||
}`}
|
||||
|
||||
{libraryTapes.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<span className="material-symbols-outlined text-6xl text-text-secondary mb-4 block">album</span>
|
||||
<h3 className="text-lg font-medium text-white mb-2">No Tapes Found</h3>
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
This library has no tapes yet. Create tapes to get started.
|
||||
</p>
|
||||
<Link
|
||||
to={`/tape/vtl/${selectedLibrary}/tapes/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"
|
||||
>
|
||||
<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>
|
||||
<span className="material-symbols-outlined text-lg">add</span>
|
||||
Add Tapes
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
|
||||
{libraryTapes.map((tape) => (
|
||||
<div
|
||||
key={tape.id}
|
||||
className={`p-3 rounded-lg border flex flex-col gap-2 relative group hover:border-primary transition-all cursor-pointer min-h-[120px] ${
|
||||
tape.status === 'in_drive'
|
||||
? 'bg-[#111a22] border-green-500/30 shadow-lg shadow-green-500/10'
|
||||
: 'bg-[#111a22] border-border-dark hover:shadow-lg hover:shadow-primary/10'
|
||||
}`}
|
||||
>
|
||||
<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.5 py-0.5 rounded">
|
||||
SLOT {tape.slot_number}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-center">
|
||||
<p className="text-white text-xs font-mono font-bold truncate" title={tape.barcode}>
|
||||
{tape.barcode}
|
||||
</p>
|
||||
<p className="text-text-secondary text-[10px] mt-1">
|
||||
{formatBytes(tape.size_bytes, 1)} / {formatBytes(tape.size_bytes, 1)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/70 hidden group-hover:flex items-center justify-center gap-2 backdrop-blur-sm rounded-lg">
|
||||
<button className="p-2 text-white hover:text-primary hover:bg-primary/20 rounded transition-colors" title="Eject">
|
||||
<span className="material-symbols-outlined text-lg">eject</span>
|
||||
</button>
|
||||
<button className="p-2 text-white hover:text-red-400 hover:bg-red-400/20 rounded transition-colors" title="Delete">
|
||||
<span className="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user