app.js

const LIST_URL = "./list.txt";
const CHECK_INTERVAL_MS = 60_000;
const CHECK_TIMEOUT_MS = 8_000;

const serviceList = document.querySelector("#service-list");
const overallTitle = document.querySelector("#overall-title");
const overallDescription = document.querySelector("#overall-description");
const overallIndicator = document.querySelector("#overall-indicator");
const lastChecked = document.querySelector("#last-checked");
const refreshButton = document.querySelector("#refresh-button");

let services = [];
let isChecking = false;

function parseList(text) {
	return text
		.split(/\r?\n/)
		.map((line) => line.trim())
		.filter((line) => line.length > 0 && !line.startsWith("#"))
		.map((line, index) => {
			const separatorIndex = line.indexOf("|");
			const label = separatorIndex >= 0
				? line.slice(0, separatorIndex).trim()
				: "";
			const urlText = separatorIndex >= 0
				? line.slice(separatorIndex + 1).trim()
				: line;

			let url;

			try {
				url = new URL(urlText);
			} catch {
				return {
					id: `invalid-${index}`,
					name: label || urlText,
					url: urlText,
					status: "outage",
					message: "URLが不正です",
					latency: null
				};
			}

			return {
				id: `${url.hostname}-${index}`,
				name: label || deriveServiceName(url),
				url: url.href,
				status: "checking",
				message: "確認中",
				latency: null
			};
		});
}

function deriveServiceName(url) {
	const hostname = url.hostname.replace(/^www\./, "");
	const path = url.pathname
		.replace(/\/(healthz?|status|api\/health)\/?$/i, "")
		.replace(/^\/+|\/+$/g, "");

	return path ? `${hostname}/${path}` : hostname;
}

function escapeHtml(value) {
	return value
		.replaceAll("&", "&")
		.replaceAll("<", "&lt;")
		.replaceAll(">", "&gt;")
		.replaceAll('"', "&quot;")
		.replaceAll("'", "&#039;");
}

function renderServices() {
	if (services.length === 0) {
		serviceList.innerHTML = '<div class="empty-state">監視対象がありません。</div>';
		return;
	}

	serviceList.innerHTML = services.map((service) => {
		const latencyText = service.latency === null
			? escapeHtml(service.message)
			: `${escapeHtml(service.message)} · ${service.latency} ms`;

		return `
			<article class="service-row">
				<div>
					<p class="service-name">${escapeHtml(service.name)}</p>
					<p class="service-url" title="${escapeHtml(service.url)}">${escapeHtml(service.url)}</p>
				</div>
				<div>
					<div class="service-result">
						<span class="status-dot ${service.status}" aria-hidden="true"></span>
						<span class="status-text">${statusLabel(service.status)}</span>
					</div>
					<div class="latency">${latencyText}</div>
				</div>
			</article>
		`;
	}).join("");
}

function statusLabel(status) {
	switch (status) {
		case "operational":
			return "正常";
		case "degraded":
			return "性能低下";
		case "outage":
			return "障害";
		case "unknown":
			return "確認不能";
		default:
			return "確認中";
	}
}

async function checkService(service) {
	if (service.id.startsWith("invalid-")) {
		return service;
	}

	const controller = new AbortController();
	const timeoutId = window.setTimeout(() => controller.abort(), CHECK_TIMEOUT_MS);
	const startedAt = performance.now();

	try {
		const response = await fetch(service.url, {
			method: "GET",
			cache: "no-store",
			signal: controller.signal,
			headers: {
				"Accept": "application/json, text/plain, */*"
			}
		});

		const latency = Math.round(performance.now() - startedAt);

		if (response.ok) {
			return {
				...service,
				status: latency >= 3_000 ? "degraded" : "operational",
				message: latency >= 3_000 ? "応答が遅延しています" : `HTTP ${response.status}`,
				latency
			};
		}

		return {
			...service,
			status: "outage",
			message: `HTTP ${response.status}`,
			latency
		};
	} catch (error) {
		const timedOut = error instanceof DOMException && error.name === "AbortError";

		return {
			...service,
			status: timedOut ? "outage" : "unknown",
			message: timedOut
				? `${CHECK_TIMEOUT_MS / 1000}秒でタイムアウト`
				: "CORSまたはネットワークエラー",
			latency: null
		};
	} finally {
		window.clearTimeout(timeoutId);
	}
}

function updateOverallStatus() {
	const statuses = services.map((service) => service.status);

	if (statuses.includes("checking")) {
		setOverall(
			"checking",
			"状態を確認しています",
			"各サービスへ接続しています。"
		);
		return;
	}

	if (statuses.includes("outage")) {
		setOverall(
			"outage",
			"一部のサービスで障害が発生しています",
			"詳細は各サービスの状態を確認してください。"
		);
		return;
	}

	if (statuses.includes("degraded")) {
		setOverall(
			"degraded",
			"一部のサービスで性能が低下しています",
			"サービスは利用できますが、応答が遅い可能性があります。"
		);
		return;
	}

	if (statuses.includes("unknown")) {
		setOverall(
			"degraded",
			"一部のサービスを確認できません",
			"管理者にお問い合わせ下さい。"
		);
		return;
	}

	if (services.length === 0) {
		setOverall(
			"degraded",
			"監視対象が設定されていません",
			"管理者にお問い合わせください"
		);
		return;
	}

	setOverall(
		"operational",
		"すべてのシステムは正常です",
		"現在、確認されている障害はありません。"
	);
}

function setOverall(status, title, description) {
	overallIndicator.className = `overall-indicator ${status}`;
	overallTitle.textContent = title;
	overallDescription.textContent = description;
}

function updateLastChecked() {
	const formatter = new Intl.DateTimeFormat("ja-JP", {
		year: "numeric",
		month: "2-digit",
		day: "2-digit",
		hour: "2-digit",
		minute: "2-digit",
		second: "2-digit"
	});

	lastChecked.textContent = `最終確認: ${formatter.format(new Date())}`;
}

async function runChecks() {
	if (isChecking) {
		return;
	}

	isChecking = true;
	refreshButton.disabled = true;

	services = services.map((service) => ({
		...service,
		status: service.id.startsWith("invalid-") ? "outage" : "checking",
		message: service.id.startsWith("invalid-") ? "URLが不正です" : "確認中",
		latency: null
	}));

	renderServices();
	updateOverallStatus();

	services = await Promise.all(services.map(checkService));

	renderServices();
	updateOverallStatus();
	updateLastChecked();

	refreshButton.disabled = false;
	isChecking = false;
}

async function initialize() {
	try {
		const response = await fetch(LIST_URL, {
			cache: "no-store"
		});

		if (!response.ok) {
			throw new Error(`HTTP ${response.status}`);
		}

		services = parseList(await response.text());
		renderServices();
		updateOverallStatus();
		await runChecks();
	} catch (error) {
		serviceList.innerHTML = `
			<div class="empty-state">
			内部エラー: ${error instanceof Error ? escapeHtml(error.message) : "不明なエラー"}
			</div>
		`;

		setOverall(
			"outage",
			"監視設定を読み込めません",
			error instanceof Error ? error.message : "不明なエラー"
		);
	}
}

refreshButton.addEventListener("click", runChecks);
window.setInterval(runChecks, CHECK_INTERVAL_MS);

initialize();