Skip to content

Commit

Permalink
Added Timeline-View feature for Applications, Jobs and Stages
Browse files Browse the repository at this point in the history
  • Loading branch information
sarutak committed Apr 1, 2015
1 parent 305abe1 commit 082f709
Show file tree
Hide file tree
Showing 11 changed files with 794 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $(function() {

stripeSummaryTable();

$("input:checkbox").click(function() {
$('input[type="checkbox"]').click(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
stripeSummaryTable();
Expand All @@ -39,15 +39,15 @@ $(function() {
$("#select-all-metrics").click(function() {
if (this.checked) {
// Toggle all un-checked options.
$('input:checkbox:not(:checked)').trigger('click');
$('input[type="checkbox"]:not(:checked)').trigger('click');
} else {
// Toggle all checked options.
$('input:checkbox:checked').trigger('click');
$('input[type="checkbox"]:checked').trigger('click');
}
});

// Trigger a click on the checkbox if a user clicks the label next to it.
$("span.additional-metric-title").click(function() {
$(this).parent().find('input:checkbox').trigger('click');
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
});
152 changes: 152 additions & 0 deletions core/src/main/resources/org/apache/spark/ui/static/debug-tools.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.vis.timeline div.content {
width: 100%;
}

div#application-timeline, div#job-timeline {
margin-bottom: 30px;
}

#application-timeline .vis.timeline .item.selected {

}

#application-timeline div.legend-area {
margin-top: 20px;
}

#task-assignment-timeline div.legend-area {
float: right;
border: 1px solid #000000;
}

#task-assignment-timeline .legend-area>svg {
width: 600px;
height: 80px;
}

#task-assignment-timeline>div.control-panel {
float: left;
}

.control-panel input+span {
cursor: pointer;
}

#task-assignment-timeline>.timeline-header:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#task-assignment-timeline div.item.range {
padding: 0px;
height: 40px;
}

.task-assignment-timeline-content {
width: 100%;
height: 19px;
}

.task-assignment-timeline-duration-bar {
width: 100%;
height: 19px;
}
.task.task-assignment-timeline-object.succeeded {
background-color: #D5DDF6;
}

.task.task-assignment-timeline-object.failed {
background-color: #FF5475;
}

.task.task-assignment-timeline-object.running {
background-color: #FDFFCA;
}

.stage.job-timeline-object.succeeded {
background-color: #D5DDF6;
}

.stage.job-timeline-object.succeeded.selected {
background-color: #D5DDF6;
border-color: #97B0F8;
z-index: auto;
}

.stage.job-timeline-object.failed {
background-color: #FF5475;
}

.stage.job-timeline-object.failed.selected {
background-color: #FF5475;
border-color: #97B0F8;
z-index: auto;
}

.stage.job-timeline-object.running {
background-color: #FDFFCA;
}

.stage.job-timeline-object.running.selected {
background-color: #FDFFCA;
border-color: #97B0F8;
z-index: auto;
}

.job.application-timeline-object.succeeded {
background-color: #D5DDF6;
}

.job.application-timeline-object.succeeded.selected {
background-color: #D5DDF6;
border-color: #97B0F8;
z-index: auto;
}

.job.application-timeline-object.failed {
background-color: #FF5475;
}

.job.application-timeline-object.failed.selected {
background-color: #FF5475;
border-color: #97B0F8;
z-index: auto;
}

.job.application-timeline-object.running {
background-color: #FDFFCA;
}

.job.application-timeline-object.running.selected {
background-color: #FDFFCA;
border-color: #97B0F8;
z-index: auto;
}

.executor.application-timeline-object.added {
background-color: #D5DDF6;
}

.executor.application-timeline-object.removed {
background-color: #EBCA59;
}
98 changes: 98 additions & 0 deletions core/src/main/resources/org/apache/spark/ui/static/debug-tools.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

function drawApplicationTimeline(groupArray, eventObjArray) {
var groups = new vis.DataSet(groupArray);
var items = new vis.DataSet(eventObjArray);
var container = $("#application-timeline")[0];
var options = {
groupOrder: function(a, b) {
return a.value - b.value
},
editable: false,
showCurrentTime: false,
zoomable: false
};

var applicationTimeline = new vis.Timeline(container);
applicationTimeline.setOptions(options);
applicationTimeline.setGroups(groups);
applicationTimeline.setItems(items);

setupZoomable("#application-timeline-zoom-lock", applicationTimeline);
}

function drawJobTimeline(groupArray, eventObjArray) {
var groups = new vis.DataSet(groupArray);
var items = new vis.DataSet(eventObjArray);

var container = $('#job-timeline')[0];
var options = {
groupOrder: function(a, b) {
return a.value - b.value;
},
editable: false,
showCurrentTime: false,
zoomable: false,
};

var jobTimeline = new vis.Timeline(container);
jobTimeline.setOptions(options);
jobTimeline.setGroups(groups);
jobTimeline.setItems(items);

setupZoomable("#job-timeline-zoom-lock", jobTimeline);
}

function drawTaskAssignmentTimeline(groupArray, eventObjArray) {
var groups = new vis.DataSet(groupArray);
var items = new vis.DataSet(eventObjArray);

//var container = document.getElementById('task-assignment-timeline');
var container = $("#task-assignment-timeline")[0]
var options = {
groupOrder: function(a, b) {
return a.value - b.value
},
editable: false,
align: 'left',
selectable: false,
showCurrentTime: false,
zoomable: false
};

var taskTimeline = new vis.Timeline(container)
taskTimeline.setOptions(options);
taskTimeline.setGroups(groups);
taskTimeline.setItems(items);

setupZoomable('#task-assignment-timeline-zoom-lock', taskTimeline);
}

function setupZoomable(id, timeline) {
$(id + '>input[type="checkbox"]').click(function() {
if (this.checked) {
timeline.setOptions({zoomable: false});
} else {
timeline.setOptions({zoomable: true});
}
});

$(id + ">span").click(function() {
$(this).parent().find('input:checkbox').trigger('click');
});
}
1 change: 1 addition & 0 deletions core/src/main/resources/org/apache/spark/ui/static/vis.map

Large diffs are not rendered by default.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 39 additions & 0 deletions core/src/main/resources/org/apache/spark/ui/static/vis.min.js

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions core/src/main/scala/org/apache/spark/ui/UIUtils.scala
Original file line number Diff line number Diff line change
Expand Up @@ -159,12 +159,17 @@ private[spark] object UIUtils extends Logging {
type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/webui.css")}
type="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/vis.min.css")}
typ="text/css" />
<link rel="stylesheet" href={prependBaseUri("/static/debug-tools.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>
<script src={prependBaseUri("/static/bootstrap-tooltip.js")}></script>
<script src={prependBaseUri("/static/initialize-tooltips.js")}></script>
<script src={prependBaseUri("/static/table.js")}></script>
<script src={prependBaseUri("/static/additional-metrics.js")}></script>
<script src={prependBaseUri("/static/debug-tools.js")}></script>
}

/** Returns a spark page with correctly formatted headers */
Expand Down
Loading

0 comments on commit 082f709

Please sign in to comment.