-
Notifications
You must be signed in to change notification settings - Fork 29.3k
[SPARK-13547] [SQL] [WEBUI] Add SQL query in web UI's SQL Tab #14158
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
e8834ea
fa5d549
69180bd
114401a
6487657
ac96aaa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,7 +25,7 @@ import scala.xml.Node | |
| import org.apache.commons.lang3.StringEscapeUtils | ||
|
|
||
| import org.apache.spark.internal.Logging | ||
| import org.apache.spark.ui.{UIUtils, WebUIPage} | ||
| import org.apache.spark.ui.{ToolTips, UIUtils, WebUIPage} | ||
|
|
||
| private[ui] class AllExecutionsPage(parent: SQLTab) extends WebUIPage("") with Logging { | ||
|
|
||
|
|
@@ -60,6 +60,10 @@ private[ui] class AllExecutionsPage(parent: SQLTab) extends WebUIPage("") with L | |
| function clickDetail(details) {{ | ||
| details.parentNode.querySelector('.stage-details').classList.toggle('collapsed') | ||
| }} | ||
| function clickMore(details) {{ | ||
| details.parentNode.querySelector('.sql-abstract').classList.toggle('collapsed') | ||
| details.parentNode.querySelector('.sql-full').classList.toggle('collapsed') | ||
| }} | ||
| </script> | ||
| UIUtils.headerSparkPage("SQL", content, parent, Some(5000)) | ||
| } | ||
|
|
@@ -83,10 +87,13 @@ private[ui] abstract class ExecutionTable( | |
|
|
||
| protected def header: Seq[String] | ||
|
|
||
| protected def row(currentTime: Long, executionUIData: SQLExecutionUIData): Seq[Node] = { | ||
| protected def row(currentTime: Long, executionUIData: SQLExecutionUIData, showSqlText: Boolean) | ||
| : Seq[Node] = { | ||
| val submissionTime = executionUIData.submissionTime | ||
| val duration = executionUIData.completionTime.getOrElse(currentTime) - submissionTime | ||
|
|
||
| val sqlText = executionUIData.sqlText.getOrElse("") | ||
|
|
||
| val runningJobs = executionUIData.runningJobs.map { jobId => | ||
| <a href={jobURL(jobId)}>{jobId.toString}</a><br/> | ||
| } | ||
|
|
@@ -124,6 +131,11 @@ private[ui] abstract class ExecutionTable( | |
| {failedJobs} | ||
| </td> | ||
| }} | ||
| {if (showSqlText) { | ||
| <td> | ||
| {sqlTextCell(sqlText)} | ||
| </td> | ||
| }} | ||
| </tr> | ||
| } | ||
|
|
||
|
|
@@ -146,11 +158,43 @@ private[ui] abstract class ExecutionTable( | |
| <div>{desc} {details}</div> | ||
| } | ||
|
|
||
| private def sqlTextCell(sqlText: String): Seq[Node] = { | ||
| // Only show a limited number of characters of sqlText by default when it is too long | ||
| val maxLength = 140 | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. how about a button to copy full query text into clipboard?
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this really necessary? The text can be easily highlighted and copied.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. .. for very long query that wouldn't fit as per this comment
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Theres a "+more" button that expands to show the full query
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nvm, I understand you now, if we end up truncating the text at 1000 chars as proposed then yes this may be a useful feature, but if the text is available to copy wouldn't the size issue still exist?
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you mean that it could be too long for clipboard? I don't think that would be an issue...
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, @felixcheung. When I am looking at the discussions again today, I find I am more clear about your suggestions. But actually, truncating very long queries is not because they are not visually pleasant to be displayed on the page, but it may take too many resources to store and transfer such a long unlimited string. So the queries longer than 1000 chars are truncated after parsing, which will never be recovered. So the idea of clipboard may not be used to resolve it. But still, I believe the clipboard is a good idea. I do think we could extend the limit to 10k chars instead of 1k if we add a clipboard later. |
||
|
|
||
| if (sqlText.length <= maxLength) { | ||
| <div>{sqlText}</div> | ||
| } else { | ||
| val sqlAbstractText = sqlText.substring(0, maxLength) + " ..." | ||
| <div> | ||
| <div class="stage-details sql-abstract"> | ||
| {sqlAbstractText} | ||
| </div> | ||
| <div class="stage-details sql-full collapsed"> | ||
| {sqlText} | ||
| </div> | ||
| <span onclick="clickMore(this)" class="expand-details"> | ||
| +more | ||
| </span> | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
| def toNodeSeq: Seq[Node] = { | ||
| val showSqlText = executionUIDatas.exists(_.sqlText.isDefined) | ||
| val headerFull = header ++ {if (showSqlText) Seq("SQL Text") else Seq.empty} | ||
| val sqlTextToolTip = {if (showSqlText) { | ||
| Seq(Some(ToolTips.SQL_TEXT, "top")) | ||
| } else { | ||
| Seq.empty | ||
| }} | ||
| val headerToolTips: Seq[Option[(String, String)]] = header.map(_ => None) ++ sqlTextToolTip | ||
|
|
||
| <div> | ||
| <h4>{tableName}</h4> | ||
| {UIUtils.listingTable[SQLExecutionUIData]( | ||
| header, row(currentTime, _), executionUIDatas, id = Some(tableId))} | ||
| headerFull, row(currentTime, _, showSqlText), executionUIDatas, id = Some(tableId), | ||
| headerToolTips = headerToolTips)} | ||
| </div> | ||
| } | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you shouldn't need this, scala can handle line wrapping for
Nodereturn values