-
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 3 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 |
|---|---|---|
|
|
@@ -65,13 +65,29 @@ abstract class AbstractSqlParser extends ParserInterface with Logging { | |
| } | ||
|
|
||
| /** Creates LogicalPlan for a given SQL string. */ | ||
| override def parsePlan(sqlText: String): LogicalPlan = parse(sqlText) { parser => | ||
| astBuilder.visitSingleStatement(parser.singleStatement()) match { | ||
| case plan: LogicalPlan => plan | ||
| case _ => | ||
| val position = Origin(None, None) | ||
| throw new ParseException(Option(sqlText), "Unsupported SQL statement", position, position) | ||
| override def parsePlan(sqlText: String): LogicalPlan = { | ||
| val logicalPlan = parse(sqlText) { parser => | ||
| astBuilder.visitSingleStatement(parser.singleStatement()) match { | ||
| case plan: LogicalPlan => plan | ||
| case _ => | ||
| val position = Origin(None, None) | ||
| throw new ParseException(Option(sqlText), "Unsupported SQL statement", position, position) | ||
| } | ||
| } | ||
| // Record the original sql text in the top logical plan for checking in the web UI. | ||
| // Truncate the text to avoid downing browsers or web UI servers by running out of memory. | ||
| val maxLength = 1000 | ||
| val suffix = " ... (truncated)" | ||
| val truncateLength = maxLength - suffix.length | ||
|
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? Given the reasoning behind the max length I don't see a reason to include extra lines of code to include the suffix as part of the max length.
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. I think either way is okay. Here, I am considering keeping the text displayed (including suffix) less than 1000 chars. |
||
| val truncatedSqlText = { | ||
| if (sqlText.length <= maxLength) { | ||
| sqlText | ||
| } else { | ||
| sqlText.substring(0, truncateLength) + suffix | ||
| } | ||
| } | ||
| logicalPlan.sqlText = Some(truncatedSqlText) | ||
| logicalPlan | ||
|
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. The solution in this PR looks intrusive to me. If we really want to store the original sql text, we can add it into the QueryExecution. The value can be initialized when we build the QueryExecution
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 for pointing it out. I agree that |
||
| } | ||
|
|
||
| /** Get the builder (visitor) which converts a ParseTree into an AST. */ | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -258,6 +258,9 @@ abstract class LogicalPlan extends QueryPlan[LogicalPlan] with Logging { | |
| * Refreshes (or invalidates) any metadata/data cached in the plan recursively. | ||
| */ | ||
| def refresh(): Unit = children.foreach(_.refresh()) | ||
|
|
||
| // Record the original sql text in the top logical plan for checking in the web UI. | ||
| var sqlText: Option[String] = None | ||
|
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. Using |
||
| } | ||
|
|
||
| /** | ||
|
|
||
| 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