From 67629f5a31e4b71a1d3517185f0a8d6c990d48e1 Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Tue, 5 May 2015 19:28:36 -0400
Subject: [PATCH 1/6] Various small tweaks

---
 .../apache/spark/ui/static/timeline-view.css  | 104 ++++++++++--------
 .../apache/spark/ui/static/timeline-view.js   |   4 +-
 .../scala/org/apache/spark/ui/UIUtils.scala   |   4 +-
 .../apache/spark/ui/jobs/AllJobsPage.scala    |  12 +-
 .../apache/spark/ui/jobs/AllStagesPage.scala  |  15 +--
 .../org/apache/spark/ui/jobs/JobPage.scala    |   6 +-
 .../org/apache/spark/ui/jobs/StagePage.scala  |  14 +--
 7 files changed, 78 insertions(+), 81 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
index 35ef14e5aaf1..dba5a43eb882 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
@@ -23,6 +23,10 @@ div#application-timeline, div#job-timeline {
   margin-top: 5px;
 }
 
+.vis.timeline {
+  line-height: 14px;
+}
+
 .vis.timeline div.content {
   width: 100%;
 }
@@ -32,48 +36,51 @@ div#application-timeline, div#job-timeline {
 }
 
 .vis.timeline .item.stage.succeeded {
-  background-color: #D5DDF6;
+  background-color: #A0DFFF;
+  border-color: #3EC0FF;
 }
 
 .vis.timeline .item.stage.succeeded.selected {
-   background-color: #D5DDF6;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #A0DFFF;
+  border-color: #3EC0FF;
+  z-index: auto;
 }
 
 .legend-area rect.completed-stage-legend {
-  fill: #D5DDF6;
-  stroke: #97B0F8;
+  fill: #A0DFFF;
+  stroke: #3EC0FF;
 }
 
 .vis.timeline .item.stage.failed {
-   background-color: #FF5475;
+  background-color: #ffa1b0;
+  border-color: #ff4d6d;
 }
 
 .vis.timeline .item.stage.failed.selected {
-   background-color: #FF5475;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #ffa1b0;
+  border-color: #ff4d6d;
+  z-index: auto;
 }
 
 .legend-area rect.failed-stage-legend {
-  fill: #FF5475;
-  stroke: #97B0F8;
+  fill: #ffa1b0;
+  stroke: #ff4d6d;
 }
 
 .vis.timeline .item.stage.running {
-   background-color: #FDFFCA;
+  background-color: #a3ffc2;
+  border-color: #36f572;
 }
 
 .vis.timeline .item.stage.running.selected {
-   background-color: #FDFFCA;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #a3ffc2;
+  border-color: #36f572;
+  z-index: auto;
 }
 
 .legend-area rect.active-stage-legend {
-  fill: #FDFFCA;
-  stroke: #97B0F8;
+  fill: #a3ffc2;
+  stroke: #36f572;
 }
 
 .vis.timeline .item.job {
@@ -81,76 +88,79 @@ div#application-timeline, div#job-timeline {
 }
 
 .vis.timeline .item.job.succeeded {
-  background-color: #D5DDF6;
+  background-color: #A0DFFF;
 }
 
 .vis.timeline .item.job.succeeded.selected {
-   background-color: #D5DDF6;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #A0DFFF;
+  border-color: #3EC0FF;
+  z-index: auto;
 }
 
 .legend-area rect.succeeded-job-legend {
-  fill: #D5DDF6;
-  stroke: #97B0F8;
+  fill: #A0DFFF;
+  stroke: #3EC0FF;
 }
 
 .vis.timeline .item.job.failed {
-   background-color: #FF5475;
+  background-color: #ffa1b0;
+  border-color: #ff4d6d;
 }
 
 .vis.timeline .item.job.failed.selected {
-   background-color: #FF5475;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #ffa1b0;
+  border-color: #ff4d6d;
+  z-index: auto;
 }
 
 .legend-area rect.failed-job-legend {
-  fill: #FF5475;
-  stroke: #97B0F8;
+  fill: #ffa1b0;
+  stroke: #ff4d6d;
 }
 
 .vis.timeline .item.job.running {
-   background-color: #FDFFCA;
+  background-color: #a3ffc2;
+  border-color: #36f572;
 }
 
 .vis.timeline .item.job.running.selected {
-   background-color: #FDFFCA;
-   border-color: #97B0F8;
-   z-index: auto;
+  background-color: #a3ffc2;
+  border-color: #36f572;
+  z-index: auto;
 }
 
 .legend-area rect.running-job-legend {
-  fill: #FDFFCA;
-  stroke: #97B0F8;
+  fill: #a3ffc2;
+  stroke: #36f572;
 }
 
 .vis.timeline .item.executor.added {
-  background-color: #D5DDF6;
+  background-color: #A0DFFF;
 }
 
 .legend-area rect.executor-added-legend {
-  fill: #D5DDF6;
-  stroke: #97B0F8;
+  fill: #A0DFFF;
+  stroke: #3EC0FF;
 }
 
 .vis.timeline .item.executor.removed {
-  background-color: #EBCA59;
+  background-color: #ffa1b0;
+  border-color: #ff4d6d;
 }
 
 .legend-area rect.executor-removed-legend {
-  fill: #EBCA59;
-  stroke: #97B0F8;
+  fill: #ffa1b0;
+  stroke: #ff4d6d;
 }
 
 .vis.timeline .item.executor.selected {
-  border-color: #FFC200;
-  background-color: #FFF785;
+  background-color: #a3ffc2;
+  border-color: #36f572;
   z-index: 2;
 }
 
-tr.corresponding-item-hover>td, tr.corresponding-item-hover>th {
-  background-color: #FFE1FA !important;
+tr.corresponding-item-hover > td, tr.corresponding-item-hover > th {
+  background-color: #d6ffe4 !important;
 }
 
 #application-timeline.collapsed {
@@ -169,7 +179,7 @@ span.expand-application-timeline, span.expand-job-timeline {
   cursor: pointer;
 }
 
-.control-panel input+span {
+.control-panel input + span {
   cursor: pointer;
 }
 
diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.js b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.js
index e4a891d47f03..48fbb33b1155 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.js
@@ -156,9 +156,9 @@ function setupExecutorEventAction() {
 function setupZoomable(id, timeline) {
   $(id + '>input[type="checkbox"]').click(function() {
     if (this.checked) {
-      timeline.setOptions({zoomable: false});
-    } else {
       timeline.setOptions({zoomable: true});
+    } else {
+      timeline.setOptions({zoomable: false});
     }
   });
 
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index 97eed13c2d78..5610f01fcdc8 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -250,7 +250,7 @@ private[spark] object UIUtils extends Logging {
               <h3 style="vertical-align: middle; display: inline-block;">
                 <a style="text-decoration: none" href={prependBaseUri("/")}>
                   <img src={prependBaseUri("/static/spark-logo-77x50px-hd.png")} />
-                  <span class="version" 
+                  <span class="version"
                         style="margin-right: 15px;">{org.apache.spark.SPARK_VERSION}</span>
                 </a>
                 {title}
@@ -350,7 +350,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>
+        <strong>DAG Visualization</strong>
       </span>
       <div id="dag-viz-graph"></div>
       <div id="dag-viz-metadata">
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
index f6abf27db49d..bff7e22f3117 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
@@ -91,10 +91,10 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
            |  'content': '<div class="application-timeline-content"' +
            |     'data-html="true" data-placement="top" data-toggle="tooltip"' +
            |     'data-title="${displayJobDescription} (Job ${jobId})<br>Status: ${status}<br>' +
-           |     'Submission Time: ${UIUtils.formatDate(new Date(submissionTime))}' +
+           |     'Submitted: ${UIUtils.formatDate(new Date(submissionTime))}' +
            |     '${
                      if (status != JobExecutionStatus.RUNNING) {
-                       s"""<br>Completion Time: ${UIUtils.formatDate(new Date(completionTime))}"""
+                       s"""<br>Completed: ${UIUtils.formatDate(new Date(completionTime))}"""
                      } else {
                        ""
                      }
@@ -179,13 +179,13 @@ 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>
+      <strong>Event Timeline</strong>
     </span> ++
     <div id="application-timeline" class="collapsed">
       <div class="control-panel">
         <div id="application-timeline-zoom-lock">
-          <input type="checkbox" checked="checked"></input>
-          <span>Zoom Lock</span>
+          <input type="checkbox"></input>
+          <span>Enable zooming</span>
         </div>
       </div>
     </div> ++
@@ -277,7 +277,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
             {if (parent.sc.isDefined) {
               // Total duration is not meaningful unless the UI is live
               <li>
-                <strong>Total Duration: </strong>
+                <strong>Total Uptime: </strong>
                 {UIUtils.formatDuration(System.currentTimeMillis() - startTime)}
               </li>
             }}
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/AllStagesPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/AllStagesPage.scala
index 236bc8ea9287..332a19b56aeb 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/AllStagesPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/AllStagesPage.scala
@@ -67,19 +67,6 @@ private[ui] class AllStagesPage(parent: StagesTab) extends WebUIPage("") {
       val summary: NodeSeq =
         <div>
           <ul class="unstyled">
-            {
-              if (sc.isDefined) {
-                // Total duration is not meaningful unless the UI is live
-                <li>
-                  <strong>Total Duration: </strong>
-                  {UIUtils.formatDuration(now - sc.get.startTime)}
-                </li>
-              }
-            }
-            <li>
-              <strong>Scheduling Mode: </strong>
-              {listener.schedulingMode.map(_.toString).getOrElse("Unknown")}
-            </li>
             {
               if (shouldShowActiveStages) {
                 <li>
@@ -139,7 +126,7 @@ private[ui] class AllStagesPage(parent: StagesTab) extends WebUIPage("") {
         content ++= <h4 id ="failed">Failed Stages ({numFailedStages})</h4> ++
         failedStagesTable.toNodeSeq
       }
-      UIUtils.headerSparkPage("Spark Stages (for all jobs)", content, parent)
+      UIUtils.headerSparkPage("Stages for All Jobs", content, parent)
     }
   }
 }
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
index 96cc3d78d0f1..63f3c8837af8 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
@@ -161,13 +161,13 @@ 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>
+      <strong>Event Timeline</strong>
     </span> ++
     <div id="job-timeline" class="collapsed">
       <div class="control-panel">
         <div id="job-timeline-zoom-lock">
-          <input type="checkbox" checked="checked"></input>
-          <span>Zoom Lock</span>
+          <input type="checkbox"></input>
+          <span>Enable zooming</span>
         </div>
       </div>
     </div> ++
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
index 6c4305873cbd..e7d5c5acb090 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
@@ -73,7 +73,7 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
         <div>
           <ul class="unstyled">
             <li>
-              <strong>Total task time across all tasks: </strong>
+              <strong>Total Time Across All Tasks: </strong>
               {UIUtils.formatDuration(stageData.executorRunTime)}
             </li>
             {if (stageData.hasInput) {
@@ -90,25 +90,25 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
             }}
             {if (stageData.hasShuffleRead) {
               <li>
-                <strong>Shuffle read: </strong>
+                <strong>Shuffle Read: </strong>
                 {s"${Utils.bytesToString(stageData.shuffleReadTotalBytes)} / " +
                  s"${stageData.shuffleReadRecords}"}
               </li>
             }}
             {if (stageData.hasShuffleWrite) {
               <li>
-                <strong>Shuffle write: </strong>
+                <strong>Shuffle Write: </strong>
                  {s"${Utils.bytesToString(stageData.shuffleWriteBytes)} / " +
                  s"${stageData.shuffleWriteRecords}"}
               </li>
             }}
             {if (stageData.hasBytesSpilled) {
               <li>
-                <strong>Shuffle spill (memory): </strong>
+                <strong>Shuffle Spill (Memory): </strong>
                 {Utils.bytesToString(stageData.memoryBytesSpilled)}
               </li>
               <li>
-                <strong>Shuffle spill (disk): </strong>
+                <strong>Shuffle Spill (Disk): </strong>
                 {Utils.bytesToString(stageData.diskBytesSpilled)}
               </li>
             }}
@@ -119,7 +119,7 @@ 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>
+            <strong>Show Additional Metrics</strong>
           </span>
           <div class="additional-metrics collapsed">
             <ul style="list-style-type:none">
@@ -449,9 +449,9 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
 
       val content =
         summary ++
-        showAdditionalMetrics ++
         dagViz ++
         maybeExpandDagViz ++
+        showAdditionalMetrics ++
         <h4>Summary Metrics for {numCompleted} Completed Tasks</h4> ++
         <div>{summaryTable.getOrElse("No tasks have reported metrics yet.")}</div> ++
         <h4>Aggregated Metrics by Executor</h4> ++ executorTable.toNodeSeq ++

From 6a6705d0f29d2dc16089ede0f48ec5f39b207f88 Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Tue, 5 May 2015 23:55:55 -0400
Subject: [PATCH 2/6] More fixes

---
 .../apache/spark/ui/static/timeline-view.css  | 34 ++++++++++++++----
 .../org/apache/spark/ui/static/webui.css      | 36 ++++++++++++++-----
 .../scala/org/apache/spark/ui/UIUtils.scala   | 14 +++++---
 .../apache/spark/ui/jobs/AllJobsPage.scala    | 15 ++++----
 .../org/apache/spark/ui/jobs/JobPage.scala    | 15 ++++----
 .../org/apache/spark/ui/jobs/StagePage.scala  |  4 +--
 6 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
index dba5a43eb882..da1e27fd4c2a 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
@@ -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;
 }
 
@@ -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 {
@@ -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 {
@@ -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;
 }
@@ -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;
 }
@@ -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;
+}
diff --git a/core/src/main/resources/org/apache/spark/ui/static/webui.css b/core/src/main/resources/org/apache/spark/ui/static/webui.css
index 669ad48937c0..e7c1d475d4e5 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/webui.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/webui.css
@@ -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 {
@@ -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 {
@@ -158,7 +162,7 @@ span.additional-metric-title {
 }
 
 .tooltip {
- font-weight: normal;
+  font-weight: normal;
 }
 
 .arrow-open {
@@ -166,9 +170,9 @@ span.additional-metric-title {
   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 {
@@ -176,8 +180,10 @@ span.additional-metric-title {
   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 {
@@ -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;
+}
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index 5610f01fcdc8..966819426118 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -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>
@@ -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">
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
index bff7e22f3117..3ef04a017855 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
@@ -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
@@ -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"""
            |{
@@ -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) {
@@ -99,7 +103,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
                        ""
                      }
                   }">' +
-           |    '${displayJobDescription} (Job ${jobId})</div>'
+           |    '${escapedDesc} (Job ${jobId})</div>'
            |}
          """.stripMargin
       jobEventJsonAsStr
@@ -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">
@@ -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))
     }
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
index 63f3c8837af8..1be4ccf36c68 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
@@ -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
 
@@ -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}',
@@ -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
     }
@@ -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">
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
index e7d5c5acb090..1b9da441ef34 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
@@ -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>

From fac734a3aabae09854e3433c0623ba5ab9d0053f Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Thu, 7 May 2015 21:33:11 -0400
Subject: [PATCH 3/6] tweaks

---
 .../src/main/scala/org/apache/spark/ui/UIUtils.scala | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index 966819426118..ffce108739ce 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -156,14 +156,10 @@ 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/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>
+    <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"/>
     <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>

From 43dcbe3b881eff82d0b4cb759ebb327ff2bd925a Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Thu, 7 May 2015 23:38:28 -0400
Subject: [PATCH 4/6] Some updates to DAG

---
 .../apache/spark/ui/static/spark-dag-viz.css  | 60 ++++++++++++-------
 .../apache/spark/ui/static/spark-dag-viz.js   | 44 ++++++++------
 .../spark/ui/scope/RDDOperationGraph.scala    |  2 +-
 3 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
index 848171082845..560bbfa759e6 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
@@ -16,40 +16,51 @@
  */
 
 #dag-viz-graph svg path {
-  stroke: #444444;
+  stroke: #444;
   stroke-width: 1.5px;
 }
 
 #dag-viz-graph svg g.cluster rect {
-  stroke-width: 4px;
-  stroke-opacity: 0.5;
+  stroke-width: 1px;
+}
+
+#dag-viz-graph svg g.node circle {
+  fill: #444;
 }
 
-#dag-viz-graph svg g.node circle,
 #dag-viz-graph svg g.node rect {
-  fill: #444444;
+  fill: #C3EBFF;
+  stroke: #3EC0FF;
+  stroke-width: 1px;
+}
+
+#dag-viz-graph svg g.node.cached circle {
+  fill: #444;
 }
 
-#dag-viz-graph svg g.node.cached circle,
 #dag-viz-graph svg g.node.cached rect {
-  fill: #FF0000;
+  fill: #b3f5c5;
+  stroke: #56f578;
+  stroke-width: 1px;
 }
 
 /* Job page specific styles */
 
 #dag-viz-graph svg.job marker#marker-arrow path {
-  fill: #444444;
+  fill: #333;
   stroke-width: 0px;
 }
 
 #dag-viz-graph svg.job g.cluster rect {
-  fill: #FFFFFF;
-  stroke: #AADFFF;
+  fill: #A0DFFF;
+  stroke: #3EC0FF;
+  stroke-width: 1px;
 }
 
 #dag-viz-graph svg.job g.cluster[id*="stage"] rect {
-  stroke: #FFDDEE;
-  stroke-width: 6px;
+  fill: #FFFFFF;
+  stroke: #ff99ac;
+  stroke-width: 1px;
 }
 
 #dag-viz-graph svg.job g#cross-stage-edges path {
@@ -57,27 +68,36 @@
 }
 
 #dag-viz-graph svg.job g.cluster text {
-  fill: #AAAAAA;
+  fill: #333;
 }
 
 /* Stage page specific styles */
 
 #dag-viz-graph svg.stage g.cluster rect {
-  fill: #F0F8FF;
-  stroke: #AADFFF;
+  fill: #A0DFFF;
+  stroke: #3EC0FF;
+  stroke-width: 1px;
 }
 
 #dag-viz-graph svg.stage g.cluster[id*="stage"] rect {
   fill: #FFFFFF;
-  stroke: #FFDDEE;
-  stroke-width: 6px;
+  stroke: #ffa6b6;
+  stroke-width: 1px;
 }
 
 #dag-viz-graph svg.stage g.node g.label text tspan {
-  fill: #FFFFFF;
+  fill: #333;
 }
 
 #dag-viz-graph svg.stage g.cluster text {
-  fill: #444444;
-  font-weight: bold;
+  fill: #333;
+}
+
+#dag-viz-graph a, #dag-viz-graph a:hover {
+  text-decoration: none;
+}
+
+#dag-viz-graph .label {
+  font-weight: normal;
+  text-shadow: none;
 }
diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
index a0e3e914c254..4a15a1837b36 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
@@ -52,8 +52,8 @@
  */
 
 var VizConstants = {
-  svgMarginX: 20,
-  svgMarginY: 20,
+  svgMarginX: 16,
+  svgMarginY: 16,
   stageSep: 50,
   graphPrefix: "graph_",
   nodePrefix: "node_",
@@ -63,14 +63,14 @@ var VizConstants = {
 };
 
 var JobPageVizConstants = {
-  clusterLabelSize: 11,
+  clusterLabelSize: 12,
   stageClusterLabelSize: 14
-}
+};
 
 var StagePageVizConstants = {
   clusterLabelSize: 14,
-  stageClusterLabelSize: 18
-}
+  stageClusterLabelSize: 14
+};
 
 /*
  * Show or hide the RDD DAG visualization.
@@ -151,9 +151,9 @@ function renderDagVizForStage(svgContainer) {
   var container = svgContainer.append("g").attr("id", containerId);
   renderDot(dot, container);
 
-  // Round corners on RDDs
+  // Round corners on rectangles
   svgContainer
-    .selectAll("g.node rect")
+    .selectAll("rect")
     .attr("rx", "5")
     .attr("ry", "5");
 }
@@ -209,6 +209,12 @@ function renderDagVizForJob(svgContainer) {
     // Actually render the stage
     renderDot(dot, container);
 
+    // Round corners on rectangles
+    container
+      .selectAll("rect")
+      .attr("rx", "4")
+      .attr("ry", "4");
+
     // If there are any incoming edges into this graph, keep track of them to render
     // them separately later. Note that we cannot draw them now because we need to
     // put these edges in a separate container that is on top of all stage graphs.
@@ -248,12 +254,13 @@ function metadataContainer() { return d3.select("#dag-viz-metadata"); }
  * In general, the clustering support for dagre-d3 is quite limited at this point.
  */
 function drawClusterLabels(svgContainer, forJob) {
+  var clusterLabelSize, stageClusterLabelSize;
   if (forJob) {
-    var clusterLabelSize = JobPageVizConstants.clusterLabelSize;
-    var stageClusterLabelSize = JobPageVizConstants.stageClusterLabelSize;
+    clusterLabelSize = JobPageVizConstants.clusterLabelSize;
+    stageClusterLabelSize = JobPageVizConstants.stageClusterLabelSize;
   } else {
-    var clusterLabelSize = StagePageVizConstants.clusterLabelSize;
-    var stageClusterLabelSize = StagePageVizConstants.stageClusterLabelSize;
+    clusterLabelSize = StagePageVizConstants.clusterLabelSize;
+    stageClusterLabelSize = StagePageVizConstants.stageClusterLabelSize;
   }
   svgContainer.selectAll("g.cluster").each(function() {
     var cluster = d3.select(this);
@@ -283,7 +290,7 @@ function drawClusterLabel(d3cluster, fontSize) {
     .attr("x", labelX)
     .attr("y", labelY)
     .attr("text-anchor", "end")
-    .style("font-size", fontSize)
+    .style("font-size", fontSize + "px")
     .text(labelText);
 }
 
@@ -303,12 +310,12 @@ function resizeSvg(svg) {
     }));
   var endX = VizConstants.svgMarginX +
     toFloat(d3.max(allClusters, function(e) {
-      var t = d3.select(e)
+      var t = d3.select(e);
       return getAbsolutePosition(t).x + toFloat(t.attr("width"));
     }));
   var endY = VizConstants.svgMarginY +
     toFloat(d3.max(allClusters, function(e) {
-      var t = d3.select(e)
+      var t = d3.select(e);
       return getAbsolutePosition(t).y + toFloat(t.attr("height"));
     }));
   var width = endX - startX;
@@ -338,7 +345,7 @@ function drawCrossStageEdges(edges, svgContainer) {
   if (!dagreD3Marker.empty()) {
     svgContainer
       .append(function() { return dagreD3Marker.node().cloneNode(true); })
-      .attr("id", "marker-arrow")
+      .attr("id", "marker-arrow");
     svgContainer.selectAll("g > path").attr("marker-end", "url(#marker-arrow)");
     svgContainer.selectAll("g.edgePaths def").remove(); // We no longer need these
   }
@@ -394,12 +401,13 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
     toPos.x += delta;
   }
 
+  var points;
   if (fromPos.y == toPos.y) {
     // If they are on the same rank, curve the middle part of the edge
     // upward a little to avoid interference with things in between
     // e.g.       _______
     //      _____/       \_____
-    var points = [
+    points = [
       [fromPos.x, fromPos.y],
       [fromPos.x + (toPos.x - fromPos.x) * 0.2, fromPos.y],
       [fromPos.x + (toPos.x - fromPos.x) * 0.3, fromPos.y - 20],
@@ -413,7 +421,7 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
     //           /
     //          |
     //    _____/
-    var points = [
+    points = [
       [fromPos.x, fromPos.y],
       [fromPos.x + (toPos.x - fromPos.x) * 0.4, fromPos.y],
       [fromPos.x + (toPos.x - fromPos.x) * 0.6, toPos.y],
diff --git a/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala b/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala
index 2b2db9e62be4..c7045c98c8a0 100644
--- a/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala
+++ b/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala
@@ -182,7 +182,7 @@ private[ui] object RDDOperationGraph extends Logging {
     if (forJob) {
       s"""${node.id} [label="$label" shape="circle" padding="5" labelStyle="font-size: 0"]"""
     } else {
-      s"""${node.id} [label="$label" padding="5" labelStyle="font-size: 10"]"""
+      s"""${node.id} [label="$label" padding="5" labelStyle="font-size: 12px"]"""
     }
   }
 

From 4c5a364a82ac3e5f0e5ff05b491572e8ada3ab6e Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Fri, 8 May 2015 00:16:14 -0400
Subject: [PATCH 5/6] Reduce stage and rank separation slightly

---
 .../apache/spark/ui/static/spark-dag-viz.css  |  8 +--
 .../apache/spark/ui/static/spark-dag-viz.js   | 15 +++--
 .../apache/spark/ui/static/timeline-view.css  | 64 +++++++++----------
 3 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
index 560bbfa759e6..18c72694f3e2 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
@@ -39,8 +39,8 @@
 }
 
 #dag-viz-graph svg g.node.cached rect {
-  fill: #b3f5c5;
-  stroke: #56f578;
+  fill: #B3F5C5;
+  stroke: #56F578;
   stroke-width: 1px;
 }
 
@@ -59,7 +59,7 @@
 
 #dag-viz-graph svg.job g.cluster[id*="stage"] rect {
   fill: #FFFFFF;
-  stroke: #ff99ac;
+  stroke: #FF99AC;
   stroke-width: 1px;
 }
 
@@ -81,7 +81,7 @@
 
 #dag-viz-graph svg.stage g.cluster[id*="stage"] rect {
   fill: #FFFFFF;
-  stroke: #ffa6b6;
+  stroke: #FFA6B6;
   stroke-width: 1px;
 }
 
diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
index 4a15a1837b36..764dd2cfcd76 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
@@ -54,7 +54,7 @@
 var VizConstants = {
   svgMarginX: 16,
   svgMarginY: 16,
-  stageSep: 50,
+  stageSep: 40,
   graphPrefix: "graph_",
   nodePrefix: "node_",
   stagePrefix: "stage_",
@@ -64,12 +64,14 @@ var VizConstants = {
 
 var JobPageVizConstants = {
   clusterLabelSize: 12,
-  stageClusterLabelSize: 14
+  stageClusterLabelSize: 14,
+  rankSep: 40
 };
 
 var StagePageVizConstants = {
   clusterLabelSize: 14,
-  stageClusterLabelSize: 14
+  stageClusterLabelSize: 14,
+  rankSep: 40
 };
 
 /*
@@ -149,7 +151,7 @@ function renderDagVizForStage(svgContainer) {
   var dot = metadata.select(".dot-file").text();
   var containerId = VizConstants.graphPrefix + metadata.attr("stage-id");
   var container = svgContainer.append("g").attr("id", containerId);
-  renderDot(dot, container);
+  renderDot(dot, container, StagePageVizConstants.rankSep);
 
   // Round corners on rectangles
   svgContainer
@@ -207,7 +209,7 @@ function renderDagVizForJob(svgContainer) {
     }
 
     // Actually render the stage
-    renderDot(dot, container);
+    renderDot(dot, container, JobPageVizConstants.rankSep);
 
     // Round corners on rectangles
     container
@@ -229,12 +231,13 @@ function renderDagVizForJob(svgContainer) {
 }
 
 /* Render the dot file as an SVG in the given container. */
-function renderDot(dot, container) {
+function renderDot(dot, container, rankSep) {
   var escaped_dot = dot
     .replace(/&lt;/g, "<")
     .replace(/&gt;/g, ">")
     .replace(/&quot;/g, "\"");
   var g = graphlibDot.read(escaped_dot);
+  g.graph().rankSep = rankSep;
   var renderer = new dagreD3.render();
   renderer(container, g);
 }
diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
index da1e27fd4c2a..b9cecaca88b6 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
@@ -52,35 +52,35 @@ div#application-timeline, div#job-timeline {
 }
 
 .vis.timeline .item.stage.failed {
-  background-color: #ffa1b0;
-  border-color: #ff4d6d;
+  background-color: #FFA1B0;
+  border-color: #FF4D6D;
 }
 
 .vis.timeline .item.stage.failed.selected {
-  background-color: #ffa1b0;
-  border-color: #ff4d6d;
+  background-color: #FFA1B0;
+  border-color: #FF4D6D;
   z-index: auto;
 }
 
 .legend-area rect.failed-stage-legend {
-  fill: #ffa1b0;
-  stroke: #ff4d6d;
+  fill: #FFA1B0;
+  stroke: #FF4D6D;
 }
 
 .vis.timeline .item.stage.running {
-  background-color: #a2fcc0;
-  border-color: #36f572;
+  background-color: #A2FCC0;
+  border-color: #36F572;
 }
 
 .vis.timeline .item.stage.running.selected {
-  background-color: #a2fcc0;
-  border-color: #36f572;
+  background-color: #A2FCC0;
+  border-color: #36F572;
   z-index: auto;
 }
 
 .legend-area rect.active-stage-legend {
-  fill: #a2fcc0;
-  stroke: #36f572;
+  fill: #A2FCC0;
+  stroke: #36F572;
 }
 
 .vis.timeline .item.job {
@@ -104,35 +104,35 @@ div#application-timeline, div#job-timeline {
 }
 
 .vis.timeline .item.job.failed {
-  background-color: #ffa1b0;
-  border-color: #ff4d6d;
+  background-color: #FFA1B0;
+  border-color: #FF4D6D;
 }
 
 .vis.timeline .item.job.failed.selected {
-  background-color: #ffa1b0;
-  border-color: #ff4d6d;
+  background-color: #FFA1B0;
+  border-color: #FF4D6D;
   z-index: auto;
 }
 
 .legend-area rect.failed-job-legend {
-  fill: #ffa1b0;
-  stroke: #ff4d6d;
+  fill: #FFA1B0;
+  stroke: #FF4D6D;
 }
 
 .vis.timeline .item.job.running {
-  background-color: #a2fcc0;
-  border-color: #36f572;
+  background-color: #A2FCC0;
+  border-color: #36F572;
 }
 
 .vis.timeline .item.job.running.selected {
-  background-color: #a2fcc0;
-  border-color: #36f572;
+  background-color: #A2FCC0;
+  border-color: #36F572;
   z-index: auto;
 }
 
 .legend-area rect.running-job-legend {
-  fill: #a2fcc0;
-  stroke: #36f572;
+  fill: #A2FCC0;
+  stroke: #36F572;
 }
 
 .vis.timeline .item.executor.added {
@@ -146,23 +146,23 @@ div#application-timeline, div#job-timeline {
 }
 
 .vis.timeline .item.executor.removed {
-  background-color: #ffa1b0;
-  border-color: #ff4d6d;
+  background-color: #FFA1B0;
+  border-color: #FF4D6D;
 }
 
 .legend-area rect.executor-removed-legend {
-  fill: #ffa1b0;
-  stroke: #ff4d6d;
+  fill: #FFA1B0;
+  stroke: #FF4D6D;
 }
 
 .vis.timeline .item.executor.selected {
-  background-color: #a2fcc0;
-  border-color: #36f572;
+  background-color: #A2FCC0;
+  border-color: #36F572;
   z-index: 2;
 }
 
 tr.corresponding-item-hover > td, tr.corresponding-item-hover > th {
-  background-color: #d6ffe4 !important;
+  background-color: #D6FFE4 !important;
 }
 
 #application-timeline.collapsed {
@@ -203,7 +203,7 @@ span.expand-application-timeline, span.expand-job-timeline {
 }
 
 .legend-area text {
-  fill: #4d4d4d;
+  fill: #4D4D4D;
 }
 
 .additional-metrics ul {

From def38d00191f8906d41734448d9bf72c56e3ce5d Mon Sep 17 00:00:00 2001
From: Matei Zaharia <matei@databricks.com>
Date: Fri, 8 May 2015 10:53:47 -0400
Subject: [PATCH 6/6] Add some tooltips

---
 .../apache/spark/ui/static/timeline-view.css  |  4 ++++
 .../scala/org/apache/spark/ui/ToolTips.scala  | 19 +++++++++++++++++++
 .../scala/org/apache/spark/ui/UIUtils.scala   |  5 ++++-
 .../apache/spark/ui/jobs/AllJobsPage.scala    |  8 +++++---
 .../org/apache/spark/ui/jobs/JobPage.scala    |  6 ++++--
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
index b9cecaca88b6..d40de704229c 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
@@ -83,6 +83,10 @@ div#application-timeline, div#job-timeline {
   stroke: #36F572;
 }
 
+.vis.timeline .foreground {
+  cursor: move;
+}
+
 .vis.timeline .item.job {
   cursor: pointer;
 }
diff --git a/core/src/main/scala/org/apache/spark/ui/ToolTips.scala b/core/src/main/scala/org/apache/spark/ui/ToolTips.scala
index 24f323645624..063e2a1f8b18 100644
--- a/core/src/main/scala/org/apache/spark/ui/ToolTips.scala
+++ b/core/src/main/scala/org/apache/spark/ui/ToolTips.scala
@@ -57,4 +57,23 @@ private[spark] object ToolTips {
   val GC_TIME =
     """Time that the executor spent paused for Java garbage collection while the task was
        running."""
+
+  val JOB_TIMELINE =
+    """Shows when jobs started and ended and when executors joined or left. Drag to scroll.
+       Click Enable Zooming and use mouse wheel to zoom in/out."""
+
+  val STAGE_TIMELINE =
+    """Shows when stages started and ended and when executors joined or left. Drag to scroll.
+       Click Enable Zooming and use mouse wheel to zoom in/out."""
+
+  val JOB_DAG =
+    """Shows a graph of stages executed for this job, each of which can contain
+       multiple RDD operations (e.g. map() and filter()), and of RDDs inside each operation
+       (shown as dots)."""
+
+  val STAGE_DAG =
+    """Shows a graph of RDD operations in this stage, and RDDs inside each one. A stage can run
+       multiple operations (e.g. two map() functions) if they can be pipelined. Some operations
+       also create multiple RDDs internally. Cached RDDs are shown in green.
+    """
 }
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index ffce108739ce..6a0f5c5d16da 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -350,7 +350,10 @@ 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>
-        <a>DAG Visualization</a>
+        <a data-toggle="tooltip" title={if (forJob) ToolTips.JOB_DAG else ToolTips.STAGE_DAG}
+           data-placement="right">
+          DAG Visualization
+        </a>
       </span>
       <div id="dag-viz-graph"></div>
       <div id="dag-viz-metadata">
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
index 3ef04a017855..f47590d4873a 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
@@ -23,7 +23,7 @@ import scala.xml.{Node, NodeSeq, Unparsed, Utility}
 import java.util.Date
 import javax.servlet.http.HttpServletRequest
 
-import org.apache.spark.ui.{UIUtils, WebUIPage}
+import org.apache.spark.ui.{ToolTips, UIUtils, WebUIPage}
 import org.apache.spark.ui.jobs.UIData.{ExecutorUIData, JobUIData}
 import org.apache.spark.JobExecutionStatus
 
@@ -183,7 +183,9 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
 
     <span class="expand-application-timeline">
       <span class="expand-application-timeline-arrow arrow-closed"></span>
-      <a>Event Timeline</a>
+      <a data-toggle="tooltip" title={ToolTips.JOB_TIMELINE} data-placement="right">
+        Event Timeline
+      </a>
     </span> ++
     <div id="application-timeline" class="collapsed">
       <div class="control-panel">
@@ -334,7 +336,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
           failedJobsTable
       }
 
-      val helpText = """A job is triggered by an action, like "count()" or "saveAsTextFile()".""" +
+      val helpText = """A job is triggered by an action, like count() or saveAsTextFile().""" +
         " Click on a job to see information about the stages of tasks inside it."
 
       UIUtils.headerSparkPage("Spark Jobs", content, parent, helpText = Some(helpText))
diff --git a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
index 1be4ccf36c68..fe8fd4212bdf 100644
--- a/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
+++ b/core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
@@ -26,7 +26,7 @@ import javax.servlet.http.HttpServletRequest
 
 import org.apache.spark.JobExecutionStatus
 import org.apache.spark.scheduler.StageInfo
-import org.apache.spark.ui.{UIUtils, WebUIPage}
+import org.apache.spark.ui.{ToolTips, UIUtils, WebUIPage}
 import org.apache.spark.ui.jobs.UIData.ExecutorUIData
 
 /** Page showing statistics and stage list for a given job */
@@ -164,7 +164,9 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
 
     <span class="expand-job-timeline">
       <span class="expand-job-timeline-arrow arrow-closed"></span>
-      <a>Event Timeline</a>
+      <a data-toggle="tooltip" title={ToolTips.STAGE_TIMELINE} data-placement="right">
+        Event Timeline
+      </a>
     </span> ++
     <div id="job-timeline" class="collapsed">
       <div class="control-panel">