From d32d1e1596cd44ccfcfc9d262d1f3ddeb263d31e Mon Sep 17 00:00:00 2001
From: Kousuke Saruta <sarutak@oss.nttdata.co.jp>
Date: Thu, 1 Sep 2016 03:19:16 +0900
Subject: [PATCH 1/2] Fixed stylesheet to make adjustment to vis.js-4.16.1

---
 .../apache/spark/ui/static/timeline-view.css  | 53 ++++++++++---------
 .../apache/spark/ui/static/timeline-view.js   |  6 +--
 2 files changed, 31 insertions(+), 28 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 f9ad9f8378803..e7d716b07cf3b 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
@@ -33,12 +33,15 @@ div#application-timeline, div#job-timeline {
   height: 55px;
 }
 
-#task-assignment-timeline div.item.range {
-  padding: 0px;
+#task-assignment-timeline div.vis-item.vis-range {
   height: 26px;
   border-width: 0;
 }
 
+#task-assignment-timeline .vis-item-content {
+  padding: 0px;
+}
+
 .task-assignment-timeline-content {
   width: 100%;
 }
@@ -87,24 +90,24 @@ rect.getting-result-time-proportion {
     width: 100%
 }
 
-.vis.timeline {
+.vis-timeline {
   line-height: 14px;
 }
 
-.vis.timeline div.content {
+.vis-timeline div.vis-item-content {
   width: 100%;
 }
 
-.vis.timeline .item.stage {
+.vis-timeline .vis-item.stage {
   cursor: pointer;
 }
 
-.vis.timeline .item.stage.succeeded {
+.vis-timeline .vis-item.stage.succeeded {
   background-color: #A0DFFF;
   border-color: #3EC0FF;
 }
 
-.vis.timeline .item.stage.succeeded.selected {
+.vis-timeline .vis-item.stage.succeeded.vis-selected {
   background-color: #A0DFFF;
   border-color: #3EC0FF;
   z-index: auto;
@@ -115,12 +118,12 @@ rect.getting-result-time-proportion {
   stroke: #3EC0FF;
 }
 
-.vis.timeline .item.stage.failed {
+.vis-timeline .vis-item.stage.failed {
   background-color: #FFA1B0;
   border-color: #FF4D6D;
 }
 
-.vis.timeline .item.stage.failed.selected {
+.vis-timeline .vis-item.stage.failed.vis-selected {
   background-color: #FFA1B0;
   border-color: #FF4D6D;
   z-index: auto;
@@ -131,12 +134,12 @@ rect.getting-result-time-proportion {
   stroke: #FF4D6D;
 }
 
-.vis.timeline .item.stage.running {
+.vis-timeline .vis-item.stage.running {
   background-color: #A2FCC0;
   border-color: #36F572;
 }
 
-.vis.timeline .item.stage.running.selected {
+.vis-timeline .vis-item.stage.running.vis-selected {
   background-color: #A2FCC0;
   border-color: #36F572;
   z-index: auto;
@@ -147,20 +150,20 @@ rect.getting-result-time-proportion {
   stroke: #36F572;
 }
 
-.vis.timeline .foreground {
+.vis-timeline .vis-foreground {
   cursor: move;
 }
 
-.vis.timeline .item.job {
+.vis-timeline .vis-item.job {
   cursor: pointer;
 }
 
-.vis.timeline .item.job.succeeded {
+.vis-timeline .vis-item.job.succeeded {
   background-color: #A0DFFF;
   border-color: #3EC0FF;
 }
 
-.vis.timeline .item.job.succeeded.selected {
+.vis-timeline .vis-item.job.succeeded.vis-selected {
   background-color: #A0DFFF;
   border-color: #3EC0FF;
   z-index: auto;
@@ -171,12 +174,12 @@ rect.getting-result-time-proportion {
   stroke: #3EC0FF;
 }
 
-.vis.timeline .item.job.failed {
+.vis-timeline .vis-item.job.failed {
   background-color: #FFA1B0;
   border-color: #FF4D6D;
 }
 
-.vis.timeline .item.job.failed.selected {
+.vis-timeline .vis-item.job.failed.vis-selected {
   background-color: #FFA1B0;
   border-color: #FF4D6D;
   z-index: auto;
@@ -187,12 +190,12 @@ rect.getting-result-time-proportion {
   stroke: #FF4D6D;
 }
 
-.vis.timeline .item.job.running {
+.vis-timeline .vis-item.job.running {
   background-color: #A2FCC0;
   border-color: #36F572;
 }
 
-.vis.timeline .item.job.running.selected {
+.vis-timeline .vis-item.job.running.vis-selected {
   background-color: #A2FCC0;
   border-color: #36F572;
   z-index: auto;
@@ -203,7 +206,7 @@ rect.getting-result-time-proportion {
   stroke: #36F572;
 }
 
-.vis.timeline .item.executor.added {
+.vis-timeline .vis-item.executor.added {
   background-color: #A0DFFF;
   border-color: #3EC0FF;
 }
@@ -213,7 +216,7 @@ rect.getting-result-time-proportion {
   stroke: #3EC0FF;
 }
 
-.vis.timeline .item.executor.removed {
+.vis-timeline .vis-item.executor.removed {
   background-color: #FFA1B0;
   border-color: #FF4D6D;
 }
@@ -223,7 +226,7 @@ rect.getting-result-time-proportion {
   stroke: #FF4D6D;
 }
 
-.vis.timeline .item.executor.selected {
+.vis-timeline .vis-item.executor.vis-selected {
   background-color: #A2FCC0;
   border-color: #36F572;
   z-index: 2;
@@ -262,15 +265,15 @@ span.expand-task-assignment-timeline {
   cursor: pointer;
 }
 
-.vis.timeline .item.range .content {
+.vis-timeline .vis-item.vis-range .vis-item-content {
   position: unset;
 }
 
-.vis.timeline .item .tooltip-inner {
+.vis-timeline .vis-item .tooltip-inner {
   max-width: unset !important;
 }
 
-.vispanel.center {
+.vis-panel.vis-center {
   font-size: 12px;
   line-height: 12px;
 }
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 9ab5684d901f0..a6153ceda75e2 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
@@ -41,7 +41,7 @@ function drawApplicationTimeline(groupArray, eventObjArray, startTime, offset) {
   setupExecutorEventAction();
 
   function setupJobEventAction() {
-    $(".item.range.job.application-timeline-object").each(function() {
+    $(".vis-item.vis-range.job.application-timeline-object").each(function() {
       var getSelectorForJobEntry = function(baseElem) {
         var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text();
         var jobId = jobIdText.match("\\(Job (\\d+)\\)$")[1];
@@ -116,7 +116,7 @@ function drawJobTimeline(groupArray, eventObjArray, startTime, offset) {
   setupExecutorEventAction();
 
   function setupStageEventAction() {
-    $(".item.range.stage.job-timeline-object").each(function() {
+    $(".vis-item.vis-range.stage.job-timeline-object").each(function() {
       var getSelectorForStageEntry = function(baseElem) {
         var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text();
         var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)$")[1].split(".");
@@ -233,7 +233,7 @@ $(function (){
 });
 
 function setupExecutorEventAction() {
-  $(".item.box.executor").each(function () {
+  $(".vis-item.vis-box.executor").each(function () {
     $(this).hover(
       function() {
         $($(this).find(".executor-event-content")[0]).tooltip("show");

From c4ad6a1b813c5553e9c86c86ee234ffa43daff5e Mon Sep 17 00:00:00 2001
From: Kousuke Saruta <sarutak@oss.nttdata.co.jp>
Date: Fri, 2 Sep 2016 06:55:41 +0900
Subject: [PATCH 2/2] Removed unnecessary style rule

---
 .../resources/org/apache/spark/ui/static/timeline-view.css    | 4 ----
 1 file changed, 4 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 e7d716b07cf3b..3bf3e8bfa1f31 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
@@ -86,10 +86,6 @@ rect.getting-result-time-proportion {
   stroke: #75B0A6;
 }
 
-.vis-item .vis-item-content {
-    width: 100%
-}
-
 .vis-timeline {
   line-height: 14px;
 }