Reports: cards with a kind icon and health, frames that fit and share the hub's look f3e5e2bc78e9

/* OxygenHub report frame (oxygenhub#127): the hub adds this to a report's

   HTML pages. It tells the page around the frame how tall the report is,

   so the frame grows to fit instead of scrolling, and takes the hub's

   theme (data-theme="dark" or "light" on <html>) for report.css. It sends

   nothing but sizes, and reads nothing but the theme. */

(function () {

  if (window.parent === window) return;

  var root = document.documentElement, last = 0;

  var send = function () {

    var h = Math.ceil(Math.max(root.scrollHeight, document.body ? document.body.scrollHeight : 0));

    if (h && h !== last) {

      last = h;

      window.parent.postMessage({ oxygenhubReport: { height: h } }, "*");

    }

  };

  window.addEventListener("message", function (e) {

    if (e.source !== window.parent) return;

    var t = e.data && e.data.oxygenhubTheme;

    if (t === "dark" || t === "light") root.dataset.theme = t;

  });

  window.addEventListener("load", send);

  if (window.ResizeObserver) new ResizeObserver(send).observe(root);

  else setInterval(send, 500);

  window.parent.postMessage({ oxygenhubReport: { ready: true } }, "*");

})();

/* OxygenHub report stylesheet (oxygenhub#127). A report's page links it

   to look like the hub around it, with no fonts or colours of its own:

     <link rel="stylesheet" href="/static/report.css">

   It sets the hub's fonts (Barlow; IBM Plex Mono for code) and its colour

   tokens, following the hub's theme as the frame script passes it on:

   --bg, --panel, --soft, --ink, --mute, --line, --acc, --acc-2, --ok,

   --bad, --warn, and --m1..--m5 for chart series. The page's background

   is the hub's panel. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/static/fonts/Barlow-400.woff2) format("woff2"); }

@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/static/fonts/Barlow-500.woff2) format("woff2"); }

@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/static/fonts/Barlow-600.woff2) format("woff2"); }

:root {

  color-scheme: dark;

  --bg:#070c18; --panel:#0e1526; --soft:#141d33; --ink:#e6ecf7; --mute:#8592ad; --line:#1f2b47;

  --acc:#00e0f0; --acc-2:#0072ff; --ok:#5fe3a1; --bad:#ff5e7a; --warn:#b48cff;

  --m1:#00f0ff; --m2:#d6dcea; --m3:#5aa8ff; --m4:#0072ff; --m5:#8592ad;

}

:root[data-theme="light"] {

  color-scheme: light;

  --bg:#f4f7fc; --panel:#ffffff; --soft:#e9eef8; --ink:#1b2333; --mute:#5f6a81; --line:#d6dded;

  --acc:#0064e0; --acc-2:#00b8d4; --ok:#1a7850; --bad:#c62d47; --warn:#6b3fd1;

  --m1:#0090a8; --m2:#7a8290; --m3:#2f6fcf; --m4:#0055c0; --m5:#8a8f9c;

}

html { background: var(--panel); }

body { margin: 0; padding: 16px; background: var(--panel); color: var(--ink); font: 15px/1.45 "Barlow", system-ui, sans-serif; }

code, pre, kbd { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

a { color: var(--acc); }

h1, h2, h3 { font-weight: 600; line-height: 1.2; }

table { border-collapse: collapse; }

th, td { border-bottom: 1px solid var(--line); padding: .35em .6em; text-align: left; }

th { color: var(--mute); font-weight: 500; }

  /* Report frames (#127): a report's page says how tall it is, and the

     frame grows to fit; the frame is told the theme, at start and on a

     change. Only messages from the frame itself are taken. */

  var frames = document.querySelectorAll("iframe.rep-frame");

  var themeToFrames = function () {

    frames.forEach(function (f) { if (f.contentWindow) f.contentWindow.postMessage({ oxygenhubTheme: document.documentElement.dataset.theme || "dark" }, "*"); });

  };

  if (frames.length) window.addEventListener("message", function (e) {

    frames.forEach(function (f) {

      if (e.source !== f.contentWindow) return;

      var r = e.data && e.data.oxygenhubReport;

      if (!r) return;

      if (r.ready) themeToFrames();

      if (typeof r.height === "number" && r.height > 0) {

        f.style.height = Math.min(Math.max(r.height, 120), 40000) + "px";

        f.classList.add("sized");

      }

    });

  });

      themeToFrames();

    /// `good`, `bad` or `neutral`: its thresholds met, one crossed, or none.

    pub health: &'static str,

    /// What the badge says: "2 thresholds met", "1 over its threshold".

    pub badge: String,

/// The Coverage or Tests entry on the Reports tab: its latest figure.

pub struct Builtin {

    pub big: String,

    pub sub: String,

    pub health: &'static str,

    pub when_ms: i64,

    pub bookmark: String,

}

/// The health and badge of a report from its metrics' thresholds.

fn health_of(metrics: &[MetricView]) -> (&'static str, String) {

    let with = metrics.iter().filter(|m| !m.threshold.is_empty()).count();

    let failing = metrics.iter().filter(|m| m.failing).count();

    match (with, failing) {

        (0, _) => ("neutral", format!("{} metric{}", metrics.len(), if metrics.len() == 1 { "" } else { "s" })),

        (_, 0) => ("good", format!("{with} threshold{} met", if with == 1 { "" } else { "s" })),

        (_, f) => ("bad", format!("{f} over {}", if f == 1 { "its threshold" } else { "their thresholds" })),

    }

}

    coverage: Option<Builtin>,

    tests: Option<Builtin>,

        let metrics = views(&now, &before, &[]);

        let (health, badge) = health_of(&metrics);

        items.push(Item { metrics, report: r, health, badge });

    // Coverage and Tests: their latest, on the default bookmark when it has

    // one, else wherever was newest.

    let pick = |list: Vec<String>| bookmark.clone().or_else(|| list.iter().find(|b| **b == row.default_bookmark).or(list.first()).cloned());

    let coverage = match pick(crate::coverage::bookmarks(&app.db, row.id).await.map_err(e)?).filter(|_| repo.coverage) {

        Some(b) => crate::coverage::on_bookmark(&app.db, row.id, &b, 1).await.map_err(e)?.into_iter().next().map(|c| Builtin {

            big: c.percent().map(|p| format!("{p:.1}%")).unwrap_or_else(|| "–".into()),

            sub: format!("{} of {} lines covered", c.lines_hit, c.lines_found),

            health: match c.percent() {

                Some(p) if p >= 75.0 => "good",

                Some(p) if p < 50.0 => "bad",

                _ => "neutral",

            },

            when_ms: c.created_ms,

            bookmark: c.bookmark.clone(),

        }),

        None => None,

    };

    let tests = match pick(crate::junit::bookmarks(&app.db, row.id).await.map_err(e)?).filter(|_| repo.tests) {

        Some(b) => crate::junit::on_bookmark(&app.db, row.id, &b, 1).await.map_err(e)?.into_iter().next().map(|t| Builtin {

            big: if t.broken() > 0 { format!("{} failing", t.broken()) } else { format!("{} passed", t.passed) },

            sub: t.summary(),

            health: if t.broken() > 0 { "bad" } else { "good" },

            when_ms: t.created_ms,

            bookmark: t.bookmark.clone(),

        }),

        None => None,

    };

    Ok(Page(ReportsPage { shell, coverage, tests, repo, bookmark: bookmark.unwrap_or_default(), items }))

}

/// `page` with the report frame script added (#127).

fn with_frame_script(page: Vec<u8>, version: &str) -> Vec<u8> {

    let tag = format!(r#"<script src="/static/report-frame.js?v={version}"></script>"#);

    let lower = page.to_ascii_lowercase();

    let find = |needle: &[u8]| lower.windows(needle.len()).position(|w| w == needle);

    let at = find(b"</head>").or_else(|| find(b"<body")).unwrap_or(page.len());

    let mut out = Vec::with_capacity(page.len() + tag.len());

    out.extend_from_slice(&page[..at]);

    out.extend_from_slice(tag.as_bytes());

    out.extend_from_slice(&page[at..]);

    out

    // A page gets the frame script, which sizes the frame to it and passes

    // the hub's theme on: before </head>, else <body>, else at the end.

    let bytes =

        if content_type(&path).starts_with("text/html") { with_frame_script(bytes, super::statics::assets_version()) } else { bytes };

        let page = with_frame_script(b"<!doctype html><html><HEAD><title>t</title></HEAD><body>x</body></html>".to_vec(), "v1");

        let page = String::from_utf8(page).unwrap();

        assert!(page.starts_with("<!doctype html>"), "the doctype stays first");

        assert!(page.contains(r#"<script src="/static/report-frame.js?v=v1"></script></HEAD>"#), "{page}");

        let bare = String::from_utf8(with_frame_script(b"<p>hi</p>".to_vec(), "v1")).unwrap();

        assert!(bare.ends_with("</script>"), "{bare}");

        for a in ASSETS.iter().filter(|a| matches!(a.path, "github.css" | "hub.js" | "report-frame.js" | "report.css")) {

    // For report frames (#127): the size and theme bridge the hub adds to

    // a report's pages, and the stylesheet a report may link.

    Asset { path: "report-frame.js", mime: "text/javascript; charset=utf-8", bytes: include_bytes!("../../../../assets/report-frame.js") },

    Asset { path: "report.css", mime: "text/css; charset=utf-8", bytes: include_bytes!("../../../../assets/report.css") },

        // Readable across origins: a report's sandboxed frame has an

        // opaque origin, and loads fonts in CORS mode (#127).

        Some(a) => (

            [

                (header::CONTENT_TYPE, a.mime),

                (header::CACHE_CONTROL, "public, max-age=31536000, immutable"),

                (header::ACCESS_CONTROL_ALLOW_ORIGIN, "*"),

            ],

            a.bytes,

        )

            .into_response(),

    // The page as kept, with the frame script that sizes the frame added.

    let served = res.into_body().collect().await.unwrap().to_bytes().to_vec();

    assert!(served.starts_with(&page_bytes), "the report's page");

    assert!(String::from_utf8_lossy(&served).contains("/static/report-frame.js"), "with the frame script");

    let (st, _) = get_bytes(&h.app, "/static/report.css").await;

    assert_eq!(st, StatusCode::OK, "the stylesheet a report may link");

### Fitting the hub

- **Height:** the hub adds a small script to a report's HTML pages

  (`/static/report-frame.js`) that tells the page around the frame how

  tall the report is, so the frame grows to fit and the report never

  scrolls inside it. Lay the page out by its content: nothing sized to the

  viewport (`100vh`, `height: 100%` on `html`/`body`), or it grows with

  the frame.

- **Look:** link the hub's stylesheet, and drop any fonts or colours of the

  report's own:

  ```html

  <link rel="stylesheet" href="/static/report.css">

  ```

  It sets the hub's fonts and colour tokens (`--bg`, `--panel`, `--soft`,

  `--ink`, `--mute`, `--line`, `--acc`, `--ok`, `--bad`, `--warn`,

  `--m1`..`--m5` for series), dark or light as the hub is, switching when

  the viewer switches. Charts read them with

  `getComputedStyle(document.documentElement).getPropertyValue("--m1")`

  and redraw on a `data-theme` change if they cache colours.

{% macro icon(kind) %}<span class="rep-icon rep-{{ kind }}" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{% if kind == "performance" %}<path d="M4 17a8 8 0 1 1 16 0"/><path d="M12 17l4.5-6"/><circle cx="12" cy="17" r="1.2" fill="currentColor"/>{% else if kind == "coverage" %}<path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M8.5 12l2.5 2.5 4.5-5"/>{% else if kind == "tests" %}<path d="M9 3h6"/><path d="M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3"/><path d="M7.5 15h9"/>{% else %}<path d="M5 20V11"/><path d="M12 20V4"/><path d="M19 20v-6"/>{% endif %}</svg></span>{% endmacro %}

<div class="rep-top">

  <h1>Reports</h1>

  <p class="mute small">What this repository's Flow jobs measure, newest run first{% if !bookmark.is_empty() %}, on <strong>{{ bookmark }}</strong> (<a href="{{ repo.url }}/reports">all bookmarks</a>){% endif %}. Changes are against the run before on the same bookmark.</p>

</div>

  <article class="rep-card rep-{{ i.health }}">

      {% call icon(i.report.kind) %}

      <div class="rep-name">

        <a class="rep-link" href="{{ repo.url }}/reports/{{ i.report.name }}?id={{ i.report.id }}">{{ i.report.title }}</a>

        <span class="rep-kindname">{{ i.report.kind }}</span>

      </div>

      <span class="rep-badge">{% if i.health == "good" %}✓ {% else if i.health == "bad" %}✗ {% endif %}{{ i.badge }}</span>

    {% if !i.metrics.is_empty() %}<ul class="rep-tiles">{% for v in i.metrics %}<li class="{% if v.failing %}rep-failing{% endif %}"><span class="v">{{ v.value }}{% if !v.unit.is_empty() %}<small> {{ v.unit }}</small>{% endif %}</span><span class="k">{{ v.key }}</span>{% if !v.delta.is_empty() %}<span class="rep-delta {{ v.trend }}">{{ v.delta }}</span>{% endif %}</li>{% endfor %}</ul>{% endif %}

    <div class="rep-foot">{% if !i.report.bookmark.is_empty() %}<span class="lbl lbl-bm">{{ i.report.bookmark }}</span>{% endif %}{% if let Some(n) = i.report.run_number %} run #{{ n }} ·{% endif %} {{ i.report.job }} · <time title="{{ i.report.created_ms|when_i }}">{{ i.report.created_ms|ago_i }}</time></div>

  </article>

{% if let Some(c) = coverage %}

  <article class="rep-card rep-{{ c.health }}">

    <div class="rep-head">

      {% call icon("coverage") %}

      <div class="rep-name"><a class="rep-link" href="{{ repo.url }}/coverage">Coverage</a><span class="rep-kindname">coverage</span></div>

    </div>

    <div class="rep-hero"><span class="rep-big">{{ c.big }}</span><span class="mute">{{ c.sub }}</span></div>

    <div class="rep-foot"><span class="lbl lbl-bm">{{ c.bookmark }}</span> from the jobs' <code>coverage</code> artifacts · <time title="{{ c.when_ms|when_i }}">{{ c.when_ms|ago_i }}</time></div>

  </article>

{% if let Some(t) = tests %}

  <article class="rep-card rep-{{ t.health }}">

    <div class="rep-head">

      {% call icon("tests") %}

      <div class="rep-name"><a class="rep-link" href="{{ repo.url }}/tests">Tests</a><span class="rep-kindname">tests</span></div>

    </div>

    <div class="rep-hero"><span class="rep-big">{{ t.big }}</span><span class="mute">{{ t.sub }}</span></div>

    <div class="rep-foot"><span class="lbl lbl-bm">{{ t.bookmark }}</span> from the jobs' <code>junit</code> artifacts · <time title="{{ t.when_ms|when_i }}">{{ t.when_ms|ago_i }}</time></div>

  </article>

{% if items.is_empty() && coverage.is_none() && tests.is_none() %}<p class="empty">No reports yet. A Flow job keeps one with <code>report "NAME" { path "/src/out/report" }</code> in its output; see the OxygenFlow wiki's Reports page.</p>{% endif %}

.rep-top h1 { margin-bottom: .2em; }

.rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); gap: 1em; margin-top: 1.2em; }

.rep-card { --tone: var(--mute); position: relative; display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1.2em 1em; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: 12px;

  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, var(--panel)), var(--panel) 70%); transition: border-color .15s, transform .15s, box-shadow .15s; }

.rep-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 18%, transparent); border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); }

.rep-card.rep-good { --tone: var(--ok); } .rep-card.rep-bad { --tone: var(--bad); } .rep-card.rep-neutral { --tone: var(--acc); }

.rep-head { display: flex; align-items: center; gap: .7em; }

.rep-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--kind); background: color-mix(in srgb, var(--kind) 14%, transparent); }

.rep-icon.rep-performance { --kind: var(--acc); } .rep-icon.rep-coverage { --kind: var(--ok); } .rep-icon.rep-tests { --kind: var(--warn); } .rep-icon.rep-custom { --kind: var(--mute); }

.rep-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.rep-link { color: var(--ink); font-weight: 600; font-size: 1.08em; }

.rep-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }

.rep-kindname { color: var(--mute); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; }

.rep-badge { flex: none; font-size: .8em; font-weight: 600; padding: .2em .65em; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }

.rep-summary { margin: 0; color: var(--ink); }

.rep-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }

.rep-tiles li { display: flex; flex-direction: column; padding: .5em .65em; border-radius: 8px; background: var(--soft); min-width: 0; }

.rep-tiles .v { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }

.rep-tiles .v small { font-weight: 400; color: var(--mute); font-size: .7em; }

.rep-tiles .k { font-size: .78em; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rep-tiles li.rep-failing { box-shadow: inset 3px 0 0 var(--bad); }

.rep-hero { display: flex; flex-direction: column; gap: .1em; }

.rep-big { font-size: 2em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tone); line-height: 1.1; }

.rep-foot { margin-top: auto; font-size: .82em; color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }

.rep-delta { font-size: .8em; font-weight: 600; font-variant-numeric: tabular-nums; }

.rep-frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }

.rep-frame.sized { overflow: hidden; }