Skip to content

Commit 2ab8dbd

Browse files
sarutaksrowen
sarutak
authored and
srowen
committed
[SPARK-17342][WEBUI] Style of event timeline is broken
## 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.
1 parent f2d6e2e commit 2ab8dbd

File tree

2 files changed

+31
-32
lines changed

2 files changed

+31
-32
lines changed

‎core/src/main/resources/org/apache/spark/ui/static/timeline-view.css‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,15 @@ div#application-timeline, div#job-timeline {
3333
height: 55px;
3434
}
3535

36-
#task-assignment-timeline div.item.range {
37-
padding: 0px;
36+
#task-assignment-timeline div.vis-item.vis-range {
3837
height: 26px;
3938
border-width: 0;
4039
}
4140

41+
#task-assignment-timeline .vis-item-content {
42+
padding: 0px;
43+
}
44+
4245
.task-assignment-timeline-content {
4346
width: 100%;
4447
}
@@ -83,28 +86,24 @@ rect.getting-result-time-proportion {
8386
stroke: #75B0A6;
8487
}
8588

86-
.vis-item .vis-item-content {
87-
width: 100%
88-
}
89-
90-
.vis.timeline {
89+
.vis-timeline {
9190
line-height: 14px;
9291
}
9392

94-
.vis.timeline div.content {
93+
.vis-timeline div.vis-item-content {
9594
width: 100%;
9695
}
9796

98-
.vis.timeline .item.stage {
97+
.vis-timeline .vis-item.stage {
9998
cursor: pointer;
10099
}
101100

102-
.vis.timeline .item.stage.succeeded {
101+
.vis-timeline .vis-item.stage.succeeded {
103102
background-color: #A0DFFF;
104103
border-color: #3EC0FF;
105104
}
106105

107-
.vis.timeline .item.stage.succeeded.selected {
106+
.vis-timeline .vis-item.stage.succeeded.vis-selected {
108107
background-color: #A0DFFF;
109108
border-color: #3EC0FF;
110109
z-index: auto;
@@ -115,12 +114,12 @@ rect.getting-result-time-proportion {
115114
stroke: #3EC0FF;
116115
}
117116

118-
.vis.timeline .item.stage.failed {
117+
.vis-timeline .vis-item.stage.failed {
119118
background-color: #FFA1B0;
120119
border-color: #FF4D6D;
121120
}
122121

123-
.vis.timeline .item.stage.failed.selected {
122+
.vis-timeline .vis-item.stage.failed.vis-selected {
124123
background-color: #FFA1B0;
125124
border-color: #FF4D6D;
126125
z-index: auto;
@@ -131,12 +130,12 @@ rect.getting-result-time-proportion {
131130
stroke: #FF4D6D;
132131
}
133132

134-
.vis.timeline .item.stage.running {
133+
.vis-timeline .vis-item.stage.running {
135134
background-color: #A2FCC0;
136135
border-color: #36F572;
137136
}
138137

139-
.vis.timeline .item.stage.running.selected {
138+
.vis-timeline .vis-item.stage.running.vis-selected {
140139
background-color: #A2FCC0;
141140
border-color: #36F572;
142141
z-index: auto;
@@ -147,20 +146,20 @@ rect.getting-result-time-proportion {
147146
stroke: #36F572;
148147
}
149148

150-
.vis.timeline .foreground {
149+
.vis-timeline .vis-foreground {
151150
cursor: move;
152151
}
153152

154-
.vis.timeline .item.job {
153+
.vis-timeline .vis-item.job {
155154
cursor: pointer;
156155
}
157156

158-
.vis.timeline .item.job.succeeded {
157+
.vis-timeline .vis-item.job.succeeded {
159158
background-color: #A0DFFF;
160159
border-color: #3EC0FF;
161160
}
162161

163-
.vis.timeline .item.job.succeeded.selected {
162+
.vis-timeline .vis-item.job.succeeded.vis-selected {
164163
background-color: #A0DFFF;
165164
border-color: #3EC0FF;
166165
z-index: auto;
@@ -171,12 +170,12 @@ rect.getting-result-time-proportion {
171170
stroke: #3EC0FF;
172171
}
173172

174-
.vis.timeline .item.job.failed {
173+
.vis-timeline .vis-item.job.failed {
175174
background-color: #FFA1B0;
176175
border-color: #FF4D6D;
177176
}
178177

179-
.vis.timeline .item.job.failed.selected {
178+
.vis-timeline .vis-item.job.failed.vis-selected {
180179
background-color: #FFA1B0;
181180
border-color: #FF4D6D;
182181
z-index: auto;
@@ -187,12 +186,12 @@ rect.getting-result-time-proportion {
187186
stroke: #FF4D6D;
188187
}
189188

190-
.vis.timeline .item.job.running {
189+
.vis-timeline .vis-item.job.running {
191190
background-color: #A2FCC0;
192191
border-color: #36F572;
193192
}
194193

195-
.vis.timeline .item.job.running.selected {
194+
.vis-timeline .vis-item.job.running.vis-selected {
196195
background-color: #A2FCC0;
197196
border-color: #36F572;
198197
z-index: auto;
@@ -203,7 +202,7 @@ rect.getting-result-time-proportion {
203202
stroke: #36F572;
204203
}
205204

206-
.vis.timeline .item.executor.added {
205+
.vis-timeline .vis-item.executor.added {
207206
background-color: #A0DFFF;
208207
border-color: #3EC0FF;
209208
}
@@ -213,7 +212,7 @@ rect.getting-result-time-proportion {
213212
stroke: #3EC0FF;
214213
}
215214

216-
.vis.timeline .item.executor.removed {
215+
.vis-timeline .vis-item.executor.removed {
217216
background-color: #FFA1B0;
218217
border-color: #FF4D6D;
219218
}
@@ -223,7 +222,7 @@ rect.getting-result-time-proportion {
223222
stroke: #FF4D6D;
224223
}
225224

226-
.vis.timeline .item.executor.selected {
225+
.vis-timeline .vis-item.executor.vis-selected {
227226
background-color: #A2FCC0;
228227
border-color: #36F572;
229228
z-index: 2;
@@ -262,15 +261,15 @@ span.expand-task-assignment-timeline {
262261
cursor: pointer;
263262
}
264263

265-
.vis.timeline .item.range .content {
264+
.vis-timeline .vis-item.vis-range .vis-item-content {
266265
position: unset;
267266
}
268267

269-
.vis.timeline .item .tooltip-inner {
268+
.vis-timeline .vis-item .tooltip-inner {
270269
max-width: unset !important;
271270
}
272271

273-
.vispanel.center {
272+
.vis-panel.vis-center {
274273
font-size: 12px;
275274
line-height: 12px;
276275
}

‎core/src/main/resources/org/apache/spark/ui/static/timeline-view.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function drawApplicationTimeline(groupArray, eventObjArray, startTime, offset) {
4141
setupExecutorEventAction();
4242

4343
function setupJobEventAction() {
44-
$(".item.range.job.application-timeline-object").each(function() {
44+
$(".vis-item.vis-range.job.application-timeline-object").each(function() {
4545
var getSelectorForJobEntry = function(baseElem) {
4646
var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text();
4747
var jobId = jobIdText.match("\\(Job (\\d+)\\)$")[1];
@@ -116,7 +116,7 @@ function drawJobTimeline(groupArray, eventObjArray, startTime, offset) {
116116
setupExecutorEventAction();
117117

118118
function setupStageEventAction() {
119-
$(".item.range.stage.job-timeline-object").each(function() {
119+
$(".vis-item.vis-range.stage.job-timeline-object").each(function() {
120120
var getSelectorForStageEntry = function(baseElem) {
121121
var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text();
122122
var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)$")[1].split(".");
@@ -233,7 +233,7 @@ $(function (){
233233
});
234234

235235
function setupExecutorEventAction() {
236-
$(".item.box.executor").each(function () {
236+
$(".vis-item.vis-box.executor").each(function () {
237237
$(this).hover(
238238
function() {
239239
$($(this).find(".executor-event-content")[0]).tooltip("show");

0 commit comments

Comments
 (0)