[SPARK-56809][UI] Show SQL description and metadata on the execution detail page#55861
Closed
yaooqinn wants to merge 2 commits into
Closed
[SPARK-56809][UI] Show SQL description and metadata on the execution detail page#55861yaooqinn wants to merge 2 commits into
yaooqinn wants to merge 2 commits into
Conversation
…detail page ### What changes were proposed in this pull request? Render the SQL execution detail page header as a single-row DataTable that reuses the same column rendering as the SQL listing page. The summary at the top of `/SQL/execution/?id=N` now shows ID, Query ID, Status, Description, Submitted, Duration, Succeeded Jobs and Error Message in the same shape as the listing page. To avoid duplicating column logic, the shared helpers, the appId resolver, the API base builder and the column factory are extracted into a new `sql-table-utils.js`, sourced by both `AllExecutionsPage` and `ExecutionPage`. The detail-page mode of the column factory (i) skips truncation and self-links, (ii) renders Description / Error Message as `<pre class="sql-cell-pre">` so SQL formatting is preserved, and (iii) wraps long or multi-line values in a native `<details>/<summary>` disclosure so the cells start collapsed and stay compact. Parent / Sub Execution links remain on the detail page but move under the new summary table as a small `text-muted` line, only when applicable. ### Why are the changes needed? The detail page only showed an unstructured `<ul>` summary, with no description or query id. Users had to bounce back to the listing page to see what a query was. Reusing the listing-page columns gives a consistent, scannable header on every execution detail page and avoids two parallel renderers drifting over time. ### Does this PR introduce _any_ user-facing change? Yes, the SQL execution detail page header is restyled. The list of metadata fields rendered there is the union of what the listing page already shows; long descriptions and error messages can be expanded inline with the disclosure triangle. ### How was this patch tested? - `build/sbt sql/scalastyle` — clean - `dev/lint-js` — clean - `build/sbt 'sql/testOnly *AllExecutionsPageWithInMemoryStoreSuite'` — 5 / 5 passed; assertion added that the new `sql-table-utils.js` script tag is rendered into the listing page. - Manual browser verification on a local Spark UI: short single-line descriptions render as plain `<pre>`; multi-line / long descriptions and long error messages render as a collapsed `<details>` with a one-line summary; the SQL listing page is unchanged. ### Was this patch authored or co-authored using generative AI tooling? Generated-by: GitHub Copilot CLI 1.0.47 with Claude Opus 4.7 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
ScreenshotsMulti-line description (id=1, CTE) — collapsed by default
Same execution, expanded with the disclosure triangle
Failed execution (id=7) — short description rendered plain, long error collapsed
Same failed execution, error expanded
Short description (id=0) renders as plain
|
sarutak
reviewed
May 14, 2026
Member
sarutak
left a comment
sarutak
left a comment
There was a problem hiding this comment.
Left one minor comment, otherwise LGTM.
| subExecutions.map { e => | ||
| <a href={"?id=" + e.executionId}>{e.executionId}</a><span> </span> | ||
| <div class="mb-3"> | ||
| <table id="sql-execution-table" class="table table-striped compact cell-border" |
Member
There was a problem hiding this comment.
Since the <table> is rendered without <thead> and DataTables generates headers from JS column definitions, a comment in the Scala template would help prevent future SPARK-56259-style regressions.
Member
Author
There was a problem hiding this comment.
Done in 7ebca11 — added a comment above the summary block noting headers are generated by DataTables from column defs in sql-execution-detail.js, with a SPARK-56259 reference to flag the double-render trap. Thanks!
Per review, add a comment above the sql-execution-table summary block explaining that DataTables generates headers client-side from column definitions in static/sql-execution-detail.js. Adding markup headers here would cause double-rendering (cf. SPARK-56259).
sarutak
approved these changes
May 15, 2026
yaooqinn
added a commit
that referenced
this pull request
May 15, 2026
…detail page ### What changes were proposed in this pull request? Render the SQL execution detail page header as a single-row DataTable that reuses the same column rendering as the SQL listing page. The summary at the top of `/SQL/execution/?id=N` now shows ID, Query ID, Status, Description, Submitted, Duration, Succeeded Jobs and Error Message in the same shape as the listing page. To avoid duplicating column logic, the shared helpers, the appId resolver, the API base builder and the column factory are extracted into a new `sql-table-utils.js`, sourced by both `AllExecutionsPage` and `ExecutionPage`. The detail-page mode of the column factory: 1. skips truncation and self-links, 2. renders Description / Error Message as `<pre class="sql-cell-pre">` so SQL formatting is preserved, 3. wraps long or multi-line values in a native `<details><summary>` disclosure so the cells start collapsed and stay compact. Parent / Sub Execution links remain on the detail page but move under the new summary table as a small `text-muted` line, only when applicable. ### Why are the changes needed? The SQL execution detail page currently shows an unstructured `<ul>` summary that omits the description and the query id. Users have to bounce back to the listing page to see what a query was about. Reusing the listing-page columns gives a consistent, scannable header on every execution detail page and avoids two parallel renderers drifting over time. ### Does this PR introduce _any_ user-facing change? Yes, the SQL execution detail page header is restyled. The set of metadata fields shown there is the union of what the listing page already shows. Long descriptions and error messages can be expanded inline with the disclosure triangle. ### How was this patch tested? - `build/sbt sql/scalastyle` — clean - `dev/lint-js` — clean - `build/sbt 'sql/testOnly *AllExecutionsPageWithInMemoryStoreSuite'` — 5 / 5 passed; assertion added that the new `sql-table-utils.js` script tag is rendered into the listing page. - Manual browser verification on a local Spark UI: short single-line descriptions render as plain `<pre>`; multi-line / long descriptions and long error messages render as a collapsed `<details>` with a one-line summary; the SQL listing page is unchanged. ### Was this patch authored or co-authored using generative AI tooling? Generated-by: GitHub Copilot CLI 1.0.47 with Claude Opus 4.7 Closes #55861 from yaooqinn/SPARK-56809. Authored-by: Kent Yao <yao@apache.org> Signed-off-by: Kent Yao <yao@apache.org> (cherry picked from commit a27b8fe) Signed-off-by: Kent Yao <yao@apache.org>
yaooqinn
added a commit
that referenced
this pull request
May 15, 2026
…detail page ### What changes were proposed in this pull request? Render the SQL execution detail page header as a single-row DataTable that reuses the same column rendering as the SQL listing page. The summary at the top of `/SQL/execution/?id=N` now shows ID, Query ID, Status, Description, Submitted, Duration, Succeeded Jobs and Error Message in the same shape as the listing page. To avoid duplicating column logic, the shared helpers, the appId resolver, the API base builder and the column factory are extracted into a new `sql-table-utils.js`, sourced by both `AllExecutionsPage` and `ExecutionPage`. The detail-page mode of the column factory: 1. skips truncation and self-links, 2. renders Description / Error Message as `<pre class="sql-cell-pre">` so SQL formatting is preserved, 3. wraps long or multi-line values in a native `<details><summary>` disclosure so the cells start collapsed and stay compact. Parent / Sub Execution links remain on the detail page but move under the new summary table as a small `text-muted` line, only when applicable. ### Why are the changes needed? The SQL execution detail page currently shows an unstructured `<ul>` summary that omits the description and the query id. Users have to bounce back to the listing page to see what a query was about. Reusing the listing-page columns gives a consistent, scannable header on every execution detail page and avoids two parallel renderers drifting over time. ### Does this PR introduce _any_ user-facing change? Yes, the SQL execution detail page header is restyled. The set of metadata fields shown there is the union of what the listing page already shows. Long descriptions and error messages can be expanded inline with the disclosure triangle. ### How was this patch tested? - `build/sbt sql/scalastyle` — clean - `dev/lint-js` — clean - `build/sbt 'sql/testOnly *AllExecutionsPageWithInMemoryStoreSuite'` — 5 / 5 passed; assertion added that the new `sql-table-utils.js` script tag is rendered into the listing page. - Manual browser verification on a local Spark UI: short single-line descriptions render as plain `<pre>`; multi-line / long descriptions and long error messages render as a collapsed `<details>` with a one-line summary; the SQL listing page is unchanged. ### Was this patch authored or co-authored using generative AI tooling? Generated-by: GitHub Copilot CLI 1.0.47 with Claude Opus 4.7 Closes #55861 from yaooqinn/SPARK-56809. Authored-by: Kent Yao <yao@apache.org> Signed-off-by: Kent Yao <yao@apache.org> (cherry picked from commit a27b8fe) Signed-off-by: Kent Yao <yao@apache.org>
Member
Author
|
Merged to master/4.x/4.2, thank you @sarutak |
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
2 participants
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.
What changes were proposed in this pull request?
Render the SQL execution detail page header as a single-row DataTable that reuses the same column rendering as the SQL listing page. The summary at the top of
/SQL/execution/?id=Nnow shows ID, Query ID, Status, Description, Submitted, Duration, Succeeded Jobs and Error Message in the same shape as the listing page.To avoid duplicating column logic, the shared helpers, the appId resolver, the API base builder and the column factory are extracted into a new
sql-table-utils.js, sourced by bothAllExecutionsPageandExecutionPage. The detail-page mode of the column factory:<pre class="sql-cell-pre">so SQL formatting is preserved,<details><summary>disclosure so the cells start collapsed and stay compact.Parent / Sub Execution links remain on the detail page but move under the new summary table as a small
text-mutedline, only when applicable.Why are the changes needed?
The SQL execution detail page currently shows an unstructured
<ul>summary that omits the description and the query id. Users have to bounce back to the listing page to see what a query was about. Reusing the listing-page columns gives a consistent, scannable header on every execution detail page and avoids two parallel renderers drifting over time.Does this PR introduce any user-facing change?
Yes, the SQL execution detail page header is restyled. The set of metadata fields shown there is the union of what the listing page already shows. Long descriptions and error messages can be expanded inline with the disclosure triangle.
How was this patch tested?
build/sbt sql/scalastyle— cleandev/lint-js— cleanbuild/sbt 'sql/testOnly *AllExecutionsPageWithInMemoryStoreSuite'— 5 / 5 passed; assertion added that the newsql-table-utils.jsscript tag is rendered into the listing page.<pre>; multi-line / long descriptions and long error messages render as a collapsed<details>with a one-line summary; the SQL listing page is unchanged.Was this patch authored or co-authored using generative AI tooling?
Generated-by: GitHub Copilot CLI 1.0.47 with Claude Opus 4.7