othman.suseno/calypso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0537709576ed1f0cca14053be61b5dfc8d7cb541
calypso/src/web/iscsi-management-code.html
Othman H. Suseno 0537709576 add instruction and srs
2025-12-24 23:55:55 +07:00

401 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>iSCSI Management - Backup Appliance</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#137fec",
"background-light": "#f6f7f8",
"background-dark": "#101922",
"card-dark": "#16202a",
"border-dark": "#2a3b4d",
"text-secondary": "#92adc9"
},
fontFamily: {
"display": ["Manrope", "sans-serif"],
"mono": ["Noto Sans Mono", "monospace"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #111a22;
}
::-webkit-scrollbar-thumb {
background: #324d67;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #46607a;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-white overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<!-- Side Navigation -->
<div class="w-64 flex-shrink-0 flex flex-col bg-card-dark border-r border-border-dark h-full">
<div class="flex flex-col h-full p-4">
<!-- Header Profile -->
<div class="flex gap-3 items-center mb-8 px-2">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border border-border-dark" data-alt="User avatar abstract pattern" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCJzKcwFPccDv__mDYernJcx4x-1RaTn-w6K_hxr0iUUTE3xdGfUTI_hhfzMV2mhqO9cVPahE5gX6S4QuOr3teWZ1YH0wvsh1rSWwefN2m2PQEr8-51Z9mHsAlwkXnBK_LsLe7oXWMJT-HP55P30D8y_M1GeCJIFpEPpM9dkrJCB_lG9yx6MCCQsWKySuAKZCGuFnmHPXhyLqNjCzdfwtZfbiOHdvL7f39qstx3_MgW4D0QAvnp4_q0rksyLt6Iu9grimhngf42C_M");'></div>
<div class="flex flex-col">
<h1 class="text-white text-base font-bold leading-normal">Backup Appliance</h1>
<p class="text-text-secondary text-xs font-normal leading-normal">Host: backup-z01</p>
</div>
</div>
<!-- Navigation Links -->
<nav class="flex flex-col gap-2 flex-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-text-secondary group-hover:text-white" style="font-size: 24px;">dashboard</span>
<span class="text-sm font-medium leading-normal">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-white border border-primary/20" href="#">
<span class="material-symbols-outlined text-primary" style="font-size: 24px;">hard_drive</span>
<span class="text-sm font-bold leading-normal">Storage</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-text-secondary group-hover:text-white" style="font-size: 24px;">share</span>
<span class="text-sm font-medium leading-normal">Network</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-text-secondary group-hover:text-white" style="font-size: 24px;">settings</span>
<span class="text-sm font-medium leading-normal">System</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-text-secondary group-hover:text-white" style="font-size: 24px;">description</span>
<span class="text-sm font-medium leading-normal">Logs</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-text-secondary group-hover:text-white" style="font-size: 24px;">terminal</span>
<span class="text-sm font-medium leading-normal">Terminal</span>
</a>
</nav>
<div class="mt-auto pt-4 border-t border-border-dark">
<a class="flex items-center gap-3 px-3 py-2 text-text-secondary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined" style="font-size: 20px;">logout</span>
<span class="text-sm font-medium">Logout</span>
</a>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col h-full overflow-hidden relative">
<!-- Scrollable Container -->
<div class="flex-1 overflow-y-auto p-8">
<div class="max-w-[1200px] mx-auto flex flex-col gap-6">
<!-- Breadcrumbs -->
<div class="flex flex-wrap items-center gap-2">
<a class="text-text-secondary text-sm font-medium hover:text-white transition-colors" href="#">Storage</a>
<span class="material-symbols-outlined text-text-secondary" style="font-size: 16px;">chevron_right</span>
<span class="text-white text-sm font-medium">iSCSI Management</span>
</div>
<!-- Page Heading -->
<div class="flex flex-wrap justify-between items-end gap-4">
<div class="flex flex-col gap-2">
<h1 class="text-white text-3xl font-extrabold leading-tight tracking-tight">iSCSI Management</h1>
<p class="text-text-secondary text-base font-normal">Manage targets, portals, and initiator access control lists.</p>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-4 h-10 rounded-lg bg-card-dark border border-border-dark hover:bg-white/5 text-white text-sm font-semibold transition-colors">
<span class="material-symbols-outlined" style="font-size: 20px;">settings</span>
<span>Global Settings</span>
</button>
<button class="flex items-center gap-2 px-4 h-10 rounded-lg bg-primary hover:bg-blue-600 text-white text-sm font-bold shadow-lg shadow-blue-900/20 transition-colors">
<span class="material-symbols-outlined" style="font-size: 20px;">add</span>
<span>Create Target</span>
</button>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex flex-col gap-1 rounded-xl p-5 bg-card-dark border border-border-dark shadow-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Service Status</p>
<span class="material-symbols-outlined text-green-500" style="font-size: 24px;">check_circle</span>
</div>
<p class="text-white text-2xl font-bold">Running</p>
<p class="text-green-500 text-xs font-medium mt-1">Uptime: 14d 2h</p>
</div>
<div class="flex flex-col gap-1 rounded-xl p-5 bg-card-dark border border-border-dark shadow-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Port Binding</p>
<span class="material-symbols-outlined text-text-secondary" style="font-size: 24px;">dns</span>
</div>
<p class="text-white text-2xl font-bold">3260</p>
<p class="text-text-secondary text-xs font-medium mt-1">Listening on 0.0.0.0</p>
</div>
<div class="flex flex-col gap-1 rounded-xl p-5 bg-card-dark border border-border-dark shadow-sm">
<div class="flex items-center justify-between mb-2">
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Active Sessions</p>
<span class="material-symbols-outlined text-primary" style="font-size: 24px;">swap_horiz</span>
</div>
<div class="flex items-baseline gap-2">
<p class="text-white text-2xl font-bold">12</p>
<span class="text-green-500 text-sm font-medium flex items-center">
<span class="material-symbols-outlined" style="font-size: 16px;">arrow_upward</span> 2
</span>
</div>
<p class="text-text-secondary text-xs font-medium mt-1">Total throughput: 450 MB/s</p>
</div>
</div>
<!-- Tabs & Filters -->
<div class="flex flex-col bg-card-dark border border-border-dark rounded-xl overflow-hidden shadow-sm">
<!-- Tabs Header -->
<div class="border-b border-border-dark px-6">
<div class="flex gap-8">
<button class="relative py-4 text-primary font-bold text-sm tracking-wide">
Targets
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-primary rounded-t-full"></div>
</button>
<button class="relative py-4 text-text-secondary hover:text-white font-medium text-sm tracking-wide transition-colors">
Portals
</button>
<button class="relative py-4 text-text-secondary hover:text-white font-medium text-sm tracking-wide transition-colors">
Initiators
</button>
<button class="relative py-4 text-text-secondary hover:text-white font-medium text-sm tracking-wide transition-colors">
Extents
</button>
</div>
</div>
<!-- Toolbar -->
<div class="p-4 flex items-center justify-between gap-4 border-b border-border-dark/50 bg-[#141d26]">
<div class="relative flex-1 max-w-md">
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-text-secondary" style="font-size: 20px;">search</span>
<input class="w-full bg-[#0f161d] border border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all placeholder-text-secondary/50" placeholder="Search targets by alias or IQN..." type="text"/>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 px-3 py-1.5 rounded-md bg-[#0f161d] border border-border-dark">
<span class="text-xs text-text-secondary font-medium">Filter:</span>
<select class="bg-transparent text-xs text-white font-medium focus:outline-none cursor-pointer">
<option>All Status</option>
<option>Online</option>
<option>Offline</option>
</select>
</div>
</div>
</div>
<!-- Targets List -->
<div class="flex flex-col">
<!-- Row 1: Expanded -->
<div class="group border-b border-border-dark bg-white/[0.02]">
<!-- Main Row -->
<div class="flex items-center p-4 gap-4 hover:bg-white/5 transition-colors cursor-pointer border-l-4 border-primary">
<div class="p-2 rounded-md bg-primary/10 text-primary">
<span class="material-symbols-outlined" style="font-size: 24px;">dns</span>
</div>
<div class="flex-1 min-w-0 flex flex-col gap-1">
<div class="flex items-center gap-3">
<span class="text-white font-bold text-sm">backup-target-01</span>
<span class="px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 text-[10px] font-bold uppercase tracking-wide border border-green-500/20">Online</span>
</div>
<div class="flex items-center gap-2 group/iqn">
<span class="text-text-secondary font-mono text-xs truncate">iqn.2023-10.lan.backup:target01</span>
<button class="opacity-0 group-hover/iqn:opacity-100 text-text-secondary hover:text-white transition-opacity" title="Copy IQN">
<span class="material-symbols-outlined" style="font-size: 14px;">content_copy</span>
</button>
</div>
</div>
<div class="hidden md:flex items-center gap-8 mr-4">
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">LUNs</span>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-text-secondary" style="font-size: 16px;">hard_drive</span>
<span class="text-white text-sm font-bold">3</span>
</div>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">Auth</span>
<span class="text-white text-sm font-medium">CHAP</span>
</div>
</div>
<button class="p-2 hover:bg-white/10 rounded-full text-text-secondary hover:text-white transition-colors">
<span class="material-symbols-outlined" style="font-size: 24px;">expand_less</span>
</button>
</div>
<!-- Expanded Detail Panel -->
<div class="px-4 pb-4 pt-0">
<div class="bg-[#0f161d] border border-border-dark rounded-lg p-4 grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Left: LUNs -->
<div class="flex flex-col gap-3">
<div class="flex items-center justify-between">
<h4 class="text-xs font-bold text-text-secondary uppercase tracking-wider">Attached LUNs</h4>
<button class="text-primary text-xs font-bold hover:underline">+ Add LUN</button>
</div>
<div class="flex flex-col gap-2">
<!-- LUN Item -->
<div class="flex items-center justify-between p-3 rounded bg-card-dark border border-border-dark hover:border-border-dark/80 transition-colors">
<div class="flex items-center gap-3">
<div class="bg-blue-500/10 text-blue-400 p-1.5 rounded">
<span class="material-symbols-outlined" style="font-size: 18px;">pie_chart</span>
</div>
<div class="flex flex-col">
<span class="text-white text-xs font-bold">LUN 0</span>
<span class="text-text-secondary text-[10px]">zvol/tank/vm-backups/win-server</span>
</div>
</div>
<div class="text-right">
<span class="text-white text-xs font-mono">500 GB</span>
</div>
</div>
<!-- LUN Item -->
<div class="flex items-center justify-between p-3 rounded bg-card-dark border border-border-dark hover:border-border-dark/80 transition-colors">
<div class="flex items-center gap-3">
<div class="bg-blue-500/10 text-blue-400 p-1.5 rounded">
<span class="material-symbols-outlined" style="font-size: 18px;">pie_chart</span>
</div>
<div class="flex flex-col">
<span class="text-white text-xs font-bold">LUN 1</span>
<span class="text-text-secondary text-[10px]">file/mnt/tank/iso-store</span>
</div>
</div>
<div class="text-right">
<span class="text-white text-xs font-mono">2.5 TB</span>
</div>
</div>
</div>
</div>
<!-- Right: ACLs & Config -->
<div class="flex flex-col gap-3">
<div class="flex items-center justify-between">
<h4 class="text-xs font-bold text-text-secondary uppercase tracking-wider">Access Control</h4>
<button class="text-primary text-xs font-bold hover:underline">Edit Policy</button>
</div>
<div class="flex flex-col gap-2 h-full">
<div class="p-3 rounded bg-card-dark border border-border-dark flex flex-col gap-2">
<div class="flex justify-between items-center pb-2 border-b border-border-dark/50">
<span class="text-text-secondary text-xs">Auth Method</span>
<span class="text-white text-xs font-bold">CHAP Mutual</span>
</div>
<div class="flex justify-between items-center py-1">
<span class="text-text-secondary text-xs">Initiator Group</span>
<span class="text-primary text-xs font-bold cursor-pointer hover:underline">group-esxi-cluster-01</span>
</div>
<div class="mt-2 bg-[#0f161d] p-2 rounded border border-border-dark/30">
<p class="text-[10px] text-text-secondary mb-1">Allowed Initiators (3):</p>
<p class="text-[10px] font-mono text-white/80">iqn.1998-01.com.vmware:esx01-4a2b...</p>
<p class="text-[10px] font-mono text-white/80">iqn.1998-01.com.vmware:esx02-9c3d...</p>
</div>
</div>
</div>
</div>
<!-- Action Footer in Expanded View -->
<div class="col-span-1 lg:col-span-2 flex justify-end gap-2 mt-2 pt-3 border-t border-border-dark/50">
<button class="px-3 py-1.5 rounded text-xs font-bold text-red-400 hover:bg-red-400/10 transition-colors">Delete Target</button>
<button class="px-3 py-1.5 rounded text-xs font-bold text-text-secondary hover:bg-white/10 transition-colors">View Metrics</button>
<button class="px-3 py-1.5 rounded bg-primary text-white text-xs font-bold hover:bg-blue-600 transition-colors">Save Changes</button>
</div>
</div>
</div>
</div>
<!-- Row 2: Collapsed -->
<div class="group border-b border-border-dark bg-transparent">
<div class="flex items-center p-4 gap-4 hover:bg-white/5 transition-colors cursor-pointer border-l-4 border-transparent hover:border-border-dark">
<div class="p-2 rounded-md bg-border-dark/50 text-text-secondary">
<span class="material-symbols-outlined" style="font-size: 24px;">dns</span>
</div>
<div class="flex-1 min-w-0 flex flex-col gap-1">
<div class="flex items-center gap-3">
<span class="text-white font-bold text-sm">archive-cold-storage</span>
<span class="px-2 py-0.5 rounded-full bg-yellow-500/20 text-yellow-500 text-[10px] font-bold uppercase tracking-wide border border-yellow-500/20">Idle</span>
</div>
<div class="flex items-center gap-2 group/iqn">
<span class="text-text-secondary font-mono text-xs truncate">iqn.2023-10.lan.backup:archive002</span>
<button class="opacity-0 group-hover/iqn:opacity-100 text-text-secondary hover:text-white transition-opacity">
<span class="material-symbols-outlined" style="font-size: 14px;">content_copy</span>
</button>
</div>
</div>
<div class="hidden md:flex items-center gap-8 mr-4">
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">LUNs</span>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-text-secondary" style="font-size: 16px;">hard_drive</span>
<span class="text-white text-sm font-bold">1</span>
</div>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">Auth</span>
<span class="text-white text-sm font-medium">None</span>
</div>
</div>
<button class="p-2 hover:bg-white/10 rounded-full text-text-secondary hover:text-white transition-colors">
<span class="material-symbols-outlined" style="font-size: 24px;">expand_more</span>
</button>
</div>
</div>
<!-- Row 3: Collapsed -->
<div class="group border-b border-border-dark bg-transparent">
<div class="flex items-center p-4 gap-4 hover:bg-white/5 transition-colors cursor-pointer border-l-4 border-transparent hover:border-border-dark">
<div class="p-2 rounded-md bg-border-dark/50 text-text-secondary">
<span class="material-symbols-outlined" style="font-size: 24px;">dns</span>
</div>
<div class="flex-1 min-w-0 flex flex-col gap-1">
<div class="flex items-center gap-3">
<span class="text-white font-bold text-sm">dev-sandbox-target</span>
<span class="px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 text-[10px] font-bold uppercase tracking-wide border border-red-500/20">Offline</span>
</div>
<div class="flex items-center gap-2 group/iqn">
<span class="text-text-secondary font-mono text-xs truncate">iqn.2023-10.lan.backup:sandbox-dev</span>
<button class="opacity-0 group-hover/iqn:opacity-100 text-text-secondary hover:text-white transition-opacity">
<span class="material-symbols-outlined" style="font-size: 14px;">content_copy</span>
</button>
</div>
</div>
<div class="hidden md:flex items-center gap-8 mr-4">
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">LUNs</span>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-text-secondary" style="font-size: 16px;">hard_drive</span>
<span class="text-text-secondary text-sm font-bold">0</span>
</div>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase text-text-secondary font-bold tracking-wider">Auth</span>
<span class="text-white text-sm font-medium">CHAP</span>
</div>
</div>
<button class="p-2 hover:bg-white/10 rounded-full text-text-secondary hover:text-white transition-colors">
<span class="material-symbols-outlined" style="font-size: 24px;">expand_more</span>
</button>
</div>
</div>
</div>
<!-- Pagination / Footer of table -->
<div class="p-4 bg-[#141d26] border-t border-border-dark flex items-center justify-between">
<p class="text-xs text-text-secondary">Showing 1-3 of 3 targets</p>
<div class="flex gap-2">
<button class="p-1 rounded text-text-secondary hover:text-white hover:bg-white/10 disabled:opacity-50">
<span class="material-symbols-outlined" style="font-size: 20px;">chevron_left</span>
</button>
<button class="p-1 rounded text-text-secondary hover:text-white hover:bg-white/10">
<span class="material-symbols-outlined" style="font-size: 20px;">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink