Upload files to "/"
This commit is contained in:
@@ -0,0 +1,61 @@
|
|||||||
|
import { CONFIG } from './config.js';
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
constructor(message, status = null) {
|
||||||
|
super(message);
|
||||||
|
this.name = 'ApiError';
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function request(path) {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timer = setTimeout(() => controller.abort(), CONFIG.requestTimeoutMs);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${CONFIG.apiBaseUrl}${path}`, {
|
||||||
|
headers: { Accept: 'application/json' },
|
||||||
|
credentials: 'same-origin', // ready for cookie/session auth behind nginx
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
// 401 means the nginx/SSO session lapsed; a reload sends the user back through sign-in
|
||||||
|
if (res.status === 401) throw new ApiError('Your session has expired. Reload the page to sign in again', 401);
|
||||||
|
if (!res.ok) throw new ApiError(`Server returned HTTP ${res.status}`, res.status);
|
||||||
|
return await res.json();
|
||||||
|
} catch (err) {
|
||||||
|
if (err.name === 'AbortError') throw new ApiError('Request timed out');
|
||||||
|
if (err instanceof ApiError) throw err;
|
||||||
|
throw new ApiError(`Network error: ${err.message}`);
|
||||||
|
} finally {
|
||||||
|
clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const httpApi = {
|
||||||
|
/** GET /jobs → { generated_at, jobs: Job[] } */
|
||||||
|
async listJobs() {
|
||||||
|
const data = await request('/jobs');
|
||||||
|
if (!Array.isArray(data?.jobs)) throw new ApiError('Unexpected response shape from /jobs');
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
/** GET /jobs/:id → JobDetail */
|
||||||
|
getJob(id) {
|
||||||
|
return request(`/jobs/${encodeURIComponent(id)}`);
|
||||||
|
},
|
||||||
|
/** GET /jobs/:id/runs?days=N → { job_id, since, runs: RunSummary[] } (newest first, no messages) */
|
||||||
|
listRuns(id, days) {
|
||||||
|
return request(`/jobs/${encodeURIComponent(id)}/runs?days=${encodeURIComponent(days)}`);
|
||||||
|
},
|
||||||
|
/** GET /runs/:id → Run (with message and details) */
|
||||||
|
getRun(id) {
|
||||||
|
return request(`/runs/${encodeURIComponent(id)}`);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock is loaded lazily so it never ships in the production request path.
|
||||||
|
export async function getApi() {
|
||||||
|
if (CONFIG.useMock) {
|
||||||
|
const { mockApi } = await import('./mock.js');
|
||||||
|
return mockApi;
|
||||||
|
}
|
||||||
|
return httpApi;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
// Central runtime config. Kept as a static file so ops can change it without a build.
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
export const CONFIG = Object.freeze({
|
||||||
|
apiBaseUrl: '/api/v1',
|
||||||
|
refreshIntervalMs: 60_000,
|
||||||
|
requestTimeoutMs: 15_000,
|
||||||
|
// A job whose next scheduled run is this far in the past is flagged "Overdue".
|
||||||
|
// Catches the silent failure mode: a job stops reporting and stays green forever.
|
||||||
|
overdueGraceMinutes: 30,
|
||||||
|
// Run history shown in the job modal (the API caps this at 30)
|
||||||
|
historyDays: 30,
|
||||||
|
// ?mock=1 → use in-browser sample data, no backend needed
|
||||||
|
useMock: params.has('mock'),
|
||||||
|
});
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
const dateTimeFmt = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
|
||||||
|
const timeFmt = new Intl.DateTimeFormat(undefined, { timeStyle: 'medium' });
|
||||||
|
const relFmt = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
|
||||||
|
|
||||||
|
const REL_UNITS = [
|
||||||
|
['year', 31_536_000], ['month', 2_592_000], ['week', 604_800],
|
||||||
|
['day', 86_400], ['hour', 3_600], ['minute', 60],
|
||||||
|
];
|
||||||
|
|
||||||
|
export function parseDate(value) {
|
||||||
|
if (!value) return null;
|
||||||
|
const d = new Date(value);
|
||||||
|
return Number.isNaN(d.getTime()) ? null : d;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatDateTime = (d) => (d ? dateTimeFmt.format(d) : '—');
|
||||||
|
export const formatTime = (d) => timeFmt.format(d);
|
||||||
|
|
||||||
|
export function formatRelative(d, now = Date.now()) {
|
||||||
|
if (!d) return '';
|
||||||
|
const diffSec = Math.round((d.getTime() - now) / 1000);
|
||||||
|
for (const [unit, secs] of REL_UNITS) {
|
||||||
|
if (Math.abs(diffSec) >= secs) return relFmt.format(Math.round(diffSec / secs), unit);
|
||||||
|
}
|
||||||
|
return relFmt.format(diffSec, 'second');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDuration(totalSec) {
|
||||||
|
if (totalSec == null || Number.isNaN(Number(totalSec))) return null;
|
||||||
|
const s = Math.max(0, Math.round(totalSec));
|
||||||
|
const h = Math.floor(s / 3600);
|
||||||
|
const m = Math.floor((s % 3600) / 60);
|
||||||
|
const sec = s % 60;
|
||||||
|
return [h && `${h}h`, (h || m) && `${m}m`, `${sec}s`].filter(Boolean).join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatBytes(bytes) {
|
||||||
|
if (bytes == null || Number.isNaN(Number(bytes))) return null;
|
||||||
|
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
|
||||||
|
let n = Number(bytes);
|
||||||
|
let i = 0;
|
||||||
|
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
|
||||||
|
return `${n.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
|
||||||
|
}
|
||||||
+85
@@ -0,0 +1,85 @@
|
|||||||
|
<!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>
|
||||||
|
</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>
|
||||||
+341
@@ -0,0 +1,341 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
--bg: #f6f7f9;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-alt: #f0f2f5;
|
||||||
|
--border: #d9dde3;
|
||||||
|
--text: #1f2328;
|
||||||
|
--muted: #656d76;
|
||||||
|
--accent: #0969da;
|
||||||
|
|
||||||
|
/* Status palette: each has fg/bg/border so badges stay legible in both themes */
|
||||||
|
--success-fg: #116329; --success-bg: #dafbe1; --success-bd: #4ac26b;
|
||||||
|
--warning-fg: #7d4e00; --warning-bg: #fff8c5; --warning-bd: #d4a72c;
|
||||||
|
--failed-fg: #a40e26; --failed-bg: #ffebe9; --failed-bd: #ff8182;
|
||||||
|
--unknown-fg: #57606a; --unknown-bg: #eaeef2; --unknown-bd: #afb8c1;
|
||||||
|
--running-fg: #0550ae; --running-bg: #ddf4ff; --running-bd: #54aeff;
|
||||||
|
|
||||||
|
--radius: 8px;
|
||||||
|
--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 4%);
|
||||||
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #0d1117;
|
||||||
|
--surface: #161b22;
|
||||||
|
--surface-alt: #1c2128;
|
||||||
|
--border: #30363d;
|
||||||
|
--text: #e6edf3;
|
||||||
|
--muted: #8d96a0;
|
||||||
|
--accent: #4493f8;
|
||||||
|
--success-fg: #6fdd8b; --success-bg: #12261e; --success-bd: #2ea043;
|
||||||
|
--warning-fg: #f2cc60; --warning-bg: #272115; --warning-bd: #9e6a03;
|
||||||
|
--failed-fg: #ffa198; --failed-bg: #2d1214; --failed-bd: #da3633;
|
||||||
|
--unknown-fg: #9da7b3; --unknown-bg: #21262d; --unknown-bd: #484f58;
|
||||||
|
--running-fg: #79c0ff; --running-bg: #0c2d4b; --running-bd: #1f6feb;
|
||||||
|
--shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted { color: var(--muted); }
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px; height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Layout ---------- */
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: var(--surface);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.topbar__title { margin: 0; font-size: 1.25rem; }
|
||||||
|
.topbar__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.25rem 1.5rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Controls ---------- */
|
||||||
|
.btn {
|
||||||
|
font: inherit;
|
||||||
|
padding: 0.4rem 0.9rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--surface-alt);
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover { border-color: var(--muted); }
|
||||||
|
.btn:disabled { opacity: 0.6; cursor: progress; }
|
||||||
|
.btn--icon { padding: 0.25rem 0.55rem; line-height: 1; }
|
||||||
|
|
||||||
|
.input {
|
||||||
|
font: inherit;
|
||||||
|
width: min(100%, 360px);
|
||||||
|
padding: 0.45rem 0.75rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||||
|
|
||||||
|
.toolbar { margin: 1rem 0; }
|
||||||
|
|
||||||
|
/* ---------- Banner ---------- */
|
||||||
|
.banner {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.banner--error { background: var(--failed-bg); color: var(--failed-fg); border-color: var(--failed-bd); }
|
||||||
|
|
||||||
|
/* ---------- Summary cards ---------- */
|
||||||
|
.summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
.summary-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0.9rem 1rem;
|
||||||
|
font: inherit;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left-width: 4px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.summary-card[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -1px; }
|
||||||
|
.summary-card__count { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||||
|
.summary-card__label { font-size: 0.85rem; color: var(--muted); }
|
||||||
|
.summary-card--failed { border-left-color: var(--failed-bd); }
|
||||||
|
.summary-card--warning { border-left-color: var(--warning-bd); }
|
||||||
|
.summary-card--running { border-left-color: var(--running-bd); }
|
||||||
|
.summary-card--success { border-left-color: var(--success-bd); }
|
||||||
|
.summary-card--overdue { border-left-color: var(--unknown-bd); }
|
||||||
|
|
||||||
|
/* ---------- Table ---------- */
|
||||||
|
.table-wrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.jobs { width: 100%; border-collapse: collapse; }
|
||||||
|
.jobs th, .jobs td {
|
||||||
|
padding: 0.65rem 1rem;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.jobs tbody tr:last-child td { border-bottom: none; }
|
||||||
|
.jobs tbody tr:hover { background: var(--surface-alt); }
|
||||||
|
.jobs th { background: var(--surface-alt); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
|
||||||
|
|
||||||
|
.sort {
|
||||||
|
all: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sort::after { content: " ↕"; opacity: 0.4; }
|
||||||
|
th[aria-sort="ascending"] .sort::after { content: " ↑"; opacity: 1; }
|
||||||
|
th[aria-sort="descending"] .sort::after { content: " ↓"; opacity: 1; }
|
||||||
|
th[aria-sort="ascending"] .sort,
|
||||||
|
th[aria-sort="descending"] .sort { color: var(--text); }
|
||||||
|
|
||||||
|
.time { display: flex; flex-direction: column; }
|
||||||
|
.time__rel { font-size: 0.8rem; color: var(--muted); }
|
||||||
|
|
||||||
|
.empty { padding: 2rem; text-align: center; color: var(--muted); margin: 0; }
|
||||||
|
|
||||||
|
/* ---------- Status badges ---------- */
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.2rem 0.65rem;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
button.badge { cursor: pointer; }
|
||||||
|
button.badge:hover { filter: brightness(0.95); }
|
||||||
|
/* Icon + text, not colour alone, so it's readable for colour-blind users */
|
||||||
|
.badge__icon { font-size: 0.75rem; }
|
||||||
|
.badge--success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-bd); }
|
||||||
|
.badge--warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-bd); }
|
||||||
|
.badge--failed { color: var(--failed-fg); background: var(--failed-bg); border-color: var(--failed-bd); }
|
||||||
|
.badge--unknown { color: var(--unknown-fg); background: var(--unknown-bg); border-color: var(--unknown-bd); }
|
||||||
|
.badge--running { color: var(--running-fg); background: var(--running-bg); border-color: var(--running-bd); }
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.badge--running .badge__icon { animation: spin 2s linear infinite; }
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
.tag-overdue {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
padding: 0.05rem 0.45rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--failed-fg);
|
||||||
|
background: var(--failed-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Modal ---------- */
|
||||||
|
.modal {
|
||||||
|
width: min(720px, calc(100vw - 2rem));
|
||||||
|
max-height: calc(100vh - 4rem);
|
||||||
|
padding: 0;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.modal::backdrop { background: rgb(0 0 0 / 45%); }
|
||||||
|
.modal__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.modal__title { margin: 0; font-size: 1.15rem; }
|
||||||
|
.modal__header p { margin: 0.15rem 0 0; }
|
||||||
|
.modal__body { padding: 1rem 1.25rem 1.25rem; }
|
||||||
|
|
||||||
|
.detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
|
gap: 0.4rem 1.25rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.detail-grid dt { color: var(--muted); }
|
||||||
|
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
|
||||||
|
|
||||||
|
.detail-section-title { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0.5rem; }
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
max-height: 320px;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre-wrap; /* preserve backup-software line breaks */
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
background: var(--surface-alt);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left-width: 4px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.message--failed { border-left-color: var(--failed-bd); }
|
||||||
|
.message--warning { border-left-color: var(--warning-bd); }
|
||||||
|
.message--success { border-left-color: var(--success-bd); }
|
||||||
|
.message--running { border-left-color: var(--running-bd); }
|
||||||
|
|
||||||
|
.detail-status { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
.link {
|
||||||
|
all: unset;
|
||||||
|
color: var(--accent);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Run history ---------- */
|
||||||
|
.history-stats { margin: 0 0 0.6rem; font-size: 0.9rem; }
|
||||||
|
|
||||||
|
/* One cell per day, oldest → today. Colour + tooltip; the runs table below is the accessible detail. */
|
||||||
|
.day-strip {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(30, 1fr);
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
.day {
|
||||||
|
height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--surface-alt);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.day:disabled { cursor: default; opacity: 0.6; }
|
||||||
|
.day:not(:disabled):hover { filter: brightness(0.9); }
|
||||||
|
.day[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||||||
|
.day--success { background: var(--success-bd); border-color: var(--success-bd); }
|
||||||
|
.day--warning { background: var(--warning-bd); border-color: var(--warning-bd); }
|
||||||
|
.day--failed { background: var(--failed-bd); border-color: var(--failed-bd); }
|
||||||
|
.day--running { background: var(--running-bd); border-color: var(--running-bd); }
|
||||||
|
.day--unknown { background: var(--unknown-bd); border-color: var(--unknown-bd); }
|
||||||
|
.day-strip__ticks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-filter { margin: 0.75rem 0 0; font-size: 0.85rem; }
|
||||||
|
|
||||||
|
.runs-wrap {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.runs { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
||||||
|
.runs th, .runs td {
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.runs th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: var(--surface-alt);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.runs tbody tr:last-child td { border-bottom: none; }
|
||||||
|
.runs tr.is-selected td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
||||||
|
.runs .badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
|
||||||
Reference in New Issue
Block a user