my own status page
feat: add overall uptime
+7
-1
+7
-1
src/routes/index.ts
+7
-1
src/routes/index.ts
···
51
51
});
52
52
const activeIncidents = activeIncidentsWithUpdates;
53
53
54
+
const firstDataIdx = uptimeDays.findIndex((d) => d.status !== "none");
55
+
const relevantDays = firstDataIdx >= 0 ? uptimeDays.slice(firstDataIdx) : [];
56
+
const downDays = relevantDays.filter((d) => d.status === "down").length;
57
+
const uptime90d = relevantDays.length > 0 ? Math.round(((relevantDays.length - downDays) / relevantDays.length) * 10000) / 100 : 100;
58
+
54
59
const html = `<!DOCTYPE html>
55
60
<html lang="en">
56
61
<head>
···
75
80
body { font-family: -apple-system, system-ui, sans-serif; background: #0d1117; color: #c9d1d9; padding: 2rem; max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
76
81
h1 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.25rem; }
77
82
.overall { font-size: 0.85rem; color: #8b949e; margin-bottom: 2rem; }
83
+
.uptime-pct { color: #8b949e; }
78
84
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
79
85
.dot.up { background: #2ecc71; }
80
86
.dot.degraded { background: #f39c12; }
···
149
155
<body>
150
156
<div class="uptime-bar">${uptimeDays.map((d) => `<div class="day ${d.status}" title="${d.date}: ${d.status}"></div>`).join("")}</div>
151
157
<h1>infra.dunkirk.sh</h1>
152
-
<p class="overall"><span class="dot ${overallClass}" id="overall-dot" title="${overallClass}"></span><span id="overall-text">${overallText}</span></p>
158
+
<p class="overall"><span class="dot ${overallClass}" id="overall-dot" title="${overallClass}"></span><span id="overall-text">${overallText}</span><span class="uptime-pct" id="overall-uptime"> at ${uptime90d}%</span></p>
153
159
${activeIncidents.length > 0 ? `<div class="incidents">
154
160
${activeIncidents.map((i) => `<div class="incident-banner">
155
161
<div class="incident-header">