feat(bigquery): add UI module for BigQuery query topology details#599
Draft
fdelbrayelle wants to merge 20 commits intomainfrom
Draft
feat(bigquery): add UI module for BigQuery query topology details#599fdelbrayelle wants to merge 20 commits intomainfrom
fdelbrayelle wants to merge 20 commits intomainfrom
Conversation
Add a Vue.js UI component (BigqueryQueryTopologyDetails) with Storybook setup and Gradle build integration via Node Gradle plugin.
Contributor
🧪 Java Unit Tests
📦 Artifacts
🛡 TrivyVulnerability in:
|
| 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.
…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
elevatebart
requested changes
Apr 14, 2026
elevatebart
left a comment
There was a problem hiding this comment.
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
💪
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
kestraVersion=2.0.0because 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.0Summary
BigqueryQueryTopologyDetailsUI component for visualizing BigQuery query topology detailsbuildUItask runs beforeprocessResourcesandshadowJar)Closes kestra-io/kestra#15493