stuart/databuild
1
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Implement mermaid charts
Some checks are pending
/ setup (push) Waiting to run
Details

Browse source
This commit is contained in:
Stuart Axelbrooke 2025-07-16 22:29:53 -07:00
parent 45433da0b8
commit 953d317505
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
databuild/dashboard/index.html
View file

@ -6,6 +6,12 @@
<title>DataBuild Dashboard</title> <title>DataBuild Dashboard</title>
<link href="/static/dist.css" rel="stylesheet"> <link href="/static/dist.css" rel="stylesheet">
<script src="/static/app_dist.js"></script> <script src="/static/app_dist.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
window.mermaid = mermaid;
mermaid.initialize({ startOnLoad: true });
console.info("mermaid loaded", mermaid);
</script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">

25
databuild/dashboard/pages.ts
View file

@ -309,6 +309,7 @@ export const BuildStatus = {
const partition_status = await apiClient.apiV1PartitionsRefStatusGet({ const partition_status = await apiClient.apiV1PartitionsRefStatusGet({
ref: partition_ref ref: partition_ref
}); });
console.log(`Loaded status for partition ${partition_ref}:`, partition_status);
this.partitionStatuses.set(partition_ref, partition_status); this.partitionStatuses.set(partition_ref, partition_status);
} catch (e) { } catch (e) {
console.warn(`Failed to load status for partition ${partition_ref}:`, e); console.warn(`Failed to load status for partition ${partition_ref}:`, e);
@ -339,7 +340,6 @@ export const BuildStatus = {
getEventLink(event: any): { href: string; text: string } | null { getEventLink(event: any): { href: string; text: string } | null {
console.warn("event", event, event.event_type);
switch (event.event_type) { switch (event.event_type) {
case 'job': case 'job':
if (event.job_label) { if (event.job_label) {
@ -372,7 +372,16 @@ export const BuildStatus = {
return null; return null;
} }
}, },
oncreate() {
(window as any).mermaid.init();
},
onupdate() {
(window as any).mermaid.init();
},
view() { view() {
// Loading/error states similar to RecentActivity component // Loading/error states similar to RecentActivity component
if (this.loading && !this.data) { if (this.loading && !this.data) {
@ -424,11 +433,20 @@ export const BuildStatus = {
]), ]),
m('.build-content.space-y-6', [ m('.build-content.space-y-6', [
m('.build-graph.card.bg-base-100.shadow-xl', [
m('.card-body', [
m('h2.card-title.text-xl.mb-4', 'Build Graph'),
m('div#build-graph', [
m("pre.mermaid", this.data.mermaid_diagram),
]),
]),
]),
m('.partition-status.card.bg-base-100.shadow-xl', [ m('.partition-status.card.bg-base-100.shadow-xl', [
m('.card-body', [ m('.card-body', [
m('h2.card-title.text-xl.mb-4', 'Partition Status'), m('h2.card-title.text-xl.mb-4', 'Partition Status'),
m('.partition-grid.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-3', m('.partition-grid.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-3',
this.data.requestedPartitions?.map((partitionRef: string) => { this.data.requested_partitions?.map((partitionRef: string) => {
const status = this.partitionStatuses.get(partitionRef); const status = this.partitionStatuses.get(partitionRef);
return m('.partition-card.border.border-base-300.rounded.p-3', [ return m('.partition-card.border.border-base-300.rounded.p-3', [
m('a.partition-ref.font-mono.text-sm.break-all.mb-2.link.link-primary', { m('a.partition-ref.font-mono.text-sm.break-all.mb-2.link.link-primary', {
@ -477,7 +495,6 @@ export const BuildStatus = {
m('td', [ m('td', [
(() => { (() => {
const link = this.getEventLink(event); const link = this.getEventLink(event);
console.warn("link", link);
return link ? return link ?
m(m.route.Link, { m(m.route.Link, {
href: link.href, href: link.href,