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

(ui) Replace dashboard host table with host cards

Browse Source 
Restructure the dashboard Hosts section into a card per host so snapshot,
run, schedule, retention, and data metrics have room to breathe.

Add reusable host-card styling and keep the same links and operational data
available without forcing everything into a wide table.
This commit is contained in:
Peter van Arkel
2026-05-19 23:46:52 +02:00
parent c2d7342a47
commit f3dcb8a3b9
2 changed files with 98 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -144,6 +144,54 @@
font-size: 12px;
gap: 10px;
}
.host-list {
display: grid;
gap: 12px;
}
.host-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
}
.host-card-header {
align-items: start;
display: flex;
gap: 12px;
justify-content: space-between;
margin-bottom: 12px;
}
.host-card-title {
display: grid;
gap: 3px;
min-width: 0;
}
.host-card-title a {
font-size: 17px;
font-weight: 650;
overflow-wrap: anywhere;
}
.host-card-status {
flex: 0 0 auto;
}
.host-card-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.host-card-item {
display: grid;
gap: 3px;
min-width: 0;
}
.host-card-item .label {
color: var(--muted);
font-size: 12px;
font-weight: 650;
text-transform: uppercase;
}
.host-card-item .value {
overflow-wrap: anywhere;
}
.messages { display: grid; gap: 8px; margin-bottom: 18px; }
.message {
background: var(--panel);

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

@@ -52,61 +52,74 @@
<section class="panel">
<h2>Hosts</h2>
<table>
<thead>
<tr>
<th>Host</th>
<th>Address</th>
<th>Enabled</th>
<th>Snapshots</th>
<th>Latest Snapshot</th>
<th>Latest Run</th>
<th>Next Run</th>
<th>New Data</th>
<th>Runs</th>
<th>Retention</th>
</tr>
</thead>
<tbody>
<div class="host-list">
{% for host in hosts %}
<tr>
<td><a href="{% url 'host_detail' host.host %}">{{ host.host }}</a></td>
<td>{{ host.address }}</td>
<td>{{ host.enabled|yesno:"yes,no" }}</td>
<td>{{ host.snapshot_count }}</td>
<td>
<article class="host-card">
<div class="host-card-header">
<div class="host-card-title">
<a href="{% url 'host_detail' host.host %}">{{ host.host }}</a>
<span class="muted">{{ host.address }}</span>
</div>
<div class="host-card-status">
<span class="status {% if host.enabled %}ok{% else %}skipped{% endif %}">{{ host.enabled|yesno:"enabled,disabled" }}</span>
</div>
</div>
<div class="host-card-grid">
<div class="host-card-item">
<div class="label">Latest Snapshot</div>
<div class="value">
{% if host.latest_snapshot %}
<a href="{% url 'snapshot_detail' host.latest_snapshot.id %}">{{ host.latest_snapshot.dirname }}</a>
<div class="muted">{{ host.latest_snapshot.kind }} {{ host.latest_snapshot.status }}</div>
{% else %}
<span class="muted">none</span>
{% endif %}
</td>
<td>
</div>
</div>
<div class="host-card-item">
<div class="label">Latest Run</div>
<div class="value">
{% if host.stats_summary.latest_run.id %}
<a href="{% url 'run_detail' host.stats_summary.latest_run.id %}">Run {{ host.stats_summary.latest_run.id }}</a>
<div class="muted">{{ host.stats_summary.latest_run.run_type }} {{ host.stats_summary.latest_run.duration_seconds|default:"" }}{% if host.stats_summary.latest_run.duration_seconds is not None %}s{% endif %}</div>
{% else %}
<span class="muted">none</span>
{% endif %}
</td>
<td>
</div>
</div>
<div class="host-card-item">
<div class="label">Next Run</div>
<div class="value">
{% if host.next_run_at %}
{{ host.next_run_at|date:"Y-m-d H:i T" }}
<div class="muted">{{ scheduler_timezone }}</div>
{% else %}
<span class="muted">none</span>
{% endif %}
</td>
<td>{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</td>
<td>{{ host.run_count }}</td>
<td>d{{ host.retention_daily }} w{{ host.retention_weekly }} m{{ host.retention_monthly }} y{{ host.retention_yearly }}</td>
</tr>
</div>
</div>
<div class="host-card-item">
<div class="label">Snapshots</div>
<div class="value">{{ host.snapshot_count }}</div>
</div>
<div class="host-card-item">
<div class="label">Runs</div>
<div class="value">{{ host.run_count }}</div>
</div>
<div class="host-card-item">
<div class="label">New Data</div>
<div class="value">{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</div>
</div>
<div class="host-card-item">
<div class="label">Retention</div>
<div class="value">d{{ host.retention_daily }} w{{ host.retention_weekly }} m{{ host.retention_monthly }} y{{ host.retention_yearly }}</div>
</div>
</div>
</article>
{% empty %}
<tr><td colspan="10" class="muted">No hosts configured yet.</td></tr>
<p class="muted">No hosts configured yet.</p>
{% endfor %}
</tbody>
</table>
</div>
</section>
<section class="panel">