Add per-company backup reports (printable page and CSV)
/report.html shows one company's backups over the last 7, 30 or 90 days, chosen in the page and kept in the URL so reports can be bookmarked or linked. Reached from Reports in the top bar, or a company's name in a job's detail. - Summary (jobs, runs, success rate, warnings, failures, overdue now); per job: run counts, success rate (successful / finished runs), last result and last successful backup; a day-by-day strip; every warning and failure with its message - Print / Save as PDF: a print stylesheet prints light whatever the screen theme, hides the controls, keeps rows and strips whole across pages, and keeps the coloured cells and badges - Days before a job was first known show as "Not monitored yet" rather than as missed backups, so a 90-day report for a newly added client doesn't look like 60 days of failures - CSV of every run (full messages, times in the browser's time zone, UTF-8 BOM for Excel, formula-like values defused with a leading ') Backend: GET /api/v1/tenants, /api/v1/reports/tenant and /api/v1/reports/tenant.csv; periods capped at retention. tzdata added for systems without time zone data. Frontend status and day-strip helpers moved out of app.js into status.js / history.js for reuse. Tested: 9 new backend tests; in the browser against the API with 30 days of demo history (summary, issues, strips, 7/30/90 switching, CSV download with BOM, print styles applied on screen), mock mode and phone width. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,117 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Backup report · Backup Monitor</title>
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<script type="module" src="/js/report.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar no-print">
|
||||
<div class="topbar__nav">
|
||||
<a id="back-link" class="btn" href="/">← Dashboard</a>
|
||||
<h1 class="topbar__title">Reports</h1>
|
||||
</div>
|
||||
<div class="topbar__meta">
|
||||
<span id="signed-in" class="topbar__user" hidden>
|
||||
<span id="signed-in-email" class="muted"></span>
|
||||
<a id="sign-out" class="btn" href="#">Sign out</a>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container container--narrow">
|
||||
<form id="report-form" class="report-controls no-print">
|
||||
<div class="report-controls__field">
|
||||
<label for="tenant">Company</label>
|
||||
<select id="tenant" name="tenant" class="input" required>
|
||||
<option value="">Choose a company…</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="report-controls__field">
|
||||
<label for="days">Period</label>
|
||||
<select id="days" name="days" class="input">
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30" selected>Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="report-controls__actions">
|
||||
<button id="print-btn" class="btn btn--primary" type="button" disabled>Print / Save as PDF</button>
|
||||
<a id="csv-link" class="btn" aria-disabled="true">Download CSV</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="error-banner" class="banner banner--error" role="alert" hidden></div>
|
||||
<p id="choose-hint" class="empty no-print">Choose a company to see its backup report.</p>
|
||||
<p id="loading" class="muted no-print" hidden>Loading report…</p>
|
||||
|
||||
<article id="report" class="report" aria-labelledby="report-title" hidden>
|
||||
<header class="report__header">
|
||||
<h2 id="report-title" class="report__title"></h2>
|
||||
<p id="report-period" class="report__period"></p>
|
||||
</header>
|
||||
|
||||
<section aria-label="Summary">
|
||||
<dl id="report-summary" class="report-summary"></dl>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="jobs-heading">
|
||||
<h3 id="jobs-heading" class="report__section-title">Jobs</h3>
|
||||
<div class="table-wrap">
|
||||
<table class="jobs report-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Job</th>
|
||||
<th scope="col">Source</th>
|
||||
<th scope="col" class="num">Runs</th>
|
||||
<th scope="col" class="num">Successful</th>
|
||||
<th scope="col" class="num">Warnings</th>
|
||||
<th scope="col" class="num">Failed</th>
|
||||
<th scope="col" class="num">Success rate</th>
|
||||
<th scope="col">Last result</th>
|
||||
<th scope="col">Last successful backup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="jobs-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="daily-heading">
|
||||
<h3 id="daily-heading" class="report__section-title">Day by day</h3>
|
||||
<ul class="report-legend" aria-label="Legend">
|
||||
<li><span class="day day--success" aria-hidden="true"></span>Successful</li>
|
||||
<li><span class="day day--warning" aria-hidden="true"></span>Warning</li>
|
||||
<li><span class="day day--failed" aria-hidden="true"></span>Failed</li>
|
||||
<li><span class="day day--running" aria-hidden="true"></span>In progress</li>
|
||||
<li><span class="day day--none" aria-hidden="true"></span>No backup</li>
|
||||
<li><span class="day day--untracked" aria-hidden="true"></span>Not monitored yet</li>
|
||||
</ul>
|
||||
<div id="daily" class="report-daily"></div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="issues-heading">
|
||||
<h3 id="issues-heading" class="report__section-title">Warnings and failures</h3>
|
||||
<p id="issues-none" class="muted" hidden>None in this period.</p>
|
||||
<div id="issues-wrap" class="table-wrap">
|
||||
<table class="jobs report-table report-issues">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">When</th>
|
||||
<th scope="col">Job</th>
|
||||
<th scope="col">Result</th>
|
||||
<th scope="col">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="issues-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="report-footer" class="report__footer muted"></footer>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user