1111577c91
New @hive/shared/jobq-rollup.js (JobqRollup.tsx + jobq-rollup.css), mirroring JobqGraph's shape exactly: JSX use plus an imperative mountJobqRollup(container, props) for a plain-.js call site. Fetches Vec<hive_jobq_wire::StateCount> off `endpoint`, sums Running+Finishing roots as "running" and Pending roots as "queued", renders nothing when both are zero. Optional `queueHref` adds a "view queue -> " link. Swapped dashboard's hand-rolled queue-summary banner (swarm.js) over to this component instead of keeping two parallel implementations - same "one shared component" pattern JobqGraph already set for the rebuild queue tree view. Mounted once into a new #jobq-rollup-section, kept as a sibling of (not inside) #containers-section since that section gets replaceChildren()-wiped on every container-state render, which would tear down and remount a Preact tree on every tick. Refreshed via the mount handle's .refresh() on rebuild_queue_changed, same as builds.js's JobqGraph handle. Also mounted in swarm-ui's /jobs page, above JobqGraph, with no queueHref (a link back to the page you're already on is noise) - the literal ask on hyperhive#3364. Verified: npm run build (whole workspace) and swarm-ui typecheck both clean, comment-block + issue-ref lints run manually, headless-chromium screenshots of both the dashboard SW4RM tab and swarm-ui's /jobs page against mocked /api/jobq/rollup payloads - banner renders identically in both, with and without the queue link as expected.
25 lines
805 B
CSS
25 lines
805 B
CSS
/* JobqRollup.tsx styles — light DOM, `.jqr-*` prefixed to avoid
|
|
colliding with a host page's own classes (same convention
|
|
jobq-graph.css uses with `.jg-*`). Amber to match the in-progress /
|
|
"rebuilding" card tint dashboard.css already uses elsewhere. */
|
|
.jqr-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4em;
|
|
flex-wrap: wrap;
|
|
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
|
|
color: var(--amber);
|
|
padding: 0.45em 0.8em;
|
|
margin-bottom: 0.6em;
|
|
border-radius: 4px;
|
|
}
|
|
.jqr-summary strong { color: var(--amber); }
|
|
.jqr-link {
|
|
margin-left: auto;
|
|
color: var(--amber);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
.jqr-link:hover { text-decoration: underline; }
|