kyleandClaude Opus 5.5
2297187f88
/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]>
92 lines
4.4 KiB
HTML
92 lines
4.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Backup Monitor</title>
|
||
<link rel="stylesheet" href="/css/styles.css">
|
||
<!-- type="module" is deferred by default; no inline JS so a strict CSP works -->
|
||
<script type="module" src="/js/app.js"></script>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1 class="topbar__title">Backup Monitor</h1>
|
||
<div class="topbar__meta">
|
||
<span id="last-updated" class="muted" aria-live="polite">Loading…</span>
|
||
<button id="refresh-btn" class="btn" type="button">Refresh</button>
|
||
<a id="reports-link" class="btn" href="/report.html">Reports</a>
|
||
<a id="admin-link" class="btn" href="/admin.html" hidden>Admin</a>
|
||
<!-- Filled in from /api/v1/me when signed in with Microsoft 365 -->
|
||
<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">
|
||
<div id="error-banner" class="banner banner--error" role="alert" hidden></div>
|
||
|
||
<!-- Summary cards double as status filters -->
|
||
<section class="summary" aria-label="Status summary and filters">
|
||
<button type="button" class="summary-card" data-filter="all" aria-pressed="true">
|
||
<span class="summary-card__count" data-count="all">–</span>
|
||
<span class="summary-card__label">All jobs</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--failed" data-filter="failed" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="failed">–</span>
|
||
<span class="summary-card__label">Failed</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--warning" data-filter="warning" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="warning">–</span>
|
||
<span class="summary-card__label">Warning</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--running" data-filter="running" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="running">–</span>
|
||
<span class="summary-card__label">Running</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--success" data-filter="success" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="success">–</span>
|
||
<span class="summary-card__label">Success</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--overdue" data-filter="overdue" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="overdue">–</span>
|
||
<span class="summary-card__label">Overdue</span>
|
||
</button>
|
||
</section>
|
||
|
||
<div class="toolbar">
|
||
<label for="search" class="visually-hidden">Search jobs</label>
|
||
<input id="search" class="input" type="search" placeholder="Search company or job…" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table class="jobs">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="company">Company</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="name">Backup Job</button></th>
|
||
<th scope="col" aria-sort="ascending"><button type="button" class="sort" data-sort="status">Status</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="lastRun">Last Run</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="nextRun">Next Scheduled</button></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="jobs-body"></tbody>
|
||
</table>
|
||
<p id="empty-state" class="empty" hidden>No backup jobs match the current filter.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Native <dialog>: built-in focus trap, Esc-to-close, and top-layer rendering -->
|
||
<dialog id="detail-dialog" class="modal" aria-labelledby="detail-title">
|
||
<div class="modal__header">
|
||
<div>
|
||
<h2 id="detail-title" class="modal__title"></h2>
|
||
<p id="detail-subtitle" class="muted"></p>
|
||
</div>
|
||
<button type="button" class="btn btn--icon" data-close aria-label="Close">✕</button>
|
||
</div>
|
||
<div id="detail-body" class="modal__body"></div>
|
||
</dialog>
|
||
</body>
|
||
</html> |