e14887164b
Mara on PR#3315: "shouldnt the pattern be that the old dashboard has a dep on preact and has a preact instance running for the jobq view? then we could get rid of a lot of extra plumbing" - right: the plain h() authoring existed only to dodge adding JSX support to the dashboard's esbuild config, and that dodge is exactly the plumbing to remove now that the dashboard already depends on preact. - JobqGraph.js -> JobqGraph.jsx, rewritten in real JSX. - dashboard/build.mjs: added jsx: 'automatic', jsxImportSource: 'preact' to the JS-bundle esbuild call (esbuild already picks the jsx loader for .jsx by extension; this just sets the transform mode, matching swarm-ui's config). No other entry in that bundle uses JSX today. - shared/package.json: export target updated to the .jsx file. The CSS-as-page-level-@import structure is unchanged and stays that way regardless of JSX: dashboard bundles this component transitively through one esbuild call whose .css loader is 'text' (for the shadow-DOM components that need their CSS as a literal string), and esbuild's loader map is global per call, not per-module - importing CSS from this component would silently pick up that loader too. Explained in the file's own top comment. Verified: npm run build (whole workspace) and npm run typecheck (swarm-ui) clean. Re-ran the same headless-chromium screenshot against a mock GET /api/jobq/graph payload as the previous verification - pixel-identical to the h()-based version, confirming this is a pure authoring-style refactor with no behavior change.
133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
/* jobq-graph.css — styles for the `JobqGraph` Preact component
|
|
(`./JobqGraph.jsx`), rendered into light DOM under `.jg-root`.
|
|
`@import` this from a page-level CSS file (dashboard) or a
|
|
component-level one (swarm-ui), matching how every other
|
|
`@hive/shared` stylesheet is consumed — see JobqGraph.jsx's top comment
|
|
for why this file is never imported from JS. Theme custom properties
|
|
(--fg, --red, ...) are plain inherited custom properties here, same as
|
|
any other light-DOM rule. */
|
|
|
|
.jg-root {
|
|
display: block;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.jg-filter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.15em 0.9em;
|
|
margin: 0 0 0.5em;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.jg-filter-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3em;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.jg-filter-label:has(input:checked) {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.jg-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15em;
|
|
}
|
|
|
|
.jg-node {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Nested groups indent + get a guide line, rather than a hand-rolled
|
|
connector-glyph tree — cheaper to build and reads fine at any depth. */
|
|
.jg-node .jg-node {
|
|
margin-left: 1.1em;
|
|
padding-left: 0.6em;
|
|
border-left: 1px solid var(--muted);
|
|
margin-top: 0.15em;
|
|
}
|
|
|
|
.jg-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.35em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.jg-state {
|
|
font-weight: bold;
|
|
min-width: 1.2em;
|
|
text-align: center;
|
|
}
|
|
.jg-state-pending { color: var(--muted); }
|
|
.jg-state-running { color: var(--cyan); }
|
|
.jg-state-finishing { color: var(--cyan); opacity: 0.75; }
|
|
.jg-state-done { color: var(--green); }
|
|
.jg-state-failed { color: var(--red); }
|
|
.jg-state-cancelled { color: var(--muted); text-decoration: line-through; }
|
|
.jg-state-skipped { color: var(--muted); opacity: 0.5; }
|
|
|
|
.jg-label {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.jg-cancel-btn {
|
|
margin-left: auto;
|
|
background: transparent;
|
|
border: 1px solid var(--muted);
|
|
color: var(--muted);
|
|
border-radius: 999px;
|
|
width: 1.4em;
|
|
height: 1.4em;
|
|
font-size: 0.8em;
|
|
line-height: 1;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
.jg-cancel-btn:hover,
|
|
.jg-cancel-btn:focus-visible {
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
outline: none;
|
|
}
|
|
|
|
.jg-data {
|
|
margin: 0.1em 0 0 1.6em;
|
|
font-size: 0.85em;
|
|
color: var(--muted);
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 0 0.5em;
|
|
}
|
|
.jg-data dt { font-weight: 600; }
|
|
.jg-data dd { margin: 0; word-break: break-word; }
|
|
|
|
.jg-waits-on {
|
|
margin: 0.1em 0 0 1.6em;
|
|
font-size: 0.85em;
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.jg-error {
|
|
color: var(--red);
|
|
font-size: 0.85em;
|
|
margin: 0.2em 0 0.2em 1.6em;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.jg-empty,
|
|
.jg-error-msg {
|
|
color: var(--muted);
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|