133ae1e7a4
- Revert from textual-serve back to Flask (textual-serve had WebSocket issues) - Completely redesigned dashboard: modern dark theme, stat cards, clean tables - Redesigned login page to match - Restored API key generation in install script - Keep API key field in TUI settings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
596 lines
15 KiB
HTML
596 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GNIZA Dashboard</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--bg-primary: #0f1117;
|
|
--bg-card: #1a1d27;
|
|
--bg-card-hover: #1e2130;
|
|
--bg-input: #13151d;
|
|
--border: #2a2d3a;
|
|
--border-light: #353849;
|
|
--text-primary: #e4e4e7;
|
|
--text-secondary: #9ca3af;
|
|
--text-muted: #6b7280;
|
|
--accent: #10b981;
|
|
--accent-dim: rgba(16, 185, 129, 0.12);
|
|
--danger: #ef4444;
|
|
--danger-dim: rgba(239, 68, 68, 0.12);
|
|
--warning: #f59e0b;
|
|
--warning-dim: rgba(245, 158, 11, 0.12);
|
|
--info: #3b82f6;
|
|
--info-dim: rgba(59, 130, 246, 0.12);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0 2rem;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.header-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--accent);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.header-title span {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header-actions a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 6px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.header-actions a:hover {
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Main content */
|
|
.main {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
|
|
/* Stats row */
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.stat-value.accent { color: var(--accent); }
|
|
.stat-value.info { color: var(--info); }
|
|
.stat-value.warning { color: var(--warning); }
|
|
|
|
.stat-detail {
|
|
font-size: 0.78rem;
|
|
color: var(--text-secondary);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Grid layout */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.grid-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
thead th {
|
|
text-align: left;
|
|
padding: 0.65rem 1.25rem;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
background: var(--bg-input);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
tbody td {
|
|
padding: 0.65rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
td.name {
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
padding: 0.2rem 0.55rem;
|
|
border-radius: 5px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.badge-enabled {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.badge-disabled {
|
|
background: rgba(107, 114, 128, 0.15);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.badge-active {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.badge-inactive {
|
|
background: rgba(107, 114, 128, 0.15);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.badge-success {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.badge-error {
|
|
background: var(--danger-dim);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.badge-unknown {
|
|
background: var(--warning-dim);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Log viewer */
|
|
.log-viewer {
|
|
background: var(--bg-input);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.78rem;
|
|
line-height: 1.7;
|
|
padding: 1rem 1.25rem;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
color: var(--text-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.log-meta {
|
|
padding: 0.75rem 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-size: 0.82rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.log-meta strong {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty {
|
|
padding: 2rem 1.25rem;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Status message */
|
|
.status-msg {
|
|
font-size: 0.75rem;
|
|
margin-top: 0.3rem;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 900px) {
|
|
.stats { grid-template-columns: repeat(2, 1fr); }
|
|
.grid { grid-template-columns: 1fr; }
|
|
.main { padding: 1rem; }
|
|
.header { padding: 0 1rem; }
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.stats { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<div class="header-brand">
|
|
<div class="header-logo">G</div>
|
|
<div class="header-title">GNIZA <span>Backup Dashboard</span></div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
<!-- Stats -->
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Targets</div>
|
|
<div class="stat-value accent">{{ targets|length }}</div>
|
|
<div class="stat-detail">{{ targets|selectattr('enabled', 'equalto', 'yes')|list|length }} enabled</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Remotes</div>
|
|
<div class="stat-value info">{{ remotes|length }}</div>
|
|
<div class="stat-detail">storage destinations</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Schedules</div>
|
|
<div class="stat-value warning">{{ schedules|length }}</div>
|
|
<div class="stat-detail">{{ schedules|selectattr('active', 'equalto', 'yes')|list|length }} active</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Last Backup</div>
|
|
{% if last_log %}
|
|
<div class="stat-value {% if last_log.status == 'success' %}accent{% elif last_log.status == 'error' %}danger{% else %}warning{% endif %}" style="font-size: 1.2rem;">{{ last_log.status|upper }}</div>
|
|
<div class="stat-detail">{{ last_log.name }}</div>
|
|
{% else %}
|
|
<div class="stat-value" style="color: var(--text-muted); font-size: 1.2rem;">N/A</div>
|
|
<div class="stat-detail">no logs found</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- Targets -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
|
Targets
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if targets %}
|
|
<table>
|
|
<thead><tr><th>Name</th><th>Remote</th><th>Status</th><th></th></tr></thead>
|
|
<tbody>
|
|
{% for t in targets %}
|
|
<tr>
|
|
<td class="name">{{ t.name }}</td>
|
|
<td>{{ t.remote or '--' }}</td>
|
|
<td>
|
|
{% if t.enabled == 'yes' %}
|
|
<span class="badge badge-enabled"><span class="badge-dot"></span> Enabled</span>
|
|
{% else %}
|
|
<span class="badge badge-disabled"><span class="badge-dot"></span> Disabled</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if t.enabled == 'yes' %}
|
|
<button class="btn btn-primary" onclick="triggerBackup(this, '{{ t.name }}')">Backup Now</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="empty">No targets configured</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remotes -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="18" r="1" fill="currentColor"/></svg>
|
|
Remotes
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if remotes %}
|
|
<table>
|
|
<thead><tr><th>Name</th><th>Type</th><th>Host / Path</th></tr></thead>
|
|
<tbody>
|
|
{% for r in remotes %}
|
|
<tr>
|
|
<td class="name">{{ r.name }}</td>
|
|
<td><span class="badge badge-enabled">{{ r.type }}</span></td>
|
|
<td>{{ r.host or r.base }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="empty">No remotes configured</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedules -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
Schedules
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if schedules %}
|
|
<table>
|
|
<thead><tr><th>Name</th><th>Schedule</th><th>Time</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
{% for s in schedules %}
|
|
<tr>
|
|
<td class="name">{{ s.name }}</td>
|
|
<td>{{ s.schedule }}</td>
|
|
<td style="font-family: 'JetBrains Mono', monospace;">{{ s.time or '--' }}</td>
|
|
<td>
|
|
{% if s.active == 'yes' %}
|
|
<span class="badge badge-active"><span class="badge-dot"></span> Active</span>
|
|
{% else %}
|
|
<span class="badge badge-inactive"><span class="badge-dot"></span> Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="empty">No schedules configured</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Last Backup Log -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Last Backup Log
|
|
</div>
|
|
</div>
|
|
{% if last_log %}
|
|
<div class="log-meta">
|
|
<strong>{{ last_log.name }}</strong>
|
|
<span class="badge badge-{{ last_log.status }}"><span class="badge-dot"></span> {{ last_log.status|capitalize }}</span>
|
|
</div>
|
|
<div class="log-viewer">{{ last_log.tail }}</div>
|
|
{% else %}
|
|
<div class="empty">No log files found</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function triggerBackup(btn, target) {
|
|
btn.disabled = true;
|
|
var origText = btn.textContent;
|
|
btn.textContent = 'Starting...';
|
|
fetch('/api/backup', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ target: target })
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.error) {
|
|
btn.textContent = 'Error';
|
|
btn.style.background = 'var(--danger)';
|
|
} else {
|
|
btn.textContent = 'Started!';
|
|
}
|
|
setTimeout(function() {
|
|
btn.disabled = false;
|
|
btn.textContent = origText;
|
|
btn.style.background = '';
|
|
}, 3000);
|
|
})
|
|
.catch(function() {
|
|
btn.textContent = 'Error';
|
|
btn.style.background = 'var(--danger)';
|
|
setTimeout(function() {
|
|
btn.disabled = false;
|
|
btn.textContent = origText;
|
|
btn.style.background = '';
|
|
}, 3000);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|