Skip to content

feat(bigquery): add UI module for BigQuery query topology details#599

Draft
fdelbrayelle wants to merge 20 commits intomainfrom
feat/bigquery-query-topology-details-2
Draft

feat(bigquery): add UI module for BigQuery query topology details#599
fdelbrayelle wants to merge 20 commits intomainfrom
feat/bigquery-query-topology-details-2

Conversation

@fdelbrayelle
Copy link
Copy Markdown
Member

@fdelbrayelle fdelbrayelle commented Apr 14, 2026

⚠️ To be merged with 2.0.0 even if doesn't need kestraVersion=2.0.0 because for outputs it relies on what the kestra app (host) sends through Module Federation here and outputs are not anymore on executions in 2.0.0

Summary

  • Add a Vue.js BigqueryQueryTopologyDetails UI component for visualizing BigQuery query topology details
  • Add Storybook setup for the UI module
  • Integrate UI build into Gradle via the Node Gradle plugin (buildUI task runs before processResources and shadowJar)

Closes kestra-io/kestra#15493

Add a Vue.js UI component (BigqueryQueryTopologyDetails) with Storybook setup and Gradle build integration via Node Gradle plugin.
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 14, 2026

🧪 Java Unit Tests

TestsPassed ✅Skipped ⚠️FailedTime ⏱
Java Tests Report117 ran107 ✅10 ⚠️0 ❌6m 46s 856ms

📦 Artifacts

Name Size Updated Expiration
jar 108.55 MB Apr 21, 26, 2:29:13 PM UTC Apr 28, 26, 2:29:09 PM UTC

🛡 Trivy

Vulnerability in: Java

Vulnerability Severity Package Installed Version Fixed Version
GHSA-72hv-8253-57qq MEDIUM com.fasterxml.jackson.core:jackson-core 2.20.1 2.21.1, 2.18.6

🔁 Unreleased Commits

3 commits since v2.2.0

SHA Title Author Date
4fa4ff3 docs: add/update AGENTS.md with clear Why/What François Delbrayelle Apr 18, 26, 7:07:31 AM UTC
044d7b4 docs: rewrite AGENTS.md Why section François Delbrayelle Apr 19, 26, 7:46:28 AM UTC
8eebb99 docs: normalize README with Why and What François Delbrayelle Apr 19, 26, 8:06:11 AM UTC

- Read task outputs from taskRunList directly instead of a broken API fetch
- Show Job Details section whenever an execution exists (not only when outputs non-null)
- Reduce padding, font sizes, and grid gaps for a more compact display
…on from job ID

- Fetch /api/v1/executions/{id} to get task run outputs (props.execution may be lightweight)
- Parse project and location from job ID (format: project:location.jobname) as fallback
- Add temporary debug panel to inspect raw props data
…ocation)

props.task only contains id+type; fetch /api/v1/flows/{ns}/{id} to get full
task config including projectId and location. Also update debug panel to show
flowTask and fetchedOutputs for diagnosis.
…etches

Extract tenant from window.location (/ui/{tenant}/...) so that
/api/v1/{tenant}/flows and /api/v1/{tenant}/executions calls succeed.
Also removes the debug panel.
Adds a `customAction` entry to the BigQuery.Query topology-details
manifest so the host app renders an eye button on the node. Clicking it
opens a drawer showing the raw SQL in a read-only code editor.
@fdelbrayelle fdelbrayelle self-assigned this Apr 14, 2026
…pse toggle

Show only Duration, Bytes billed and Cache hit by default (collapsed).
A 'Show more ↓' button expands to the full Job Details + Cost &
Performance sections; 'Show less ↑' collapses back.

Also update heightWithExecution from 320 to 180 to match the collapsed
node height (108px base + 3 compact rows + toggle button).
…d layout gap

320px caused a large empty gap on first load (plugin loads async, VueFlow
had already reserved 320px before content appeared). 200px matches the
collapsed content height (~192px), reducing the initial gap from 276px to
just the async-load window. Expanded content overflows the layout box but
renders above the canvas via z-index.
Add language hints for the Monaco editor on all code-bearing fields:
- SQL on BigQuery Query, Trigger, ViewDefinition, MaterializedViewDefinition
- JavaScript on BigQuery UserDefinedFunction content
- Shell on GCloudCLI commands
…notations

Reverts the language attribute additions from commit 78b27ec — MonacoLanguages
is not yet available in the target kestra-core version.
Add element-plus dependency and rework BigqueryQueryTopologyDetails to use
el-popover for displaying metrics. Shrink heightWithExecution to 165px since
the popover teleports to <body> and no longer affects node height.
…topology node

- Merge Project/Location and Duration/Estimated Cost into a single unified
  grid so all four values align to the same column
- Removes the section gap between Location and Duration rows
- Reduce base font-size from 0.75rem → 0.7rem and line-height 1.5 → 1.4
- Move all execution output details (Job Details, Cost & Performance) to
  the Show SQL drawer via displayMode="full" detection; remove Details popover
Copy link
Copy Markdown

@elevatebart elevatebart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The outputs will not work anymore in 2.0.
I would rather you use the task as a prop as much as you can.

Good job either way

💪

Comment thread ui/src/components/BigqueryQueryTopologyDetails.vue Outdated
Comment thread ui/src/components/BigqueryQueryTopologyDetails.vue Outdated
Comment thread ui/src/components/BigqueryQueryTopologyDetails.vue Outdated
Per reviewer feedback on PR #599: eliminate all direct Kestra API calls
from BigqueryQueryTopologyDetails and instead accept outputs and metrics
as props from the host app, ensuring Kestra 2.0 compatibility.
…o 135

The forced height (165px) was larger than the actual rendered content
(~130px), creating ~35px of dead space between the card's bottom border
and the dashed connector line. Reduced to 135px to close the gap.
@fdelbrayelle fdelbrayelle marked this pull request as draft April 16, 2026 14:19
@fdelbrayelle fdelbrayelle added the kind/do-not-merge Don't merge label Apr 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

plugin-gcp - BigQuery Query topology details — SQL viewer + post-execution cost stats

2 participants