othman.suseno/atlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified nav bar
Some checks failed
CI / test-build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
othman hendy suseno
2025-12-18 18:10:02 +07:00
parent e36c855bf4
commit 8029bcfa15
2 changed files with 196 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/templates/storage.html
View File

@@ -1,33 +1,33 @@
{{define "storage-content"}}
<div class="space-y-6">
<div class="flex items-center justify-between">
<div class="space-y-4 sm:space-y-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 class="text-3xl font-bold text-white mb-2">Storage Management</h1>
<p class="text-slate-400">Manage storage pools, datasets, and volumes</p>
<h1 class="text-2xl sm:text-3xl font-bold text-white mb-2">Storage Management</h1>
<p class="text-sm sm:text-base text-slate-400">Manage storage pools, datasets, and volumes</p>
</div>
<div class="flex gap-2">
<button onclick="showCreatePoolModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
<div class="flex flex-col sm:flex-row gap-2">
<button onclick="showCreatePoolModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
Create Pool
</button>
<button onclick="showImportPoolModal()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm font-medium">
<button onclick="showImportPoolModal()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm font-medium transition-colors">
Import Pool
</button>
</div>
</div>
<!-- Tabs -->
<div class="border-b border-slate-800">
<nav class="flex gap-4">
<button onclick="switchTab('pools')" id="tab-pools" class="tab-button px-4 py-2 border-b-2 border-blue-600 text-blue-400 font-medium">
<div class="border-b border-slate-800 overflow-x-auto">
<nav class="flex gap-2 sm:gap-4 min-w-max">
<button onclick="switchTab('pools')" id="tab-pools" class="tab-button px-3 sm:px-4 py-2 border-b-2 border-blue-600 text-blue-400 font-medium whitespace-nowrap text-sm sm:text-base">
Pools
</button>
<button onclick="switchTab('datasets')" id="tab-datasets" class="tab-button px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300">
<button onclick="switchTab('datasets')" id="tab-datasets" class="tab-button px-3 sm:px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300 whitespace-nowrap text-sm sm:text-base">
Datasets
</button>
<button onclick="switchTab('zvols')" id="tab-zvols" class="tab-button px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300">
<button onclick="switchTab('zvols')" id="tab-zvols" class="tab-button px-3 sm:px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300 whitespace-nowrap text-sm sm:text-base">
Volumes
</button>
<button onclick="switchTab('disks')" id="tab-disks" class="tab-button px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300">
<button onclick="switchTab('disks')" id="tab-disks" class="tab-button px-3 sm:px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300 whitespace-nowrap text-sm sm:text-base">
Disks
</button>
</nav>
@@ -100,7 +100,7 @@
</div>
<div class="p-6">
<!-- Visual Disk Grid -->
<div id="disks-visual" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
<div id="disks-visual" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4 mb-6">
<p class="text-slate-400 text-sm col-span-full">Loading...</p>
</div>
@@ -147,8 +147,8 @@
</div>
<!-- Create Pool Modal -->
<div id="create-pool-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
<div id="create-pool-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
<h3 class="text-xl font-semibold text-white mb-4">Create Storage Pool</h3>
<form id="create-pool-form" onsubmit="createPool(event)" class="space-y-4">
<div>
@@ -173,8 +173,8 @@
</div>
<!-- Import Pool Modal -->
<div id="import-pool-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
<div id="import-pool-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
<h3 class="text-xl font-semibold text-white mb-4">Import Storage Pool</h3>
<form id="import-pool-form" onsubmit="importPool(event)" class="space-y-4">
<div>
@@ -200,8 +200,8 @@
</div>
<!-- Create Dataset Modal -->
<div id="create-dataset-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
<div id="create-dataset-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
<h3 class="text-xl font-semibold text-white mb-4">Create Dataset</h3>
<form id="create-dataset-form" onsubmit="createDataset(event)" class="space-y-4">
<div>
@@ -234,8 +234,8 @@
</div>
<!-- Create Storage Volume Modal -->
<div id="create-zvol-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
<div id="create-zvol-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-4 sm:p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
<h3 class="text-xl font-semibold text-white mb-4">Create Storage Volume</h3>
<form id="create-zvol-form" onsubmit="createZVOL(event)" class="space-y-4">
<div>