Skip to content

docs: add the public testing dashboard page #3846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OlufemiAdeOlusile wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: add the public testing dashboard page #3846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src_docs/source/conf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
"223086153-522289f3-9902-4f63-ad7b-a7d9c5789db0.png"
)

html_extra_path = ["CNAME"]
# Copied as is into the site root, so the dashboard page is served at /dashboard/.
html_extra_path = ["CNAME", "extra"]

# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
Expand Down
195 changes: 195 additions & 0 deletions src_docs/source/extra/dashboard/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
/* Layout: three columns on wide screens. Left rail = filters and test-run list (sticky), centre = volume tiles and trend charts, right rail = impact (issues), releases tested, notes. Stacks on narrow screens. No status colours: the page shows volume and impact only. */
:root {
--bg: #f3f5f8;
--panel: #ffffff;
--rail: #eef1f5;
--fg: #182230;
--muted: #5a6577;
--line: #dfe4eb;
--accent: #2a55c9;
--upgrade: #7a4cc2;
--teal: #12857a;
--amber: #b26a00;
--soft: #e8eefc;
--note-bg: #fff6e0;
--note-fg: #6b4e00;
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0f131a; --panel: #18202a; --rail: #141a23; --fg: #e5e9f0; --muted: #98a2b3; --line: #2a3340;
--accent: #7d9bff; --upgrade: #b38cf0; --teal: #4cc7b8; --amber: #f0b454; --soft: #1d2a48;
--note-bg: #2e2612; --note-fg: #f0d58a; color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0f131a; --panel: #18202a; --rail: #141a23; --fg: #e5e9f0; --muted: #98a2b3; --line: #2a3340;
--accent: #7d9bff; --upgrade: #b38cf0; --teal: #4cc7b8; --amber: #f0b454; --soft: #1d2a48;
--note-bg: #2e2612; --note-fg: #f0d58a; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--font-ui); }

.shell {
display: grid;
grid-template-columns: 250px minmax(0, 1fr) 300px;
grid-template-areas: "left main right";
gap: 20px;
max-width: 1640px;
margin: 0 auto;
padding-inline: 16px;
padding-block: 16px 32px;
align-items: start;
}
.left { grid-area: left; }
.main { grid-area: main; display: grid; gap: 16px; min-width: 0; }
.right { grid-area: right; display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1240px) {
.shell { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "left main" "left right"; }
.right { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 820px) {
.shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "main" "right"; }
.left { position: static !important; max-height: none !important; }
}

/* Left rail */
.left {
position: sticky;
top: calc(env(safe-area-inset-top, 0px) + 16px);
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--rail);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
display: grid;
gap: 18px;
}
.brand { display: grid; gap: 2px; }
.brand b { font-size: 16px; }
.brand span { color: var(--muted); font-size: 12px; }
.ctl { display: grid; gap: 6px; }
.ctl-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); }
.seg button { font: inherit; font-size: 13px; color: var(--fg); background: transparent; border: 0; border-right: 1px solid var(--line); padding: 6px 4px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
/* Five buttons on two full rows: three across, then two across. */
.seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg.wrap button { white-space: nowrap; grid-column: span 2; }
.seg.wrap button:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--line); }
.seg.wrap button:nth-child(3) { border-right: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.runlist { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.runlist button {
width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center;
font: inherit; font-size: 14px; color: var(--fg); background: transparent; border: 0; border-radius: 6px;
padding: 6px 8px; cursor: pointer; text-align: left;
}
.runlist button:hover { background: var(--panel); }
.runlist button[aria-pressed="true"] { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); }
.runlist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runlist .ct { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kind { width: 8px; height: 8px; border-radius: 2px; background: var(--muted); }
.kind.regression { background: var(--accent); }
.kind.upgrade { background: var(--upgrade); }
.kind.node-sync { background: var(--teal); }
.kind.db-sync { background: var(--amber); }
.kind.local { background: transparent; border: 1.5px dashed var(--muted); }

/* Main */
.head h1 { margin: 0; font-size: 26px; letter-spacing: -0.01em; text-wrap: balance; }
.head p { margin: 4px 0 0; color: var(--muted); }
h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
@media (max-width: 700px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero .label { color: var(--muted); }
.hero .value { font-size: 34px; font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.tile { padding: 14px 16px; }
.panel { padding: 16px; }
.label { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.value { display: block; font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hint { display: block; color: var(--muted); font-size: 12px; }
.hint.all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--fg); }
.about-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .about-tests { grid-template-columns: minmax(0, 1fr); } }
.about-tests p { margin: 0; font-size: 14px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .row2 { grid-template-columns: 1fr; } }
svg { display: block; width: 100%; height: auto; }
.axis { stroke: var(--line); }
.grid { stroke: var(--line); stroke-dasharray: 2 3; }
.tick { fill: var(--muted); font: 11px var(--font-ui); }
.regression { fill: var(--accent); background: var(--accent); }
.upgrade { fill: var(--upgrade); background: var(--upgrade); }
.node-sync { fill: var(--teal); background: var(--teal); }
.db-sync { fill: var(--amber); background: var(--amber); }
.tests { fill: var(--teal); background: var(--teal); }
.area { fill: var(--teal); fill-opacity: 0.16; }
.lineS { fill: none; stroke: var(--teal); stroke-width: 2.2; }
.lineA { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.endpt { fill: var(--teal); }
.endptA { fill: var(--accent); }
.empty { fill: var(--muted); font: 13px var(--font-ui); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 8px; padding: 0; color: var(--muted); font-size: 13px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--font-num); font-size: 13px; }
td.none { color: var(--muted); text-align: center; padding: 18px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.t-regression { border-color: var(--accent); color: var(--accent); }
.tag.t-upgrade { border-color: var(--upgrade); color: var(--upgrade); }
.tag.t-node-sync { border-color: var(--teal); color: var(--teal); }
.tag.t-db-sync { border-color: var(--amber); color: var(--amber); }
.tag.release { border-color: var(--fg); color: var(--fg); margin-left: 6px; }
.tag.local { border-style: dashed; margin-left: 6px; }
.steps { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* Right rail */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.card h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.impact-panel { display: grid; gap: 14px; border-left: 4px solid var(--teal); }
.impact-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.impact-head h2 { margin: 0; font-size: 17px; }
.impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.impact div { display: grid; gap: 2px; }
.impact b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--teal); }
.impact span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.comps li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 13px; }
.comps .bar { display: block; height: 10px; border-radius: 3px; background: var(--teal); }
.comps .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.issue-link { color: var(--fg); text-decoration: none; }
.issue-link:hover { text-decoration: underline; }
.issue-link .ref { color: var(--muted); font-family: var(--font-num); font-size: 12px; margin-right: 6px; }
.tag.t-bug { border-color: var(--teal); color: var(--teal); }
.state { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.state.resolved { border-color: var(--teal); color: var(--teal); }
.releases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.releases li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.releases .sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.about dl { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.about dt { font-weight: 600; }
.about dd { margin: 0; color: var(--muted); }
.about a { color: var(--accent); }
.foot { color: var(--muted); font-size: 12px; margin: 0; }
[hidden] { display: none !important; }
.stale { color: var(--muted); }

/* Sync tests panel */
.sync-tiles { margin: 12px 0; }
.sync-ctl { max-width: 420px; margin: 0 0 12px; }
.sync-charts { margin-bottom: 0; }
.mainnet { fill: var(--accent); background: var(--accent); }
.preview { fill: var(--teal); background: var(--teal); }
.preprod { fill: var(--upgrade); background: var(--upgrade); }
Loading
Loading