Skip to content

Commit

Permalink
Fixed highlight issue
Browse files Browse the repository at this point in the history 
Implemented toggling function
  • Loading branch information
@sarutak
sarutak committed Apr 23, 2015
1 parent 0dc4278 commit 28714b6
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 42 deletions.
18 changes: 15 additions & 3 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 @@ -20,7 +20,7 @@ div#application-timeline, div#job-timeline {
}

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

.vis.timeline div.content {
Expand Down Expand Up @@ -109,6 +109,18 @@ div#application-timeline, div#job-timeline {
z-index: 2;
}

tr.corresponding-item-hover {
background: #FFE1FA !important;
tr.corresponding-item-hover>td, tr.corresponding-item-hover>th {
background-color: #FFE1FA !important;
}

#application-timeline.collapsed {
display: none;
}

#job-timeline.collapsed {
display: none;
}

.control-panel {
margin-bottom: 5px;
}
44 changes: 31 additions & 13 deletions core/src/main/resources/org/apache/spark/ui/static/timeline-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,31 @@ function drawApplicationTimeline(groupArray, eventObjArray, startTime) {
$(".item.range.job.application-timeline-object").each(function() {
var getJobId = function(baseElem) {
var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text();
var jobId = "#job-" + jobIdText.match("\\(Job (\\d+)\\)")[1];
var jobId = jobIdText.match("\\(Job (\\d+)\\)")[1];
return jobId;
}
};

$(this).click(function() {
window.location.href = getJobId(this);
window.location.href = "job/?id=" + getJobId(this);
});

$(this).hover(
function() {
$(getJobId(this)).addClass("corresponding-item-hover");
$("#job-" + getJobId(this)).addClass("corresponding-item-hover");
},
function() {
$(getJobId(this)).removeClass("corresponding-item-hover");
$("#job-" + getJobId(this)).removeClass("corresponding-item-hover");
}
);
});

$("span.expand-application-timeline").click(function() {
$("#application-timeline").toggleClass('collapsed');

// Switch the class of the arrow from open to closed.
$(this).find('.expand-application-timeline-arrow').toggleClass('arrow-open');
$(this).find('.expand-application-timeline-arrow').toggleClass('arrow-closed');
});
}

function drawJobTimeline(groupArray, eventObjArray, startTime) {
Expand All @@ -80,26 +88,36 @@ function drawJobTimeline(groupArray, eventObjArray, startTime) {
setupZoomable("#job-timeline-zoom-lock", jobTimeline);

$(".item.range.stage.job-timeline-object").each(function() {

var getStageId = function(baseElem) {
var getStageIdAndAttempt = function(baseElem) {
var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text();
var stageId = "#stage-" + stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)")[1].replace(".", "-");
return stageId;
}
var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)")[1].split(".");
return stageIdAndAttempt;
};

$(this).click(function() {
window.location.href = getStageId(this);
var idAndAttempt = getStageIdAndAttempt(this);
var id = idAndAttempt[0];
var attempt = idAndAttempt[1];
window.location.href = "../../stages/stage/?id=" + id + "&attempt=" + attempt;
});

$(this).hover(
function() {
$(getStageId(this)).addClass("corresponding-item-hover");
$("#stage-" + getStageId(this)).addClass("corresponding-item-hover");
},
function() {
$(getStageId(this)).removeClass("corresponding-item-hover");
$("#stage-" + getStageId(this)).removeClass("corresponding-item-hover");
}
);
});

$("span.expand-job-timeline").click(function() {
$("#job-timeline").toggleClass('collapsed');

// Switch the class of the arrow from open to closed.
$(this).find('.expand-job-timeline-arrow').toggleClass('arrow-open');
$(this).find('.expand-job-timeline-arrow').toggleClass('arrow-closed');
});
}

function setupZoomable(id, timeline) {
Expand Down
3 changes: 2 additions & 1 deletion core/src/main/scala/org/apache/spark/ui/exec/ExecutorsTab.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ class ExecutorsListener(storageStatusListener: StorageStatusListener) extends Sp
executorIdToData(eid) = ExecutorUIData(executorAdded.time)
}

override def onExecutorRemoved(executorRemoved: SparkListenerExecutorRemoved): Unit = synchronized {
override def onExecutorRemoved(
executorRemoved: SparkListenerExecutorRemoved): Unit = synchronized {
val eid = executorRemoved.executorId
val uiData = executorIdToData(eid)
uiData.finishTime = Some(executorRemoved.time)
Expand Down
29 changes: 16 additions & 13 deletions core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,26 @@ import org.apache.spark.JobExecutionStatus
/** Page showing list of all ongoing and recently finished jobs */
private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
private val JOBS_LEGEND =
<div class="legend-area"><svg width="200px" height="85px">
<div class="legend-area"><svg width="150px" height="85px">
<rect x="5px" y="5px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
<text x="35px" y="17px">Succeeded Job</text>
<rect x="5px" y="35px" width="20px" height="15px"
<text x="35px" y="17px">Succeeded</text>
<rect x="5px" y="30px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#FF5475"></rect>
<text x="35px" y="47px">Failed Job</text>
<rect x="5px" y="65px" width="20px" height="15px"
<text x="35px" y="42px">Failed</text>
<rect x="5px" y="55px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#FDFFCA"></rect>
<text x="35px" y="77px">Running Job</text>
<text x="35px" y="67px">Running</text>
</svg></div>.toString.filter(_ != '\n')

private val EXECUTORS_LEGEND =
<div class="legend-area"><svg width="200px" height="55px">
<div class="legend-area"><svg width="150px" height="55px">
<rect x="5px" y="5px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
<text x="35px" y="17px">Executor Added</text>
<rect x="5px" y="35px" width="20px" height="15px"
<text x="35px" y="17px">Added</text>
<rect x="5px" y="30px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#EBCA59"></rect>
<text x="35px" y="47px">Executor Removed</text>
<text x="35px" y="42px">Removed</text>
</svg></div>.toString.filter(_ != '\n')

private def getLastStageNameAndDescription(job: JobUIData): (String, String) = {
Expand Down Expand Up @@ -170,7 +170,11 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {
val eventArrayAsStr =
(jobEventJsonAsStrSeq ++ executorEventJsonAsStrSeq).mkString("[", ",", "]")

<div id="application-timeline">
<span class="expand-application-timeline">
<span class="expand-application-timeline-arrow arrow-closed"></span>
<strong>Event Timeline</strong>
</span> ++
<div id="application-timeline" class="collapsed">
<div class="control-panel">
<div id="application-timeline-zoom-lock">
<input type="checkbox" checked="checked"></input>
Expand Down Expand Up @@ -303,8 +307,7 @@ private[ui] class AllJobsPage(parent: JobsTab) extends WebUIPage("") {

var content = summary
val executorListener = parent.executorListener
content ++= <h4>Event Timeline</h4> ++
makeTimeline(activeJobs ++ completedJobs ++ failedJobs,
content ++= makeTimeline(activeJobs ++ completedJobs ++ failedJobs,
executorListener.executorIdToData, startTime)

if (shouldShowActiveJobs) {
Expand Down
27 changes: 15 additions & 12 deletions core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,26 +32,26 @@ import org.apache.spark.ui.jobs.UIData.ExecutorUIData
/** Page showing statistics and stage list for a given job */
private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
private val STAGES_LEGEND =
<div class="legend-area"><svg width="200px" height="85px">
<div class="legend-area"><svg width="150px" height="85px">
<rect x="5px" y="5px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
<text x="35px" y="17px">Completed Stage </text>
<rect x="5px" y="35px" width="20px" height="15px"
<text x="35px" y="17px">Completed</text>
<rect x="5px" y="30px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#FF5475"></rect>
<text x="35px" y="47px">Failed Stage</text>
<rect x="5px" y="65px" width="20px" height="15px"
<text x="35px" y="42px">Failed</text>
<rect x="5px" y="55px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#FDFFCA"></rect>
<text x="35px" y="77px">Active Stage</text>
<text x="35px" y="67px">Active</text>
</svg></div>.toString.filter(_ != '\n')

private val EXECUTORS_LEGEND =
<div class="legend-area"><svg width="200px" height="55px">
<div class="legend-area"><svg width="150px" height="55px">
<rect x="5px" y="5px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#D5DDF6"></rect>
<text x="35px" y="17px">Executor Added</text>
<rect x="5px" y="35px" width="20px" height="15px"
<rect x="5px" y="30px" width="20px" height="15px"
rx="2px" ry="2px" stroke="#97B0F8" fill="#EBCA59"></rect>
<text x="35px" y="47px">Executor Removed</text>
<text x="35px" y="42px">Executor Removed</text>
</svg></div>.toString.filter(_ != '\n')

private def makeStageEvent(stageInfos: Seq[StageInfo]): Seq[String] = {
Expand Down Expand Up @@ -150,7 +150,11 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
val eventArrayAsStr =
(stageEventJsonAsStrSeq ++ executorsJsonAsStrSeq).mkString("[", ",", "]")

<div id="job-timeline">
<span class="expand-job-timeline">
<span class="expand-job-timeline-arrow arrow-closed"></span>
<strong>Event Timeline</strong>
</span> ++
<div id="job-timeline" class="collapsed">
<div class="control-panel">
<div id="job-timeline-zoom-lock">
<input type="checkbox" checked="checked"></input>
Expand Down Expand Up @@ -291,8 +295,7 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
var content = summary
val jobStartTime = jobData.submissionTime.get
val executorListener = parent.executorListener
content ++= <h4>Event Timeline</h4> ++
makeTimeline(activeStages ++ completedStages ++ failedStages,
content ++= makeTimeline(activeStages ++ completedStages ++ failedStages,
executorListener.executorIdToData, jobStartTime)

if (shouldShowActiveStages) {
Expand Down

0 comments on commit 28714b6

Please sign in to comment.