NP@naman-parashar-s-team / On-call dashboardPublic
On-call dashboard
A JS snippet on QuikRun, callable at quik.run/r/oncall.
JS· node:20· 3 runs· 0 forks· updated 13h ago
On-call dashboard.js
// On-Call Dashboard - a server-rendered internal status page for an infra team.// Shows who is on call right now (live pulse + shift timeline), the week rotation,// recent ships/deploys with health, an at-a-glance ops rail, and escalation links.// HTML is built as a template-literal string and returned with text/html. No fetch.import dayjs from "dayjs";// Relative time ("11 min ago") without the dayjs relativeTime plugin (not available in the sandbox).function relFrom(then, ref) {const ms = ref.diff(then);const past = ms >= 0;const s = Math.abs(ms) / 1000;const m = s / 60,h = m / 60,d = h / 24;let out;if (s < 45) return "just now";else if (m < 45) out = `${Math.round(m)} min`;else if (h < 22) out = `${Math.round(h)}h`;else out = `${Math.round(d)}d`;return past ? `${out} ago` : `in ${out}`;}export default async function handler(req, env) {const now = dayjs();// --- demo data ---------------------------------------------------------const team = [{ name: "Priya Menon", role: "Primary", squad: "Platform", avatar: "PM", tz: "IST" },{ name: "Diego Alvarez", role: "Secondary", squad: "Platform", avatar: "DA", tz: "CET" },{ name: "Sam Okafor", role: "Primary", squad: "Data", avatar: "SO", tz: "GMT" },{ name: "Yuki Tanaka", role: "Manager on duty", squad: "Ops", avatar: "YT", tz: "JST" },];// Current on-call: Priya, on a 12h block that started 4h 20m ago.const shiftStart = now.subtract(4, "hour").subtract(20, "minute");const shiftEnd = shiftStart.add(12, "hour");const onCall = team[0];const secondary = team[1];const msLeft = Math.max(0, shiftEnd.diff(now));const hoursLeft = Math.floor(msLeft / 3_600_000);const minsLeft = Math.floor((msLeft % 3_600_000) / 60_000);const timeLeft = `${hoursLeft}h ${String(minsLeft).padStart(2, "0")}m`;const shiftTotal = shiftEnd.diff(shiftStart);const shiftPct = Math.max(0, Math.min(100, Math.round(((shiftTotal - msLeft) / shiftTotal) * 100)));const rotation = [{ day: "Mon", who: "Priya Menon", av: "PM", d: 1 },{ day: "Tue", who: "Diego Alvarez", av: "DA", d: 2 },{ day: "Wed", who: "Sam Okafor", av: "SO", d: 3 },{ day: "Thu", who: "Priya Menon", av: "PM", d: 4 },{ day: "Fri", who: "Yuki Tanaka", av: "YT", d: 5 },{ day: "Sat", who: "Diego Alvarez", av: "DA", d: 6 },{ day: "Sun", who: "Sam Okafor", av: "SO", d: 0 },].map((r) => ({ ...r, active: now.day() === r.d }));const ships = [{ service: "api-gateway", who: "Diego Alvarez", av: "DA", at: now.subtract(11, "minute"), status: "ok", version: "v4.18.2" },{ service: "billing-worker", who: "Priya Menon", av: "PM", at: now.subtract(52, "minute"), status: "ok", version: "v2.7.0" },{ service: "search-index", who: "Sam Okafor", av: "SO", at: now.subtract(2, "hour").subtract(9, "minute"), status: "degraded", version: "v1.31.4" },{ service: "web-edge", who: "Priya Menon", av: "PM", at: now.subtract(5, "hour").subtract(3, "minute"), status: "ok", version: "v9.2.1" },{ service: "auth-service", who: "Yuki Tanaka", av: "YT", at: now.subtract(1, "day").subtract(3, "hour"), status: "rolled-back", version: "v3.0.0" },];const stats = [{ k: "Open incidents", v: "0", tone: "green", sub: "24h clean" },{ k: "Deploys today", v: "7", tone: "text", sub: "1 degraded" },{ k: "Median ack", v: "3m", tone: "accent", sub: "SLO 5m" },{ k: "Escalations", v: "1", tone: "text", sub: "this week" },];const links = [{ label: "Runbook", href: "#runbook", hint: "incident playbooks", icon: "book" },{ label: "Status page", href: "#status", hint: "public uptime", icon: "activity" },{ label: "Docs", href: "#docs", hint: "architecture + ADRs", icon: "docs" },];// --- helpers -----------------------------------------------------------const esc = (s) =>String(s).replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));const statusMeta = {ok: { color: "var(--green)", label: "deployed" },degraded: { color: "var(--accent)", label: "degraded" },"rolled-back": { color: "var(--red)", label: "rolled back" },};const toneColor = { green: "var(--green)", accent: "var(--accent)", text: "var(--text)" };const icon = (name) => {const p = {book: '<path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H16v14H6.5A2.5 2.5 0 0 0 4 18.5v-14Z"/><path d="M16 2v14"/>',activity: '<path d="M2 9h3l2.5 6L11 3l2.5 6H16"/>',docs: '<path d="M4 2h6l4 4v10H4V2Z"/><path d="M10 2v4h4"/>',}[name];return `<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">${p}</svg>`;};const avatar = (initials) => `<span class="av">${esc(initials)}</span>`;// --- markup fragments --------------------------------------------------const statCards = stats.map((s) => `<div class="stat"><div class="stat-v" style="color:${toneColor[s.tone]}">${esc(s.v)}</div><div class="stat-k">${esc(s.k)}</div><div class="stat-sub">${esc(s.sub)}</div></div>`).join("");const rotationRows = rotation.map((r) => `<div class="rot ${r.active ? "rot-on" : ""}"><span class="rot-day">${esc(r.day)}</span><span class="rot-who">${avatar(r.av)}<span class="rot-name">${esc(r.who)}</span></span>${r.active ? '<span class="rot-tag">TODAY</span>' : '<span class="rot-idle"></span>'}</div>`).join("");const shipRows = ships.map((s) => {const m = statusMeta[s.status] || statusMeta.ok;return `<div class="ship"><span class="dot" style="--dot:${m.color}"></span><div class="ship-main"><div class="ship-top"><span class="mono ship-svc">${esc(s.service)}</span><span class="mono ship-ver">${esc(s.version)}</span></div><div class="ship-sub">${avatar(s.av)}<span>${esc(s.who)}</span><span class="sep"></span><span class="stat-tag" style="color:${m.color}">${esc(m.label)}</span></div></div><span class="mono ship-time">${esc(relFrom(s.at, now))}</span></div>`;}).join("");const linkCards = links.map((l) => `<a class="link" href="${esc(l.href)}"><span class="link-ic">${icon(l.icon)}</span><span class="link-txt"><span class="link-label">${esc(l.label)}</span><span class="link-hint">${esc(l.hint)}</span></span><span class="link-arrow" aria-hidden="true">→</span></a>`).join("");// --- document ----------------------------------------------------------const html = `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>On-Call · Platform</title><style>:root{--bg:#0b0b0c; --surface:#111214; --surface2:#141518; --raise:#17181c;--border:#23252a; --border2:#2c2f35;--text:#eaeaea; --muted:#6b6f76; --dim:#4a4e55;--accent:#E6FF55; --green:#3ddc84; --red:#ff5d5d;}*{box-sizing:border-box}html,body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg); color:var(--text);padding:44px 20px 72px;line-height:1.5;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;background-image:radial-gradient(1000px 420px at 82% -12%, rgba(230,255,85,.08), transparent 66%),radial-gradient(700px 300px at 0% 110%, rgba(61,220,132,.04), transparent 60%);}.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}.wrap{max-width:960px;margin:0 auto}.kicker{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}/* header */header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}.brand{display:flex;align-items:center;gap:11px;margin-bottom:11px}.glyph{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(160deg,#f4ff9a,var(--accent));color:#0b0b0c;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:15px;box-shadow:0 0 18px rgba(230,255,85,.3)}h1{font-size:31px;line-height:1.05;margin:0;letter-spacing:-.025em;font-weight:680}.clock{text-align:right}.clock .t{font-size:22px;letter-spacing:-.01em}.clock .t small{color:var(--muted);font-size:13px;font-weight:400}.clock .d{color:var(--muted);font-size:12px;margin-top:3px}/* ops rail */.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:16px}@media(max-width:640px){.rail{grid-template-columns:repeat(2,1fr)}}.stat{background:var(--surface);padding:18px 18px 16px}.stat-v{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:26px;line-height:1;font-weight:600;letter-spacing:-.02em}.stat-k{font-size:12px;color:var(--text);margin-top:9px;font-weight:500}.stat-sub{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin-top:3px}/* grid */.grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}@media(max-width:780px){.grid{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px}.card h2{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:500;display:flex;align-items:center;gap:9px}.card h2::after{content:"";flex:1;height:1px;background:var(--border)}/* on-call hero */.oc{background:linear-gradient(178deg, rgba(230,255,85,.055), transparent 34%),var(--surface);border-color:var(--border2)}.oc-top{display:flex;align-items:center;gap:15px}.oc-av{width:58px;height:58px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-size:19px;color:#0b0b0c;font-weight:800;background:linear-gradient(160deg,#f4ff9a,var(--accent));box-shadow:0 0 26px rgba(230,255,85,.3)}.oc-id{min-width:0}.oc-name{font-size:20px;font-weight:660;letter-spacing:-.015em}.oc-role{color:var(--muted);font-size:13px;margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.chip{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text)}.live{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.3);color:var(--green);font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;margin-left:auto;flex-shrink:0}.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative}.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:p 1.9s ease-out infinite}@keyframes p{0%{transform:scale(1);opacity:.65}100%{transform:scale(3.4);opacity:0}}.oc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}@media(max-width:420px){.oc-meta{grid-template-columns:1fr 1fr}}.oc-stat .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.oc-stat .v{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:16px;margin-top:6px}.oc-stat .v.accent{color:var(--accent)}.bar{margin-top:22px;height:7px;border-radius:999px;background:#1c1d21;overflow:hidden;position:relative}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#f4ff9a,var(--accent));box-shadow:0 0 12px rgba(230,255,85,.45)}.bar-cap{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:11px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}.bar-cap b{color:var(--text);font-weight:600}.backup{display:flex;align-items:center;gap:9px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}.backup b{color:var(--text);font-weight:600}/* avatars */.av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;flex-shrink:0;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;color:var(--text);background:var(--raise);border:1px solid var(--border2);margin-right:9px;vertical-align:middle}/* rotation */.rot{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 11px;border-radius:10px}.rot + .rot{margin-top:3px}.rot-day{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);letter-spacing:.06em}.rot-who{display:flex;align-items:center;font-size:14px;min-width:0}.rot-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rot-idle{width:6px;height:6px;border-radius:50%;background:var(--border2)}.rot-on{background:rgba(230,255,85,.07);box-shadow:inset 0 0 0 1px rgba(230,255,85,.2)}.rot-on .rot-day{color:var(--accent)}.rot-tag{font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.14em;color:#0b0b0c;background:var(--accent);padding:3px 7px;border-radius:6px;font-weight:800}/* ships */.ship{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border)}.ship:first-of-type{border-top:0;padding-top:2px}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--dot);box-shadow:0 0 10px color-mix(in srgb, var(--dot) 55%, transparent)}.ship-main{flex:1;min-width:0}.ship-top{display:flex;align-items:baseline;gap:10px}.ship-svc{font-size:14px;color:var(--text)}.ship-ver{font-size:11px;color:var(--muted)}.ship-sub{display:flex;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}.ship-sub .sep{width:3px;height:3px;border-radius:50%;background:var(--dim);margin:0 9px}.ship-time{font-size:11px;color:var(--muted);flex-shrink:0;white-space:nowrap}.stat-tag{font-weight:600}/* links */.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2px}@media(max-width:560px){.links{grid-template-columns:1fr}}.link{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;text-decoration:none;background:var(--surface2);border:1px solid var(--border);color:var(--text);transition:border-color .15s,background .15s,transform .15s}.link:hover{border-color:rgba(230,255,85,.42);background:var(--raise);transform:translateY(-1px)}.link:hover .link-arrow{color:var(--accent);transform:translateX(2px)}.link-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--raise);color:var(--accent);flex-shrink:0;border:1px solid var(--border)}.link-txt{display:flex;flex-direction:column;min-width:0}.link-label{font-size:14px;font-weight:600}.link-hint{font-size:11px;color:var(--muted);margin-top:2px}.link-arrow{margin-left:auto;color:var(--muted);transition:color .15s,transform .15s}footer{margin-top:30px;text-align:center;color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.05em}footer b{color:var(--text);font-weight:600}</style></head><body><div class="wrap"><header><div><div class="brand"><span class="glyph">q</span><span class="kicker">Platform · Internal</span></div><h1>On-Call Dashboard</h1></div><div class="clock"><div class="t mono">${esc(now.format("HH:mm"))} <small>UTC</small></div><div class="d">${esc(now.format("dddd, D MMM YYYY"))}</div></div></header><div class="rail">${statCards}</div><div class="grid"><div class="card oc"><h2>Who is on call</h2><div class="oc-top"><div class="oc-av">${esc(onCall.avatar)}</div><div class="oc-id"><div class="oc-name">${esc(onCall.name)}</div><div class="oc-role"><span>${esc(onCall.role)}</span><span class="chip">${esc(onCall.squad)}</span><span class="chip">${esc(onCall.tz)}</span></div></div><span class="live"><span class="pulse"></span>LIVE</span></div><div class="oc-meta"><div class="oc-stat"><div class="k">Shift started</div><div class="v">${esc(relFrom(shiftStart, now))}</div></div><div class="oc-stat"><div class="k">Time left</div><div class="v accent">${esc(timeLeft)}</div></div><div class="oc-stat"><div class="k">Handoff at</div><div class="v">${esc(shiftEnd.format("HH:mm"))} UTC</div></div></div><div class="bar"><div class="bar-fill" style="width:${shiftPct}%"></div></div><div class="bar-cap"><span><b>${shiftPct}%</b> through shift</span><span>12h rotation</span></div><div class="backup">${avatar(secondary.avatar)}<span>Backup: <b>${esc(secondary.name)}</b> · ${esc(secondary.tz)}</span></div></div><div class="card"><h2>Week rotation</h2>${rotationRows}</div></div><div class="card" style="margin-top:16px"><h2>Recent ships</h2>${shipRows}</div><div class="card" style="margin-top:16px"><h2>Quick links</h2><div class="links">${linkCards}</div></div><footer>All systems monitored · Escalate to <b>#oncall-platform</b> · page via <b>/opsgenie</b></footer></div></body></html>`;return new Response(html, {status: 200,headers: { "content-type": "text/html; charset=utf-8" },});}
Fork this and make it yours
Describe a change in plain English and QuikRun deploys it to your own URL.