hippogrief/pobsync
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Create cohesive control panel redesign #30

Merged
parkel merged 3 commits from issue-28-control-panel-redesign into master 2026-05-21 11:44:29 +02:00
Conversation 0 Commits 3 Files Changed 17 +559 -300
17 changed files with 559 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
src/pobsync_backend/templates/pobsync_backend/base.html
View File

@@ -1,118 +1,261 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}pobsync{% endblock %}</title> <title>{% block title %}pobsync{% endblock %}</title>
<style> <style>
:root { :root {
color-scheme: light; color-scheme: light;
--bg: #f5f7fa; --bg: #f2f5f8;
--panel: #ffffff; --bg-soft: #f8fafc;
--border: #d9e0e8; --panel: #ffffff;
--text: #17202a; --panel-subtle: #fbfcfe;
--muted: #657386; --border: #d8e1eb;
--link: #0b5cad; --border-strong: #c7d2df;
--success: #176b3a; --text: #121a24;
--failed: #a12828; --muted: #65758a;
--running: #8a5a00; --muted-strong: #46566a;
} --link: #075fae;
* { box-sizing: border-box; } --link-strong: #064b89;
body { --success: #17633a;
margin: 0; --failed: #a73333;
background: var(--bg); --running: #8a5a00;
color: var(--text); --queued: #075fae;
font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --shadow-sm: 0 1px 2px rgba(18, 26, 36, 0.05);
} --shadow-md: 0 10px 28px rgba(18, 26, 36, 0.08);
a { color: var(--link); text-decoration: none; } --radius: 8px;
a:hover { text-decoration: underline; } }
header { * { box-sizing: border-box; }
background: var(--panel); body {
border-bottom: 1px solid var(--border); margin: 0;
padding: 14px 24px; background: var(--bg);
} color: var(--text);
nav { font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: flex; }
align-items: center; a { color: var(--link); font-weight: 560; text-decoration: none; }
gap: 18px; a:hover { text-decoration: underline; }
max-width: 1180px; a:focus-visible,
margin: 0 auto; button:focus-visible,
} input:focus-visible,
nav strong { font-size: 16px; } select:focus-visible,
nav .spacer { flex: 1; } textarea:focus-visible {
main { outline: 3px solid rgba(7, 95, 174, 0.24);
max-width: 1180px; outline-offset: 2px;
margin: 0 auto; }
padding: 24px; body > header {
} background: var(--panel);
h1 { font-size: 26px; margin: 0 0 18px; } border-bottom: 1px solid var(--border);
h2 { font-size: 18px; margin: 0 0 12px; } box-shadow: var(--shadow-sm);
.grid { padding: 0 24px;
display: grid; position: sticky;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); top: 0;
gap: 12px; z-index: 20;
margin-bottom: 22px; }
} nav {
.metric, .panel { display: flex;
background: var(--panel); align-items: center;
border: 1px solid var(--border); gap: 6px;
border-radius: 8px; max-width: 1180px;
} margin: 0 auto;
.metric { padding: 14px; } min-height: 48px;
.metric .label { color: var(--muted); font-size: 12px; text-transform: uppercase; } }
.metric .value { font-size: 26px; font-weight: 650; margin-top: 4px; } nav strong {
.metric.failed { border-color: #e8b4b4; background: #fff7f7; } font-size: 16px;
.metric.warning { border-color: #e7cf8a; background: #fffaf0; } margin-right: 10px;
.metric.running { border-color: #e7cf8a; background: #fffaf0; } }
.metric.queued { border-color: #b5cdea; background: #eef6ff; } nav a {
.panel { padding: 16px; margin-bottom: 18px; overflow: auto; } border-radius: 6px;
.panel.highlight { border-left: 4px solid var(--border); } color: var(--muted-strong);
.panel.highlight.failed { border-left-color: var(--failed); background: #fff7f7; } padding: 6px 8px;
.panel.highlight.warning { border-left-color: var(--running); background: #fffaf0; } }
.panel.highlight.success { border-left-color: var(--success); background: #f5fbf7; } nav a:hover {
table { width: 100%; border-collapse: collapse; min-width: 640px; } background: var(--bg-soft);
th, td { border-bottom: 1px solid var(--border); padding: 9px 8px; text-align: left; vertical-align: top; } color: var(--link-strong);
th { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; } text-decoration: none;
tr:last-child td { border-bottom: 0; } }
.muted { color: var(--muted); } nav strong a {
.status { color: var(--link-strong);
display: inline-block; font-weight: 750;
border: 1px solid var(--border); padding-left: 0;
border-radius: 999px; }
padding: 2px 8px; nav strong a:hover { background: transparent; }
white-space: nowrap; nav .spacer { flex: 1; }
} main {
max-width: 1180px;
margin: 0 auto;
padding: 28px 24px 42px;
}
h1 {
font-size: clamp(28px, 3vw, 36px);
letter-spacing: 0;
line-height: 1.15;
margin: 0 0 18px;
}
h2 {
font-size: 18px;
letter-spacing: 0;
line-height: 1.25;
margin: 0 0 14px;
}
h3 {
font-size: 15px;
letter-spacing: 0;
margin: 16px 0 8px;
}
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
.page-header {
align-items: end;
display: flex;
gap: 18px;
justify-content: space-between;
margin-bottom: 20px;
}
.page-title {
display: grid;
gap: 5px;
min-width: 0;
}
.page-title h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.page-kicker {
color: var(--muted);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.page-subtitle {
color: var(--muted);
max-width: 760px;
}
.page-header .actions {
flex: 0 0 auto;
justify-content: flex-end;
margin-bottom: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.metric, .panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.metric {
min-height: 88px;
padding: 14px 15px;
}
.metric .label {
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.metric .value {
font-size: 27px;
font-weight: 760;
line-height: 1.15;
margin-top: 6px;
overflow-wrap: anywhere;
}
.metric.failed { border-color: #e8b4b4; background: #fff7f7; }
.metric.warning { border-color: #e7cf8a; background: #fffaf0; }
.metric.running { border-color: #e7cf8a; background: #fffaf0; }
.metric.queued { border-color: #b5cdea; background: #eef6ff; }
.panel {
margin-bottom: 18px;
overflow: auto;
padding: 18px;
}
.panel > h2:first-child {
align-items: center;
display: flex;
gap: 10px;
justify-content: space-between;
}
.panel.highlight { border-left: 4px solid var(--border); }
.panel.highlight.failed { border-left-color: var(--failed); background: #fff7f7; }
.panel.highlight.warning { border-left-color: var(--running); background: #fffaf0; }
.panel.highlight.success { border-left-color: var(--success); background: #f5fbf7; }
table {
border-collapse: collapse;
min-width: 640px;
width: 100%;
}
th, td {
border-bottom: 1px solid var(--border);
padding: 10px 9px;
text-align: left;
vertical-align: top;
}
th {
background: var(--panel-subtle);
color: var(--muted);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
}
tbody tr:hover td { background: #f9fbfd; }
tr:last-child td { border-bottom: 0; }
.muted { color: var(--muted); }
.status {
display: inline-block;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.35;
padding: 3px 8px;
white-space: nowrap;
}
.status.success { color: var(--success); border-color: #a7d8b9; background: #edf8f1; } .status.success { color: var(--success); border-color: #a7d8b9; background: #edf8f1; }
.status.ok { color: var(--success); border-color: #a7d8b9; background: #edf8f1; } .status.ok { color: var(--success); border-color: #a7d8b9; background: #edf8f1; }
.status.failed { color: var(--failed); border-color: #e8b4b4; background: #fff0f0; } .status.failed { color: var(--failed); border-color: #e8b4b4; background: #fff0f0; }
.status.blocked { color: var(--failed); border-color: #e8b4b4; background: #fff0f0; } .status.blocked { color: var(--failed); border-color: #e8b4b4; background: #fff0f0; }
.status.running { color: var(--running); border-color: #e7cf8a; background: #fff8df; } .status.running { color: var(--running); border-color: #e7cf8a; background: #fff8df; }
.status.warning { color: var(--running); border-color: #e7cf8a; background: #fff8df; } .status.warning { color: var(--running); border-color: #e7cf8a; background: #fff8df; }
.status.queued { color: var(--link); border-color: #b5cdea; background: #eef6ff; } .status.queued { color: var(--queued); border-color: #b5cdea; background: #eef6ff; }
.status.skipped { color: var(--muted); background: #f7f9fb; } .status.skipped { color: var(--muted); background: #f7f9fb; }
.stack { display: grid; gap: 4px; } .stack { display: grid; gap: 5px; }
.stack.spaced { margin-bottom: 14px; } .stack.spaced { margin-bottom: 14px; }
.two-col { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .two-col { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; } .actions {
.actions.inline { margin: 12px 0 0; } align-items: center;
button, .button-link { display: flex;
appearance: none; flex-wrap: wrap;
background: #17202a; gap: 10px;
border: 1px solid #17202a; margin: 0 0 20px;
border-radius: 6px; }
color: #fff; .actions.inline { margin: 12px 0 0; }
cursor: pointer; button, .button-link {
font: inherit; appearance: none;
font-weight: 650; background: var(--text);
padding: 8px 12px; border: 1px solid var(--text);
} border-radius: 6px;
button:hover, .button-link:hover { background: #2a394a; text-decoration: none; } color: #fff;
button.secondary, cursor: pointer;
.button-link.secondary { font: inherit;
background: #fff; font-weight: 700;
border-color: var(--border); line-height: 1.25;
color: var(--text); padding: 8px 13px;
} }
button:hover, .button-link:hover {
background: #273343;
text-decoration: none;
}
button.secondary,
.button-link.secondary {
background: #fff;
border-color: var(--border-strong);
color: var(--text);
}
button.secondary:hover, button.secondary:hover,
.button-link.secondary:hover { background: #eef3f8; } .button-link.secondary:hover { background: #eef3f8; }
button:disabled { button:disabled {
@@ -126,24 +269,24 @@
display: grid; display: grid;
gap: 8px; gap: 8px;
} }
.status-summary { .status-summary {
align-items: center; align-items: center;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
padding: 10px; padding: 11px 12px;
} }
.status-summary.failed { border-color: #e8b4b4; background: #fff7f7; color: var(--failed); } .status-summary.failed { border-color: #e8b4b4; background: #fff7f7; color: var(--failed); }
.status-summary.warning, .status-summary.warning,
.status-summary.running { border-color: #e7cf8a; background: #fffaf0; color: var(--running); } .status-summary.running { border-color: #e7cf8a; background: #fffaf0; color: var(--running); }
.status-summary.queued { border-color: #b5cdea; background: #eef6ff; color: var(--link); } .status-summary.queued { border-color: #b5cdea; background: #eef6ff; color: var(--link); }
.operator-state { .operator-state {
align-items: center; align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
margin-bottom: 14px; margin-bottom: 14px;
} }
.trend-bars { .trend-bars {
@@ -170,10 +313,10 @@
font-size: 12px; font-size: 12px;
gap: 10px; gap: 10px;
} }
.insight-grid { .insight-grid {
display: grid; display: grid;
gap: 18px 24px; gap: 18px 24px;
grid-template-columns: minmax(260px, 1.3fr) repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: minmax(260px, 1.3fr) repeat(auto-fit, minmax(180px, 1fr));
} }
.insight-main, .insight-main,
.insight-item { .insight-item {
@@ -188,12 +331,12 @@
font-weight: 650; font-weight: 650;
text-transform: uppercase; text-transform: uppercase;
} }
.insight-main .value, .insight-main .value,
.insight-item .value { .insight-item .value {
font-size: 22px; font-size: 22px;
font-weight: 650; font-weight: 760;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.storage-meter { .storage-meter {
background: #edf2f7; background: #edf2f7;
border-radius: 999px; border-radius: 999px;
@@ -211,11 +354,16 @@
display: grid; display: grid;
gap: 12px; gap: 12px;
} }
.host-card { .host-card {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: 16px; box-shadow: var(--shadow-sm);
} padding: 16px;
}
.host-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
.host-card-header { .host-card-header {
align-items: start; align-items: start;
display: flex; display: flex;
@@ -228,11 +376,11 @@
gap: 3px; gap: 3px;
min-width: 0; min-width: 0;
} }
.host-card-title a { .host-card-title a {
font-size: 17px; font-size: 17px;
font-weight: 650; font-weight: 750;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.host-card-status { .host-card-status {
display: flex; display: flex;
flex: 0 1 auto; flex: 0 1 auto;
@@ -263,14 +411,16 @@
gap: 16px 22px; gap: 16px 22px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
} }
.host-card-stats { .host-card-stats {
align-content: start; align-content: start;
display: grid; display: grid;
border-top: 1px solid #e6edf4; background: var(--bg-soft);
gap: 12px 18px; border: 1px solid #e6edf4;
grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius);
padding-top: 12px; gap: 12px 18px;
} grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 12px;
}
.host-card-item { .host-card-item {
display: grid; display: grid;
gap: 3px; gap: 3px;
@@ -296,11 +446,11 @@
font-weight: 650; font-weight: 650;
text-transform: uppercase; text-transform: uppercase;
} }
.host-card-stat .value { .host-card-stat .value {
font-size: 16px; font-size: 16px;
font-weight: 650; font-weight: 750;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.host-card-stat.wide { .host-card-stat.wide {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -316,32 +466,38 @@
padding: 10px; padding: 10px;
} }
.messages { display: grid; gap: 8px; margin-bottom: 18px; } .messages { display: grid; gap: 8px; margin-bottom: 18px; }
.message { .message {
background: var(--panel); background: var(--panel);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: 10px 12px; padding: 10px 12px;
} }
.message.success { border-color: #a7d8b9; background: #edf8f1; color: var(--success); } .message.success { border-color: #a7d8b9; background: #edf8f1; color: var(--success); }
.message.error { border-color: #e8b4b4; background: #fff0f0; color: var(--failed); } .message.error { border-color: #e8b4b4; background: #fff0f0; color: var(--failed); }
.message.warning { border-color: #e7cf8a; background: #fff8df; color: var(--running); } .message.warning { border-color: #e7cf8a; background: #fff8df; color: var(--running); }
.form-grid { display: grid; gap: 14px; max-width: 680px; } .form-grid { display: grid; gap: 15px; max-width: 720px; }
.field { display: grid; gap: 5px; } .field { display: grid; gap: 6px; }
.field label { font-weight: 650; } .field label { font-weight: 700; }
.field input[type="text"], .field input[type="number"], .field select, .field textarea { .field input[type="text"], .field input[type="number"], .field select, .field textarea {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
font: inherit; font: inherit;
padding: 8px 10px; padding: 9px 10px;
width: 100%; width: 100%;
} }
.field textarea { min-height: 92px; resize: vertical; } .field input[type="text"]:focus,
.field .helptext { color: var(--muted); font-size: 12px; } .field input[type="number"]:focus,
.field select:focus,
.field textarea:focus {
border-color: #8bb9e3;
}
.field textarea { min-height: 92px; resize: vertical; }
.field .helptext { color: var(--muted); font-size: 12px; }
.field input[type="checkbox"] { justify-self: start; } .field input[type="checkbox"] { justify-self: start; }
pre { pre {
background: #101820; background: #101820;
border-radius: 6px; border-radius: var(--radius);
color: #edf4fb; color: #edf4fb;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
overflow: auto; overflow: auto;
@@ -355,11 +511,24 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
main { padding: 16px; } body > header { padding: 0 14px; position: static; }
nav { padding: 0; } main { padding: 18px 14px 32px; }
.two-col { grid-template-columns: 1fr; } nav {
.host-card-header { display: grid; } align-items: flex-start;
flex-wrap: wrap;
gap: 4px;
padding: 8px 0;
}
nav strong { flex-basis: 100%; margin-right: 0; }
nav .spacer { display: none; }
.page-header {
align-items: stretch;
display: grid;
}
.page-header .actions { justify-content: flex-start; }
.two-col { grid-template-columns: 1fr; }
.host-card-header { display: grid; }
.host-card-status { justify-content: flex-start; max-width: none; } .host-card-status { justify-content: flex-start; max-width: none; }
.host-card-layout { grid-template-columns: 1fr; } .host-card-layout { grid-template-columns: 1fr; }
.host-card-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .host-card-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

15
src/pobsync_backend/templates/pobsync_backend/changelog.html
View File

@@ -3,11 +3,16 @@
{% block title %}Changelog - pobsync{% endblock %} {% block title %}Changelog - pobsync{% endblock %}
{% block content %} {% block content %}
<h1>Changelog</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Changelog actions"> <div class="page-kicker">Release notes</div>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a> <h1>Changelog</h1>
</section> <div class="page-subtitle">Installed release notes rendered from the repository changelog.</div>
</div>
<section class="actions" aria-label="Changelog actions">
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="panel"> <section class="panel">
<div class="stack spaced"> <div class="stack spaced">

17
src/pobsync_backend/templates/pobsync_backend/dashboard.html
View File

@@ -3,12 +3,17 @@
{% block title %}pobsync dashboard{% endblock %} {% block title %}pobsync dashboard{% endblock %}
{% block content %} {% block content %}
<h1>Dashboard</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Dashboard actions"> <div class="page-kicker">Control panel</div>
<a class="button-link" href="{% url 'create_host_config' %}">New host</a> <h1>Dashboard</h1>
<a class="button-link secondary" href="{% url 'edit_global_config' %}">{% if global_config %}Edit global config{% else %}Create global config{% endif %}</a> <div class="page-subtitle">Backup health, required action, storage pressure, and recent activity in one place.</div>
</section> </div>
<section class="actions" aria-label="Dashboard actions">
<a class="button-link" href="{% url 'create_host_config' %}">New host</a>
<a class="button-link secondary" href="{% url 'edit_global_config' %}">{% if global_config %}Edit global config{% else %}Create global config{% endif %}</a>
</section>
</header>
{% if not global_config or not counts.hosts %} {% if not global_config or not counts.hosts %}
<section class="panel"> <section class="panel">

15
src/pobsync_backend/templates/pobsync_backend/global_form.html
View File

@@ -3,11 +3,16 @@
{% block title %}Global Config{% endblock %} {% block title %}Global Config{% endblock %}
{% block content %} {% block content %}
<h1>{% if global_config %}Global Config{% else %}Create Global Config{% endif %}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Global config actions"> <div class="page-kicker">Configuration</div>
<a class="button-link" href="{% url 'dashboard' %}">Back to dashboard</a> <h1>{% if global_config %}Global Config{% else %}Create Global Config{% endif %}</h1>
</section> <div class="page-subtitle">Defaults used by hosts unless a host overrides them explicitly.</div>
</div>
<section class="actions" aria-label="Global config actions">
<a class="button-link" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>{% if global_config %}Edit Global Config{% else %}Create Global Config{% endif %}</h2> <h2>{% if global_config %}Edit Global Config{% else %}Create Global Config{% endif %}</h2>

51
src/pobsync_backend/templates/pobsync_backend/host_detail.html
View File

@@ -3,29 +3,34 @@
{% block title %}{{ host.host }} | pobsync{% endblock %} {% block title %}{{ host.host }} | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>{{ host.host }}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Host actions"> <div class="page-kicker">Host</div>
<a class="button-link" href="{% url 'edit_host_config' host.host %}">Edit config</a> <h1>{{ host.host }}</h1>
<form method="post" action="{% url 'discover_host_snapshots' host.host %}"> <div class="page-subtitle">{{ host.address }} · {{ host.enabled|yesno:"enabled,disabled" }}</div>
{% csrf_token %} </div>
<button type="submit">Discover snapshots</button> <section class="actions" aria-label="Host actions">
</form> <a class="button-link" href="{% url 'edit_host_config' host.host %}">Edit config</a>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}">Plan retention</a> <form method="post" action="{% url 'discover_host_snapshots' host.host %}">
<a class="button-link" href="{% url 'edit_host_schedule' host.host %}">Edit schedule</a> {% csrf_token %}
<form method="post" action="{% url 'prepare_host_directories' host.host %}"> <button type="submit">Discover snapshots</button>
{% csrf_token %} </form>
<button type="submit" class="secondary">Prepare directories</button> <a class="button-link" href="{% url 'host_retention_plan' host.host %}">Plan retention</a>
</form> <a class="button-link" href="{% url 'edit_host_schedule' host.host %}">Edit schedule</a>
<form method="post" action="{% url 'scan_host_known_key' host.host %}"> <form method="post" action="{% url 'prepare_host_directories' host.host %}">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="secondary">Scan SSH host key</button> <button type="submit" class="secondary">Prepare directories</button>
</form> </form>
<form method="post" action="{% url 'run_host_preflight' host.host %}"> <form method="post" action="{% url 'scan_host_known_key' host.host %}">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="secondary">Run connection preflight</button> <button type="submit" class="secondary">Scan SSH host key</button>
</form> </form>
</section> <form method="post" action="{% url 'run_host_preflight' host.host %}">
{% csrf_token %}
<button type="submit" class="secondary">Run connection preflight</button>
</form>
</section>
</header>
<section class="grid" aria-label="Host summary"> <section class="grid" aria-label="Host summary">
<div class="metric"><div class="label">Snapshots</div><div class="value">{{ counts.snapshots }}</div></div> <div class="metric"><div class="label">Snapshots</div><div class="value">{{ counts.snapshots }}</div></div>

23
src/pobsync_backend/templates/pobsync_backend/host_form.html
View File

@@ -3,15 +3,20 @@
{% block title %}{% if host %}Config | {{ host.host }}{% else %}New Host{% endif %}{% endblock %} {% block title %}{% if host %}Config | {{ host.host }}{% else %}New Host{% endif %}{% endblock %}
{% block content %} {% block content %}
<h1>{% if host %}Config: {{ host.host }}{% else %}New Host{% endif %}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Config actions"> <div class="page-kicker">Configuration</div>
{% if host %} <h1>{% if host %}Config: {{ host.host }}{% else %}New Host{% endif %}</h1>
<a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a> <div class="page-subtitle">Host-specific backup, retention, SSH, include, and exclude settings.</div>
{% else %} </div>
<a class="button-link" href="{% url 'dashboard' %}">Back to dashboard</a> <section class="actions" aria-label="Config actions">
{% endif %} {% if host %}
</section> <a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a>
{% else %}
<a class="button-link" href="{% url 'dashboard' %}">Back to dashboard</a>
{% endif %}
</section>
</header>
<section class="panel"> <section class="panel">
<h2>{% if host %}Edit Host Config{% else %}Create Host Config{% endif %}</h2> <h2>{% if host %}Edit Host Config{% else %}Create Host Config{% endif %}</h2>

15
src/pobsync_backend/templates/pobsync_backend/logs.html
View File

@@ -3,11 +3,16 @@
{% block title %}Logs | pobsync{% endblock %} {% block title %}Logs | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>Logs</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Log actions"> <div class="page-kicker">Operations</div>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a> <h1>Logs</h1>
</section> <div class="page-subtitle">Filter pobsync service logs by unit, priority, host, run, or message content.</div>
</div>
<section class="actions" aria-label="Log actions">
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>Filter</h2> <h2>Filter</h2>

15
src/pobsync_backend/templates/pobsync_backend/purged_snapshots.html
View File

@@ -3,11 +3,16 @@
{% block title %}Purged Snapshots | pobsync{% endblock %} {% block title %}Purged Snapshots | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>Purged Snapshots</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Purged snapshot actions"> <div class="page-kicker">Retention</div>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a> <h1>Purged Snapshots</h1>
</section> <div class="page-subtitle">Audit trail for snapshots removed by retention or manual purge actions.</div>
</div>
<section class="actions" aria-label="Purged snapshot actions">
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>Filters</h2> <h2>Filters</h2>

23
src/pobsync_backend/templates/pobsync_backend/retention_plan.html
View File

@@ -3,15 +3,20 @@
{% block title %}Retention plan | {{ host.host }}{% endblock %} {% block title %}Retention plan | {{ host.host }}{% endblock %}
{% block content %} {% block content %}
<h1>Retention Plan: {{ host.host }}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Retention filters"> <div class="page-kicker">Retention</div>
<a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a> <h1>{{ host.host }}</h1>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=scheduled">Scheduled</a> <div class="page-subtitle">Preview which snapshots stay, which would be deleted, and whether incomplete cleanup is needed.</div>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=manual">Manual</a> </div>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=all">All</a> <section class="actions" aria-label="Retention filters">
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind={{ kind }}&protect_bases=1">Protect bases</a> <a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a>
</section> <a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=scheduled">Scheduled</a>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=manual">Manual</a>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind=all">All</a>
<a class="button-link" href="{% url 'host_retention_plan' host.host %}?kind={{ kind }}&protect_bases=1">Protect bases</a>
</section>
</header>
<section class="grid" aria-label="Retention plan summary"> <section class="grid" aria-label="Retention plan summary">
<div class="metric"><div class="label">Kind</div><div class="value">{{ plan.kind }}</div></div> <div class="metric"><div class="label">Kind</div><div class="value">{{ plan.kind }}</div></div>

37
src/pobsync_backend/templates/pobsync_backend/run_detail.html
View File

@@ -3,25 +3,30 @@
{% block title %}Run {{ run.id }} | {{ run.host.host }}{% endblock %} {% block title %}Run {{ run.id }} | {{ run.host.host }}{% endblock %}
{% block content %} {% block content %}
<h1>Run {{ run.id }}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Run actions"> <div class="page-kicker">Backup run</div>
<a class="button-link" href="{% url 'host_detail' run.host.host %}">Back to host</a> <h1>Run {{ run.id }}</h1>
{% if can_cancel %} <div class="page-subtitle">{{ run.host.host }} · {{ run.run_type }} · {{ run.status }}</div>
<form method="post" action="{% url 'cancel_run' run.id %}"> </div>
{% csrf_token %} <section class="actions" aria-label="Run actions">
<button type="submit" class="secondary">Cancel run</button> <a class="button-link" href="{% url 'host_detail' run.host.host %}">Back to host</a>
</form> {% if can_cancel %}
{% endif %} <form method="post" action="{% url 'cancel_run' run.id %}">
{% if run.status == "failed" or run.status == "warning" %}
{% if not run.reviewed_at %}
<form method="post" action="{% url 'resolve_run_review' run.id %}">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="secondary">Mark reviewed</button> <button type="submit" class="secondary">Cancel run</button>
</form> </form>
{% endif %} {% endif %}
{% endif %} {% if run.status == "failed" or run.status == "warning" %}
</section> {% if not run.reviewed_at %}
<form method="post" action="{% url 'resolve_run_review' run.id %}">
{% csrf_token %}
<button type="submit" class="secondary">Mark reviewed</button>
</form>
{% endif %}
{% endif %}
</section>
</header>
<section class="grid" aria-label="Run summary"> <section class="grid" aria-label="Run summary">
<div class="metric"><div class="label">Host</div><div class="value">{{ run.host.host }}</div></div> <div class="metric"><div class="label">Host</div><div class="value">{{ run.host.host }}</div></div>

15
src/pobsync_backend/templates/pobsync_backend/schedule_form.html
View File

@@ -3,11 +3,16 @@
{% block title %}Schedule | {{ host.host }}{% endblock %} {% block title %}Schedule | {{ host.host }}{% endblock %}
{% block content %} {% block content %}
<h1>Schedule: {{ host.host }}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Schedule actions"> <div class="page-kicker">Schedule</div>
<a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a> <h1>{{ host.host }}</h1>
</section> <div class="page-subtitle">Automatic backup timing and scheduled prune behavior for this host.</div>
</div>
<section class="actions" aria-label="Schedule actions">
<a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>{% if schedule %}Edit Schedule{% else %}Create Schedule{% endif %}</h2> <h2>{% if schedule %}Edit Schedule{% else %}Create Schedule{% endif %}</h2>

15
src/pobsync_backend/templates/pobsync_backend/self_check.html
View File

@@ -3,11 +3,16 @@
{% block title %}Self Check | pobsync{% endblock %} {% block title %}Self Check | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>Self Check</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Self check actions"> <div class="page-kicker">Operations</div>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a> <h1>Self Check</h1>
</section> <div class="page-subtitle">Runtime, filesystem, service, and configuration checks for this pobsync installation.</div>
</div>
<section class="actions" aria-label="Self check actions">
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="grid" aria-label="Self check summary"> <section class="grid" aria-label="Self check summary">
<div class="metric"><div class="label">OK</div><div class="value">{{ summary.ok }}</div></div> <div class="metric"><div class="label">OK</div><div class="value">{{ summary.ok }}</div></div>

15
src/pobsync_backend/templates/pobsync_backend/snapshot_detail.html
View File

@@ -3,11 +3,16 @@
{% block title %}Snapshot {{ snapshot.dirname }} | {{ snapshot.host.host }}{% endblock %} {% block title %}Snapshot {{ snapshot.dirname }} | {{ snapshot.host.host }}{% endblock %}
{% block content %} {% block content %}
<h1>{{ snapshot.dirname }}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="Snapshot actions"> <div class="page-kicker">Snapshot</div>
<a class="button-link" href="{% url 'host_detail' snapshot.host.host %}">Back to host</a> <h1>{{ snapshot.dirname }}</h1>
</section> <div class="page-subtitle">{{ snapshot.host.host }} · {{ snapshot.kind }} · {{ snapshot.status }}</div>
</div>
<section class="actions" aria-label="Snapshot actions">
<a class="button-link" href="{% url 'host_detail' snapshot.host.host %}">Back to host</a>
</section>
</header>
<section class="grid" aria-label="Snapshot summary"> <section class="grid" aria-label="Snapshot summary">
<div class="metric"><div class="label">Host</div><div class="value">{{ snapshot.host.host }}</div></div> <div class="metric"><div class="label">Host</div><div class="value">{{ snapshot.host.host }}</div></div>

15
src/pobsync_backend/templates/pobsync_backend/ssh_credential_form.html
View File

@@ -3,11 +3,16 @@
{% block title %}{% if credential %}SSH Key | {{ credential.name }}{% else %}New SSH Key{% endif %} | pobsync{% endblock %} {% block title %}{% if credential %}SSH Key | {{ credential.name }}{% else %}New SSH Key{% endif %} | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>{% if credential %}SSH Key: {{ credential.name }}{% else %}New SSH Key{% endif %}</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="SSH key form actions"> <div class="page-kicker">Access</div>
<a class="button-link" href="{% url 'ssh_credentials' %}">Back to SSH keys</a> <h1>{% if credential %}SSH Key: {{ credential.name }}{% else %}New SSH Key{% endif %}</h1>
</section> <div class="page-subtitle">{% if credential %}Review key metadata, known hosts, and deletion safety for this credential.{% else %}Register an existing private key for use by pobsync backups.{% endif %}</div>
</div>
<section class="actions" aria-label="SSH key form actions">
<a class="button-link" href="{% url 'ssh_credentials' %}">Back to SSH keys</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>{% if credential %}Edit SSH Credential{% else %}Create SSH Credential{% endif %}</h2> <h2>{% if credential %}Edit SSH Credential{% else %}Create SSH Credential{% endif %}</h2>

15
src/pobsync_backend/templates/pobsync_backend/ssh_credential_generate.html
View File

@@ -3,11 +3,16 @@
{% block title %}Generate SSH Key | pobsync{% endblock %} {% block title %}Generate SSH Key | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>Generate SSH Key</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="SSH key form actions"> <div class="page-kicker">Access</div>
<a class="button-link" href="{% url 'ssh_credentials' %}">Back to SSH keys</a> <h1>Generate SSH Key</h1>
</section> <div class="page-subtitle">Create a pobsync-managed SSH key pair for one or more backup targets.</div>
</div>
<section class="actions" aria-label="SSH key form actions">
<a class="button-link" href="{% url 'ssh_credentials' %}">Back to SSH keys</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>Create Key Pair</h2> <h2>Create Key Pair</h2>

19
src/pobsync_backend/templates/pobsync_backend/ssh_credentials.html
View File

@@ -3,13 +3,18 @@
{% block title %}SSH Keys | pobsync{% endblock %} {% block title %}SSH Keys | pobsync{% endblock %}
{% block content %} {% block content %}
<h1>SSH Keys</h1> <header class="page-header">
<div class="page-title">
<section class="actions" aria-label="SSH key actions"> <div class="page-kicker">Access</div>
<a class="button-link" href="{% url 'generate_ssh_credential' %}">Generate SSH key</a> <h1>SSH Keys</h1>
<a class="button-link secondary" href="{% url 'create_ssh_credential' %}">Add existing key</a> <div class="page-subtitle">Manage the key pairs pobsync uses to reach backup targets.</div>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a> </div>
</section> <section class="actions" aria-label="SSH key actions">
<a class="button-link" href="{% url 'generate_ssh_credential' %}">Generate SSH key</a>
<a class="button-link secondary" href="{% url 'create_ssh_credential' %}">Add existing key</a>
<a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
</section>
</header>
<section class="panel"> <section class="panel">
<h2>Credentials</h2> <h2>Credentials</h2>

17
src/pobsync_backend/tests/test_views.py
View File

@@ -101,6 +101,8 @@ class ViewTests(TestCase):
response = self.client.get(reverse("dashboard")) response = self.client.get(reverse("dashboard"))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Control panel")
self.assertContains(response, "Backup health, required action, storage pressure, and recent activity in one place.")
self.assertContains(response, "Dashboard") self.assertContains(response, "Dashboard")
self.assertContains(response, "web-01") self.assertContains(response, "web-01")
self.assertContains(response, "20260519-021500Z__ABCDEFGH") self.assertContains(response, "20260519-021500Z__ABCDEFGH")
@@ -293,6 +295,7 @@ class ViewTests(TestCase):
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Self Check") self.assertContains(response, "Self Check")
self.assertContains(response, "Runtime, filesystem, service, and configuration checks")
self.assertContains(response, "Django debug") self.assertContains(response, "Django debug")
self.assertContains(response, "Database connection") self.assertContains(response, "Database connection")
self.assertContains(response, "State root") self.assertContains(response, "State root")
@@ -327,6 +330,7 @@ class ViewTests(TestCase):
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Logs") self.assertContains(response, "Logs")
self.assertContains(response, "Filter pobsync service logs")
self.assertContains(response, "web-01 failed backup run 12") self.assertContains(response, "web-01 failed backup run 12")
self.assertNotContains(response, "web-02 failed backup run 12") self.assertNotContains(response, "web-02 failed backup run 12")
self.assertNotContains(response, "started") self.assertNotContains(response, "started")
@@ -356,6 +360,7 @@ class ViewTests(TestCase):
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Purged Snapshots") self.assertContains(response, "Purged Snapshots")
self.assertContains(response, "Audit trail for snapshots removed")
self.assertContains(response, "20260518-021500Z__OLDSNAP") self.assertContains(response, "20260518-021500Z__OLDSNAP")
self.assertContains(response, "outside retention policy") self.assertContains(response, "outside retention policy")
self.assertContains(response, "Scheduled") self.assertContains(response, "Scheduled")
@@ -410,6 +415,7 @@ class ViewTests(TestCase):
) )
self.assertRedirects(response, reverse("ssh_credentials")) self.assertRedirects(response, reverse("ssh_credentials"))
self.assertContains(response, "Manage the key pairs pobsync uses")
self.assertContains(response, "SSH credential saved for backup-key.") self.assertContains(response, "SSH credential saved for backup-key.")
self.assertContains(response, "backup-key") self.assertContains(response, "backup-key")
credential = SshCredential.objects.get(name="backup-key") credential = SshCredential.objects.get(name="backup-key")
@@ -639,6 +645,7 @@ class ViewTests(TestCase):
response = self.client.get(reverse("edit_global_config")) response = self.client.get(reverse("edit_global_config"))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Defaults used by hosts unless a host overrides them")
self.assertContains(response, f'value="{credential.id}" selected') self.assertContains(response, f'value="{credential.id}" selected')
self.assertContains(response, "--archive") self.assertContains(response, "--archive")
self.assertContains(response, "/proc/***") self.assertContains(response, "/proc/***")
@@ -869,6 +876,8 @@ class ViewTests(TestCase):
response = self.client.get(reverse("host_detail", args=[host.host])) response = self.client.get(reverse("host_detail", args=[host.host]))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Host")
self.assertContains(response, "web-01.example.test")
self.assertContains(response, "Effective Config") self.assertContains(response, "Effective Config")
self.assertContains(response, "Backup source:") self.assertContains(response, "Backup source:")
self.assertNotContains(response, "Source root:") self.assertNotContains(response, "Source root:")
@@ -1425,6 +1434,8 @@ class ViewTests(TestCase):
response = self.client.get(reverse("run_detail", args=[run.id])) response = self.client.get(reverse("run_detail", args=[run.id]))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Backup run")
self.assertContains(response, "web-01")
self.assertContains(response, "Failure") self.assertContains(response, "Failure")
self.assertContains(response, "transport") self.assertContains(response, "transport")
self.assertContains(response, "Check network connectivity.") self.assertContains(response, "Check network connectivity.")
@@ -1615,6 +1626,7 @@ class ViewTests(TestCase):
response = self.client.get(reverse("snapshot_detail", args=[base.id])) response = self.client.get(reverse("snapshot_detail", args=[base.id]))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Snapshot")
self.assertContains(response, base.dirname) self.assertContains(response, base.dirname)
self.assertContains(response, "BASESNAP") self.assertContains(response, "BASESNAP")
self.assertContains(response, "Stats") self.assertContains(response, "Stats")
@@ -1697,7 +1709,9 @@ class ViewTests(TestCase):
response = self.client.get(reverse("host_retention_plan", args=[host.host])) response = self.client.get(reverse("host_retention_plan", args=[host.host]))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Retention Plan: web-01") self.assertContains(response, "Retention")
self.assertContains(response, "Preview which snapshots stay")
self.assertContains(response, "web-01")
self.assertContains(response, old_snapshot.dirname) self.assertContains(response, old_snapshot.dirname)
self.assertContains(response, new_snapshot.dirname) self.assertContains(response, new_snapshot.dirname)
self.assertContains(response, "newest") self.assertContains(response, "newest")
@@ -2022,6 +2036,7 @@ class ViewTests(TestCase):
response = self.client.get(reverse("edit_host_schedule", args=[host.host])) response = self.client.get(reverse("edit_host_schedule", args=[host.host]))
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, "Automatic backup timing and scheduled prune behavior")
self.assertContains(response, "Create Schedule") self.assertContains(response, "Create Schedule")
self.assertContains(response, "Schedule expression") self.assertContains(response, "Schedule expression")
self.assertContains(response, "evaluated by the pobsync scheduler service") self.assertContains(response, "evaluated by the pobsync scheduler service")