Skip to content

Commit

Permalink
More fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateiz
mateiz committed May 8, 2015
1 parent 67629f5 commit 6a6705d
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 34 deletions.
34 changes: 27 additions & 7 deletions core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,18 @@ div#application-timeline, div#job-timeline {
}

.vis.timeline .item.stage.running {
background-color: #a3ffc2;
background-color: #a2fcc0;
border-color: #36f572;
}

.vis.timeline .item.stage.running.selected {
background-color: #a3ffc2;
background-color: #a2fcc0;
border-color: #36f572;
z-index: auto;
}

.legend-area rect.active-stage-legend {
fill: #a3ffc2;
fill: #a2fcc0;
stroke: #36f572;
}

Expand All @@ -89,6 +89,7 @@ div#application-timeline, div#job-timeline {

.vis.timeline .item.job.succeeded {
background-color: #A0DFFF;
border-color: #3EC0FF;
}

.vis.timeline .item.job.succeeded.selected {
Expand Down Expand Up @@ -119,23 +120,24 @@ div#application-timeline, div#job-timeline {
}

.vis.timeline .item.job.running {
background-color: #a3ffc2;
background-color: #a2fcc0;
border-color: #36f572;
}

.vis.timeline .item.job.running.selected {
background-color: #a3ffc2;
background-color: #a2fcc0;
border-color: #36f572;
z-index: auto;
}

.legend-area rect.running-job-legend {
fill: #a3ffc2;
fill: #a2fcc0;
stroke: #36f572;
}

.vis.timeline .item.executor.added {
background-color: #A0DFFF;
border-color: #3EC0FF;
}

.legend-area rect.executor-added-legend {
Expand All @@ -154,7 +156,7 @@ div#application-timeline, div#job-timeline {
}

.vis.timeline .item.executor.selected {
background-color: #a3ffc2;
background-color: #a2fcc0;
border-color: #36f572;
z-index: 2;
}
Expand All @@ -175,6 +177,10 @@ tr.corresponding-item-hover > td, tr.corresponding-item-hover > th {
margin-bottom: 5px;
}

.control-panel input[type="checkbox"] {
margin: 0;
}

span.expand-application-timeline, span.expand-job-timeline {
cursor: pointer;
}
Expand All @@ -190,3 +196,17 @@ span.expand-application-timeline, span.expand-job-timeline {
.vis.timeline .item .tooltip-inner {
max-width: unset !important;
}

.vispanel.center {
font-size: 12px;
line-height: 12px;
}

.legend-area text {
fill: #4d4d4d;
}

.additional-metrics ul {
list-style: none;
margin-left: 15px;
}
36 changes: 28 additions & 8 deletions core/src/main/resources/org/apache/spark/ui/static/webui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,14 +106,18 @@ span.rest-uri {
}

pre {
font-size: 0.8em;
font-size: 12px;
line-height: 18px;
padding: 6px;
margin: 0;
border-radius: 3px;
}

.stage-details {
max-height: 100px;
overflow-y: auto;
margin: 0;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
transition: max-height 0.25s ease-out, padding 0.25s ease-out;
}

.stage-details.collapsed {
Expand All @@ -135,7 +139,7 @@ pre {
max-height: 300px;
overflow-y: auto;
margin: 0;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
transition: max-height 0.25s ease-out, padding 0.25s ease-out;
}

.stacktrace-details.collapsed {
Expand All @@ -158,26 +162,28 @@ span.additional-metric-title {
}

.tooltip {
font-weight: normal;
font-weight: normal;
}

.arrow-open {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
float: left;
margin-top: 6px;
border-top: 5px solid #08c;
display: inline-block;
margin-bottom: 2px;
}

.arrow-closed {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid black;
border-left: 5px solid #08c;
display: inline-block;
margin-left: 2px;
margin-right: 3px;
}

.version {
Expand All @@ -196,3 +202,17 @@ span.additional-metric-title {
.serialization_time, .getting_result_time {
display: none;
}

.accordion-inner {
background: #f5f5f5;
}

.accordion-inner pre {
border: 0;
padding: 0;
background: none;
}

a.expandbutton {
cursor: pointer;
}
14 changes: 9 additions & 5 deletions core/src/main/scala/org/apache/spark/ui/UIUtils.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,14 @@ private[spark] object UIUtils extends Logging {

def commonHeaderNodes: Seq[Node] = {
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href={prependBaseUri("/static/bootstrap.min.css")} type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/webui.css")} type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/vis.min.css")} type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/timeline-view.css")} type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/bootstrap.min.css")}
type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/vis.min.css")}
type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/webui.css")}
type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/timeline-view.css")}
type="text/css"></link>
<script src={prependBaseUri("/static/sorttable.js")} ></script>
<script src={prependBaseUri("/static/jquery-1.11.1.min.js")}></script>
<script src={prependBaseUri("/static/vis.min.js")}></script>
Expand Down Expand Up @@ -350,7 +354,7 @@ private[spark] object UIUtils extends Logging {
<div>
<span class="expand-dag-viz" onclick={s"toggleDagViz($forJob);"}>
<span class="expand-dag-viz-arrow arrow-closed"></span>
<strong>DAG Visualization</strong>
<a>DAG Visualization</a>
</span>
<div id="dag-viz-graph"></div>
<div id="dag-viz-metadata">
Expand Down
15 changes: 9 additions & 6 deletions core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
package org.apache.spark.ui.jobs

import scala.collection.mutable.{HashMap, ListBuffer}
import scala.xml.{Node, NodeSeq, Unparsed}
import scala.xml.{Node, NodeSeq, Unparsed, Utility}

import java.util.Date
import javax.servlet.http.HttpServletRequest
Expand Down Expand Up @@ -81,6 +81,9 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
case JobExecutionStatus.RUNNING => "running"
}

// The timeline library treats contents as HTML, so we have to escape them; for the
// data-title attribute string we have to escape them twice since that's in a string.
val escapedDesc = Utility.escape(displayJobDescription)
val jobEventJsonAsStr =
s"""
|{
Expand All @@ -90,7 +93,8 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
| 'end': new Date(${completionTime}),
| 'content': '<div class="application-timeline-content"' +
| 'data-html="true" data-placement="top" data-toggle="tooltip"' +
| 'data-title="${displayJobDescription} (Job ${jobId})<br>Status: ${status}<br>' +
| 'data-title="${Utility.escape(escapedDesc)} (Job ${jobId})<br>' +
| 'Status: ${status}<br>' +
| 'Submitted: ${UIUtils.formatDate(new Date(submissionTime))}' +
| '${
if (status != JobExecutionStatus.RUNNING) {
Expand All @@ -99,7 +103,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
""
}
}">' +
| '${displayJobDescription} (Job ${jobId})</div>'
| '${escapedDesc} (Job ${jobId})</div>'
|}
""".stripMargin
jobEventJsonAsStr
Expand Down Expand Up @@ -179,7 +183,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {

<span class="expand-application-timeline">
<span class="expand-application-timeline-arrow arrow-closed"></span>
<strong>Event Timeline</strong>
<a>Event Timeline</a>
</span> ++
<div id="application-timeline" class="collapsed">
<div class="control-panel">
Expand Down Expand Up @@ -331,8 +335,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
}

val helpText = """A job is triggered by an action, like "count()" or "saveAsTextFile()".""" +
" Click on a job's title to see information about the stages of tasks associated with" +
" the job."
" Click on a job to see information about the stages of tasks inside it."

UIUtils.headerSparkPage("Spark Jobs", content, parent, helpText = Some(helpText))
}
Expand Down
15 changes: 9 additions & 6 deletions core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ package org.apache.spark.ui.jobs
import java.util.Date

import scala.collection.mutable.{Buffer, HashMap, ListBuffer}
import scala.xml.{NodeSeq, Node, Unparsed}
import scala.xml.{NodeSeq, Node, Unparsed, Utility}

import javax.servlet.http.HttpServletRequest

Expand Down Expand Up @@ -64,6 +64,9 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
val submissionTime = stage.submissionTime.get
val completionTime = stage.completionTime.getOrElse(System.currentTimeMillis())

// The timeline library treats contents as HTML, so we have to escape them; for the
// data-title attribute string we have to escape them twice since that's in a string.
val escapedName = Utility.escape(name)
s"""
|{
| 'className': 'stage job-timeline-object ${status}',
Expand All @@ -72,17 +75,17 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
| 'end': new Date(${completionTime}),
| 'content': '<div class="job-timeline-content" data-toggle="tooltip"' +
| 'data-placement="top" data-html="true"' +
| 'data-title="${name} (Stage ${stageId}.${attemptId})<br>' +
| 'data-title="${Utility.escape(escapedName)} (Stage ${stageId}.${attemptId})<br>' +
| 'Status: ${status.toUpperCase}<br>' +
| 'Submission Time: ${UIUtils.formatDate(new Date(submissionTime))}' +
| 'Submitted: ${UIUtils.formatDate(new Date(submissionTime))}' +
| '${
if (status != "running") {
s"""<br>Completion Time: ${UIUtils.formatDate(new Date(completionTime))}"""
s"""<br>Completed: ${UIUtils.formatDate(new Date(completionTime))}"""
} else {
""
}
}">' +
| '${name} (Stage ${stageId}.${attemptId})</div>',
| '${escapedName} (Stage ${stageId}.${attemptId})</div>',
|}
""".stripMargin
}
Expand Down Expand Up @@ -161,7 +164,7 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {

<span class="expand-job-timeline">
<span class="expand-job-timeline-arrow arrow-closed"></span>
<strong>Event Timeline</strong>
<a>Event Timeline</a>
</span> ++
<div id="job-timeline" class="collapsed">
<div class="control-panel">
Expand Down
4 changes: 2 additions & 2 deletions core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,10 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
<div>
<span class="expand-additional-metrics">
<span class="expand-additional-metrics-arrow arrow-closed"></span>
<strong>Show Additional Metrics</strong>
<a>Show Additional Metrics</a>
</span>
<div class="additional-metrics collapsed">
<ul style="list-style-type:none">
<ul>
<li>
<input type="checkbox" id="select-all-metrics"/>
<span class="additional-metric-title"><em>(De)select All</em></span>
Expand Down

0 comments on commit 6a6705d

Please sign in to comment.