feat: dashboard

static/app.css

@@ -0,0 +1,279 @@
+:root {
+  --bg: #0f1115;
+  --surface: #161a22;
+  --surface-2: #1d2230;
+  --border: #262c3a;
+  --text: #e6e8ee;
+  --text-dim: #9aa3b2;
+  --muted: #6f7787;
+  --accent: #5b8def;
+  --accent-2: #3a6fd1;
+  --success: #3ec07a;
+  --warn: #e0a458;
+  --danger: #e26a6a;
+  --skipped: #9aa3b2;
+  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.55;
+  min-height: 100vh;
+}
+
+a { color: var(--accent); text-decoration: none; }
+
+/* ============ Topbar ============ */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, #161a22 0%, #11141b 100%);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(8px);
+}
+
+.brand { display: flex; align-items: center; gap: 14px; }
+.brand .logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px; height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  font-size: 22px;
+  box-shadow: var(--shadow);
+}
+.brand h1 { margin: 0; font-size: 18px; font-weight: 600; }
+.subtitle { margin: 2px 0 0; color: var(--text-dim); font-size: 12px; }
+
+.status { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 13px; }
+.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
+.dot-green { background: var(--success); box-shadow: 0 0 8px var(--success); }
+.dot-red   { background: var(--danger);  box-shadow: 0 0 8px var(--danger); }
+.dot-grey  { background: var(--muted); }
+
+/* ============ Layout ============ */
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  grid-template-rows: auto auto;
+  gap: 18px;
+  padding: 22px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+#queue-card   { grid-column: 1; grid-row: 1; }
+#running-card { grid-column: 2; grid-row: 1; }
+#history-card { grid-column: 1 / span 2; grid-row: 2; }
+
+@media (max-width: 980px) {
+  .layout { grid-template-columns: 1fr; }
+  #queue-card, #running-card, #history-card {
+    grid-column: 1; grid-row: auto;
+  }
+}
+
+/* ============ Cards ============ */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+  overflow: hidden;
+}
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-2);
+}
+.card-head h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
+.card-body { padding: 14px 16px; flex: 1; min-height: 0; }
+.card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--surface-2);
+  font-size: 12px;
+}
+
+.empty { color: var(--muted); text-align: center; padding: 20px 0; margin: 0; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+}
+.badge-grey   { background: var(--muted); }
+.badge-success { background: var(--success); }
+.badge-failed  { background: var(--danger); }
+.badge-warn    { background: var(--warn); color: #2b1d05; }
+.badge-skipped { background: var(--skipped); }
+
+.muted { color: var(--text-dim); }
+.small { font-size: 12px; }
+
+/* ============ Pending ============ */
+.pending-list { display: flex; flex-direction: column; gap: 10px; }
+.pending-item {
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--warn);
+  background: var(--surface-2);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+.pending-item .row { display: flex; justify-content: space-between; gap: 8px; }
+.pending-item .script { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
+.pending-item .meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+.pending-item .meta code { background: var(--bg); padding: 1px 6px; border-radius: 4px; }
+
+/* ============ Running ============ */
+.running-body { display: flex; flex-direction: column; gap: 10px; }
+.running-meta {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 4px 14px;
+  font-size: 13px;
+}
+.running-meta dt { color: var(--text-dim); }
+.running-meta dd { margin: 0; font-family: var(--mono); font-size: 12px; }
+
+.log-box {
+  background: #0a0c12;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  height: 360px;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #cdd3df;
+  scroll-behavior: smooth;
+}
+.log-box .placeholder { color: var(--muted); }
+
+/* ============ History ============ */
+.history-list { display: flex; flex-direction: column; gap: 18px; }
+.history-group h3 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.history-group h3 code {
+  background: var(--bg);
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.history-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.history-table th,
+.history-table td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.history-table th {
+  background: var(--surface-2);
+  color: var(--text-dim);
+  font-weight: 500;
+  font-size: 12px;
+}
+.history-table tr:last-child td { border-bottom: 0; }
+.history-table tr.row-running td { background: rgba(91, 141, 239, 0.08); }
+
+.history-table .toggle-log {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.history-table .toggle-log:hover { color: var(--text); border-color: var(--accent); }
+.history-table .log-cell {
+  padding: 0;
+}
+.history-table .log-cell .log-box {
+  border-radius: 0;
+  border: none;
+  height: auto;
+  max-height: 320px;
+}
+
+/* ============ Buttons ============ */
+.btn-ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
+.btn-ghost.active {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: rgba(91, 141, 239, 0.08);
+}
+
+/* ============ Status dot in row ============ */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+.status-pill .dot { width: 7px; height: 7px; }
+.status-success { color: var(--success); background: rgba(62, 192, 122, 0.10); }
+.status-failed  { color: var(--danger);  background: rgba(226, 106, 106, 0.10); }
+.status-timeout { color: var(--warn);    background: rgba(224, 164, 88, 0.12); }
+.status-skipped { color: var(--skipped); background: rgba(154, 163, 178, 0.12); }
+.status-running { color: var(--accent);  background: rgba(91, 141, 239, 0.12); }

static/app.js

@@ -0,0 +1,254 @@
+// 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) => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+  }[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);

static/index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>GitLab Webhook 控制台</title>
+  <link rel="stylesheet" href="/static/app.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo">⬢</span>
+      <div>
+        <h1>GitLab Webhook 控制台</h1>
+        <p class="subtitle">队列 / 执行日志 / 执行历史</p>
+      </div>
+    </div>
+    <div class="status">
+      <span id="conn-dot" class="dot dot-grey" title="连接状态"></span>
+      <span id="conn-text">连接中…</span>
+      <button id="refresh-btn" class="btn-ghost" type="button">立即刷新</button>
+    </div>
+  </header>
+
+  <main class="layout">
+    <section class="card" id="queue-card">
+      <header class="card-head">
+        <h2>① 等待中的队列</h2>
+        <span id="pending-count" class="badge">0</span>
+      </header>
+      <div id="pending-list" class="card-body pending-list">
+        <p class="empty">暂无等待任务</p>
+      </div>
+    </section>
+
+    <section class="card" id="running-card">
+      <header class="card-head">
+        <h2>② 正在执行</h2>
+        <span id="running-state" class="badge badge-grey">空闲</span>
+      </header>
+      <div id="running-body" class="card-body running-body">
+        <p class="empty">当前没有任务在执行</p>
+      </div>
+      <div class="card-foot">
+        <button id="log-autoscroll" class="btn-ghost active" type="button">自动滚动</button>
+        <span id="log-size" class="muted"></span>
+      </div>
+    </section>
+
+    <section class="card" id="history-card">
+      <header class="card-head">
+        <h2>③ 执行历史</h2>
+        <span class="muted small">按脚本分组，最多保留 20 条</span>
+      </header>
+      <div id="history-list" class="card-body history-list"></div>
+    </section>
+  </main>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>