(() => { // ---------- i18n ---------- const I18N = { en: { labels: { offline: "offline", degraded: "degraded", online: "online", total: "total", uptime: "uptime", uptimeHistory: "Uptime history", }, banner: { okTitle: "All Systems Operational", okSub: "All monitored services are running normally.", partialTitle: "Partial Outage", partialSub: "Some services are currently experiencing issues.", degradedTitle: "Degraded Performance", degradedSub: "Some services are operating slower than expected.", nodataTitle: "Status", nodataSub: "No data yet.", }, status: { online: "Operational", offline: "Down", degraded: "Degraded", unknown: "Unknown", }, empty: "No services match your search.", tooltip: { uptime: "uptime", downtime: "downtime", noDowntime: "no downtime", noData: "no data", }, units: { s: "s", m: "m", h: "h", d: "d" }, secondsSuffix: "s", errors: { noCommon: "Status module is not loaded (missing window.__SIPTG_STATUS_COMMON).", }, }, es: { labels: { offline: "fuera de línea", degraded: "degradado", online: "en línea", total: "total", uptime: "disponibilidad", uptimeHistory: "Historial de disponibilidad", }, banner: { okTitle: "Todos los sistemas operativos", okSub: "Todos los servicios monitorizados funcionan con normalidad.", partialTitle: "Interrupción parcial", partialSub: "Algunos servicios presentan problemas.", degradedTitle: "Rendimiento degradado", degradedSub: "Algunos servicios funcionan más lento de lo esperado.", nodataTitle: "Estado", nodataSub: "Aún no hay datos.", }, status: { online: "Operativo", offline: "Caído", degraded: "Degradado", unknown: "Desconocido", }, empty: "No hay servicios que coincidan con tu búsqueda.", tooltip: { uptime: "disponibilidad", downtime: "indisponibilidad", noDowntime: "sin caídas", noData: "sin datos", }, units: { s: "s", m: "m", h: "h", d: "d" }, secondsSuffix: "s", errors: { noCommon: "El módulo de estado no está cargado (falta window.__SIPTG_STATUS_COMMON).", }, }, ru: { labels: { offline: "недоступно", degraded: "деградация", online: "в норме", total: "всего", uptime: "доступность", uptimeHistory: "История доступности", }, banner: { okTitle: "Все системы работают", okSub: "Все сервисы работают нормально.", partialTitle: "Частичный сбой", partialSub: "У некоторых сервисов есть проблемы.", degradedTitle: "Пониженная производительность", degradedSub: "Некоторые сервисы работают медленнее обычного.", nodataTitle: "Статус", nodataSub: "Данных пока нет.", }, status: { online: "Работает", offline: "Не работает", degraded: "Деградация", unknown: "Неизвестно", }, empty: "Ничего не найдено.", tooltip: { uptime: "доступность", downtime: "простой", noDowntime: "без простоев", noData: "нет данных", }, units: { s: "с", m: "м", h: "ч", d: "д" }, secondsSuffix: "с", errors: { noCommon: "Модуль статуса не загружен (нет window.__SIPTG_STATUS_COMMON).", }, }, uk: { labels: { offline: "недоступно", degraded: "погіршено", online: "працює", total: "усього", uptime: "доступність", uptimeHistory: "Історія доступності", }, banner: { okTitle: "Усі системи працюють", okSub: "Усі сервіси працюють нормально.", partialTitle: "Часткова відмова", partialSub: "Деякі сервіси мають проблеми.", degradedTitle: "Погіршена продуктивність", degradedSub: "Деякі сервіси працюють повільніше, ніж очікувалося.", nodataTitle: "Статус", nodataSub: "Даних поки немає.", }, status: { online: "Працює", offline: "Не працює", degraded: "Погіршено", unknown: "Невідомо", }, empty: "Немає сервісів за вашим запитом.", tooltip: { uptime: "доступність", downtime: "простій", noDowntime: "без простою", noData: "немає даних", }, units: { s: "с", m: "хв", h: "год", d: "д" }, secondsSuffix: "с", errors: { noCommon: "Модуль статусу не завантажено (немає window.__SIPTG_STATUS_COMMON).", }, }, kk: { labels: { offline: "қолжетімсіз", degraded: "нашарлаған", online: "қалыпты", total: "барлығы", uptime: "қолжетімділік", uptimeHistory: "Қолжетімділік тарихы", }, banner: { okTitle: "Барлығы қалыпты", okSub: "Барлық бақыланатын қызметтер қалыпты жұмыс істеп тұр.", partialTitle: "Жартылай ақау", partialSub: "Кейбір қызметтерде ақау бар.", degradedTitle: "Өнімділік төмендеді", degradedSub: "Кейбір қызметтер күткеннен баяу жұмыс істеп тұр.", nodataTitle: "Күйі", nodataSub: "Әзірге дерек жоқ.", }, status: { online: "Қалыпты", offline: "Істемейді", degraded: "Нашарлаған", unknown: "Белгісіз", }, empty: "Іздеуге сәйкес қызмет табылмады.", tooltip: { uptime: "қолжетімділік", downtime: "тоқтап қалу", noDowntime: "тоқтап қалу жоқ", noData: "дерек жоқ", }, units: { s: "с", m: "м", h: "сағ", d: "к" }, secondsSuffix: "с", errors: { noCommon: "Күй модулі жүктелмеген (window.__SIPTG_STATUS_COMMON жоқ).", }, }, uz: { labels: { offline: "mavjud emas", degraded: "sekinlashgan", online: "ishlayapti", total: "jami", uptime: "mavjudlik", uptimeHistory: "Mavjudlik tarixi", }, banner: { okTitle: "Hamma tizimlar ishlayapti", okSub: "Barcha kuzatilayotgan xizmatlar normal ishlayapti.", partialTitle: "Qisman uzilish", partialSub: "Ba'zi xizmatlarda muammo bor.", degradedTitle: "Ishlash pasaygan", degradedSub: "Ba'zi xizmatlar kutilganidan sekinroq ishlayapti.", nodataTitle: "Holat", nodataSub: "Hozircha ma'lumot yo'q.", }, status: { online: "Ishlayapti", offline: "Ishlamayapti", degraded: "Sekin", unknown: "Noma'lum", }, empty: "Qidiruv bo‘yicha xizmat topilmadi.", tooltip: { uptime: "mavjudlik", downtime: "to‘xtab qolish", noDowntime: "to‘xtash yo‘q", noData: "ma'lumot yo'q", }, units: { s: "s", m: "m", h: "so", d: "k" }, secondsSuffix: "s", errors: { noCommon: "Holat moduli yuklanmagan (window.__SIPTG_STATUS_COMMON yo‘q).", }, }, }; // ---------- routing helpers ---------- function getLang() { const parts = window.location.pathname.split("/"); return parts[1] || "en"; } function getPage() { const parts = window.location.pathname.split("/"); return parts[2]; } function pickLang() { const lang = getLang(); return I18N[lang] ? lang : "en"; } // ---------- shared page state (survives theme remount) ---------- const PAGE_STATE = (window.__SIPTG_STATUS_PAGE_STATE ||= { search: "", scrollY: 0, }); // ---------- init/destroy ---------- let activeCleanup = null; function destroy() { if (typeof activeCleanup === "function") activeCleanup(); activeCleanup = null; } function init() { if (getPage() !== "status") return; const root = document.getElementById("status-page"); if (!root) return; if (root.dataset.statusInit === "1") return; root.dataset.statusInit = "1"; const lang = pickLang(); const L = I18N[lang]; const COMMON = window.__SIPTG_STATUS_COMMON; const EVT_UPDATE = "siptg:status:update"; const listEl = document.getElementById("list"); const countsText = document.getElementById("countsText"); const countsDot = document.getElementById("countsDot"); const bannerTitle = document.getElementById("bannerTitle"); const bannerSub = document.getElementById("bannerSub"); const bannerDot = document.getElementById("bannerDot"); const lastUpdatedLabelEl = document.getElementById("lastUpdatedLabel"); const lastUpdatedEl = document.getElementById("lastUpdated"); const countdownEl = document.getElementById("countdown"); const nextUpdatePill = document.getElementById("nextUpdatePill"); const nextUpdateLabelEl = document.getElementById("nextUpdateLabel"); const servicesTitle = document.getElementById("servicesTitle"); const tooltip = document.getElementById("tooltip"); if ( !listEl || !countsText || !bannerTitle || !bannerSub || !lastUpdatedEl || !countdownEl || !tooltip ) { root.dataset.statusInit = ""; return; } // Create input dynamically (Mintlify MDX can break on ) const mount = document.getElementById("searchInputMount"); let searchInput = document.getElementById("searchInput"); if (!searchInput) { searchInput = document.createElement("input"); searchInput.id = "searchInput"; searchInput.type = "search"; searchInput.setAttribute("autocomplete", "off"); searchInput.setAttribute("autocapitalize", "off"); searchInput.setAttribute("spellcheck", "false"); if (mount) { searchInput.placeholder = mount.innerText; if (mount.parentNode) mount.replaceWith(searchInput); } else { const wrap = root.querySelector(".status-search"); if (wrap) wrap.appendChild(searchInput); } } const fmtDT = new Intl.DateTimeFormat(lang, { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", }); const fmtDay = new Intl.DateTimeFormat(lang, { year: "numeric", month: "short", day: "2-digit" }); // In-page state restore if (PAGE_STATE.search) searchInput.value = PAGE_STATE.search; // If store is missing, show a helpful banner and stop. if (!COMMON || typeof COMMON.getState !== "function") { bannerTitle.textContent = L.banner.nodataTitle; bannerSub.textContent = L.errors.noCommon; applyDot(countsDot, "nodata"); applyDot(bannerDot, "nodata"); countsText.textContent = `${L.labels.total}: 0`; countdownEl.textContent = "—"; lastUpdatedEl.textContent = "—"; root.dataset.statusInit = ""; return; } // Start the store (idempotent) if (typeof COMMON.start === "function") COMMON.start(); // ---------- helpers ---------- function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } function normalizeStatus(raw) { if (typeof COMMON.normalizeStatus === "function") return COMMON.normalizeStatus(raw); const s = String(raw || "").toUpperCase(); if (s === "UP" || s === "ONLINE" || s === "OK") return "online"; if (s === "DOWN" || s === "OFFLINE" || s === "FAIL") return "offline"; if (s === "DEGRADED" || s === "SLOW" || s === "WARN" || s === "WARNING") return "degraded"; return "unknown"; } function statusRank(st) { if (st === "offline") return 0; if (st === "degraded") return 1; if (st === "online") return 2; return 3; } function dayCountForWidth(w) { if (w >= 1100) return 90; if (w >= 760) return 30; return 14; } function computeDayPct(day) { let p = day && day.uptimePercentage; if (p === null || p === undefined) { const u = Number((day && day.uptimeSeconds) ?? 0); const d = Number((day && day.downtimeSeconds) ?? 0); const denom = u + d; if (denom > 0) p = (u / denom) * 100; else return null; } const num = Number(p); if (!Number.isFinite(num)) return null; return clamp(num, 0, 100); } function tickClass(pct) { if (pct === null) return "nodata"; if (pct >= 99.9) return "good"; if (pct >= 98.0) return "warn"; return "bad"; } function pctText(pct) { if (pct === null) return "—"; if (pct >= 99.95) return "100.00%"; return `${pct.toFixed(2)}%`; } function secondsHuman(s) { const U = L.units; s = Math.max(0, Math.floor(Number(s || 0))); if (s < 60) return `${s}${U.s}`; const m = Math.floor(s / 60); s -= m * 60; if (m < 60) return `${m}${U.m} ${s}${U.s}`; const h = Math.floor(m / 60); const mm = m - h * 60; if (h < 48) return `${h}${U.h} ${mm}${U.m}`; const d = Math.floor(h / 24); const hh = h - d * 24; return `${d}${U.d} ${hh}${U.h}`; } function escapeHtml(s) { return String(s).replace(/[&<>"']/g, (m) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'", }[m])); } function applyDot(dotEl, kind) { if (!dotEl) return; if (kind === "good") { dotEl.style.background = "var(--good)"; dotEl.style.boxShadow = "0 0 0 6px rgba(34,197,94,.12)"; } else if (kind === "bad") { dotEl.style.background = "var(--bad)"; dotEl.style.boxShadow = "0 0 0 6px rgba(239,68,68,.12)"; } else if (kind === "warn") { dotEl.style.background = "var(--warn)"; dotEl.style.boxShadow = "0 0 0 6px rgba(245,158,11,.12)"; } else { dotEl.style.background = "var(--nodata)"; dotEl.style.boxShadow = "0 0 0 6px rgba(127,127,127,.10)"; } } function setBanner(counts) { const { offline, degraded, total } = counts; if (total > 0 && offline === 0 && degraded === 0) { bannerTitle.textContent = L.banner.okTitle; bannerSub.textContent = L.banner.okSub; applyDot(bannerDot, "good"); applyDot(countsDot, "good"); } else if (offline > 0) { bannerTitle.textContent = L.banner.partialTitle; bannerSub.textContent = L.banner.partialSub; applyDot(bannerDot, "bad"); applyDot(countsDot, "bad"); } else if (degraded > 0) { bannerTitle.textContent = L.banner.degradedTitle; bannerSub.textContent = L.banner.degradedSub; applyDot(bannerDot, "warn"); applyDot(countsDot, "warn"); } else { bannerTitle.textContent = L.banner.nodataTitle; bannerSub.textContent = L.banner.nodataSub; applyDot(bannerDot, "nodata"); applyDot(countsDot, "nodata"); } } function computeCounts(items) { let offline = 0, degraded = 0, online = 0, unknown = 0; for (const it of items) { if (it.status === "offline") offline++; else if (it.status === "degraded") degraded++; else if (it.status === "online") online++; else unknown++; } return { offline, degraded, online, unknown, total: items.length }; } // tooltip function showTip(e, text) { tooltip.textContent = text; tooltip.classList.add("show"); moveTip(e); } function moveTip(e) { const pad = 14; const rect = tooltip.getBoundingClientRect(); let x = e.clientX + 12; let y = e.clientY + 14; if (x + rect.width + pad > window.innerWidth) x = window.innerWidth - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = window.innerHeight - rect.height - pad; tooltip.style.left = x + "px"; tooltip.style.top = y + "px"; } function hideTip() { tooltip.classList.remove("show"); } // ---------- rendering ---------- let reports = []; let nextFetchAt = Date.now() + (window.__SIPTG_STATUS_REFRESH_MS || 60_000); let daysToShow = dayCountForWidth(window.innerWidth); function normalizeReport(r) { const name = r?.monitor?.name ?? r?.name ?? "—"; const status = normalizeStatus(r?.monitor?.status ?? r?.status); const overallUptime = Number.isFinite(Number(r?.overviewReport?.uptimePercentage)) ? Number(r.overviewReport.uptimePercentage) : null; const data = Array.isArray(r?.uptimeReport?.data) ? r.uptimeReport.data.slice() : []; data.sort((a, b) => String(a?.start ?? "").localeCompare(String(b?.start ?? ""))); const slice = data.slice(-daysToShow); const history = slice.map((d) => ({ start: d?.start ?? null, pct: computeDayPct(d), downtimeSeconds: Number(d?.downtimeSeconds ?? 0), })); return { name, status, overallUptime, history, _virtual: !!r?._virtual }; } function render() { const q = (searchInput.value || "").trim().toLowerCase(); PAGE_STATE.search = searchInput.value || ""; const items = reports.map(normalizeReport); items.sort((a, b) => { const dr = statusRank(a.status) - statusRank(b.status); if (dr !== 0) return dr; return a.name.localeCompare(b.name, lang, { sensitivity: "base" }); }); const counts = computeCounts(items); countsText.textContent = // `${L.labels.offline}: ${counts.offline} • ` + // `${L.labels.degraded}: ${counts.degraded} • ` + `${L.labels.online}: ${counts.online} • ` + `${L.labels.total}: ${counts.total}`; setBanner(counts); const filtered = q ? items.filter((it) => it.name.toLowerCase().includes(q)) : items; listEl.innerHTML = ""; for (const it of filtered) { const dotColor = it.status === "online" ? "var(--good)" : it.status === "offline" ? "var(--bad)" : it.status === "degraded" ? "var(--warn)" : "var(--nodata)"; const dotShadow = it.status === "online" ? "0 0 0 6px rgba(34,197,94,.12)" : it.status === "offline" ? "0 0 0 6px rgba(239,68,68,.12)" : it.status === "degraded" ? "0 0 0 6px rgba(245,158,11,.12)" : "0 0 0 6px rgba(127,127,127,.10)"; const statusLabel = it.status === "online" ? L.status.online : it.status === "offline" ? L.status.offline : it.status === "degraded" ? L.status.degraded : L.status.unknown; const statusChipClass = it.status === "online" ? "ok" : it.status === "offline" ? "bad" : it.status === "degraded" ? "warn" : "unk"; const overall = it.overallUptime === null ? "—" : `${clamp(it.overallUptime, 0, 100).toFixed(2)}%`; const card = document.createElement("div"); card.className = "status-card"; card.innerHTML = `

${escapeHtml(it.name)}

${escapeHtml(statusLabel)}

${escapeHtml(L.labels.uptime)}: ${overall}

${escapeHtml(L.labels.uptimeHistory)}

`; const hist = card.querySelector(".status-history"); for (const d of it.history) { const pct = d.pct; const tick = document.createElement("div"); tick.className = "status-tick " + tickClass(pct); const dateStr = d.start ? fmtDay.format(new Date(d.start)) : "—"; const downStr = pct === null ? L.tooltip.noData : d.downtimeSeconds > 0 ? `${L.tooltip.downtime} ${secondsHuman(d.downtimeSeconds)}` : L.tooltip.noDowntime; const tip = `${dateStr}\n${L.tooltip.uptime} ${pctText(pct)}\n${downStr}`; tick.addEventListener("mouseenter", (e) => showTip(e, tip)); tick.addEventListener("mousemove", moveTip); tick.addEventListener("mouseleave", hideTip); tick.addEventListener( "touchstart", (e) => { const t = e.touches && e.touches[0]; if (!t) return; showTip({ clientX: t.clientX, clientY: t.clientY }, tip); }, { passive: true } ); tick.addEventListener("touchend", hideTip, { passive: true }); hist.appendChild(tick); } listEl.appendChild(card); } if (filtered.length === 0) { const empty = document.createElement("div"); empty.className = "status-card"; empty.innerHTML = `

${escapeHtml(L.empty)}

`; listEl.appendChild(empty); } } // ---------- store wiring ---------- function renderFromStore() { const st = COMMON.getState(); reports = Array.isArray(st?.reports) ? st.reports : []; if (st?.updatedAt) lastUpdatedEl.textContent = fmtDT.format(new Date(st.updatedAt)); else lastUpdatedEl.textContent = "—"; if (st?.nextFetchAt) nextFetchAt = st.nextFetchAt; else nextFetchAt = Date.now() + (window.__SIPTG_STATUS_REFRESH_MS || 60_000); // If first paint and the store has data, render immediately (prevents "reset" feel) render(); // Restore scroll on remount (theme switch) if (PAGE_STATE.scrollY) setTimeout(() => window.scrollTo(0, PAGE_STATE.scrollY), 0); } const onStoreUpdate = () => renderFromStore(); // initial renderFromStore(); // subscribe window.addEventListener(EVT_UPDATE, onStoreUpdate); // ---------- countdown ---------- function tickCountdown() { const sec = Math.max(0, Math.ceil((nextFetchAt - Date.now()) / 1000)); countdownEl.textContent = `${sec}${L.secondsSuffix}`; } const countdownTimer = setInterval(tickCountdown, 250); tickCountdown(); // ---------- events ---------- function onSearch() { PAGE_STATE.search = searchInput.value || ""; render(); } searchInput.addEventListener("input", onSearch); function onRefreshClick() { if (typeof COMMON.refreshNow === "function") COMMON.refreshNow(); } if (nextUpdatePill) nextUpdatePill.addEventListener("click", onRefreshClick); let resizeT = null; function onResize() { clearTimeout(resizeT); resizeT = setTimeout(() => { const next = dayCountForWidth(window.innerWidth); if (next !== daysToShow) { daysToShow = next; render(); } }, 150); } window.addEventListener("resize", onResize); function onBeforeUnload() { PAGE_STATE.scrollY = window.scrollY || 0; } window.addEventListener("scroll", onBeforeUnload, { passive: true }); // cleanup activeCleanup = () => { PAGE_STATE.scrollY = window.scrollY || 0; clearInterval(countdownTimer); clearTimeout(resizeT); window.removeEventListener("resize", onResize); window.removeEventListener("scroll", onBeforeUnload); window.removeEventListener(EVT_UPDATE, onStoreUpdate); searchInput.removeEventListener("input", onSearch); if (nextUpdatePill) nextUpdatePill.removeEventListener("click", onRefreshClick); hideTip(); root.dataset.statusInit = ""; }; } window.addEventListener("urlchange", (e) => { destroy(); setTimeout(init, 100); }); setTimeout(init, 100); })();