@clemrig/flow-ui 0.5.1 → 0.6.0

package/dist/static/follow.js

@@ -1,103 +0,0 @@
-// @ts-check
-/**
- * Follows the selected run: asks only for the events not received yet, one
- * request after the answer to the previous one, drops an answer for a selection
- * that has changed since, and stops once the run has ended or does not exist,
- * until the run list shows it updated since, as a resumed run is.
- * Requests and timers are given, so that this logic is tested without a browser.
- */
-
-/** @typedef {import("@clemrig/flow").RunEvent} RunEvent */
-
-/**
- * @typedef {object} Answer
- * @property {{ status: string; updatedAt?: string }} run
- * @property {RunEvent[]} events Events from the index the request asked for.
- * @property {number} next The index to ask for next.
- */
-
-/**
- * @template Timer
- * @param {object} options
- * @param {(path: string) => Promise<any>} options.load Rejects with `status` set on an HTTP error.
- * @param {(work: () => void) => Timer} options.schedule Runs `work` after the polling interval.
- * @param {(timer: Timer | undefined) => void} options.cancel
- * @param {(answer: any, events: RunEvent[]) => void} options.show The latest answer and every event received.
- * @param {(error: unknown) => void} options.fail
- */
-export function follower({ load, schedule, cancel, show, fail }) {
-  /** One selection: a new object each time, so that an old answer never matches. */
-  let current = {
-    id: "",
-    events: /** @type {RunEvent[]} */ ([]),
-    next: 0,
-    /** Whether following stopped, on the run's end or absence. */
-    stopped: false,
-    /** The run's last update, as the last answer showed it. */
-    updatedAt: /** @type {string | undefined} */ (undefined),
-  };
-  /** @type {Timer | undefined} */
-  let timer;
-
-  /** @param {typeof current} target */
-  async function refresh(target) {
-    if (!target.id) return;
-    /** @type {Answer} */
-    let answer;
-    try {
-      answer = await load(
-        `api/runs/${encodeURIComponent(target.id)}?after=${target.next}`,
-      );
-    } catch (error) {
-      if (target !== current) return;
-      fail(error);
-      // A run that does not exist will not appear later.
-      const status = /** @type {{ status?: number }} */ (error).status;
-      if (status !== 404) timer = schedule(() => refresh(target));
-      else target.stopped = true;
-      return;
-    }
-    if (target !== current) return;
-    target.events.push(...answer.events);
-    target.next = answer.next;
-    target.updatedAt = answer.run.updatedAt;
-    show(answer, target.events);
-    if (answer.run.status === "running")
-      timer = schedule(() => refresh(target));
-    else target.stopped = true;
-  }
-
-  return {
-    /** @param {string} id */
-    select(id) {
-      if (id === current.id) return;
-      cancel(timer);
-      current = {
-        id,
-        events: [],
-        next: 0,
-        stopped: false,
-        updatedAt: undefined,
-      };
-      refresh(current);
-    },
-    /**
-     * The run list shows `id` last updated at `updatedAt`: following starts
-     * again, from the events already received, if it had stopped on an earlier
-     * state of the selected run, as when it was resumed since, even if the
-     * resumed run already ended again.
-     * @param {string} id
-     * @param {string} updatedAt
-     */
-    listed(id, updatedAt) {
-      if (
-        id !== current.id ||
-        !current.stopped ||
-        updatedAt === current.updatedAt
-      )
-        return;
-      current.stopped = false;
-      refresh(current);
-    },
-  };
-}

package/dist/static/index.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>runs</title>
-<link rel="stylesheet" href="style.css">
-<script type="module" src="dashboard.js"></script>
-</head>
-<body>
-<header><h1 id="title">runs</h1><span id="label"></span><span id="updated"></span></header>
-<main>
-<div>
-<div class="table"><table><thead><tr><th>Workflow</th><th>Status</th><th>Stage</th><th>Duration</th><th>Cost</th><th>Updated</th></tr></thead><tbody id="runs"></tbody></table></div>
-<p id="none" class="empty" hidden>No run yet.</p>
-</div>
-<div id="detail"><p class="empty">Select a run.</p></div>
-</main>
-</body>
-</html>

package/dist/static/style.css

@@ -1,460 +0,0 @@
-:root {
-  color-scheme: light dark;
-  --bg: #f7f7f5;
-  --panel: #fff;
-  --fg: #1d1d1b;
-  --muted: #6f6e69;
-  --line: #e4e3df;
-  --accent: #2557d6;
-  --ok: #19773a;
-  --bad: #b42318;
-  --run: #a15c07;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #111110;
-    --panel: #1b1b19;
-    --fg: #e8e7e3;
-    --muted: #9b9a94;
-    --line: #2c2c29;
-    --accent: #7aa2ff;
-    --ok: #5bd28a;
-    --bad: #ff7a6b;
-    --run: #f2b14c;
-  }
-}
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--fg);
-  font:
-    14px / 1.45 ui-sans-serif,
-    system-ui,
-    -apple-system,
-    sans-serif;
-}
-header {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  align-items: baseline;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--line);
-}
-header h1 {
-  margin: 0;
-  font-size: 16px;
-}
-header span {
-  color: var(--muted);
-  font-size: 13px;
-}
-#updated {
-  margin-left: auto;
-}
-main {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
-  gap: 16px;
-  padding: 16px;
-}
-@media (max-width: 900px) {
-  main {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.table {
-  overflow-x: auto;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-th,
-td {
-  padding: 7px 10px;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
-  white-space: nowrap;
-}
-th {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 500;
-}
-tbody tr {
-  cursor: pointer;
-}
-tbody tr:hover,
-tbody tr.selected {
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-}
-.completed,
-.passed {
-  color: var(--ok);
-}
-.failed {
-  color: var(--bad);
-}
-.running {
-  color: var(--run);
-}
-section {
-  margin-bottom: 12px;
-  padding: 10px 12px;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-}
-h2 {
-  margin: 0 0 8px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-h3 {
-  margin: 0;
-  font-size: 14px;
-  overflow-wrap: anywhere;
-}
-h4 {
-  margin: 14px 0 6px;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-pre,
-.mono,
-.log {
-  font:
-    12px / 1.45 ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-  overflow-wrap: anywhere;
-}
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-}
-.empty {
-  margin: 0;
-  color: var(--muted);
-}
-.muted {
-  color: var(--muted);
-}
-
-/* States, carried as data so that they never meet the list's status classes. */
-[data-state="passed"],
-[data-state="completed"] {
-  --state: var(--ok);
-}
-[data-state="correction"] {
-  --state: var(--run);
-}
-[data-state="failed"] {
-  --state: var(--bad);
-}
-[data-state="running"] {
-  --state: var(--accent);
-}
-.pill {
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--state) 16%, transparent);
-  color: var(--state);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* The run's card: facts on one line, then each launch with its strip. */
-.overview-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-.facts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 28px;
-  margin: 10px 0 14px;
-}
-.facts dt {
-  color: var(--muted);
-  font-size: 12px;
-}
-.facts dd {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.launch {
-  padding-top: 12px;
-  border-top: 1px solid var(--line);
-}
-.launch-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 6px;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-.launch-head .state {
-  color: var(--state);
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-.launch-cause {
-  margin: 6px 0 0;
-  color: var(--bad);
-  font-size: 12px;
-}
-.pause {
-  margin: 10px 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-.track {
-  display: flex;
-  gap: 2px;
-  height: 22px;
-}
-.segment {
-  min-width: 4px;
-  flex-basis: 0;
-  padding: 0 6px;
-  overflow: hidden;
-  border: 0;
-  border-radius: 3px;
-  background: var(--state);
-  color: var(--panel);
-  font:
-    600 11px / 22px ui-sans-serif,
-    system-ui,
-    sans-serif;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.segment[data-state="passed"]:not([data-kind="AGENT"]) {
-  background: color-mix(in srgb, var(--ok) 65%, var(--panel));
-}
-.segment[aria-current="true"] {
-  outline: 2px solid var(--fg);
-  outline-offset: 1px;
-}
-
-/* The stages: the list beside the selected stage's panel. */
-.stages-section {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 16px;
-}
-@media (min-width: 1300px) {
-  .stages-section {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-    align-items: start;
-  }
-  .stage-list {
-    max-height: 75vh;
-    overflow: auto;
-  }
-  .stage-panel {
-    position: sticky;
-    top: 12px;
-  }
-}
-.group {
-  margin: 10px 0 4px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-.stages > li {
-  border-bottom: 1px solid var(--line);
-}
-.stages > li:last-child {
-  border-bottom: 0;
-}
-.stage {
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) 56px 84px;
-  gap: 8px;
-  align-items: center;
-  width: 100%;
-  padding: 4px;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.stage:hover,
-.stage[aria-current="true"] {
-  background: color-mix(in srgb, var(--accent) 10%, transparent);
-}
-.stage .icon {
-  color: var(--state);
-  font-weight: 700;
-  text-align: center;
-}
-.stage .name {
-  overflow: hidden;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.stage[data-kind="GATE"][data-state="passed"] {
-  font-size: 13px;
-}
-.stage[data-kind="GATE"][data-state="passed"] .name,
-.stage[data-kind="GATE"][data-state="passed"] .icon {
-  color: var(--muted);
-  font-weight: 400;
-}
-.kind {
-  color: var(--muted);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-}
-.kind.tag {
-  padding: 1px 6px;
-  border: 1px solid var(--line);
-  border-radius: 4px;
-}
-.took {
-  font:
-    12px / 1.45 ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-  text-align: right;
-  white-space: nowrap;
-}
-.panel-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.sheet {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 5px 14px;
-  margin: 12px 0 0;
-  font-size: 13px;
-}
-.sheet dt {
-  color: var(--muted);
-}
-.sheet dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-.warn {
-  color: var(--run);
-}
-.bad {
-  color: var(--bad);
-}
-.callout {
-  margin: 12px 0 0;
-  padding: 8px 10px;
-  border-left: 3px solid currentColor;
-  border-radius: 4px;
-  background: color-mix(in srgb, currentColor 8%, transparent);
-  font-size: 12px;
-  white-space: pre-wrap;
-}
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.chip {
-  padding: 1px 7px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-.chip.warn {
-  border-color: color-mix(in srgb, var(--run) 50%, transparent);
-}
-.log {
-  max-height: 260px;
-  padding: 6px 8px;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-}
-.log li {
-  display: grid;
-  grid-template-columns: 70px minmax(0, 1fr);
-  gap: 8px;
-  padding: 1px 0;
-}
-.log .at {
-  color: var(--muted);
-}
-details.output {
-  margin: 12px 0 0;
-}
-details.output summary {
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-}
-details.output pre {
-  max-height: 360px;
-  padding: 6px 8px;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-}
-.log-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-}
-button.link {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--accent);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.runtime {
-  margin: 10px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-:is(.stage, .segment, button.link):focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}