ODIn/spark-instrumented-optimizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[SPARK-17342][WEBUI] Style of event timeline is broken

Browse source 
## What changes were proposed in this pull request?

SPARK-15373 (#13158) updated the version of vis.js to 4.16.1. As of 4.0.0, some class was renamed like 'timeline to vis-timeline' but that ticket didn't care and now style is broken.

In this PR, I've restored the style by modifying `timeline-view.css` and `timeline-view.js`.

## How was this patch tested?

manual tests.

(If this patch involves UI changes, please attach a screenshot; otherwise, remove this)

* Before
<img width="1258" alt="2016-09-01 1 38 31" src="https://cloud.githubusercontent.com/assets/4736016/18141311/fddf1bac-6ff3-11e6-935f-28b389073b39.png">

* After
<img width="1256" alt="2016-09-01 3 30 19" src="https://cloud.githubusercontent.com/assets/4736016/18141394/49af65dc-6ff4-11e6-8640-70e20300f3c3.png">

Author: Kousuke Saruta <sarutak@oss.nttdata.co.jp>

Closes #14900 from sarutak/SPARK-17342.
This commit is contained in:
Kousuke Saruta 2016-09-02 08:46:15 +01:00 committed by Sean Owen
parent f2d6e2ef23
commit 2ab8dbddaa
2 changed files with 31 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
View file

@ -33,12 +33,15 @@ div#application-timeline, div#job-timeline {
height: 55px; height: 55px;
} }
#task-assignment-timeline div.item.range { #task-assignment-timeline div.vis-item.vis-range {
padding: 0px;
height: 26px; height: 26px;
border-width: 0; border-width: 0;
} }
#task-assignment-timeline .vis-item-content {
padding: 0px;
}
.task-assignment-timeline-content { .task-assignment-timeline-content {
width: 100%; width: 100%;
} }
@ -83,28 +86,24 @@ rect.getting-result-time-proportion {
stroke: #75B0A6; stroke: #75B0A6;
} }
.vis-item .vis-item-content { .vis-timeline {
width: 100%
}
.vis.timeline {
line-height: 14px; line-height: 14px;
} }
.vis.timeline div.content { .vis-timeline div.vis-item-content {
width: 100%; width: 100%;
} }
.vis.timeline .item.stage { .vis-timeline .vis-item.stage {
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.stage.succeeded { .vis-timeline .vis-item.stage.succeeded {
background-color: #A0DFFF; background-color: #A0DFFF;
border-color: #3EC0FF; border-color: #3EC0FF;
} }
.vis.timeline .item.stage.succeeded.selected { .vis-timeline .vis-item.stage.succeeded.vis-selected {
background-color: #A0DFFF; background-color: #A0DFFF;
border-color: #3EC0FF; border-color: #3EC0FF;
z-index: auto; z-index: auto;
@ -115,12 +114,12 @@ rect.getting-result-time-proportion {
stroke: #3EC0FF; stroke: #3EC0FF;
} }
.vis.timeline .item.stage.failed { .vis-timeline .vis-item.stage.failed {
background-color: #FFA1B0; background-color: #FFA1B0;
border-color: #FF4D6D; border-color: #FF4D6D;
} }
.vis.timeline .item.stage.failed.selected { .vis-timeline .vis-item.stage.failed.vis-selected {
background-color: #FFA1B0; background-color: #FFA1B0;
border-color: #FF4D6D; border-color: #FF4D6D;
z-index: auto; z-index: auto;
@ -131,12 +130,12 @@ rect.getting-result-time-proportion {
stroke: #FF4D6D; stroke: #FF4D6D;
} }
.vis.timeline .item.stage.running { .vis-timeline .vis-item.stage.running {
background-color: #A2FCC0; background-color: #A2FCC0;
border-color: #36F572; border-color: #36F572;
} }
.vis.timeline .item.stage.running.selected { .vis-timeline .vis-item.stage.running.vis-selected {
background-color: #A2FCC0; background-color: #A2FCC0;
border-color: #36F572; border-color: #36F572;
z-index: auto; z-index: auto;
@ -147,20 +146,20 @@ rect.getting-result-time-proportion {
stroke: #36F572; stroke: #36F572;
} }
.vis.timeline .foreground { .vis-timeline .vis-foreground {
cursor: move; cursor: move;
} }
.vis.timeline .item.job { .vis-timeline .vis-item.job {
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.job.succeeded { .vis-timeline .vis-item.job.succeeded {
background-color: #A0DFFF; background-color: #A0DFFF;
border-color: #3EC0FF; border-color: #3EC0FF;
} }
.vis.timeline .item.job.succeeded.selected { .vis-timeline .vis-item.job.succeeded.vis-selected {
background-color: #A0DFFF; background-color: #A0DFFF;
border-color: #3EC0FF; border-color: #3EC0FF;
z-index: auto; z-index: auto;
@ -171,12 +170,12 @@ rect.getting-result-time-proportion {
stroke: #3EC0FF; stroke: #3EC0FF;
} }
.vis.timeline .item.job.failed { .vis-timeline .vis-item.job.failed {
background-color: #FFA1B0; background-color: #FFA1B0;
border-color: #FF4D6D; border-color: #FF4D6D;
} }
.vis.timeline .item.job.failed.selected { .vis-timeline .vis-item.job.failed.vis-selected {
background-color: #FFA1B0; background-color: #FFA1B0;
border-color: #FF4D6D; border-color: #FF4D6D;
z-index: auto; z-index: auto;
@ -187,12 +186,12 @@ rect.getting-result-time-proportion {
stroke: #FF4D6D; stroke: #FF4D6D;
} }
.vis.timeline .item.job.running { .vis-timeline .vis-item.job.running {
background-color: #A2FCC0; background-color: #A2FCC0;
border-color: #36F572; border-color: #36F572;
} }
.vis.timeline .item.job.running.selected { .vis-timeline .vis-item.job.running.vis-selected {
background-color: #A2FCC0; background-color: #A2FCC0;
border-color: #36F572; border-color: #36F572;
z-index: auto; z-index: auto;
@ -203,7 +202,7 @@ rect.getting-result-time-proportion {
stroke: #36F572; stroke: #36F572;
} }
.vis.timeline .item.executor.added { .vis-timeline .vis-item.executor.added {
background-color: #A0DFFF; background-color: #A0DFFF;
border-color: #3EC0FF; border-color: #3EC0FF;
} }
@ -213,7 +212,7 @@ rect.getting-result-time-proportion {
stroke: #3EC0FF; stroke: #3EC0FF;
} }
.vis.timeline .item.executor.removed { .vis-timeline .vis-item.executor.removed {
background-color: #FFA1B0; background-color: #FFA1B0;
border-color: #FF4D6D; border-color: #FF4D6D;
} }
@ -223,7 +222,7 @@ rect.getting-result-time-proportion {
stroke: #FF4D6D; stroke: #FF4D6D;
} }
.vis.timeline .item.executor.selected { .vis-timeline .vis-item.executor.vis-selected {
background-color: #A2FCC0; background-color: #A2FCC0;
border-color: #36F572; border-color: #36F572;
z-index: 2; z-index: 2;
@ -262,15 +261,15 @@ span.expand-task-assignment-timeline {
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.range .content { .vis-timeline .vis-item.vis-range .vis-item-content {
position: unset; position: unset;
} }
.vis.timeline .item .tooltip-inner { .vis-timeline .vis-item .tooltip-inner {
max-width: unset !important; max-width: unset !important;
} }
.vispanel.center { .vis-panel.vis-center {
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
} }

6
core/src/main/resources/org/apache/spark/ui/static/timeline-view.js
View file

@ -41,7 +41,7 @@ function drawApplicationTimeline(groupArray, eventObjArray, startTime, offset) {
setupExecutorEventAction(); setupExecutorEventAction();
function setupJobEventAction() { 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 getSelectorForJobEntry = function(baseElem) {
var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text(); var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text();
var jobId = jobIdText.match("\\(Job (\\d+)\\)$")[1]; var jobId = jobIdText.match("\\(Job (\\d+)\\)$")[1];
@ -116,7 +116,7 @@ function drawJobTimeline(groupArray, eventObjArray, startTime, offset) {
setupExecutorEventAction(); setupExecutorEventAction();
function setupStageEventAction() { 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 getSelectorForStageEntry = function(baseElem) {
var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text(); var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text();
var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)$")[1].split("."); var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)$")[1].split(".");
@ -233,7 +233,7 @@ $(function (){
}); });
function setupExecutorEventAction() { function setupExecutorEventAction() {
$(".item.box.executor").each(function () { $(".vis-item.vis-box.executor").each(function () {
$(this).hover( $(this).hover(
function() { function() {
$($(this).find(".executor-event-content")[0]).tooltip("show"); $($(this).find(".executor-event-content")[0]).tooltip("show");