HowItRuns

tcmts.studio.HowItRuns · #f24caoxj · term · runs on the server

uses tcmts.share.shareNow, which uses process

How a definition ran on this machine in the last day, from its traces (as tcm traces <name> says it): what runs worse than its version before, and the change that did it; each version side by side, with its calls and the history entry that made it; where its calls came from in the browser, as pages waited for it; and its slowest traces. Nothing, if nothing's recorded for it.

import { shownMs } from "#codebase/tcmts/cli/main";
import { traceVersions, withTraces } from "#codebase/tcmts/cli/traced";
import { shortHash } from "#codebase/tcmts/core/hash";
import { ago, at, codeHref, shareNow } from "#codebase/tcmts/share";

export function HowItRuns({ name }: { name: string; hash: string }) {
  const s = shareNow();
  const v = withTraces(s.cb, (db) => traceVersions(db, s.cb, name, Date.now() - 86_400_000));
  if (!v) return null;
  const latest = v.changes[0];
  const newest = v.versions[0];
  return (
    <>
      {latest?.verdict?.worse && (
        <div className="notice" style={{ borderColor: "var(--warn)", background: "var(--warnbg)", marginTop: 16 }}>
          <b className="warn">Worse than its version before: {latest.verdict.said}.</b>{" "}
          {latest.changed.length ? <>What changed: {latest.changed.map((c, i) => (
            <span key={c}>
              {i ? ", " : ""}
              <a className="ref mono" href={codeHref(c.split(" ")[0]!)}>{c}</a>
            </span>
          ))}.</> : "Nothing it reaches changed: what it was given, or the machine, did."}{" "}
          {newest?.since && <a href={at(`/history/${newest.since.causal}`)}>See the change</a>}
        </div>
      )}
      <div className="box" style={{ marginTop: 16 }}>
        <div className="boxhead">
          <b>How it runs</b>
          <span className="muted">on this machine in the last day, version by version</span>
          <a className="right" href={at("/traces")}>All traces</a>
        </div>
        <table className="grid">
          <thead>
            <tr>
              <th>version</th>
              <th className="num">calls</th>
              <th className="num">errors</th>
              <th className="num">p50</th>
              <th className="num">p95</th>
            </tr>
          </thead>
          <tbody>
            {v.versions.map((x) => (
              <tr key={x.hash ?? name}>
                <td>
                  {x.hash ? shortHash(x.hash) : name}
                  {x.now && <span className="muted"> (now)</span>}
                </td>
                <td className="num">{x.n}</td>
                <td className={`num${x.errors ? " bad" : ""}`}>{x.errors}</td>
                <td className="num">{shownMs(x.p50)}</td>
                <td className="num">{shownMs(x.p95)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {v.callers.length > 0 && (
        <div className="box">
          <div className="boxhead">
            <b>Called from</b>
            <span className="muted">in the browser, as pages waited for it</span>
          </div>
          {v.callers.map((c) => (
            <div className="lrow" key={c.caller?.hash ?? "page"}>
              <div>
                {c.caller ? (
                  c.caller.gone && !c.caller.earlier ? (
                    <span className="mono">{c.caller.label} <span className="muted">(no longer named)</span></span>
                  ) : (
                    <>
                      <a className="mono" href={codeHref(c.caller.label)}>{c.caller.label}</a>
                      {c.caller.earlier && <span className="muted"> (an earlier version)</span>}
                    </>
                  )
                ) : (
                  <span className="muted">the page</span>
                )}{" "}
                <span className="muted">
                  {c.n} call(s){c.errors ? `, ${c.errors} failed` : ""}
                </span>
              </div>
              <span className="muted">waited p50 {shownMs(c.p50)}, p95 {shownMs(c.p95)}</span>
            </div>
          ))}
        </div>
      )}
      {v.slowest.length > 0 && (
        <div className="box">
          <div className="boxhead">
            <b>Slowest</b>
          </div>
          {v.slowest.map((t) => (
            <div className="lrow" key={`${t.trace} ${t.start}`}>
              <div>
                <a className="mono" href={at(`/trace/${t.trace}`)}>trace {t.trace.slice(0, 8)}</a>{" "}
                <span className="muted">{ago(t.start)}{v.versions.length > 1 && t.hash ? ` · ${shortHash(t.hash)}` : ""}</span>
              </div>
              <span>{shownMs(t.dur)}</span>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

uses

used by