Skip to content

Commit

Permalink
Modified appearances more
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarutak
sarutak committed May 12, 2015
1 parent 81903ab commit 2319739
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 52 deletions.
37 changes: 4 additions & 33 deletions core/src/main/resources/org/apache/spark/ui/static/timeline-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ div#application-timeline, div#job-timeline {

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

#task-assignment-timeline > .timeline-header:after {
Expand All @@ -45,6 +45,7 @@ div#application-timeline, div#job-timeline {
#task-assignment-timeline div.item.range {
padding: 0px;
height: 26px;
border-width: 0;
}

.task-assignment-timeline-content {
Expand All @@ -53,11 +54,11 @@ div#application-timeline, div#job-timeline {

.task-assignment-timeline-duration-bar {
width: 100%;
height: 24px;
height: 26px;
}

rect.scheduler-delay-proportion {
fill: #FFF9AD;
fill: #F6D76B;
}

rect.deserialization-time-proportion {
Expand All @@ -84,36 +85,6 @@ rect.getting-result-time-proportion {
fill: #FF9036;
}

.vis.timeline .item.task.succeeded {
background-color: #A0DFFF;
border-color: #3EC0FF;
}

.legend-area rect.succeeded-task-legend {
fill: #A0DFFF;
stroke: #97B0F8;
}

.vis.timeline .item.task.failed {
background-color: #FFA1B0;
border-color: #FF4D6D;
}

.legend-area rect.failed-task-legend {
fill: #FF5475;
stroke: #FFA1B0;
}

.vis.timeline .item.task.running {
background-color: #A2FCC0;
border-color: #36F572;
}

.legend-area rect.running-task-legend {
fill: #A2FCC0;
stroke: #97B0F8;
}

.vis.timeline {
line-height: 14px;
}
Expand Down
29 changes: 10 additions & 19 deletions core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,6 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
private val TIMELINE_LEGEND = {
<div class="legend-area">
<svg>
<rect class="succeeded-task-legend" x="5px" y="5px" width="20px"
height="15px" rx="2px"></rect>
<text x="35px" y="17px">Succeeded</text>
<rect class="failed-task-legend" x="215px" y="5px" width="20px"
height="15px" rx="2px"></rect>
<text x="245px" y="17px">Failed</text>
<rect class="running-task-legend" x="425px" y="5px" width="20px"
height="15px" rx="2px"></rect>
<text x="455px" y="17px">Running</text>
{
val legendPairs = List(("deserialization-time-proportion", "Task Deserialization Time"),
("shuffle-read-time-proportion", "Shuffle Read Time"),
Expand All @@ -60,10 +51,10 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {

legendPairs.zipWithIndex.map {
case ((classAttr, name), index) =>
<rect x={5 + (index / 3) * 210 + "px"} y={35 + (index % 3) * 15 + "px"}
<rect x={5 + (index / 3) * 210 + "px"} y={10 + (index % 3) * 15 + "px"}
width="10px" height="10px" class={classAttr}></rect>
<text x={25 + (index / 3) * 210 + "px"}
y={45 + (index % 3) * 15 + "px"}>{name}</text>
y={20 + (index % 3) * 15 + "px"}>{name}</text>
}
}
</svg>
Expand Down Expand Up @@ -633,25 +624,25 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
'<br>Getting Result Time: ${UIUtils.formatDuration(gettingResultTime)}">' +
| '<svg class="task-assignment-timeline-duration-bar">' +
| '<rect class="scheduler-delay-proportion" ' +
| 'x="${schedulerDelayProportionPos}%" y="5px" height="14px"' +
| 'x="${schedulerDelayProportionPos}%" y="0px" height="26px"' +
| 'width="${schedulerDelayProportion}%""></rect>' +
| '<rect class="deserialization-time-proportion" '+
| 'x="${deserializationTimeProportionPos}%" y="5px" height="14px"' +
| 'x="${deserializationTimeProportionPos}%" y="0px" height="26px"' +
| 'width="${deserializationTimeProportion}%"></rect>' +
| '<rect class="shuffle-read-time-proportion" ' +
| 'x="${shuffleReadTimeProportionPos}%" y="5px" height="14px"' +
| 'x="${shuffleReadTimeProportionPos}%" y="0px" height="26px"' +
| 'width="${shuffleReadTimeProportion}%"></rect>' +
| '<rect class="executor-runtime-proportion" ' +
| 'x="${executorRuntimeProportionPos}%" y="5px" height="14px"' +
| 'x="${executorRuntimeProportionPos}%" y="0px" height="26px"' +
| 'width="${executorComputingTimeProportion}%"></rect>' +
| '<rect class="shuffle-write-time-proportion" ' +
| 'x="${shuffleWriteTimeProportionPos}%" y="5px" height="14px"' +
| 'x="${shuffleWriteTimeProportionPos}%" y="0px" height="26px"' +
| 'width="${shuffleWriteTimeProportion}%"></rect>' +
| '<rect class="serialization-time-proportion" ' +
| 'x="${serializationTimeProportionPos}%" y="5px" height="14px"' +
| 'x="${serializationTimeProportionPos}%" y="0px" height="26px"' +
| 'width="${serializationTimeProportion}%"></rect>' +
| '<rect class="getting-result-time-proportion" ' +
| 'x="${gettingResultTimeProportionPos}%" y="5px" height="14px"' +
| 'x="${gettingResultTimeProportionPos}%" y="0px" height="26px"' +
| 'width="${gettingResultTimeProportion}%"></rect></svg>',
| 'start': new Date(${launchTime}),
| 'end': new Date(${finishTime})
Expand Down Expand Up @@ -686,7 +677,7 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {

<span class="expand-task-assignment-timeline">
<span class="expand-task-assignment-timeline-arrow arrow-closed"></span>
<a>Event Timeline(Longest {numEffectiveTasks.min(MAX_TIMELINE_TASKS)} tasks)</a>
<a>Event Timeline (Longest {numEffectiveTasks.min(MAX_TIMELINE_TASKS)} tasks)</a>
</span> ++
<div id="task-assignment-timeline" class="collapsed">
<div class="timeline-header">
Expand Down

0 comments on commit 2319739

Please sign in to comment.