From 953d31750534a653ba5746d1806afd75d1edb904 Mon Sep 17 00:00:00 2001 From: Stuart Axelbrooke Date: Wed, 16 Jul 2025 22:29:53 -0700 Subject: [PATCH] Implement mermaid charts --- databuild/dashboard/index.html | 6 ++++++ databuild/dashboard/pages.ts | 25 +++++++++++++++++++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/databuild/dashboard/index.html b/databuild/dashboard/index.html index 3d9f871..543eb5a 100644 --- a/databuild/dashboard/index.html +++ b/databuild/dashboard/index.html @@ -6,6 +6,12 @@ DataBuild Dashboard +
diff --git a/databuild/dashboard/pages.ts b/databuild/dashboard/pages.ts index 8e1d512..8400400 100644 --- a/databuild/dashboard/pages.ts +++ b/databuild/dashboard/pages.ts @@ -309,6 +309,7 @@ export const BuildStatus = { const partition_status = await apiClient.apiV1PartitionsRefStatusGet({ ref: partition_ref }); + console.log(`Loaded status for partition ${partition_ref}:`, partition_status); this.partitionStatuses.set(partition_ref, partition_status); } catch (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 { - console.warn("event", event, event.event_type); switch (event.event_type) { case 'job': if (event.job_label) { @@ -372,7 +372,16 @@ export const BuildStatus = { return null; } }, - + + oncreate() { + (window as any).mermaid.init(); + }, + + onupdate() { + (window as any).mermaid.init(); + }, + + view() { // Loading/error states similar to RecentActivity component if (this.loading && !this.data) { @@ -424,11 +433,20 @@ export const BuildStatus = { ]), 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('.card-body', [ 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', - this.data.requestedPartitions?.map((partitionRef: string) => { + this.data.requested_partitions?.map((partitionRef: string) => { const status = this.partitionStatuses.get(partitionRef); 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', { @@ -477,7 +495,6 @@ export const BuildStatus = { m('td', [ (() => { const link = this.getEventLink(event); - console.warn("link", link); return link ? m(m.route.Link, { href: link.href,