numbus/Numbus
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Disks minor step improvements.

Browse Source
This commit is contained in:
Raphaël Numbus
2026-03-29 17:11:36 +02:00
parent cf1601f2b9
commit d427ef9e75
2 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
configurator/index.html
+36 -35
View File
@@ -32,7 +32,7 @@
<ul x-show="isSectionActive(section)" x-collapse
class="space-y-0 pl-1 border-l-2 border-slate-800 ml-1 transition-all duration-500">
<template x-for="minor in section.minors" :key="minor.step">
<li class="relative flex items-center gap-3 py-2 -ml-[7px] group">
<li class="relative flex items-center gap-3 py-2.5 -ml-[7px] group">
<!-- Status Dot -->
<div :class="{
'bg-fuchsia-500 shadow-[0_0_10px_rgba(192,38,211,0.8)] scale-125': step === minor.step,
@@ -42,7 +42,7 @@
class="w-3 h-3 rounded-full shrink-0 transition-all duration-300 z-10"></div>
<!-- Label -->
<span :class="step === minor.step ? 'text-white font-bold' : 'text-slate-500'"
<span :class="step === minor.step ? 'text-white font-bold' : 'text-slate-400'"
class="text-[11px] leading-tight transition-colors" x-text="minor.label"></span>
</li>
</template>
@@ -253,7 +253,7 @@
<div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-sky-400 font-bold" x-text="(user.name.charAt(0) || user.username.charAt(0) || '?').toUpperCase()"></div>
<div>
<p class="font-bold text-slate-200 text-lg group-hover:text-white transition-colors" x-text="user.name || user.username || 'New User'"></p>
<p class="text-[10px] text-slate-500 uppercase tracking-widest font-bold group-hover:text-white transition-colors" x-text="user.isStatic ? 'Administrator (Sudo)' : 'Standard User'"></p>
<p class="text-xs text-slate-500 uppercase tracking-widest font-bold group-hover:text-white transition-colors" x-text="user.isStatic ? 'Administrator (Sudo)' : 'Standard User'"></p>
</div>
</div>
<button x-show="!user.isStatic" @click="removeUser(index)" class="text-slate-500 hover:text-red-500 transition-colors">
@@ -263,7 +263,7 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Username <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Username <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<div class="relative">
<i class="mdi mdi-account absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
<input type="text" x-model="user.username" :disabled="user.isStatic"
@@ -272,7 +272,7 @@
</div>
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Display Name <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Display Name <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<div class="relative">
<i class="mdi mdi-card-account-details absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
<input type="text" x-model="user.name" :placeholder="user.isStatic ? 'Alexandre' : 'Full Name'"
@@ -280,7 +280,7 @@
</div>
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Email Address <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Email Address <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
<div class="relative">
<i class="mdi mdi-email absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
<input type="email" x-model="user.email" placeholder="admin@example.com"
@@ -403,15 +403,24 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
<!-- Boot Selection -->
<div class="space-y-6 flex flex-col">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-6 items-start">
<!-- Headers Row: Aligned horizontally -->
<div class="space-y-2">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="mdi mdi-nix text-sky-400"></i> Boot Disks
</h3>
<p class="text-sm text-slate-400">Choose 1 (Stripe) or 2 (Mirror) disks for the operating system.</p>
<div class="space-y-3">
</div>
<div class="space-y-2">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="mdi mdi-server text-sky-400"></i> Data Disks
</h3>
<p class="text-sm text-slate-400">Select disks for storage. SnapRAID parity is used if >1 disk is chosen.</p>
</div>
<!-- Lists Row: Aligned horizontally -->
<div class="space-y-3">
<template x-for="disk in sortedDisks()" :key="disk.id">
<button @click="toggleDisk(disk.id, 'boot')"
x-show="!formData.disks.data.includes(disk.id)"
@@ -430,26 +439,20 @@
</div>
</div>
<div x-show="formData.disks.boot.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
<p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> Disk health is not optimal. Use for boot with caution.</p>
<p class="text-xs text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i>Disk did not passed SMART test. You should consider using another disk.</p>
</div>
</button>
</template>
</div>
<!-- Boot Safety Warning -->
<div x-show="formData.disks.boot.length === 1" class="bg-amber-500/5 border border-amber-500/20 p-4 rounded-xl">
<p class="text-xs text-amber-200/70"><i class="mdi mdi-shield-alert mr-1"></i> <strong>Striped Config:</strong> Using only one boot disk provides no hardware redundancy. If this drive fails, the system will not boot.</p>
</div>
<div x-show="formData.disks.boot.length === 2" class="bg-green-500/5 border border-green-500/20 p-4 rounded-xl">
<p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>Mirror RAID Active:</strong> Your data is protected by redundancy.</p>
</div>
</div>
<!-- Data Selection -->
<div class="space-y-6 flex flex-col">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="mdi mdi-server text-sky-400"></i> Data Disks
</h3>
<p class="text-sm text-slate-400">Select disks for storage. SnapRAID parity is used if >1 disk is chosen.</p>
<div class="space-y-3">
<div class="space-y-3">
<template x-for="disk in sortedDisks()" :key="disk.id">
<button @click="toggleDisk(disk.id, 'data')"
x-show="!formData.disks.boot.includes(disk.id)"
@@ -468,18 +471,16 @@
</div>
</div>
<div x-show="formData.disks.data.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
<p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> SMART health warning. Consider replacing before use as data storage.</p>
<p class="text-xs text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i>Disk did not passed SMART test. You should consider using another disk.</p>
</div>
</button>
</template>
</div>
<!-- Data Safety Warning -->
<div x-show="formData.disks.data.length === 1" class="bg-amber-500/5 border border-amber-500/20 p-4 rounded-xl">
<p class="text-xs text-amber-200/70"><i class="mdi mdi-shield-alert mr-1"></i> <strong>Striped Config:</strong> One data disk provides no parity. Data loss will occur if this drive fails.</p>
</div>
<div x-show="formData.disks.data.length > 1" class="bg-green-500/5 border border-green-500/20 p-4 rounded-xl">
<p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>SnapRAID Active:</strong> Your data is protected by parity drives.</p>
<p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>SnapRAID Active:</strong> Your data is protected by redundancy.</p>
</div>
</div>
</div>
@@ -534,7 +535,7 @@
<img src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/netbird.svg" class="w-8 h-8" alt="NetBird">
<div class="font-bold text-xl" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-slate-200 group-hover:text-white'">NetBird Cloud</div>
</div>
<span class="text-[10px] bg-green-500/20 text-green-400 px-2 py-1 rounded uppercase font-bold">Recommended for small teams</span>
<span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded uppercase font-bold">Recommended for small teams</span>
</div>
<p class="text-sm leading-relaxed transition-colors" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-slate-400 group-hover:text-white'">The easiest zero-trust solution. Perfect for families and teams of up to 5 people.</p>
</button>
@@ -700,7 +701,7 @@
<img :src="'https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/' + (serviceMetadata[dns].icon || dns) + '.svg'" class="w-6 h-6" :alt="dns">
<div class="font-bold capitalize text-lg" :class="formData.services.dns === dns ? 'text-white' : 'text-slate-200 group-hover:text-white'" x-text="dns"></div>
</div>
<a :href="serviceMetadata[dns].link" target="_blank" @click.stop class="text-[10px] text-sky-400 underline opacity-40 group-hover:opacity-100 transition-opacity">Website</a>
<a :href="serviceMetadata[dns].link" target="_blank" @click.stop class="text-xs text-sky-400 underline opacity-40 group-hover:opacity-100 transition-opacity">Website</a>
</div>
<p class="text-sm leading-relaxed transition-colors" :class="formData.services.dns === dns ? 'text-white' : 'text-slate-400 group-hover:text-white'" x-text="serviceMetadata[dns].desc"></p>
</button>
@@ -717,7 +718,7 @@
<span class="text-base font-bold capitalize" x-text="app"></span>
</div>
<p class="text-sm leading-normal transition-colors" :class="formData.services.apps.includes(app) ? 'text-white' : 'text-slate-500 group-hover:text-white'" x-text="serviceMetadata[app].desc"></p>
<a :href="serviceMetadata[app].link" target="_blank" class="text-[10px] text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
<a :href="serviceMetadata[app].link" target="_blank" class="text-xs text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
</label>
</template>
</div>
@@ -734,7 +735,7 @@
<img :src="'https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/' + (serviceMetadata[sys].icon || sys) + '.svg'" :class="formData.services.system.includes(sys) ? 'opacity-100' : 'opacity-40 group-hover:opacity-100'" class="w-6 h-6 transition-opacity" :alt="sys">
</div>
<p class="text-sm transition-colors" :class="formData.services.system.includes(sys) ? 'text-white' : 'text-slate-500 group-hover:text-white'" x-text="serviceMetadata[sys].desc"></p>
<a :href="serviceMetadata[sys].link" target="_blank" class="text-[10px] text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
<a :href="serviceMetadata[sys].link" target="_blank" class="text-xs text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
</label>
</template>
</div>
@@ -939,13 +940,13 @@
<h2 class="text-4xl font-bold text-white">Deploying Numbus...</h2>
<div class="bg-black/40 rounded-xl p-6 w-full font-mono text-left text-[10px] text-green-400 border border-slate-800">
<div class="flex justify-between items-center mb-4 border-b border-slate-800 pb-2">
<span class="uppercase tracking-widest text-slate-500">Live Terminal Logs</span>
<button class="text-[9px] bg-slate-800 px-2 py-0.5 rounded text-slate-400">Toggle Logs</button>
<span class="uppercase tracking-widest text-slate-500 text-xs">Live Terminal Logs</span>
<button class="text-xs bg-slate-800 px-2 py-1 rounded text-slate-400">Toggle Logs</button>
</div>
<div class="h-40 overflow-y-auto custom-scrollbar">
<p class="text-fuchsia-400">[INFO] Starting deployment sequence...</p>
<p class="text-sky-400">[CMD] nixos-anywhere --flake .#numbus-server</p>
<p class="text-slate-500">[STDOUT] Initializing remote connection...</p>
<p class="text-fuchsia-400 text-xs">[INFO] Starting deployment sequence...</p>
<p class="text-sky-400 text-xs">[CMD] nixos-anywhere --flake .#numbus-server</p>
<p class="text-slate-500 text-xs">[STDOUT] Initializing remote connection...</p>
</div>
</div>
</div>
deploy.sh
+1 -1
View File
@@ -109,8 +109,8 @@ for DISK in \$(lsblk -x SIZE -d -n -e 7,11 -o NAME); do
HDD=\$(cat /sys/block/\$DISK/queue/rotational)
TRANSPORT_PROTOCOL=\$(lsblk -x SIZE -d -n -e 7,11 -o TRAN /dev/\$DISK)
if [[ "\$DISK" == "nvme*" ]]; then DISK_TYPE+=("NVMe");
elif [[ "\$HDD" -eq 1 ]]; then DISK_TYPE+=("HDD");
elif [[ "\$TRANSPORT_PROTOCOL" == "usb" ]]; then DISK_TYPE+=("USB");
elif [[ "\$HDD" -eq 1 ]]; then DISK_TYPE+=("HDD");
elif [[ "\$HDD" -eq 0 ]]; then DISK_TYPE+=("SSD");
else DISK_TYPE+=("Other")
fi