Skip to content

Commit 082f709

Browse files
committed
Added Timeline-View feature for Applications, Jobs and Stages
1 parent 305abe1 commit 082f709

File tree

11 files changed

+794
-12
lines changed

11 files changed

+794
-12
lines changed

core/src/main/resources/org/apache/spark/ui/static/additional-metrics.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ $(function() {
3030

3131
stripeSummaryTable();
3232

33-
$("input:checkbox").click(function() {
33+
$('input[type="checkbox"]').click(function() {
3434
var column = "table ." + $(this).attr("name");
3535
$(column).toggle();
3636
stripeSummaryTable();
@@ -39,15 +39,15 @@ $(function() {
3939
$("#select-all-metrics").click(function() {
4040
if (this.checked) {
4141
// Toggle all un-checked options.
42-
$('input:checkbox:not(:checked)').trigger('click');
42+
$('input[type="checkbox"]:not(:checked)').trigger('click');
4343
} else {
4444
// Toggle all checked options.
45-
$('input:checkbox:checked').trigger('click');
45+
$('input[type="checkbox"]:checked').trigger('click');
4646
}
4747
});
4848

4949
// Trigger a click on the checkbox if a user clicks the label next to it.
5050
$("span.additional-metric-title").click(function() {
51-
$(this).parent().find('input:checkbox').trigger('click');
51+
$(this).parent().find('input[type="checkbox"]').trigger('click');
5252
});
5353
});
Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
.vis.timeline div.content {
19+
width: 100%;
20+
}
21+
22+
div#application-timeline, div#job-timeline {
23+
margin-bottom: 30px;
24+
}
25+
26+
#application-timeline .vis.timeline .item.selected {
27+
28+
}
29+
30+
#application-timeline div.legend-area {
31+
margin-top: 20px;
32+
}
33+
34+
#task-assignment-timeline div.legend-area {
35+
float: right;
36+
border: 1px solid #000000;
37+
}
38+
39+
#task-assignment-timeline .legend-area>svg {
40+
width: 600px;
41+
height: 80px;
42+
}
43+
44+
#task-assignment-timeline>div.control-panel {
45+
float: left;
46+
}
47+
48+
.control-panel input+span {
49+
cursor: pointer;
50+
}
51+
52+
#task-assignment-timeline>.timeline-header:after {
53+
content: "";
54+
clear: both;
55+
height: 0;
56+
display: block;
57+
visibility: hidden;
58+
}
59+
60+
#task-assignment-timeline div.item.range {
61+
padding: 0px;
62+
height: 40px;
63+
}
64+
65+
.task-assignment-timeline-content {
66+
width: 100%;
67+
height: 19px;
68+
}
69+
70+
.task-assignment-timeline-duration-bar {
71+
width: 100%;
72+
height: 19px;
73+
}
74+
.task.task-assignment-timeline-object.succeeded {
75+
background-color: #D5DDF6;
76+
}
77+
78+
.task.task-assignment-timeline-object.failed {
79+
background-color: #FF5475;
80+
}
81+
82+
.task.task-assignment-timeline-object.running {
83+
background-color: #FDFFCA;
84+
}
85+
86+
.stage.job-timeline-object.succeeded {
87+
background-color: #D5DDF6;
88+
}
89+
90+
.stage.job-timeline-object.succeeded.selected {
91+
background-color: #D5DDF6;
92+
border-color: #97B0F8;
93+
z-index: auto;
94+
}
95+
96+
.stage.job-timeline-object.failed {
97+
background-color: #FF5475;
98+
}
99+
100+
.stage.job-timeline-object.failed.selected {
101+
background-color: #FF5475;
102+
border-color: #97B0F8;
103+
z-index: auto;
104+
}
105+
106+
.stage.job-timeline-object.running {
107+
background-color: #FDFFCA;
108+
}
109+
110+
.stage.job-timeline-object.running.selected {
111+
background-color: #FDFFCA;
112+
border-color: #97B0F8;
113+
z-index: auto;
114+
}
115+
116+
.job.application-timeline-object.succeeded {
117+
background-color: #D5DDF6;
118+
}
119+
120+
.job.application-timeline-object.succeeded.selected {
121+
background-color: #D5DDF6;
122+
border-color: #97B0F8;
123+
z-index: auto;
124+
}
125+
126+
.job.application-timeline-object.failed {
127+
background-color: #FF5475;
128+
}
129+
130+
.job.application-timeline-object.failed.selected {
131+
background-color: #FF5475;
132+
border-color: #97B0F8;
133+
z-index: auto;
134+
}
135+
136+
.job.application-timeline-object.running {
137+
background-color: #FDFFCA;
138+
}
139+
140+
.job.application-timeline-object.running.selected {
141+
background-color: #FDFFCA;
142+
border-color: #97B0F8;
143+
z-index: auto;
144+
}
145+
146+
.executor.application-timeline-object.added {
147+
background-color: #D5DDF6;
148+
}
149+
150+
.executor.application-timeline-object.removed {
151+
background-color: #EBCA59;
152+
}
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
function drawApplicationTimeline(groupArray, eventObjArray) {
19+
var groups = new vis.DataSet(groupArray);
20+
var items = new vis.DataSet(eventObjArray);
21+
var container = $("#application-timeline")[0];
22+
var options = {
23+
groupOrder: function(a, b) {
24+
return a.value - b.value
25+
},
26+
editable: false,
27+
showCurrentTime: false,
28+
zoomable: false
29+
};
30+
31+
var applicationTimeline = new vis.Timeline(container);
32+
applicationTimeline.setOptions(options);
33+
applicationTimeline.setGroups(groups);
34+
applicationTimeline.setItems(items);
35+
36+
setupZoomable("#application-timeline-zoom-lock", applicationTimeline);
37+
}
38+
39+
function drawJobTimeline(groupArray, eventObjArray) {
40+
var groups = new vis.DataSet(groupArray);
41+
var items = new vis.DataSet(eventObjArray);
42+
43+
var container = $('#job-timeline')[0];
44+
var options = {
45+
groupOrder: function(a, b) {
46+
return a.value - b.value;
47+
},
48+
editable: false,
49+
showCurrentTime: false,
50+
zoomable: false,
51+
};
52+
53+
var jobTimeline = new vis.Timeline(container);
54+
jobTimeline.setOptions(options);
55+
jobTimeline.setGroups(groups);
56+
jobTimeline.setItems(items);
57+
58+
setupZoomable("#job-timeline-zoom-lock", jobTimeline);
59+
}
60+
61+
function drawTaskAssignmentTimeline(groupArray, eventObjArray) {
62+
var groups = new vis.DataSet(groupArray);
63+
var items = new vis.DataSet(eventObjArray);
64+
65+
//var container = document.getElementById('task-assignment-timeline');
66+
var container = $("#task-assignment-timeline")[0]
67+
var options = {
68+
groupOrder: function(a, b) {
69+
return a.value - b.value
70+
},
71+
editable: false,
72+
align: 'left',
73+
selectable: false,
74+
showCurrentTime: false,
75+
zoomable: false
76+
};
77+
78+
var taskTimeline = new vis.Timeline(container)
79+
taskTimeline.setOptions(options);
80+
taskTimeline.setGroups(groups);
81+
taskTimeline.setItems(items);
82+
83+
setupZoomable('#task-assignment-timeline-zoom-lock', taskTimeline);
84+
}
85+
86+
function setupZoomable(id, timeline) {
87+
$(id + '>input[type="checkbox"]').click(function() {
88+
if (this.checked) {
89+
timeline.setOptions({zoomable: false});
90+
} else {
91+
timeline.setOptions({zoomable: true});
92+
}
93+
});
94+
95+
$(id + ">span").click(function() {
96+
$(this).parent().find('input:checkbox').trigger('click');
97+
});
98+
}

core/src/main/resources/org/apache/spark/ui/static/vis.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

core/src/main/resources/org/apache/spark/ui/static/vis.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

core/src/main/resources/org/apache/spark/ui/static/vis.min.js

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

core/src/main/scala/org/apache/spark/ui/UIUtils.scala

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,12 +159,17 @@ private[spark] object UIUtils extends Logging {
159159
type="text/css" />
160160
<link rel="stylesheet" href={prependBaseUri("/static/webui.css")}
161161
type="text/css" />
162+
<link rel="stylesheet" href={prependBaseUri("/static/vis.min.css")}
163+
typ="text/css" />
164+
<link rel="stylesheet" href={prependBaseUri("/static/debug-tools.css")}></link>
162165
<script src={prependBaseUri("/static/sorttable.js")} ></script>
163166
<script src={prependBaseUri("/static/jquery-1.11.1.min.js")}></script>
167+
<script src={prependBaseUri("/static/vis.min.js")}></script>
164168
<script src={prependBaseUri("/static/bootstrap-tooltip.js")}></script>
165169
<script src={prependBaseUri("/static/initialize-tooltips.js")}></script>
166170
<script src={prependBaseUri("/static/table.js")}></script>
167171
<script src={prependBaseUri("/static/additional-metrics.js")}></script>
172+
<script src={prependBaseUri("/static/debug-tools.js")}></script>
168173
}
169174

170175
/** Returns a spark page with correctly formatted headers */

0 commit comments

Comments
 (0)