@mug-lab/cookie-auth-proxy 0.1.0

package/src/admin/renderers.js

@@ -0,0 +1,513 @@
+/**
+ * Stub一覧と編集フォームを描画する。
+ */
+function renderStubs(stubs) {
+  lastStubs = stubs || [];
+  const openIds = new Set(
+    Array.from(document.querySelectorAll("#stubs details[open]")).map(
+      (entry) => entry.dataset.id,
+    ),
+  );
+  const filtered = lastStubs.filter(matchesStubFilter);
+  $("stubs").innerHTML =
+    filtered
+    .map((stub) => {
+      const statusClass = statusBucket(stub.status);
+      return `
+      <details class="entry ${statusClass} ${stub.enabled && allStubsEnabled ? "" : "disabled-stub"}" data-id="${escapeAttr(stub.id)}" data-original="${escapeAttr(JSON.stringify(stub))}" ${openIds.has(String(stub.id)) ? "open" : ""}>
+        <summary><span class="entry-head">
+          <span class="entry-title">
+            <span class="pill">${escapeHtml(stub.method)}</span>
+            <b>${escapeHtml(stub.pathPattern)}</b>
+            <span class="pill status-pill">${escapeHtml(stub.status)}</span>
+            <span class="muted">${escapeHtml(stub.name || "Untitled stub")}</span>
+          </span>
+          <span class="entry-actions">
+            <label class="switch" title="Enable this stub" onclick="event.stopPropagation()">
+              <input type="checkbox" ${stub.enabled ? "checked" : ""} onchange="toggleStub(event, '${escapeAttr(stub.id)}', this.checked)">
+              <span class="slider"></span>
+            </label>
+            <button class="icon" title="Move up" onclick="moveStub(event, '${escapeAttr(stub.id)}', 'up')">&uarr;</button>
+            <button class="icon" title="Move down" onclick="moveStub(event, '${escapeAttr(stub.id)}', 'down')">&darr;</button>
+            <button class="icon" title="Copy stub" onclick="copyStub(event, '${escapeAttr(stub.id)}')">Copy</button>
+            <button class="icon danger" title="Delete stub" onclick="deleteStub(event, '${escapeAttr(stub.id)}')">&#128465;</button>
+          </span>
+        </span></summary>
+        <label>Name<input data-field="name" value="${escapeAttr(stub.name || "Untitled stub")}"></label>
+        <div class="editor-section">
+          <h3>Criteria</h3>
+          <label>Method<select data-field="method"><option ${selected(stub.method, "GET")}>GET</option><option ${selected(stub.method, "POST")}>POST</option><option ${selected(stub.method, "PUT")}>PUT</option><option ${selected(stub.method, "PATCH")}>PATCH</option><option ${selected(stub.method, "DELETE")}>DELETE</option><option ${selected(stub.method, "*")}>*</option></select></label>
+          <label>Path Pattern<input data-field="pathPattern" value="${escapeAttr(stub.pathPattern)}"></label>
+          <label>Query Params JSON<textarea data-field="queryParams">${escapeHtml(JSON.stringify(stub.queryParams || {}, null, 2))}</textarea></label>
+          <label data-request-body-criteria class="${stub.method === "GET" ? "hidden" : ""}">Request Body JSON<textarea data-field="requestBody">${escapeHtml(JSON.stringify(stub.requestBody || {}, null, 2))}</textarea></label>
+        </div>
+        <div class="editor-section">
+          <h3>Return Value</h3>
+          <label>Status<input data-field="status" value="${escapeAttr(stub.status)}"></label>
+          <label>Headers JSON<textarea data-field="headers">${escapeHtml(JSON.stringify(stub.headers || {}, null, 2))}</textarea></label>
+          <label>Body Type<select data-field="bodyEncoding" onchange="toggleStubBodyEditor(this.closest('details'))">
+            <option value="json" ${selected(stub.bodyEncoding || "json", "json")}>JSON</option>
+            <option value="text" ${selected(stub.bodyEncoding || "json", "text")}>Text</option>
+            <option value="base64" ${selected(stub.bodyEncoding || "json", "base64")}>Binary</option>
+          </select></label>
+          <div data-body-panel="text" class="${stub.bodyEncoding === "base64" ? "hidden" : ""}">
+            <label>Body<textarea data-field="body">${escapeHtml(formatBody(stub.body || ""))}</textarea></label>
+          </div>
+          <div data-body-panel="base64" class="${stub.bodyEncoding === "base64" ? "" : "hidden"}">
+            <input type="hidden" data-field="bodyBase64" value="${escapeAttr(stub.bodyBase64 || "")}">
+            <div class="row" style="margin-top:8px">
+              <button type="button" onclick="downloadStubBody(event, '${escapeAttr(stub.id)}')">Download Body</button>
+              <label>Replace Body File<input type="file" data-field="bodyFile" onchange="loadStubBodyFile(event)"></label>
+            </div>
+            <p class="muted" data-field="bodyBinaryNote">${binaryBodyNote(stub)}</p>
+          </div>
+        </div>
+        <p class="muted error-message" data-editor-error></p>
+        <button class="primary" data-action="apply-stub" onclick="saveStub(event, '${escapeAttr(stub.id)}')" ${dirtyNewStubIds.has(String(stub.id)) ? "" : "disabled"}>Apply Stub</button>
+      </details>`;
+    })
+      .join("") +
+    renderFilteredOutSummary(lastStubs.length - filtered.length);
+}
+
+/**
+ * select要素のoptionへselected属性を付けるか判定する。
+ */
+function selected(value, expected) {
+  return value === expected ? "selected" : "";
+}
+
+/**
+ * Override一覧と編集フォームを描画する。
+ */
+function renderOverrides(overrides) {
+  lastOverrides = overrides || [];
+  const openIds = new Set(
+    Array.from(document.querySelectorAll("#overrides details[open]")).map(
+      (entry) => entry.dataset.id,
+    ),
+  );
+  const filtered = lastOverrides.filter(matchesOverrideFilter);
+  $("overrides").innerHTML =
+    filtered
+      .map(
+        (override) => `
+    <details class="entry ${override.enabled && allJsonOverridesEnabled ? "" : "disabled-stub"}" data-id="${escapeAttr(override.id)}" data-original="${escapeAttr(JSON.stringify(override))}" ${openIds.has(String(override.id)) ? "open" : ""}>
+      <summary><span class="entry-head">
+        <span class="entry-title">
+          <span class="pill">${escapeHtml(override.method)}</span>
+          <b>${escapeHtml(override.pathPattern)}</b>
+          <span class="muted">${escapeHtml(override.name || "Untitled override")}</span>
+        </span>
+        <span class="entry-actions">
+          <label class="switch" title="Enable this override" onclick="event.stopPropagation()">
+            <input type="checkbox" ${override.enabled ? "checked" : ""} onchange="toggleOverride(event, '${escapeAttr(override.id)}', this.checked)">
+            <span class="slider"></span>
+          </label>
+          <button class="icon" title="Move up" onclick="moveOverride(event, '${escapeAttr(override.id)}', 'up')">&uarr;</button>
+          <button class="icon" title="Move down" onclick="moveOverride(event, '${escapeAttr(override.id)}', 'down')">&darr;</button>
+          <button class="icon" title="Copy override" onclick="copyOverride(event, '${escapeAttr(override.id)}')">Copy</button>
+          <button class="icon danger" title="Delete override" onclick="deleteOverride(event, '${escapeAttr(override.id)}')">&#128465;</button>
+        </span>
+      </span></summary>
+      <label>Name<input data-field="name" value="${escapeAttr(override.name || "Untitled override")}"></label>
+      <div class="editor-section">
+        <h3>Criteria</h3>
+        <label>Method<select data-field="method"><option ${selected(override.method, "GET")}>GET</option><option ${selected(override.method, "POST")}>POST</option><option ${selected(override.method, "PUT")}>PUT</option><option ${selected(override.method, "PATCH")}>PATCH</option><option ${selected(override.method, "DELETE")}>DELETE</option><option ${selected(override.method, "*")}>*</option></select></label>
+        <label>Path Pattern<input data-field="pathPattern" value="${escapeAttr(override.pathPattern)}"></label>
+        <label>Query Params JSON<textarea data-field="queryParams">${escapeHtml(JSON.stringify(override.queryParams || {}, null, 2))}</textarea></label>
+        <label data-request-body-criteria class="${override.method === "GET" ? "hidden" : ""}">Request Body JSON<textarea data-field="requestBody">${escapeHtml(JSON.stringify(override.requestBody || {}, null, 2))}</textarea></label>
+      </div>
+      <div class="editor-section">
+        <h3>Return Value</h3>
+        <label>Override JSON<textarea data-field="value">${escapeHtml(JSON.stringify(override.value || {}, null, 2))}</textarea></label>
+      </div>
+      <p class="muted error-message" data-editor-error></p>
+      <button class="primary" data-action="apply-override" onclick="saveOverride(event, '${escapeAttr(override.id)}')" ${dirtyNewOverrideIds.has(String(override.id)) ? "" : "disabled"}>Apply Override</button>
+    </details>`,
+      )
+      .join("") +
+    renderFilteredOutSummary(lastOverrides.length - filtered.length);
+}
+
+/**
+ * Stub行がName/Method/Pathのフィルタに一致するか判定する。
+ */
+function matchesStubFilter(stub) {
+  return matchesRuleFilter(stub, stubFilter);
+}
+
+/**
+ * Override行がName/Method/Pathのフィルタに一致するか判定する。
+ */
+function matchesOverrideFilter(override) {
+  return matchesRuleFilter(override, overrideFilter);
+}
+
+/**
+ * ルール行が入力フィルタに一致するか判定する。
+ */
+function matchesRuleFilter(rule, filterText) {
+  const needle = String(filterText || "").trim().toLowerCase();
+  if (!needle) return true;
+  return [rule.name, rule.method, rule.pathPattern]
+    .map((value) => String(value || "").toLowerCase())
+    .some((value) => value.includes(needle));
+}
+
+/**
+ * 履歴一覧をフィルタ適用後の表示順で描画する。
+ */
+function renderHistory(items) {
+  const knownIds = new Set(items.map((item) => String(item.id)));
+  for (const id of historyDetails.keys()) {
+    if (!knownIds.has(id)) historyDetails.delete(id);
+  }
+
+  const openIds = new Set(
+    Array.from(document.querySelectorAll("#history details[open]")).map(
+      (entry) => entry.dataset.id,
+    ),
+  );
+  const scrollPositions = capturePreScroll();
+  const displayed = items.slice(-historyDisplayLimit).reverse();
+  const signature = [
+    historyFilter,
+    pathFilter,
+    displayed
+      .map(
+        (item) =>
+          `${item.id}:${matchesHistoryFilters(item) ? 1 : 0}:${item.status}:${item.durationMs}:${item.responseBodySize || 0}`,
+      )
+      .join(","),
+  ].join("|");
+  if (signature === historyRenderSignature) return;
+  historyRenderSignature = signature;
+
+  $("history").innerHTML = renderHistoryRows(displayed, openIds);
+  openIds.forEach((id) => renderHistoryDetail(id));
+  restorePreScroll(scrollPositions);
+}
+
+/**
+ * 履歴行とフィルタ省略行を時系列上の位置に合わせて描画する。
+ */
+function renderHistoryRows(items, openIds) {
+  const rows = [];
+  let filteredRun = 0;
+
+  items.forEach((item) => {
+    if (!matchesHistoryFilters(item)) {
+      filteredRun += 1;
+      return;
+    }
+
+    if (filteredRun) {
+      rows.push(renderFilteredOutSummary(filteredRun));
+      filteredRun = 0;
+    }
+    rows.push(renderHistoryEntry(item, openIds));
+  });
+
+  if (filteredRun) rows.push(renderFilteredOutSummary(filteredRun));
+  return rows.join("");
+}
+
+/**
+ * 履歴行が現在のフィルタ条件に一致するか判定する。
+ */
+function matchesHistoryFilters(item) {
+  return matchesStatusFilter(item.status) && matchesPathFilter(item.path);
+}
+
+/**
+ * 履歴の1行を描画する。
+ */
+function renderHistoryEntry(item, openIds) {
+  const statusClass = statusBucket(item.status);
+  const binary = isBinaryBody(item);
+  return `
+      <details class="entry ${statusClass}" data-id="${escapeAttr(item.id)}" ${openIds.has(String(item.id)) ? "open" : ""} ontoggle="toggleHistoryDetail(event, '${escapeAttr(item.id)}')">
+        <summary><span class="entry-head">
+          <span class="entry-title">
+            ${escapeHtml(formatDate(item.at))} ${escapeHtml(item.method)} ${escapeHtml(item.path)}
+            <span class="pill status-pill">${escapeHtml(item.status)}</span>
+            <span class="pill">${escapeHtml(item.type)}</span>
+            <span class="pill">${escapeHtml(item.durationMs)}ms</span>
+            ${binary ? `<span class="pill">${bodySizeLabel(item.responseBodySize)}</span>` : ""}
+            ${item.responseBodyTruncated ? `<span class="pill">body truncated</span>` : ""}
+            ${item.appliedOverrideIds && item.appliedOverrideIds.length ? `<span class="pill">override ${item.appliedOverrideIds.length}</span>` : ""}
+            ${item.responseBodyRewriteSkipped ? `<span class="pill">body passthrough</span>` : ""}
+            ${item.jsonOverrideSkipped ? `<span class="pill">override skipped ${item.skippedOverrideIds ? item.skippedOverrideIds.length : ""}</span>` : ""}
+          </span>
+          <span class="entry-actions">
+            <button title="Add stub from this response" onclick="addStubFromHistory(event, '${escapeAttr(item.id)}')">Stub</button>
+            <button title="Add JSON override from this response" onclick="addOverrideFromHistory(event, '${escapeAttr(item.id)}')">Override</button>
+          </span>
+        </span></summary>
+        <div class="history-detail" data-history-detail="${escapeAttr(item.id)}"></div>
+      </details>`;
+}
+
+/**
+ * フィルタで非表示になった行数をリスト末尾へ控えめに表示する。
+ */
+function renderFilteredOutSummary(count) {
+  if (!count) return "";
+  return `<div class="filter-summary" aria-label="${escapeAttr(count)} filtered out">... ${escapeHtml(count)} filtered out</div>`;
+}
+
+/**
+ * 履歴行が開かれたときに詳細を遅延取得する。
+ */
+async function toggleHistoryDetail(event, id) {
+  if (!event.currentTarget.open) return;
+  await renderHistoryDetail(id);
+}
+
+/**
+ * 選択された履歴行の詳細レスポンスを描画する。
+ */
+async function renderHistoryDetail(id) {
+  const root = document.querySelector(`[data-history-detail="${id}"]`);
+  if (!root || root.dataset.loaded === "true") return;
+
+  root.innerHTML = `<p class="muted">Loading detail...</p>`;
+  const item = await getHistoryDetail(id);
+  const binary = isBinaryBody(item);
+  root.dataset.loaded = "true";
+  root.innerHTML = `
+    <div class="muted">${escapeHtml(item.at)} / ${escapeHtml(item.origin)}</div>
+    ${
+      item.responseBodyTruncated
+        ? `<p class="muted">Response body display was truncated by size limit. Showing the newest ${bodySizeLabel(item.responseBodyStoredSize)} of ${bodySizeLabel(item.responseBodySize)}.</p>`
+        : ""
+    }
+    ${
+      item.responseBodyRewriteSkipped
+        ? `<p class="muted">Response body rewrite was skipped because the body exceeded the configured rewrite size limit.</p>`
+        : ""
+    }
+    ${
+      item.jsonOverrideSkipped
+        ? `<p class="muted">Matching JSON override rules were found but skipped because the response body was streamed without rewriting.</p>`
+        : ""
+    }
+    ${renderRuleApplicationDetail(item)}
+    <h3>Headers</h3><pre data-scroll-key="${escapeAttr(item.id)}:headers">${escapeHtml(JSON.stringify(item.responseHeaders || {}, null, 2))}</pre>
+    <div class="section-head">
+      <h3>Body</h3>
+      ${
+        binary
+          ? `<button class="icon" title="Download response body" onclick="downloadHistoryBody(event, '${escapeAttr(item.id)}')">DL</button>`
+          : `<button class="icon" title="Copy response body" onclick="copyBody(event, '${escapeAttr(item.id)}')">Copy</button>`
+      }
+    </div>
+    ${
+      binary
+        ? `<p class="muted">Binary body (${bodySizeLabel(item.responseBodySize)}). Use Download or create a stub from this history row.</p>`
+        : `<pre data-scroll-key="${escapeAttr(item.id)}:body">${escapeHtml(formatBody(item.responseBody || ""))}</pre>`
+    }`;
+}
+
+/**
+ * 履歴詳細へStub/Override適用情報を表示する。
+ */
+function renderRuleApplicationDetail(item) {
+  const sections = [];
+  if (item.stub) {
+    sections.push(`Matched Stub: ${ruleSummary(item.stub)}`);
+  }
+  if (item.appliedOverrides && item.appliedOverrides.length) {
+    sections.push(
+      `Applied JSON Overrides: ${item.appliedOverrides.map(ruleSummary).join(", ")}`,
+    );
+  }
+  if (item.skippedOverrides && item.skippedOverrides.length) {
+    sections.push(
+      `Skipped JSON Overrides: ${item.skippedOverrides.map(ruleSummary).join(", ")}`,
+    );
+  }
+  if (sections.length === 0) return "";
+
+  return `<h3>Rule Match</h3><pre>${escapeHtml(sections.join("\n"))}</pre>`;
+}
+
+/**
+ * 履歴詳細用のルール概要文字列を作る。
+ */
+function ruleSummary(rule) {
+  return [
+    rule.name || "Untitled",
+    rule.method || "",
+    rule.pathPattern || "",
+  ]
+    .filter(Boolean)
+    .join(" / ");
+}
+
+/**
+ * 履歴詳細をキャッシュ優先で取得する。
+ */
+async function getHistoryDetail(id) {
+  if (historyDetails.has(String(id))) return historyDetails.get(String(id));
+  const item = await api(`/admin/history/${id}`);
+  historyDetails.set(String(id), item);
+  return item;
+}
+
+/**
+ * HTTPステータスが画面のステータスフィルタに一致するか判定する。
+ */
+function matchesStatusFilter(status) {
+  const code = Number(status);
+  if (historyFilter === "all") return true;
+  if (historyFilter === "other")
+    return ![2, 3, 4, 5].includes(Math.floor(code / 100));
+  return Math.floor(code / 100) === Number(historyFilter);
+}
+
+/**
+ * 履歴行が画面のパスフィルタに一致するか判定する。
+ */
+function matchesPathFilter(path) {
+  if (!pathFilter.trim()) return true;
+  try {
+    return compileSafeRegex(pathFilter, "Path Filter Regex").test(path);
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * HTTPステータスを色分け用の2xx/3xx/4xx/5xx分類へ変換する。
+ */
+function statusBucket(status) {
+  const family = Math.floor(Number(status) / 100);
+  return [2, 3, 4, 5].includes(family) ? "status-" + family + "xx" : "";
+}
+
+/**
+ * 履歴またはStub本文がBase64バイナリ扱いか判定する。
+ */
+function isBinaryBody(item) {
+  return item && item.responseBodyEncoding === "base64";
+}
+
+/**
+ * バイト数を画面表示しやすいサイズ表記へ変換する。
+ */
+function bodySizeLabel(size) {
+  const bytes = Number(size || 0);
+  if (bytes >= 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + " MB";
+  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return bytes + " B";
+}
+
+/**
+ * バイナリStub本文の選択状態を画面表示用テキストにする。
+ */
+function binaryBodyNote(stub) {
+  const base64 = stub.bodyBase64 || "";
+  if (!base64) return "No binary body is selected.";
+  return "Binary body: " + bodySizeLabel(base64ToBytes(base64).length);
+}
+
+/**
+ * Base64文字列をUint8Arrayへ変換する。
+ */
+function base64ToBytes(base64) {
+  const bin = atob(base64 || "");
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i += 1) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+
+/**
+ * Uint8ArrayをBase64文字列へ変換する。
+ */
+function bytesToBase64(bytes) {
+  const chunks = [];
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    chunks.push(String.fromCharCode(...bytes.slice(i, i + 0x8000)));
+  }
+  return btoa(chunks.join(""));
+}
+
+/**
+ * JSONらしい本文を整形し、それ以外は元の文字列のまま返す。
+ */
+function formatBody(body) {
+  if (typeof body !== "string") return JSON.stringify(body, null, 2);
+  const text = body.trim();
+  if (!text) return "";
+  if (!text.startsWith("{") && !text.startsWith("[")) return body;
+
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return body;
+  }
+}
+
+/**
+ * ISO日時などをローカル表示用の日時文字列へ変換する。
+ */
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString();
+}
+
+/**
+ * ボタンに短いフィードバックアニメーションを付ける。
+ */
+function flash(button) {
+  button.classList.remove("flash");
+  void button.offsetWidth;
+  button.classList.add("flash");
+  window.setTimeout(() => button.classList.remove("flash"), 450);
+}
+
+/**
+ * 再描画前のpre要素スクロール位置を退避する。
+ */
+function capturePreScroll() {
+  const map = {};
+  document.querySelectorAll("pre[data-scroll-key]").forEach((pre) => {
+    map[pre.dataset.scrollKey] = { top: pre.scrollTop, left: pre.scrollLeft };
+  });
+  return map;
+}
+
+/**
+ * 再描画後のpre要素スクロール位置を復元する。
+ */
+function restorePreScroll(map) {
+  document.querySelectorAll("pre[data-scroll-key]").forEach((pre) => {
+    const position = map[pre.dataset.scrollKey];
+    if (!position) return;
+    pre.scrollTop = position.top;
+    pre.scrollLeft = position.left;
+  });
+}
+
+/**
+ * HTML本文へ埋め込めるよう文字列をエスケープする。
+ */
+function escapeHtml(value) {
+  return String(value).replace(
+    /[&<>"']/g,
+    (ch) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        ch
+      ],
+  );
+}
+
+/**
+ * HTML属性へ埋め込めるよう文字列をエスケープする。
+ */
+function escapeAttr(value) {
+  return escapeHtml(value).replace(/`/g, "&#96;");
+}