[SPARK-21254] [WebUI] Performance improvement: further reducing DOM m…

…anipulations Refactoring incomplete requests filter behavior due to inefficency in DOM manipulations. We were traversing DOM 2 more times just to hide columns that we could have avoided rendering in mustache. Factoring this logic in mustache template (`showCompletedColumn`) saves 70-80ms on 10k+ rows.
criteo-forks · Aug 6, 2017 · 9169707 · 9169707
1 parent e25be9a
commit 9169707
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 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
@@ -41,11 +41,13 @@
           Started
         </span>
       </th>
-      <th class="completedColumn">
+      {{#showCompletedColumn}}
+      <th>
         <span data-toggle="tooltip" data-placement="top" title="The completed time of this application.">
           Completed
         </span>
       </th>
+      {{/showCompletedColumn}}
       <th>
         <span data-toggle="tooltip" data-placement="top" title="The duration time of this application.">
           Duration
@@ -77,7 +79,9 @@
       <td><a href="{{uiroot}}/history/{{id}}/{{attemptId}}/jobs/">{{attemptId}}</a></td>
       {{/hasMultipleAttempts}}
       <td>{{startTime}}</td>
-      <td class="completedColumn">{{endTime}}</td>
+      {{#showCompletedColumn}}
+      <td>{{endTime}}</td>
+      {{/showCompletedColumn}}
       <td><span title="{{durationMillisec}}">{{duration}}</span></td>
       <td>{{sparkUser}}</td>
       <td>{{lastUpdated}}</td>

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
@@ -148,20 +148,22 @@ $(document).ready(function() {
         "uiroot": uiRoot,
         "applications": array,
         "hasMultipleAttempts": hasMultipleAttempts,
+        "showCompletedColumn": !requestedIncomplete,
       }
 
       $.get("static/historypage-template.html", function(template) {
         var apps = $(Mustache.render($(template).filter("#history-summary-template").html(),data));
         var selector = "#history-summary-table";
         var attemptIdColumnName = 'attemptId';
+        var startedColumnName = 'started';
         var defaultSortColumn = completedColumnName = 'completed';
         var durationColumnName = 'duration';
         var conf = {
           "columns": [
             {name: 'appId', type: "appid-numeric"},
             {name: 'appName'},
             {name: attemptIdColumnName},
-            {name: 'started'},
+            {name: startedColumnName},
             {name: completedColumnName},
             {name: durationColumnName, type: "title-numeric"},
             {name: 'user'},
@@ -180,11 +182,10 @@ $(document).ready(function() {
           conf.columns = removeColumnByName(conf.columns, attemptIdColumnName);
         }
 
+        var defaultSortColumn = completedColumnName;
         if (requestedIncomplete) {
-          var completedCells = apps.find(".completedColumn");
-          for (i = 0; i < completedCells.length; i++) {
-            completedCells[i].style.display='none';
-          }
+          defaultSortColumn = startedColumnName;
+          conf.columns = removeColumnByName(conf.columns, completedColumnName);
         }
         conf.order = [[ getColumnIndex(conf.columns, defaultSortColumn), "desc" ]];
         conf.columnDefs = [