Merge remote-tracking branch 'origin/development' into development
This commit is contained in:
Warp Agent
BIN
src/Logo-Icon-Adastra-Dark-Mode.png
Normal file
BIN
src/Logo-Icon-Adastra-Dark-Mode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -336,4 +336,5 @@ Feature dianggap selesai jika:
|
||||
Jika ada konflik antar dokumen:
|
||||
**FILE INI ADALAH SUMBER KEBENARAN.**
|
||||
|
||||
|
||||
AtlasOS – Calypso adalah **tape & VTL appliance kelas enterprise**.
|
||||
372
src/web/backup-management-code.html
Normal file
372
src/web/backup-management-code.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Bacula Backup Management</title>
|
||||
<!-- Google Fonts -->
|
||||
<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&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Theme Config -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#137fec",
|
||||
"background-light": "#f6f7f8",
|
||||
"background-dark": "#101922",
|
||||
"surface-dark": "#111a22",
|
||||
"surface-highlight": "#1c2936",
|
||||
"border-dark": "#324d67",
|
||||
"text-secondary": "#92adc9",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "sans-serif"]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Custom scrollbar for dark theme dashboard feel */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #101922;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #324d67;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #4b6a88;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display">
|
||||
<div class="relative flex h-screen w-full overflow-hidden">
|
||||
<!-- Side Navigation -->
|
||||
<aside class="flex w-64 flex-col border-r border-border-dark bg-surface-dark flex-shrink-0">
|
||||
<div class="flex h-full flex-col justify-between p-4">
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Host Info -->
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-primary">dns</span>
|
||||
<h1 class="text-white text-base font-bold leading-normal">System Admin</h1>
|
||||
</div>
|
||||
<p class="text-text-secondary text-xs font-mono pl-8">Host: backup-srv-01</p>
|
||||
</div>
|
||||
<!-- Nav Links -->
|
||||
<nav class="flex flex-col gap-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">speed</span>
|
||||
<p class="text-sm font-medium leading-normal">Overview</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<p class="text-sm font-medium leading-normal">Storage</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">hub</span>
|
||||
<p class="text-sm font-medium leading-normal">Networking</p>
|
||||
</a>
|
||||
<!-- Active Item -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-[#233648] text-white shadow-sm border border-border-dark/30" href="#">
|
||||
<span class="material-symbols-outlined text-primary fill-1">backup</span>
|
||||
<p class="text-sm font-bold leading-normal">Bacula Backup</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<p class="text-sm font-medium leading-normal">Logs</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<p class="text-sm font-medium leading-normal">System</p>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Bottom User Profile -->
|
||||
<div class="flex items-center gap-3 px-3 py-3 mt-auto rounded-lg bg-surface-highlight border border-border-dark">
|
||||
<div class="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-xs">
|
||||
AD
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-white text-xs font-bold">Admin User</p>
|
||||
<p class="text-text-secondary text-[10px]">root@localhost</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col h-full overflow-y-auto bg-background-dark">
|
||||
<div class="flex flex-col w-full max-w-[1200px] mx-auto p-6 md:p-8 gap-6">
|
||||
<!-- Page Heading -->
|
||||
<header class="flex flex-wrap justify-between items-end gap-4 border-b border-border-dark pb-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">Bacula Backup Manager</h1>
|
||||
<span class="flex h-3 w-3 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-base font-normal max-w-2xl">
|
||||
Manage backup jobs, configure clients, and monitor storage pools from a central director console.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 cursor-pointer justify-center rounded-lg h-10 px-4 bg-surface-highlight border border-border-dark text-white text-sm font-bold hover:bg-[#2a3c50] transition-colors">
|
||||
<span class="material-symbols-outlined text-base">terminal</span>
|
||||
<span>Console</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 cursor-pointer justify-center rounded-lg h-10 px-4 bg-primary text-white text-sm font-bold shadow-lg shadow-primary/20 hover:bg-primary/90 transition-colors">
|
||||
<span class="material-symbols-outlined text-base">refresh</span>
|
||||
<span>Restart Director</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="w-full overflow-x-auto">
|
||||
<div class="flex border-b border-border-dark gap-8 min-w-max">
|
||||
<a class="flex items-center gap-2 border-b-[3px] border-primary text-white pb-3 pt-2" href="#">
|
||||
<span class="material-symbols-outlined text-base">dashboard</span>
|
||||
<p class="text-sm font-bold tracking-wide">Dashboard</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-2 border-b-[3px] border-transparent text-text-secondary hover:text-white pb-3 pt-2 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-base">task</span>
|
||||
<p class="text-sm font-bold tracking-wide">Jobs</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-2 border-b-[3px] border-transparent text-text-secondary hover:text-white pb-3 pt-2 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-base">devices</span>
|
||||
<p class="text-sm font-bold tracking-wide">Clients</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-2 border-b-[3px] border-transparent text-text-secondary hover:text-white pb-3 pt-2 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-base">storage</span>
|
||||
<p class="text-sm font-bold tracking-wide">Storage</p>
|
||||
</a>
|
||||
<a class="flex items-center gap-2 border-b-[3px] border-transparent text-text-secondary hover:text-white pb-3 pt-2 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-base">history</span>
|
||||
<p class="text-sm font-bold tracking-wide">Restore</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats Dashboard -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- Service Status Card -->
|
||||
<div class="flex flex-col justify-between rounded-lg p-5 bg-surface-highlight border border-border-dark relative overflow-hidden group">
|
||||
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl">health_and_safety</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 z-10">
|
||||
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Director Status</p>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="material-symbols-outlined text-green-500">check_circle</span>
|
||||
<p class="text-white text-2xl font-bold">Active</p>
|
||||
</div>
|
||||
<p class="text-green-500 text-xs font-mono mt-1">Uptime: 14d 2h 12m</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Last Backup Card -->
|
||||
<div class="flex flex-col justify-between rounded-lg p-5 bg-surface-highlight border border-border-dark relative overflow-hidden group">
|
||||
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl">schedule</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 z-10">
|
||||
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Last Job</p>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<p class="text-white text-2xl font-bold">Success</p>
|
||||
</div>
|
||||
<p class="text-text-secondary text-xs mt-1">DailyBackup • 2h 15m ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Active Jobs Card -->
|
||||
<div class="flex flex-col justify-between rounded-lg p-5 bg-surface-highlight border border-border-dark relative overflow-hidden group">
|
||||
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl">pending_actions</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 z-10">
|
||||
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Active Jobs</p>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<p class="text-primary text-2xl font-bold">3 Running</p>
|
||||
</div>
|
||||
<div class="w-full bg-surface-dark h-1.5 rounded-full mt-3 overflow-hidden">
|
||||
<div class="bg-primary h-full rounded-full animate-pulse w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Storage Pool Card -->
|
||||
<div class="flex flex-col justify-between rounded-lg p-5 bg-surface-highlight border border-border-dark relative overflow-hidden group">
|
||||
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl">hard_drive</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 z-10 w-full">
|
||||
<div class="flex justify-between items-center">
|
||||
<p class="text-text-secondary text-sm font-medium uppercase tracking-wider">Default Pool</p>
|
||||
<span class="text-white text-xs font-bold">78%</span>
|
||||
</div>
|
||||
<div class="flex items-end gap-1 mt-1">
|
||||
<p class="text-white text-2xl font-bold">9.4 TB</p>
|
||||
<p class="text-text-secondary text-sm mb-1">/ 12 TB</p>
|
||||
</div>
|
||||
<div class="w-full bg-surface-dark h-2 rounded-full mt-2 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-primary to-blue-400 h-full rounded-full" style="width: 78%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Jobs Section -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<h3 class="text-white text-lg font-bold">Recent Job History</h3>
|
||||
<button class="text-primary text-sm font-bold hover:text-blue-300 transition-colors">View All History</button>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border-dark bg-surface-highlight overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-dark border-b border-border-dark text-text-secondary text-xs uppercase tracking-wider">
|
||||
<th class="px-6 py-4 font-semibold">Status</th>
|
||||
<th class="px-6 py-4 font-semibold">Job ID</th>
|
||||
<th class="px-6 py-4 font-semibold">Job Name</th>
|
||||
<th class="px-6 py-4 font-semibold">Client</th>
|
||||
<th class="px-6 py-4 font-semibold">Type</th>
|
||||
<th class="px-6 py-4 font-semibold">Level</th>
|
||||
<th class="px-6 py-4 font-semibold">Duration</th>
|
||||
<th class="px-6 py-4 font-semibold">Bytes</th>
|
||||
<th class="px-6 py-4 font-semibold text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark text-sm">
|
||||
<!-- Running Job -->
|
||||
<tr class="hover:bg-surface-dark/50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="block h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse"></span>
|
||||
Running
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">10423</td>
|
||||
<td class="px-6 py-4 text-white font-medium">WeeklyArchive</td>
|
||||
<td class="px-6 py-4 text-text-secondary">filesrv-02</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Backup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Full</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">00:45:12</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">142 GB</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">cancel</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Successful Job -->
|
||||
<tr class="hover:bg-surface-dark/50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">check</span>
|
||||
OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">10422</td>
|
||||
<td class="px-6 py-4 text-white font-medium">DailyBackup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">web-srv-01</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Backup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Incr</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">00:12:05</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">4.2 GB</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Failed Job -->
|
||||
<tr class="hover:bg-surface-dark/50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium bg-red-500/10 text-red-400 border border-red-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">error</span>
|
||||
Error
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">10421</td>
|
||||
<td class="px-6 py-4 text-white font-medium">DB_Snapshot</td>
|
||||
<td class="px-6 py-4 text-text-secondary">db-prod-01</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Backup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Diff</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">00:00:04</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">0 B</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">replay</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Another Success -->
|
||||
<tr class="hover:bg-surface-dark/50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="material-symbols-outlined text-[14px]">check</span>
|
||||
OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">10420</td>
|
||||
<td class="px-6 py-4 text-white font-medium">CatalogBackup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">backup-srv-01</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Backup</td>
|
||||
<td class="px-6 py-4 text-text-secondary">Full</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">00:05:30</td>
|
||||
<td class="px-6 py-4 text-text-secondary font-mono">850 MB</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-surface-dark transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination/Footer -->
|
||||
<div class="bg-surface-dark border-t border-border-dark px-6 py-3 flex items-center justify-between">
|
||||
<p class="text-text-secondary text-xs">Showing 4 of 128 jobs</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-1 rounded text-text-secondary hover:text-white disabled:opacity-50 hover:bg-surface-highlight">
|
||||
<span class="material-symbols-outlined text-base">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-1 rounded text-text-secondary hover:text-white hover:bg-surface-highlight">
|
||||
<span class="material-symbols-outlined text-base">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Console Widget (Collapsed/Small) -->
|
||||
<div class="mt-auto pt-8">
|
||||
<div class="rounded-lg bg-[#0d131a] border border-border-dark p-4 font-mono text-xs text-text-secondary shadow-inner h-32 overflow-y-auto">
|
||||
<div class="flex items-center justify-between mb-2 text-gray-500 border-b border-white/5 pb-1">
|
||||
<span>Console Log (tail -f)</span>
|
||||
<span class="flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> Connected</span>
|
||||
</div>
|
||||
<p class="text-blue-400">[14:22:01] bareos-dir: Connected to Storage at backup-srv-01:9103</p>
|
||||
<p>[14:22:02] bareos-sd: Volume "Vol-0012" selected for appending</p>
|
||||
<p>[14:22:05] bareos-fd: Client "filesrv-02" starting backup of /var/www/html</p>
|
||||
<p class="text-yellow-500">[14:23:10] warning: /var/www/html/cache/tmp locked by another process, skipping</p>
|
||||
<p>[14:23:45] bareos-dir: JobId 10423: Sending Accurate information.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
src/web/backup-management-screen.png
Normal file
BIN
src/web/backup-management-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
Reference in New Issue
Block a user