You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@spark.apache.org by sr...@apache.org on 2021/01/17 20:38:02 UTC
[spark] branch master updated: [SPARK-34123][WEB UI] optimize spark
history summary page loading
This is an automated email from the ASF dual-hosted git repository.
srowen pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new ebd8bc9 [SPARK-34123][WEB UI] optimize spark history summary page loading
ebd8bc9 is described below
commit ebd8bc934de9d6aec53beb4ab60c998052038fad
Author: mohan3d <mo...@gmail.com>
AuthorDate: Sun Jan 17 14:37:28 2021 -0600
[SPARK-34123][WEB UI] optimize spark history summary page loading
### What changes were proposed in this pull request?
Display history server entries using datatables instead of Mustache + Datatables which proved to be faster and non-blocking for the webpage while searching (using search bar in the page)
### Why are the changes needed?
Small changes in the attempts (entries) and removed part of HTML (Mustache template).
### Does this PR introduce _any_ user-facing change?
Not very sure, but it's not supposed to change the way the page looks rather it changes how entries are displayed.
### How was this patch tested?
Running test, since it's not adding new functionality.
Closes #31191 from mohan3d/feat/history-server-ui-optimization.
Lead-authored-by: mohan3d <mo...@gmail.com>
Co-authored-by: Author: mohan3d <mo...@gmail.com>
Signed-off-by: Sean Owen <sr...@gmail.com>
---
.../spark/ui/static/historypage-template.html | 20 --------
.../org/apache/spark/ui/static/historypage.js | 54 ++++++++++++++++------
2 files changed, 41 insertions(+), 33 deletions(-)
diff --git a/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html b/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html
index 7e9927d..5427125 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html
+++ b/core/src/main/resources/org/apache/spark/ui/static/historypage-template.html
@@ -75,26 +75,6 @@
</th>
</thead>
<tbody>
- {{#applications}}
- <tr>
- {{#attempts}}
- <td {{#hasMultipleAttempts}}style="background-color:#fff"{{/hasMultipleAttempts}}>{{version}}</td>
- <td {{#hasMultipleAttempts}}style="background-color:#fff"{{/hasMultipleAttempts}}><span title="{{id}}"><a href="{{uiroot}}/history/{{id}}{{#hasAttemptId}}/{{attemptId}}{{/hasAttemptId}}/jobs/">{{id}}</a></span></td>
- <td {{#hasMultipleAttempts}}style="background-color:#fff"{{/hasMultipleAttempts}}>{{name}}</td>
- {{#hasMultipleAttempts}}
- <td><a href="{{uiroot}}/history/{{id}}{{#hasAttemptId}}/{{attemptId}}{{/hasAttemptId}}/jobs/">{{attemptId}}</a></td>
- {{/hasMultipleAttempts}}
- <td>{{startTime}}</td>
- {{#showCompletedColumns}}
- <td>{{endTime}}</td>
- <td><span title="{{durationMillisec}}">{{duration}}</span></td>
- {{/showCompletedColumns}}
- <td>{{sparkUser}}</td>
- <td>{{lastUpdated}}</td>
- <td><a href="{{log}}" class="btn btn-info btn-mini">Download</a></td>
- {{/attempts}}
- </tr>
- {{/applications}}
</tbody>
</table>
</script>
diff --git a/core/src/main/resources/org/apache/spark/ui/static/historypage.js b/core/src/main/resources/org/apache/spark/ui/static/historypage.js
index 3a4c815..aa542a7 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/historypage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/historypage.js
@@ -140,9 +140,13 @@ $(document).ready(function() {
(attempt.hasOwnProperty("attemptId") ? attempt["attemptId"] + "/" : "") + "logs";
attempt["durationMillisec"] = attempt["duration"];
attempt["duration"] = formatDuration(attempt["duration"]);
- var hasAttemptId = attempt.hasOwnProperty("attemptId");
- var app_clone = {"id" : id, "name" : name, "version": version, "hasAttemptId" : hasAttemptId, "attempts" : [attempt]};
- array.push(app_clone);
+ attempt["id"] = id;
+ attempt["name"] = name;
+ attempt["version"] = version;
+ attempt["attemptUrl"] = uiRoot + "/history/" + id + "/" +
+ (attempt.hasOwnProperty("attemptId") ? attempt["attemptId"] + "/" : "") + "jobs/";
+
+ array.push(attempt);
}
}
if(array.length < 20) {
@@ -165,17 +169,41 @@ $(document).ready(function() {
var completedColumnName = 'completed';
var durationColumnName = 'duration';
var conf = {
+ "data": array,
"columns": [
- {name: 'version'},
- {name: 'appId', type: "appid-numeric"},
- {name: 'appName'},
- {name: attemptIdColumnName},
- {name: startedColumnName},
- {name: completedColumnName},
- {name: durationColumnName, type: "title-numeric"},
- {name: 'user'},
- {name: 'lastUpdated'},
- {name: 'eventLog'},
+ {name: 'version', data: 'version' },
+ {
+ name: 'appId',
+ type: "appid-numeric",
+ data: 'id',
+ render: (id, type, row) => `<span title="${id}"><a href="${row.attemptUrl}">${id}</a></span>`
+ },
+ {name: 'appName', data: 'name' },
+ {
+ name: attemptIdColumnName,
+ data: 'attemptId',
+ render: (attemptId, type, row) => (attemptId ? `<a href="${row.attemptUrl}">${attemptId}</a>` : '')
+ },
+ {name: startedColumnName, data: 'startTime' },
+ {name: completedColumnName, data: 'endTime' },
+ {name: durationColumnName, type: "title-numeric", data: 'duration' },
+ {name: 'user', data: 'sparkUser' },
+ {name: 'lastUpdated', data: 'lastUpdated' },
+ {
+ name: 'eventLog',
+ data: 'log',
+ render: (log, type, row) => `<a href="${log}" class="btn btn-info btn-mini">Download</a>`
+ },
+ ],
+ "aoColumnDefs": [
+ {
+ aTargets: [0, 1, 2],
+ fnCreatedCell: (nTd, sData, oData, iRow, iCol) => {
+ if (hasMultipleAttempts) {
+ $(nTd).css('background-color', '#fff');
+ }
+ }
+ },
],
"autoWidth": false,
"deferRender": true
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@spark.apache.org
For additional commands, e-mail: commits-help@spark.apache.org