Skip to content

[SPARK-23024][WEB-UI]Spark ui about the contents of the form need to have hidden and show features, when the table records very much. #20216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
guoxiaolongzte wants to merge 4 commits into from
Closed

[SPARK-23024][WEB-UI]Spark ui about the contents of the form need to have hidden and show features, when the table records very much. #20216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e4a186
[SPARK-23024][WEB-UI]Spark ui about the contents of the form need to …
Jan 10, 2018
c5e71cc
Fix the code, increase the arrow of the form page, maintain the consi…
Jan 12, 2018
1e3df81
[SPARK-23024]fix the code to fix the style
Jan 15, 2018
4b6cdbb
[SPARK-23024] fix the code
Jan 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions core/src/main/resources/org/apache/spark/ui/static/webui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,34 @@ function collapseTable(thisName, table){
// to remember if it's collapsed on each page reload
$(function() {
collapseTablePageLoad('collapse-aggregated-metrics','aggregated-metrics');
collapseTablePageLoad('collapse-aggregated-executors','aggregated-executors');
collapseTablePageLoad('collapse-aggregated-removedExecutors','aggregated-removedExecutors');
collapseTablePageLoad('collapse-aggregated-workers','aggregated-workers');
collapseTablePageLoad('collapse-aggregated-activeApps','aggregated-activeApps');
collapseTablePageLoad('collapse-aggregated-activeDrivers','aggregated-activeDrivers');
collapseTablePageLoad('collapse-aggregated-completedApps','aggregated-completedApps');
collapseTablePageLoad('collapse-aggregated-completedDrivers','aggregated-completedDrivers');
collapseTablePageLoad('collapse-aggregated-runningExecutors','aggregated-runningExecutors');
collapseTablePageLoad('collapse-aggregated-runningDrivers','aggregated-runningDrivers');
collapseTablePageLoad('collapse-aggregated-finishedExecutors','aggregated-finishedExecutors');
collapseTablePageLoad('collapse-aggregated-finishedDrivers','aggregated-finishedDrivers');
collapseTablePageLoad('collapse-aggregated-runtimeInformation','aggregated-runtimeInformation');
collapseTablePageLoad('collapse-aggregated-sparkProperties','aggregated-sparkProperties');
collapseTablePageLoad('collapse-aggregated-systemProperties','aggregated-systemProperties');
collapseTablePageLoad('collapse-aggregated-classpathEntries','aggregated-classpathEntries');
collapseTablePageLoad('collapse-aggregated-activeJobs','aggregated-activeJobs');
collapseTablePageLoad('collapse-aggregated-completedJobs','aggregated-completedJobs');
collapseTablePageLoad('collapse-aggregated-failedJobs','aggregated-failedJobs');
collapseTablePageLoad('collapse-aggregated-poolTable','aggregated-poolTable');
collapseTablePageLoad('collapse-aggregated-allActiveStages','aggregated-allActiveStages');
collapseTablePageLoad('collapse-aggregated-allPendingStages','aggregated-allPendingStages');
collapseTablePageLoad('collapse-aggregated-allCompletedStages','aggregated-allCompletedStages');
collapseTablePageLoad('collapse-aggregated-allFailedStages','aggregated-allFailedStages');
collapseTablePageLoad('collapse-aggregated-activeStages','aggregated-activeStages');
collapseTablePageLoad('collapse-aggregated-pendingOrSkippedStages','aggregated-pendingOrSkippedStages');
collapseTablePageLoad('collapse-aggregated-completedStages','aggregated-completedStages');
collapseTablePageLoad('collapse-aggregated-failedStages','aggregated-failedStages');
collapseTablePageLoad('collapse-aggregated-poolActiveStages','aggregated-poolActiveStages');
collapseTablePageLoad('collapse-aggregated-tasks','aggregated-tasks');
collapseTablePageLoad('collapse-aggregated-rdds','aggregated-rdds');
});
25 changes: 21 additions & 4 deletions core/src/main/scala/org/apache/spark/deploy/master/ui/ApplicationPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,29 @@ private[ui] class ApplicationPage(parent: MasterWebUI) extends WebUIPage("app")

<div class="row-fluid"> <!-- Executors -->
<div class="span12">
<h4> Executor Summary ({allExecutors.length}) </h4>
{executorsTable}
<span class="collapse-aggregated-executors collapse-table"
onClick="collapseTable('collapse-aggregated-executors','aggregated-executors')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Executor Summary ({allExecutors.length})</a>
</h4>
</span>
<div class="aggregated-executors collapsible-table">
{executorsTable}
</div>
{
if (removedExecutors.nonEmpty) {
<h4> Removed Executors ({removedExecutors.length}) </h4> ++
removedExecutorsTable
<span class="collapse-aggregated-removedExecutors collapse-table"
onClick="collapseTable('collapse-aggregated-removedExecutors',
'aggregated-removedExecutors')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Removed Executors ({removedExecutors.length})</a>
</h4>
</span> ++
<div class="aggregated-removedExecutors collapsible-table">
{removedExecutorsTable}
</div>
}
}
</div>
Expand Down
63 changes: 53 additions & 10 deletions core/src/main/scala/org/apache/spark/deploy/master/ui/MasterPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,24 +128,49 @@ private[ui] class MasterPage(parent: MasterWebUI) extends WebUIPage("") {

<div class="row-fluid">
<div class="span12">
<h4> Workers ({workers.length}) </h4>
{workerTable}
<span class="collapse-aggregated-workers collapse-table"
onClick="collapseTable('collapse-aggregated-workers','aggregated-workers')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Workers ({workers.length})</a>
</h4>
</span>
<div class="aggregated-workers collapsible-table">
{workerTable}
</div>
</div>
</div>

<div class="row-fluid">
<div class="span12">
<h4 id="running-app"> Running Applications ({activeApps.length}) </h4>
{activeAppsTable}
<span id="running-app" class="collapse-aggregated-activeApps collapse-table"
onClick="collapseTable('collapse-aggregated-activeApps','aggregated-activeApps')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Running Applications ({activeApps.length})</a>
</h4>
</span>
<div class="aggregated-activeApps collapsible-table">
{activeAppsTable}
</div>
</div>
</div>

<div>
{if (hasDrivers) {
<div class="row-fluid">
<div class="span12">
<h4> Running Drivers ({activeDrivers.length}) </h4>
{activeDriversTable}
<span class="collapse-aggregated-activeDrivers collapse-table"
onClick="collapseTable('collapse-aggregated-activeDrivers',
'aggregated-activeDrivers')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Running Drivers ({activeDrivers.length})</a>
</h4>
</span>
<div class="aggregated-activeDrivers collapsible-table">
{activeDriversTable}
</div>
</div>
</div>
}
Expand All @@ -154,8 +179,17 @@ private[ui] class MasterPage(parent: MasterWebUI) extends WebUIPage("") {

<div class="row-fluid">
<div class="span12">
<h4 id="completed-app"> Completed Applications ({completedApps.length}) </h4>
{completedAppsTable}
<span id="completed-app" class="collapse-aggregated-completedApps collapse-table"
onClick="collapseTable('collapse-aggregated-completedApps',
'aggregated-completedApps')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Completed Applications ({completedApps.length})</a>
</h4>
</span>
<div class="aggregated-completedApps collapsible-table">
{completedAppsTable}
</div>
</div>
</div>

Expand All @@ -164,8 +198,17 @@ private[ui] class MasterPage(parent: MasterWebUI) extends WebUIPage("") {
if (hasDrivers) {
<div class="row-fluid">
<div class="span12">
<h4> Completed Drivers ({completedDrivers.length}) </h4>
{completedDriversTable}
<span class="collapse-aggregated-completedDrivers collapse-table"
onClick="collapseTable('collapse-aggregated-completedDrivers',
'aggregated-completedDrivers')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Completed Drivers ({completedDrivers.length})</a>
</h4>
</span>
<div class="aggregated-completedDrivers collapsible-table">
{completedDriversTable}
</div>
</div>
</div>
}
Expand Down
52 changes: 44 additions & 8 deletions core/src/main/scala/org/apache/spark/deploy/worker/ui/WorkerPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,24 +77,60 @@ private[ui] class WorkerPage(parent: WorkerWebUI) extends WebUIPage("") {
</div>
<div class="row-fluid"> <!-- Executors and Drivers -->
<div class="span12">
<h4> Running Executors ({runningExecutors.size}) </h4>
{runningExecutorTable}
<span class="collapse-aggregated-runningExecutors collapse-table"
onClick="collapseTable('collapse-aggregated-runningExecutors',
'aggregated-runningExecutors')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Running Executors ({runningExecutors.size})</a>
</h4>
</span>
<div class="aggregated-runningExecutors collapsible-table">
{runningExecutorTable}
</div>
{
if (runningDrivers.nonEmpty) {
<h4> Running Drivers ({runningDrivers.size}) </h4> ++
runningDriverTable
<span class="collapse-aggregated-runningDrivers collapse-table"
onClick="collapseTable('collapse-aggregated-runningDrivers',
'aggregated-runningDrivers')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Running Drivers ({runningDrivers.size})</a>
</h4>
</span> ++
<div class="aggregated-runningDrivers collapsible-table">
{runningDriverTable}
</div>
}
}
{
if (finishedExecutors.nonEmpty) {
<h4>Finished Executors ({finishedExecutors.size}) </h4> ++
finishedExecutorTable
<span class="collapse-aggregated-finishedExecutors collapse-table"
onClick="collapseTable('collapse-aggregated-finishedExecutors',
'aggregated-finishedExecutors')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Finished Executors ({finishedExecutors.size})</a>
</h4>
</span> ++
<div class="aggregated-finishedExecutors collapsible-table">
{finishedExecutorTable}
</div>
}
}
{
if (finishedDrivers.nonEmpty) {
<h4> Finished Drivers ({finishedDrivers.size}) </h4> ++
finishedDriverTable
<span class="collapse-aggregated-finishedDrivers collapse-table"
onClick="collapseTable('collapse-aggregated-finishedDrivers',
'aggregated-finishedDrivers')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Finished Drivers ({finishedDrivers.size})</a>
</h4>
</span> ++
<div class="aggregated-finishedDrivers collapsible-table">
{finishedDriverTable}
</div>
}
}
</div>
Expand Down
48 changes: 44 additions & 4 deletions core/src/main/scala/org/apache/spark/ui/env/EnvironmentPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,50 @@ private[ui] class EnvironmentPage(
classPathHeaders, classPathRow, appEnv.classpathEntries, fixedWidth = true)
val content =
<span>
<h4>Runtime Information</h4> {runtimeInformationTable}
<h4>Spark Properties</h4> {sparkPropertiesTable}
<h4>System Properties</h4> {systemPropertiesTable}
<h4>Classpath Entries</h4> {classpathEntriesTable}
<span class="collapse-aggregated-runtimeInformation collapse-table"
onClick="collapseTable('collapse-aggregated-runtimeInformation',
'aggregated-runtimeInformation')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Runtime Information</a>
</h4>
</span>
<div class="aggregated-runtimeInformation collapsible-table">
{runtimeInformationTable}
</div>
<span class="collapse-aggregated-sparkProperties collapse-table"
onClick="collapseTable('collapse-aggregated-sparkProperties',
'aggregated-sparkProperties')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Spark Properties</a>
</h4>
</span>
<div class="aggregated-sparkProperties collapsible-table">
{sparkPropertiesTable}
</div>
<span class="collapse-aggregated-systemProperties collapse-table"
onClick="collapseTable('collapse-aggregated-systemProperties',
'aggregated-systemProperties')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>System Properties</a>
</h4>
</span>
<div class="aggregated-systemProperties collapsible-table">
{systemPropertiesTable}
</div>
<span class="collapse-aggregated-classpathEntries collapse-table"
onClick="collapseTable('collapse-aggregated-classpathEntries',
'aggregated-classpathEntries')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Classpath Entries</a>
</h4>
</span>
<div class="aggregated-classpathEntries collapsible-table">
{classpathEntriesTable}
</div>
</span>

UIUtils.headerSparkPage("Environment", content, parent)
Expand Down
39 changes: 33 additions & 6 deletions core/src/main/scala/org/apache/spark/ui/jobs/AllJobsPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,16 +365,43 @@ private[ui] class AllJobsPage(parent: JobsTab, store: AppStatusStore) extends We
store.executorList(false), startTime)

if (shouldShowActiveJobs) {
content ++= <h4 id="active">Active Jobs ({activeJobs.size})</h4> ++
activeJobsTable
content ++=
<span id="active" class="collapse-aggregated-activeJobs collapse-table"
onClick="collapseTable('collapse-aggregated-activeJobs','aggregated-activeJobs')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Active Jobs ({activeJobs.size})</a>
</h4>
</span> ++
<div class="aggregated-activeJobs collapsible-table">
{activeJobsTable}
</div>
}
if (shouldShowCompletedJobs) {
content ++= <h4 id="completed">Completed Jobs ({completedJobNumStr})</h4> ++
completedJobsTable
content ++=
<span id="completed" class="collapse-aggregated-completedJobs collapse-table"
onClick="collapseTable('collapse-aggregated-completedJobs','aggregated-completedJobs')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Completed Jobs ({completedJobNumStr})</a>
</h4>
</span> ++
<div class="aggregated-completedJobs collapsible-table">
{completedJobsTable}
</div>
}
if (shouldShowFailedJobs) {
content ++= <h4 id ="failed">Failed Jobs ({failedJobs.size})</h4> ++
failedJobsTable
content ++=
<span id ="failed" class="collapse-aggregated-failedJobs collapse-table"
onClick="collapseTable('collapse-aggregated-failedJobs','aggregated-failedJobs')">
<h4>
<span class="collapse-table-arrow arrow-open"></span>
<a>Failed Jobs ({failedJobs.size})</a>
</h4>
</span> ++
<div class="aggregated-failedJobs collapsible-table">
{failedJobsTable}
</div>
}

val helpText = """A job is triggered by an action, like count() or saveAsTextFile().""" +
Expand Down
Loading