domverse/pngx-sync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign replicas page with professional B2B layout
All checks were successful
Deploy / deploy (push) Successful in 14s
Details

Browse Source 
- Two-column layout: add form (left) + prerequisites guide (right)
- Help sidebar with numbered checklist: reachability, API token, interval
- Callout for existing-instance reconcile workflow
- "What gets synced" info card with primary-color accent border
- Form fields with helper text under each input
- Spinner/busy state on submit buttons during API calls
- Clean status badges replacing emoji in replica table
- Better modal footer layout for edit dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
domverse
2026-03-23 10:10:56 +01:00
parent 9c95f566b2
commit eee4d11f44
1 changed files with 145 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
app/templates/replicas.html
View File

@@ -2,7 +2,12 @@
{% block title %}Replicas — pngx-controller{% endblock %} {% block title %}Replicas — pngx-controller{% endblock %}
{% block content %} {% block content %}
<h2>Replicas</h2> <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;">
<div>
<h2 style="margin:0;">Replicas</h2>
<small class="muted">Paperless-ngx instances that receive documents from the master.</small>
</div>
</div>
{% if replicas %} {% if replicas %}
<div class="overflow-auto"> <div class="overflow-auto">
@@ -11,7 +16,7 @@
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>URL</th> <th>URL</th>
<th>Enabled</th> <th>Status</th>
<th>Interval</th> <th>Interval</th>
<th>Last Sync</th> <th>Last Sync</th>
<th>Actions</th> <th>Actions</th>
@@ -21,16 +26,22 @@
{% for r in replicas %} {% for r in replicas %}
<tr> <tr>
<td><a href="/replicas/{{ r.id }}">{{ r.name }}</a></td> <td><a href="/replicas/{{ r.id }}">{{ r.name }}</a></td>
<td><code>{{ r.url }}</code></td> <td><small><code>{{ r.url }}</code></small></td>
<td>{% if r.enabled %}✅{% else %}⛔{% endif %}</td> <td>
{% if r.suspended_at %}
<span class="badge badge-suspended">suspended</span>
<br><small class="muted">{{ r.consecutive_failures }} failures</small>
{% elif not r.enabled %}
<span class="badge badge-pending">disabled</span>
{% else %}
<span class="badge badge-ok">enabled</span>
{% endif %}
</td>
<td> <td>
{% if r.sync_interval_seconds %}{{ r.sync_interval_seconds }}s{% else %}<small class="muted">global</small>{% endif %} {% if r.sync_interval_seconds %}{{ r.sync_interval_seconds }}s{% else %}<small class="muted">global</small>{% endif %}
</td> </td>
<td> <td>
{% if r.last_sync_ts %}{{ r.last_sync_ts.strftime('%Y-%m-%d %H:%M') }}{% else %}<small class="muted">never</small>{% endif %} {% if r.last_sync_ts %}{{ r.last_sync_ts.strftime('%Y-%m-%d %H:%M') }} UTC{% else %}<small class="muted">never</small>{% endif %}
{% if r.suspended_at %}
<br><span class="badge badge-suspended">suspended · {{ r.consecutive_failures }} failures</span>
{% endif %}
</td> </td>
<td class="actions"> <td class="actions">
<a href="/replicas/{{ r.id }}" role="button" class="secondary outline" style="padding:0.2em 0.6em; font-size:0.8em;">Detail</a> <a href="/replicas/{{ r.id }}" role="button" class="secondary outline" style="padding:0.2em 0.6em; font-size:0.8em;">Detail</a>
@@ -65,61 +76,137 @@
</table> </table>
</div> </div>
{% else %} {% else %}
<p>No replicas yet.</p> <p class="muted" style="margin-bottom:1.5rem;">No replicas configured yet.</p>
{% endif %} {% endif %}
<hr> <hr style="margin:2rem 0;">
<h3>Add Replica</h3> <h3 style="margin-bottom:0.25rem;">Add Replica</h3>
<p style="margin-top:0; margin-bottom:1.5rem;"><small class="muted">The controller will test the connection before saving.</small></p>
{% if env_replicas %} {% if env_replicas %}
<details open style="margin-bottom:1rem;"> <div style="margin-bottom:1.25rem; padding:0.75rem 1rem; background:var(--pico-card-background-color); border:1px solid var(--pico-muted-border-color); border-radius:var(--pico-border-radius);">
<summary><strong>From pngx.env</strong> — {{ env_replicas|length }} not yet added</summary> <small style="font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--pico-muted-color);">Detected in pngx.env — not yet added</small>
<div style="display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem;"> <div style="display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem;">
{% for er in env_replicas %} {% for er in env_replicas %}
{% set er_name = er.safe | lower | replace('_', '-') %} {% set er_name = er.safe | lower | replace('_', '-') %}
<button type="button" class="outline" style="font-size:0.85em;" <button type="button" class="outline" style="font-size:0.85em; padding:0.3em 0.8em;"
onclick="prefillAdd('{{ er_name }}', '{{ er.url }}', '{{ er.token }}')"> onclick="prefillAdd('{{ er_name }}', '{{ er.url }}', '{{ er.token }}')">
+ {{ er.safe }} <small style="opacity:0.6;">{{ er.url }}</small> + {{ er.safe }} <small style="opacity:0.6; margin-left:0.25em;">{{ er.url }}</small>
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
</details> </div>
{% endif %} {% endif %}
<div id="add-form-area"> <div style="display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start;">
<form id="add-replica-form" onsubmit="submitAddReplica(event)">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;"> <!-- Add form -->
<label>Name <input type="text" name="name" required placeholder="backup"></label> <article style="margin:0; padding:1.5rem;">
<label>URL <input type="url" name="url" required placeholder="http://100.y.y.y:8000"></label> <form id="add-replica-form" onsubmit="submitAddReplica(event)">
<label>API Token <input type="password" name="api_token" required></label> <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;">
<label>Sync Interval (seconds, blank = global) <label>
<input type="number" name="sync_interval_seconds" placeholder="900" min="60"> Display name
</label> <input type="text" name="name" required placeholder="e.g. berlin-office">
<label style="align-self:end;"> <small class="muted">Short identifier shown in the dashboard.</small>
<input type="checkbox" name="enabled" checked> Enabled </label>
</label> <label>
</div> Instance URL
<div id="add-test-result" style="margin:0.5rem 0;"></div> <input type="url" name="url" required placeholder="http://100.x.x.x:8000">
<button type="submit">Add Replica</button> <small class="muted">Must be reachable from this controller.</small>
</form> </label>
</div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:0.5rem;">
<label>
API token
<input type="password" name="api_token" required autocomplete="off">
<small class="muted">From Paperless → Settings → API → Auth Tokens.</small>
</label>
<label>
Sync interval
<input type="number" name="sync_interval_seconds" placeholder="Leave blank to use global" min="60">
<small class="muted">Seconds between syncs. Overrides the global setting.</small>
</label>
</div>
<div style="margin-top:1rem;">
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
<input type="checkbox" name="enabled" checked style="margin:0;">
Enable immediately after adding
</label>
</div>
<div id="add-test-result" style="margin:0.75rem 0; min-height:1.5em;"></div>
<button type="submit" style="margin-bottom:0;">Add Replica</button>
</form>
</article>
<!-- Help sidebar -->
<aside>
<article style="margin:0; padding:1.25rem; background:var(--pico-card-sectionning-background-color);">
<p style="margin:0 0 1rem; font-weight:600; font-size:0.95em;">Before you add a replica</p>
<ol style="margin:0 0 1.25rem; padding-left:1.25rem; display:flex; flex-direction:column; gap:0.75rem;">
<li>
<strong>Verify reachability</strong><br>
<small class="muted">The replica's URL must be reachable from this controller. On Tailscale, use the replica's Tailscale IP and port.</small>
</li>
<li>
<strong>Generate an API token</strong><br>
<small class="muted">In the replica's Paperless UI go to <strong>Settings → API → Auth Tokens</strong> and create a token for a superuser account.</small>
</li>
<li>
<strong>Decide on sync interval</strong><br>
<small class="muted">Leave blank to use the global interval (set in Settings). Override per-replica if this instance needs a different cadence.</small>
</li>
</ol>
<hr style="margin:1rem 0;">
<p style="margin:0 0 0.5rem; font-weight:600; font-size:0.9em;">Replica already has documents?</p>
<p style="margin:0; font-size:0.875em; color:var(--pico-muted-color);">
Add it normally — then open its <strong>Detail</strong> page and run
<strong>Reconcile</strong> before the first sync. Reconcile matches
existing documents to the master without re-uploading them, preventing
duplicates.
</p>
</article>
<article style="margin:0.75rem 0 0; padding:1rem 1.25rem; border-left:3px solid var(--pico-primary);">
<p style="margin:0; font-size:0.875em;">
<strong>What gets synced?</strong><br>
<span class="muted">Documents, tags, correspondents, document types, and custom fields.
The master always wins — replicas are read-only by convention.</span>
</p>
</article>
</aside>
</div> </div>
<!-- Edit modal --> <!-- Edit modal -->
<dialog id="edit-modal"> <dialog id="edit-modal">
<article> <article>
<header><h3>Edit Replica</h3></header> <header>
<h3 style="margin:0;">Edit Replica</h3>
</header>
<form id="edit-replica-form" onsubmit="submitEditReplica(event)"> <form id="edit-replica-form" onsubmit="submitEditReplica(event)">
<input type="hidden" name="id"> <input type="hidden" name="id">
<label>Name <input type="text" name="name" required></label> <label>Display name <input type="text" name="name" required></label>
<label>URL <input type="url" name="url" required></label> <label>Instance URL <input type="url" name="url" required></label>
<label>API Token (leave blank to keep current) <input type="password" name="api_token" placeholder="unchanged"></label> <label>
<label>Sync Interval (seconds) <input type="number" name="sync_interval_seconds" min="60"></label> API Token
<label><input type="checkbox" name="enabled"> Enabled</label> <input type="password" name="api_token" placeholder="Leave blank to keep current" autocomplete="off">
<div id="edit-test-result" style="margin:0.5rem 0;"></div> <small class="muted">Only fill this if you want to update the token.</small>
<footer> </label>
<button type="button" class="secondary" onclick="document.getElementById('edit-modal').close()">Cancel</button> <label>
<button type="submit">Save</button> Sync interval (seconds)
<input type="number" name="sync_interval_seconds" min="60" placeholder="Leave blank to use global">
</label>
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
<input type="checkbox" name="enabled" style="margin:0;"> Enabled
</label>
<div id="edit-test-result" style="margin:0.5rem 0; min-height:1.5em;"></div>
<footer style="display:flex; justify-content:flex-end; gap:0.5rem; padding:0; margin-top:1rem;">
<button type="button" class="secondary outline" onclick="document.getElementById('edit-modal').close()">Cancel</button>
<button type="submit">Save Changes</button>
</footer> </footer>
</form> </form>
</article> </article>
@@ -144,14 +231,18 @@ async function submitAddReplica(e) {
sync_interval_seconds: data.sync_interval_seconds ? parseInt(data.sync_interval_seconds) : null sync_interval_seconds: data.sync_interval_seconds ? parseInt(data.sync_interval_seconds) : null
}; };
const resultEl = document.getElementById('add-test-result'); const resultEl = document.getElementById('add-test-result');
resultEl.textContent = 'Saving…'; const btn = form.querySelector('button[type=submit]');
btn.setAttribute('aria-busy', 'true');
btn.textContent = 'Testing connection…';
const r = await fetch('/api/replicas', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)}); const r = await fetch('/api/replicas', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
const json = await r.json(); const json = await r.json();
btn.removeAttribute('aria-busy');
btn.textContent = 'Add Replica';
if (r.ok) { if (r.ok) {
resultEl.innerHTML = '<span class="badge badge-ok">✓ Saved — doc count: ' + (json.doc_count || 0) + '</span>'; resultEl.innerHTML = '<span class="badge badge-ok">&#10003; Connected &mdash; ' + (json.doc_count || 0) + ' documents found. Saving&hellip;</span>';
setTimeout(() => window.location.reload(), 800); setTimeout(() => window.location.reload(), 900);
} else { } else {
resultEl.innerHTML = '<span class="badge badge-error">✗ ' + (json.detail || 'Error') + '</span>'; resultEl.innerHTML = '<span class="badge badge-error">&#10007; ' + (json.detail || 'Connection failed') + '</span>';
} }
} }
@@ -178,14 +269,18 @@ async function submitEditReplica(e) {
}; };
if (data.api_token) body.api_token = data.api_token; if (data.api_token) body.api_token = data.api_token;
const resultEl = document.getElementById('edit-test-result'); const resultEl = document.getElementById('edit-test-result');
resultEl.textContent = 'Saving…'; const btn = form.querySelector('button[type=submit]');
btn.setAttribute('aria-busy', 'true');
btn.textContent = 'Saving…';
const r = await fetch('/api/replicas/' + id, {method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)}); const r = await fetch('/api/replicas/' + id, {method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
const json = await r.json(); const json = await r.json();
btn.removeAttribute('aria-busy');
btn.textContent = 'Save Changes';
if (r.ok) { if (r.ok) {
resultEl.innerHTML = '<span class="badge badge-ok">✓ Saved</span>'; resultEl.innerHTML = '<span class="badge badge-ok">&#10003; Saved</span>';
setTimeout(() => window.location.reload(), 600); setTimeout(() => window.location.reload(), 700);
} else { } else {
resultEl.innerHTML = '<span class="badge badge-error">✗ ' + (json.detail || 'Error') + '</span>'; resultEl.innerHTML = '<span class="badge badge-error">&#10007; ' + (json.detail || 'Error') + '</span>';
} }
} }
</script> </script>