255 lines
8.3 KiB
JavaScript
255 lines
8.3 KiB
JavaScript
// GitLab Webhook Dashboard - 前端逻辑
|
|
// 数据源:
|
|
// GET /api/queue -> { pending: [], current: { task, startedAt, log } | null }
|
|
// GET /api/history -> { scripts: [], history: { scriptPath: [record, ...] } }
|
|
|
|
const POLL_QUEUE_MS = 1500; // 队列 + 当前执行 轮询周期
|
|
const POLL_HISTORY_MS = 4000; // 历史 轮询周期
|
|
const LOG_TAIL_CHARS = 12000; // 前端日志渲染尾部最大字符数
|
|
|
|
const state = {
|
|
pending: [],
|
|
current: null,
|
|
history: {}, // { scriptPath: [record, ...] }
|
|
scripts: [], // 配置中的全部脚本
|
|
autoscroll: true,
|
|
};
|
|
|
|
// ============ Helpers ============
|
|
const $ = (sel) => document.querySelector(sel);
|
|
const fmtTime = (iso) => {
|
|
if (!iso) return "-";
|
|
const d = new Date(iso);
|
|
if (isNaN(d.getTime())) return iso;
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
|
};
|
|
const fmtFullTime = (iso) => {
|
|
if (!iso) return "-";
|
|
const d = new Date(iso);
|
|
if (isNaN(d.getTime())) return iso;
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ` +
|
|
`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
|
};
|
|
const shortCommit = (s) => {
|
|
if (!s) return "unknown";
|
|
return s.length > 7 ? s.slice(0, 7) : s;
|
|
};
|
|
const escapeHtml = (s) =>
|
|
String(s ?? "").replace(/[&<>"']/g, (c) => ({
|
|
"&": "&", "<": "<", ">": ">", '"': """, "'": "'",
|
|
}[c]));
|
|
|
|
// ============ Connection status ============
|
|
function setConn(ok, text) {
|
|
const dot = $("#conn-dot");
|
|
const txt = $("#conn-text");
|
|
dot.classList.remove("dot-green", "dot-red", "dot-grey");
|
|
dot.classList.add(ok ? "dot-green" : "dot-red");
|
|
txt.textContent = text;
|
|
}
|
|
|
|
// ============ Fetchers ============
|
|
async function fetchJSON(url) {
|
|
const r = await fetch(url, { cache: "no-store" });
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json();
|
|
}
|
|
|
|
async function pollQueue() {
|
|
try {
|
|
const data = await fetchJSON("/api/queue");
|
|
state.pending = data.pending || [];
|
|
state.current = data.current || null;
|
|
setConn(true, "已连接");
|
|
renderQueue();
|
|
renderRunning();
|
|
} catch (e) {
|
|
setConn(false, "连接失败");
|
|
console.warn("queue poll failed:", e);
|
|
}
|
|
}
|
|
|
|
async function pollHistory() {
|
|
try {
|
|
const data = await fetchJSON("/api/history");
|
|
state.scripts = data.scripts || [];
|
|
state.history = data.history || {};
|
|
renderHistory();
|
|
} catch (e) {
|
|
console.warn("history poll failed:", e);
|
|
}
|
|
}
|
|
|
|
// ============ Renderers ============
|
|
function renderQueue() {
|
|
const list = $("#pending-list");
|
|
const badge = $("#pending-count");
|
|
badge.textContent = String(state.pending.length);
|
|
|
|
if (state.pending.length === 0) {
|
|
list.innerHTML = `<p class="empty">暂无等待任务</p>`;
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = state.pending.map((p) => `
|
|
<div class="pending-item">
|
|
<div class="row">
|
|
<strong>${escapeHtml(p.repo)}</strong>
|
|
<span class="badge badge-warn">等待中</span>
|
|
</div>
|
|
<div class="row meta">
|
|
<span>分支 <code>${escapeHtml(p.ref)}</code></span>
|
|
<span>commit <code>${escapeHtml(shortCommit(p.commit))}</code></span>
|
|
</div>
|
|
<div class="script">${escapeHtml(p.script)}</div>
|
|
<div class="meta">入队时间: ${escapeHtml(fmtFullTime(p.queuedAt))}</div>
|
|
</div>
|
|
`).join("");
|
|
}
|
|
|
|
function renderRunning() {
|
|
const body = $("#running-body");
|
|
const stateBadge = $("#running-state");
|
|
const sizeEl = $("#log-size");
|
|
|
|
if (!state.current) {
|
|
stateBadge.textContent = "空闲";
|
|
stateBadge.className = "badge badge-grey";
|
|
body.innerHTML = `<p class="empty">当前没有任务在执行</p>`;
|
|
sizeEl.textContent = "";
|
|
return;
|
|
}
|
|
|
|
const c = state.current;
|
|
stateBadge.textContent = "执行中";
|
|
stateBadge.className = "badge badge-warn";
|
|
|
|
body.innerHTML = `
|
|
<dl class="running-meta">
|
|
<dt>仓库</dt><dd>${escapeHtml(c.task.repo)}</dd>
|
|
<dt>分支</dt><dd>${escapeHtml(c.task.ref)}</dd>
|
|
<dt>Commit</dt><dd>${escapeHtml(shortCommit(c.task.commit))}</dd>
|
|
<dt>脚本</dt><dd>${escapeHtml(c.task.script)}</dd>
|
|
<dt>开始</dt><dd>${escapeHtml(fmtFullTime(c.startedAt))}</dd>
|
|
</dl>
|
|
<pre class="log-box" id="live-log"></pre>
|
|
`;
|
|
|
|
const logBox = $("#live-log");
|
|
// 仅渲染尾部以避免长日志卡顿
|
|
const fullLog = c.log || "";
|
|
const tail = fullLog.length > LOG_TAIL_CHARS
|
|
? fullLog.slice(fullLog.length - LOG_TAIL_CHARS)
|
|
: fullLog;
|
|
logBox.textContent = tail || "（等待脚本输出…）";
|
|
sizeEl.textContent = fullLog.length
|
|
? `${(fullLog.length / 1024).toFixed(1)} KB`
|
|
: "";
|
|
|
|
if (state.autoscroll) {
|
|
logBox.scrollTop = logBox.scrollHeight;
|
|
}
|
|
}
|
|
|
|
function statusPill(status) {
|
|
const map = {
|
|
success: ["status-success", "成功"],
|
|
failed: ["status-failed", "失败"],
|
|
timeout: ["status-timeout", "超时"],
|
|
skipped: ["status-skipped", "跳过"],
|
|
running: ["status-running", "运行中"],
|
|
};
|
|
const [cls, text] = map[status] || ["status-skipped", status || "-"];
|
|
return `<span class="status-pill ${cls}"><span class="dot"></span>${text}</span>`;
|
|
}
|
|
|
|
function renderHistory() {
|
|
const root = $("#history-list");
|
|
if (!state.scripts.length) {
|
|
root.innerHTML = `<p class="empty">配置文件中未声明任何脚本</p>`;
|
|
return;
|
|
}
|
|
|
|
// 当前正在执行的任务 ID（用于高亮）
|
|
const liveKey = state.current
|
|
? `${state.current.task.script}|${state.current.task.repo}|${state.current.task.ref}`
|
|
: null;
|
|
|
|
root.innerHTML = state.scripts.map((script) => {
|
|
const records = state.history[script] || [];
|
|
const rows = records.length
|
|
? records.slice().reverse().map((r) => {
|
|
const liveMarker = (liveKey && liveKey === `${r.script}|${r.repo}|${r.ref}` && r.status === "running")
|
|
? "row-running"
|
|
: "";
|
|
const logId = `log-${r.id}`;
|
|
return `
|
|
<tr class="${liveMarker}">
|
|
<td>${escapeHtml(fmtFullTime(r.startedAt))}</td>
|
|
<td>${escapeHtml(shortCommit(r.commit))}</td>
|
|
<td>${escapeHtml(r.repo)} <span class="muted">${escapeHtml(r.ref)}</span></td>
|
|
<td>${statusPill(r.status)}</td>
|
|
<td>${escapeHtml(r.duration || (r.status === "running" ? "进行中" : "-"))}</td>
|
|
<td>${escapeHtml(r.reason || "")}</td>
|
|
<td>
|
|
${r.log
|
|
? `<button class="toggle-log" data-target="${logId}" type="button">查看日志</button>`
|
|
: `<span class="muted small">无日志</span>`}
|
|
</td>
|
|
</tr>
|
|
${r.log ? `
|
|
<tr class="log-cell">
|
|
<td colspan="7" style="padding:0;">
|
|
<pre class="log-box" id="${logId}" style="display:none; max-height:280px;">${escapeHtml(r.log)}</pre>
|
|
</td>
|
|
</tr>` : ""}
|
|
`;
|
|
}).join("")
|
|
: `<tr><td colspan="7" class="empty">尚无执行记录</td></tr>`;
|
|
|
|
return `
|
|
<div class="history-group">
|
|
<h3><code>${escapeHtml(script)}</code><span class="muted small">(${records.length})</span></h3>
|
|
<table class="history-table">
|
|
<thead>
|
|
<tr>
|
|
<th>开始时间</th><th>Commit</th><th>仓库/分支</th>
|
|
<th>状态</th><th>耗时</th><th>原因</th><th>日志</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>${rows}</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
// 绑定展开日志按钮
|
|
root.querySelectorAll(".toggle-log").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const target = document.getElementById(btn.dataset.target);
|
|
if (!target) return;
|
|
const visible = target.style.display !== "none";
|
|
target.style.display = visible ? "none" : "block";
|
|
btn.textContent = visible ? "查看日志" : "收起日志";
|
|
});
|
|
});
|
|
}
|
|
|
|
// ============ Wiring ============
|
|
$("#refresh-btn").addEventListener("click", () => {
|
|
pollQueue();
|
|
pollHistory();
|
|
});
|
|
|
|
$("#log-autoscroll").addEventListener("click", (e) => {
|
|
state.autoscroll = !state.autoscroll;
|
|
e.currentTarget.classList.toggle("active", state.autoscroll);
|
|
});
|
|
|
|
pollQueue();
|
|
pollHistory();
|
|
setInterval(pollQueue, POLL_QUEUE_MS);
|
|
setInterval(pollHistory, POLL_HISTORY_MS);
|