forked from snxraven/p2ns
Update Backups
This commit is contained in:
Raven Scott
@@ -846,30 +846,94 @@
|
||||
</div>
|
||||
|
||||
<div id="backups" class="tab-content hidden flex flex-col admin-tab-panel--fixed">
|
||||
<h2 class="text-2xl font-bold mb-4 flex items-center gap-2 flex-shrink-0">
|
||||
Backup & Restore
|
||||
<button onclick="openInfoModal('backups')" class="text-sm px-3 py-1 theme-button-info rounded transition-colors">Info</button>
|
||||
</h2>
|
||||
<div class="mb-6 flex-shrink-0">
|
||||
<input id="search-backups" type="text" placeholder="Search backups..." class="w-full p-3 rounded-lg theme-input focus:outline-none focus:ring-2 focus:ring-primary" oninput="filterBackups()">
|
||||
<header class="admin-tab-header flex-shrink-0">
|
||||
<div class="admin-tab-header-main">
|
||||
<h2 class="admin-tab-title">Backup & Restore</h2>
|
||||
<p class="admin-tab-description">Create snapshots of configuration and data, restore previous states, and manage retention on this node.</p>
|
||||
</div>
|
||||
<button type="button" onclick="openInfoModal('backups')" class="theme-button-info text-sm px-3 py-1 rounded">Info</button>
|
||||
</header>
|
||||
|
||||
<div class="backups-layout flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<section class="theme-card admin-panel backups-panel lg:col-span-2 flex flex-col min-h-0">
|
||||
<div class="admin-panel-header">
|
||||
<h3 class="admin-panel-title">Backup archive</h3>
|
||||
<p class="admin-panel-subtitle" id="backupsCount">Loading…</p>
|
||||
</div>
|
||||
<div class="admin-toolbar flex-shrink-0">
|
||||
<label class="admin-search-field">
|
||||
<i class="fas fa-magnifying-glass admin-search-icon" aria-hidden="true"></i>
|
||||
<input id="search-backups" type="search" placeholder="Search by name, date, or version…" class="theme-input admin-search-input" oninput="filterBackups()" autocomplete="off">
|
||||
</label>
|
||||
</div>
|
||||
<div class="backups-table-scroll flex-1 min-h-0 overflow-auto">
|
||||
<table class="w-full theme-table backups-table">
|
||||
<thead class="theme-table thead sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="p-3 text-left">Name</th>
|
||||
<th class="p-3 text-left w-[11rem]">Timestamp</th>
|
||||
<th class="p-3 text-left w-[6rem]">Size</th>
|
||||
<th class="p-3 text-left w-[4.5rem]">Files</th>
|
||||
<th class="p-3 text-left w-[5.5rem]">Version</th>
|
||||
<th class="p-3 text-right w-[8.5rem]"><span class="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="backupsTable"></tbody>
|
||||
</table>
|
||||
<div id="backupsEmpty" class="local-dns-empty">
|
||||
<i class="fas fa-database local-dns-empty-icon" aria-hidden="true"></i>
|
||||
<p class="local-dns-empty-title">No backups yet</p>
|
||||
<p class="local-dns-empty-text theme-text-tertiary">Create a manual backup or wait for the next scheduled snapshot.</p>
|
||||
</div>
|
||||
<div id="backupsFilteredEmpty" class="local-dns-empty">
|
||||
<i class="fas fa-filter local-dns-empty-icon" aria-hidden="true"></i>
|
||||
<p class="local-dns-empty-title">No matching backups</p>
|
||||
<p class="local-dns-empty-text theme-text-tertiary">Try a different search term.</p>
|
||||
</div>
|
||||
<div id="backupsEnd" class="local-dns-list-end" aria-live="polite">You have reached the end</div>
|
||||
<div id="backupsScrollSentinel" class="scroll-sentinel"></div>
|
||||
</div>
|
||||
<div id="backupsPagination" class="hidden"></div>
|
||||
<div class="admin-panel-footer flex justify-end flex-shrink-0">
|
||||
<button type="button" id="create-backup-btn" onclick="createBackup(this)" class="admin-btn admin-btn--primary">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> Create backup
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="backups-sidebar flex flex-col gap-4 min-h-0">
|
||||
<section class="theme-card admin-panel backups-summary-panel">
|
||||
<div class="admin-panel-header">
|
||||
<h3 class="admin-panel-title">Overview</h3>
|
||||
<p class="admin-panel-subtitle" id="backupsOverviewLine">—</p>
|
||||
</div>
|
||||
<dl class="local-dns-stat-grid">
|
||||
<div class="local-dns-stat">
|
||||
<dt>Total</dt>
|
||||
<dd id="backupsStatTotal">—</dd>
|
||||
</div>
|
||||
<div class="local-dns-stat">
|
||||
<dt>Total size</dt>
|
||||
<dd id="backupsStatSize">—</dd>
|
||||
</div>
|
||||
<div class="local-dns-stat">
|
||||
<dt>Latest</dt>
|
||||
<dd id="backupsStatLatest" class="backups-stat-latest">—</dd>
|
||||
</div>
|
||||
<div class="local-dns-stat">
|
||||
<dt>Files (latest)</dt>
|
||||
<dd id="backupsStatFiles">—</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="theme-card admin-panel backups-note-panel">
|
||||
<div class="admin-panel-header">
|
||||
<h3 class="admin-panel-title">About backups</h3>
|
||||
</div>
|
||||
<p class="local-dns-note-text theme-text-tertiary">Automatic backups run on a schedule configured in <button type="button" class="backups-settings-link" onclick="if(window.navigateToTab) window.navigateToTab('settings'); else location.hash = 'settings';">Settings</button>. Old archives are pruned based on retention limits.</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="overflow-x-auto overflow-y-auto flex-1 min-h-0">
|
||||
<table class="w-full theme-table rounded-lg">
|
||||
<thead class="theme-table thead sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="p-3 text-left">Name</th>
|
||||
<th class="p-3 text-left">Timestamp</th>
|
||||
<th class="p-3 text-left">Size</th>
|
||||
<th class="p-3 text-left">Files</th>
|
||||
<th class="p-3 text-left">Version</th>
|
||||
<th class="p-3 text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="backupsTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="backupsPagination" class="flex justify-center mt-4 space-x-2 flex-shrink-0"></div>
|
||||
<button id="create-backup-btn" onclick="createBackup(this)" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover flex-shrink-0">Create Backup</button>
|
||||
</div>
|
||||
|
||||
<div id="stats" class="tab-content hidden admin-tab-panel--scroll stats-tab">
|
||||
@@ -1395,14 +1459,21 @@
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="backupDetailsModal" class="p-6 theme-glass rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-2xl font-bold">Backup Details</h3>
|
||||
<button onclick="document.getElementById('backupDetailsModal').close()" class="theme-text-tertiary hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none">×</button>
|
||||
</div>
|
||||
<div id="backup-details-content" class="mb-6"></div>
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button onclick="document.getElementById('backupDetailsModal').close()" class="px-4 py-2 theme-button-info theme-text-primary rounded theme-glass-hover">Close</button>
|
||||
<dialog id="backupDetailsModal" class="backups-modal local-dns-modal theme-glass rounded-lg shadow-xl w-full max-w-3xl p-0 border-0">
|
||||
<div class="local-dns-modal-inner backups-modal-inner">
|
||||
<div class="local-dns-modal-header">
|
||||
<div>
|
||||
<h3 class="local-dns-modal-title">Backup details</h3>
|
||||
<p id="backup-details-subtitle" class="local-dns-modal-subtitle theme-text-tertiary font-mono break-all">—</p>
|
||||
</div>
|
||||
<button type="button" onclick="document.getElementById('backupDetailsModal').close()" class="admin-btn admin-btn--secondary admin-btn--sm" aria-label="Close">
|
||||
<i class="fas fa-xmark" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="backup-details-content" class="local-dns-modal-body backups-modal-body"></div>
|
||||
<div class="local-dns-modal-footer">
|
||||
<button type="button" onclick="document.getElementById('backupDetailsModal').close()" class="admin-btn admin-btn--secondary">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user