webhukhs 0.6.0 → 0.8.0

data/lib/webhukhs/admin/assets/admin.css

@@ -0,0 +1,476 @@
+/* Webhukhs admin - vanilla CSS, system fonts only */
+
+:root {
+  color-scheme: light dark;
+
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+
+  --color-text: #404040;
+  --color-text-secondary: #737373;
+  --color-text-muted: #a3a3a3;
+  --color-bg: #ffffff;
+  --color-bg-subtle: #fafafa;
+  --color-bg-badge: #f5f5f5;
+  --color-bg-header: #262626;
+  --color-text-header: #ffffff;
+  --color-border: #e5e5e5;
+  --color-border-strong: #d4d4d4;
+  --color-bg-hover: #eef4fc;
+  --color-link: #0969da;
+
+  --color-ok-bg: #dff0d8;
+  --color-ok-border: #b6ddab;
+  --color-ok-text: #3c763d;
+  --color-bad-bg: #f2dede;
+  --color-bad-border: #e2c2c2;
+  --color-bad-text: #a94442;
+  --color-waiting-bg: #fcf8e3;
+  --color-waiting-border: #e8dfb4;
+  --color-waiting-text: #8a6d3b;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #e5e5e5;
+    --color-text-secondary: #a3a3a3;
+    --color-text-muted: #737373;
+    --color-bg: #171717;
+    --color-bg-subtle: #1f1f1f;
+    --color-bg-badge: #262626;
+    --color-bg-header: #0a0a0a;
+    --color-border: #333333;
+    --color-border-strong: #474747;
+    --color-bg-hover: #1c2a3d;
+    --color-link: #58a6ff;
+
+    --color-ok-bg: #16301a;
+    --color-ok-border: #2c5a33;
+    --color-ok-text: #8fd694;
+    --color-bad-bg: #3a1a1a;
+    --color-bad-border: #6b2e2e;
+    --color-bad-text: #f19a9a;
+    --color-waiting-bg: #33290f;
+    --color-waiting-border: #5f4d1d;
+    --color-waiting-text: #e6c66e;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+/* Header */
+.admin-header {
+  display: flex;
+  gap: 20px;
+  align-items: baseline;
+  background: var(--color-bg-header);
+  color: var(--color-text-header);
+  padding: 10px 20px;
+}
+.admin-header a {
+  color: var(--color-text-header);
+}
+
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 1.4rem;
+  margin: 0 0 16px;
+}
+h2 {
+  font-size: 1.1rem;
+  margin: 24px 0 8px;
+}
+
+.muted {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: normal;
+}
+p.muted {
+  max-width: 44rem;
+}
+
+.flash {
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  max-width: 44rem;
+}
+.flash.alert {
+  background: var(--color-bad-bg);
+  color: var(--color-bad-text);
+}
+
+.breadcrumb {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin-bottom: 12px;
+}
+
+/* Page title with controls pinned to the right of it */
+.page-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+.page-heading h1 {
+  margin: 0;
+}
+
+/* A checkbox drawn as an on/off switch */
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+.switch input {
+  appearance: none;
+  position: relative;
+  width: 30px;
+  height: 18px;
+  margin: 0;
+  border-radius: 9px;
+  background: var(--color-border-strong);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.switch input::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-bg);
+  transition: transform 0.15s;
+}
+.switch input:checked {
+  background: var(--color-link);
+}
+.switch input:checked::before {
+  transform: translateX(12px);
+}
+.switch input:focus-visible {
+  outline: 2px solid var(--color-link);
+  outline-offset: 2px;
+}
+
+/* Filters - one group of uniformly sized controls */
+.filters {
+  display: inline-flex;
+  margin: 16px 0;
+}
+.filters > select,
+.filters > input[type="submit"],
+.filters > a {
+  position: relative;
+  height: 30px;
+  margin: 0 0 0 -1px;
+  padding: 0 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 28px;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0;
+  cursor: pointer;
+}
+.filters > select {
+  appearance: none;
+  padding-right: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}
+.filters > select:first-of-type {
+  margin-left: 0;
+  border-radius: 4px 0 0 4px;
+  padding-left: 16px;
+}
+.filters > a {
+  border-radius: 0 4px 4px 0;
+  padding-right: 16px;
+  text-decoration: none;
+}
+.filters > input[type="submit"] {
+  font-weight: 500;
+}
+.filters > :hover {
+  background-color: var(--color-bg-subtle);
+}
+/* A select narrowing the list is tinted, so an active filter does not read as "any" */
+.filters > select:has(option:checked:not([value=""])) {
+  background-color: var(--color-bg-hover);
+}
+.filters > :focus-visible {
+  z-index: 1;
+  outline: 2px solid var(--color-link);
+  outline-offset: -1px;
+}
+
+/*
+ * The frame every admin_table sits in. Cells are nowrap, so one long column makes the
+ * table wider than `main` - the overflow is the container's, so the table scrolls inside
+ * the page instead of moving it.
+ */
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  margin-bottom: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.admin-table th,
+.admin-table td {
+  padding: 6px 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.admin-table tbody tr:last-child > * {
+  border-bottom: 0;
+}
+.admin-table thead th {
+  background: var(--color-bg-subtle);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.admin-table tbody tr:nth-child(even) {
+  background: var(--color-bg-subtle);
+}
+/* Rows with a .row-link are clickable as a whole: the link's ::after covers the row */
+.admin-table tbody tr:has(> td > .row-link) {
+  position: relative;
+  cursor: pointer;
+}
+.admin-table tbody tr:has(> td > .row-link):hover {
+  background: var(--color-bg-hover);
+}
+.admin-table tbody tr:has(> td > .row-link:focus-visible) {
+  outline: 2px solid var(--color-link);
+  outline-offset: -2px;
+}
+.row-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.row-link:focus-visible {
+  outline: none;
+}
+
+.admin-table .empty {
+  text-align: center;
+  color: var(--color-text-muted);
+  height: 165px;
+}
+
+.sort-link {
+  color: inherit;
+}
+.sort-arrow {
+  font-size: 10px;
+}
+
+/* Key-value table on the detail page */
+.attr-scroll {
+  width: fit-content;
+  min-width: min(700px, 100%);
+}
+.attr-table th {
+  width: 200px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+/* Values that are long, opaque and only interesting at their head. The full value is in the title */
+.cell-ellipsis {
+  display: inline-block;
+  max-width: 34ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.cell-id {
+  max-width: 14ch;
+}
+
+.header-value {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Status badges */
+.badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--color-bg-badge);
+  border: 1px solid var(--color-border);
+}
+h1 .badge {
+  vertical-align: middle;
+}
+.badge.status-ok {
+  background: var(--color-ok-bg);
+  border-color: var(--color-ok-border);
+  color: var(--color-ok-text);
+}
+.badge.status-bad {
+  background: var(--color-bad-bg);
+  border-color: var(--color-bad-border);
+  color: var(--color-bad-text);
+}
+.badge.status-waiting {
+  background: var(--color-waiting-bg);
+  border-color: var(--color-waiting-border);
+  color: var(--color-waiting-text);
+}
+
+/* Body viewer */
+.body-detail {
+  margin: 0;
+  padding: 8px 12px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 70vh;
+}
+.body-detail code {
+  font-size: 12px;
+  white-space: pre;
+}
+/* As sent, a body is very often one enormous line */
+.body-raw code {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.tabs [role="tabpanel"] .body-detail {
+  border-top-left-radius: 0;
+}
+.tab-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.tab-bar [role="tab"] {
+  font: inherit;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 4px 4px 0 0;
+  padding: 4px 12px;
+  margin-bottom: -1px;
+  cursor: pointer;
+}
+.tab-bar [role="tab"][aria-selected="true"] {
+  color: var(--color-text);
+  background: var(--color-bg-subtle);
+  border-color: var(--color-border);
+  position: relative;
+}
+.btn-copy-panel {
+  font: inherit;
+  font-size: 12px;
+  margin-bottom: 4px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+.btn-copy-panel.copied {
+  color: var(--color-ok-text);
+}
+
+/* Copy button */
+.btn-copy {
+  display: inline-block;
+  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  padding: 0;
+  border: none;
+  background-color: var(--color-text-muted);
+  cursor: pointer;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+.btn-copy:hover {
+  background-color: var(--color-text);
+}
+.btn-copy.copied {
+  background-color: var(--color-ok-text);
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  gap: 16px;
+  margin: 8px 0 24px;
+}
+.pagination a {
+  padding: 4px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+.pagination a:hover {
+  background: var(--color-bg-subtle);
+  text-decoration: none;
+}

data/lib/webhukhs/admin/assets/admin.js

@@ -0,0 +1,111 @@
+// Webhukhs admin - copy buttons, the body viewer tabs and the index auto-refresh. No framework, the CSP only allows this file.
+
+const flash = (element) => {
+  element.classList.add("copied");
+  setTimeout(() => element.classList.remove("copied"), 1200);
+};
+
+const tabsOf = (tablist) => Array.from(tablist.querySelectorAll("[role=tab]"));
+
+const selectTab = (tab) => {
+  for (const other of tabsOf(tab.closest("[role=tablist]"))) {
+    const selected = other === tab;
+    other.setAttribute("aria-selected", String(selected));
+    other.tabIndex = selected ? 0 : -1;
+    document.getElementById(other.getAttribute("aria-controls")).hidden = !selected;
+  }
+};
+
+document.addEventListener("click", (event) => {
+  const copy = event.target.closest(".btn-copy");
+  if (copy) {
+    navigator.clipboard.writeText(copy.dataset.copy).then(() => flash(copy));
+    return;
+  }
+
+  const tab = event.target.closest("[role=tab]");
+  if (tab) {
+    selectTab(tab);
+    return;
+  }
+
+  const copyPanel = event.target.closest(".btn-copy-panel");
+  if (copyPanel) {
+    const panel = copyPanel.closest(".tabs").querySelector("[role=tabpanel]:not([hidden])");
+    navigator.clipboard.writeText(panel.querySelector("code").textContent).then(() => flash(copyPanel));
+  }
+});
+
+// Arrow keys move between tabs, as the ARIA tabs pattern expects
+document.addEventListener("keydown", (event) => {
+  const tab = event.target.closest("[role=tab]");
+  if (!tab || !["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+
+  const tabs = tabsOf(tab.closest("[role=tablist]"));
+  const step = event.key === "ArrowRight" ? 1 : -1;
+  const next = tabs[(tabs.indexOf(tab) + step + tabs.length) % tabs.length];
+  selectTab(next);
+  next.focus();
+});
+
+// Auto-refresh of the index. Polls rather than holding an EventSource open: a forgotten tab with
+// an SSE stream pins a server thread forever, a forgotten tab polling costs one request now and then.
+const POLL_INTERVAL_MS = 5000;
+const POLL_STORAGE_KEY = "webhukhs.autoRefresh";
+
+const autoRefresh = document.getElementById("auto-refresh");
+let pollTimer = null;
+let pollAbort = null;
+
+const stopPolling = () => {
+  clearTimeout(pollTimer);
+  pollTimer = null;
+  pollAbort?.abort();
+  pollAbort = null;
+};
+
+const schedulePoll = () => {
+  pollTimer = setTimeout(refreshListing, POLL_INTERVAL_MS);
+};
+
+const refreshListing = async () => {
+  // Nobody is looking, so check again later instead
+  if (document.hidden) return schedulePoll();
+
+  const abort = (pollAbort = new AbortController());
+  try {
+    const response = await fetch(location.href, {signal: abort.signal, headers: {Accept: "text/html"}});
+    const html = await response.text();
+    // Swapped synchronously after the last await, so a switch turned off meanwhile has aborted us
+    const fresh = new DOMParser().parseFromString(html, "text/html").getElementById("received-webhooks");
+    if (response.ok && fresh) document.getElementById("received-webhooks").replaceWith(fresh);
+  } catch (error) {
+    if (abort.signal.aborted) return;
+  }
+  if (pollAbort === abort) schedulePoll();
+};
+
+const rememberAutoRefresh = (enabled) => {
+  try {
+    localStorage.setItem(POLL_STORAGE_KEY, enabled ? "1" : "");
+  } catch {}
+};
+
+const recallAutoRefresh = () => {
+  try {
+    return localStorage.getItem(POLL_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+};
+
+if (autoRefresh) {
+  autoRefresh.checked = recallAutoRefresh();
+  if (autoRefresh.checked) schedulePoll();
+
+  autoRefresh.addEventListener("change", () => {
+    stopPolling();
+    rememberAutoRefresh(autoRefresh.checked);
+    if (autoRefresh.checked) refreshListing();
+  });
+}

data/lib/webhukhs/admin/config/routes.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+Webhukhs::Admin::Engine.routes.draw do
+  resources :received_webhooks, only: [:index, :show], path: "received"
+  root to: "received_webhooks#index"
+end

data/lib/webhukhs/admin/engine.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Webhukhs
+  module Admin
+    # Rails engine serving the admin pages and their assets.
+    class Engine < ::Rails::Engine
+      isolate_namespace Webhukhs::Admin
+
+      # Rooted here rather than at the gem root, so that the views of the admin do not end up
+      # on the view path of Webhukhs::Engine - which shares the gem root with us
+      config.root = __dir__
+      paths["app/views"] = "views"
+
+      # Has to run before :build_middleware_stack, as Rails 8.1+ freezes the stack after it
+      initializer "webhukhs_admin.assets", before: :build_middleware_stack do
+        middleware.use Assiette::Server, root: Engine.root.join("assets")
+      end
+    end
+  end
+end

data/lib/webhukhs/admin/received_webhook_presenter.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Webhukhs
+  module Admin
+    # Wraps a Webhukhs::ReceivedWebhook with what the admin views need to display it.
+    class ReceivedWebhookPresenter < SimpleDelegator
+      # `received` and `processing` are on their way somewhere, the two failures are the rows
+      # worth finding in a list. `skipped` is deliberate and stays uncolored
+      STATUS_CLASSES = {
+        "processed" => "status-ok",
+        "error" => "status-bad",
+        "failed_validation" => "status-bad",
+        "received" => "status-waiting",
+        "processing" => "status-waiting"
+      }.freeze
+
+      # Bodies larger than this are neither parsed nor shown in full - a browser asked to lay out
+      # a few megabytes of pretty-printed JSON just hangs
+      DISPLAY_LIMIT = 256 * 1024
+
+      # CSS class coloring the status badge.
+      #
+      # @return [String]
+      def status_class
+        STATUS_CLASSES.fetch(status, "status-neutral")
+      end
+
+      # Whether the body is too large to display in full.
+      #
+      # @return [Boolean]
+      def truncated?
+        body.bytesize > DISPLAY_LIMIT
+      end
+
+      # The body as text, cut off at DISPLAY_LIMIT bytes. The body is stored as raw bytes and is not
+      # necessarily UTF-8, so anything that does not decode (including a character the cut went through)
+      # gets replaced with U+FFFD instead of blowing up the view.
+      #
+      # @return [String]
+      def body_text
+        String.new(body.byteslice(0, DISPLAY_LIMIT), encoding: Encoding::UTF_8).scrub
+      end
+
+      # Pretty-printed body, if the body is valid JSON.
+      #
+      # @return [String, nil]
+      def pretty_json
+        JSON.pretty_generate(JSON.parse(body_text))
+      rescue JSON::ParserError
+        nil
+      end
+
+      # Stored request headers sorted by name, with structured values (the path parameters) as JSON.
+      #
+      # @return [Array<Array<String>>] name and value pairs
+      def header_rows
+        request_headers.to_h.sort.map do |name, value|
+          [name, value.instance_of?(String) ? value : value.to_json]
+        end
+      end
+    end
+  end
+end