[SPARK-15951] Change Executors Page to use datatables to support sorting columns and searching

1. Create the executorspage-template.html for displaying application information in datables.
2. Added REST API endpoint "allexecutors" to be able to see all executors created for particular job.
3. The executorspage.js uses jQuery to access the data from /api/v1/applications/appid/allexecutors REST API, and use DataTable to display executors for the application. It also, generates summary of dead/live and total executors created during life of the application.
4. Similar changes applicable to Executors Page on history server for a given application.

Snapshots for how it looks like now:
<img width="938" alt="screen shot 2016-06-14 at 2 45 44 pm" src="https://cloud.githubusercontent.com/assets/6090397/16060092/ad1de03a-324b-11e6-8469-9eaa3f2548b5.png">

New Executors Page screenshot looks like this:
<img width="1436" alt="screen shot 2016-06-15 at 10 12 01 am" src="https://cloud.githubusercontent.com/assets/6090397/16085514/ee7004f0-32e1-11e6-9340-33d91e407f2b.png">

Author: Kishor Patil <kpatil@yahoo-inc.com>

Closes #13670 from kishorvpatil/execTemplates.

4 files changed, 623 insertions, 22 deletions

diff --git a/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html b/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html
new file mode 100644
index 0000000000..64ea719141
--- /dev/null
+++ b/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html
@@ -0,0 +1,105 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script id="executors-summary-template" type="text/html">
+  <h4 style="clear: left; display: inline-block;">Summary</h4>
+  <div class="container-fluid">
+    <div class="container-fluid">
+      <table id="summary-execs-table" class="table table-striped compact">
+        <thead>
+        <th></th>
+        <th>RDD Blocks</th>
+        <th><span data-toggle="tooltip"
+                  title="Memory used / total available memory for storage of data like RDD partitions cached in memory. ">Storage Memory</span>
+        </th>
+        <th>Disk Used</th>
+        <th>Cores</th>
+        <th>Active Tasks</th>
+        <th>Failed Tasks</th>
+        <th>Complete Tasks</th>
+        <th>Total Tasks</th>
+        <th><span data-toggle="tooltip"
+                  title="Shaded red when garbage collection (GC) time is over 10% of task time">
+          Task Time (GC Time)</span></th>
+        <th><span data-toggle="tooltip"
+                  title="Bytes and records read from Hadoop or from Spark storage.">Input</span></th>
+        <th><span data-toggle="tooltip"
+                  title="Total shuffle bytes and records read (includes both data read locally and data read from remote executors).">
+          Shuffle Read</span></th>
+        <th>
+          <span data-toggle="tooltip" data-placement="left"
+                title="Bytes and records written to disk in order to be read by a shuffle in a future stage.">
+            Shuffle Write</span>
+        </th>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <h4 style="clear: left; display: inline-block;">Executors</h4>
+  <div class="container-fluid">
+    <div class="container-fluid">
+      <table id="active-executors-table" class="table table-striped compact">
+        <thead>
+        <tr>
+          <th>
+            <span data-toggle="tooltip" data-placement="right" title="ID of the executor">Executor ID</span></th>
+          <th>
+            <span data-toggle="tooltip" data-placement="top" title="Address">Address</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Status">Status</span></th>
+          <th>
+            <span data-toggle="tooltip" data-placement="top" title="RDD Blocks">RDD Blocks</span></th>
+          <th>
+            <span data-toggle="tooltip" data-placement="top"
+                  title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">
+              Storage Memory</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Disk Used">Disk Used</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Cores">Cores</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Active Tasks">Active Tasks</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Failed Tasks">Failed Tasks</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Complete Tasks">Complete Tasks</span></th>
+          <th><span data-toggle="tooltip" data-placement="top" title="Total Tasks">Total Tasks</span></th>
+          <th>
+            <scan data-toggle="tooltip" data-placement="top"
+                  title="Shaded red when garbage collection (GC) time is over 10% of task time">
+              Task Time (GC Time)
+            </scan>
+          </th>
+          <th><span data-toggle="tooltip" data-placement="top"
+                    title="Bytes and records read from Hadoop or from Spark storage.">Input</span></th>
+          <th>
+            <span data-toggle="tooltip" data-placement="top"
+                  title="Total shuffle bytes and records read (includes both data read locally and data read from remote executors).">
+              Shuffle Read</span></th>
+          <th>
+            <!-- Place the shuffle write tooltip on the left (rather than the default position
+            of on top) because the shuffle write column is the last column on the right side and
+            the tooltip is wider than the column, so it doesn't fit on top. -->
+            <span data-toggle="tooltip" data-placement="left"
+                  title="Bytes and records written to disk in order to be read by a shuffle in a future stage.">
+              Shuffle Write</span></th>
+          <th><span data-toggle="tooltip" data-placement="left" title="Logs">Logs</span></th>
+          <th><span data-toggle="tooltip" data-placement="left" title="Thread Dump">Thread Dump</span></th>
+        </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</script>
diff --git a/core/src/main/resources/org/apache/spark/ui/static/executorspage.js b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
new file mode 100644
index 0000000000..b2b2363d3a
--- /dev/null
+++ b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
@@ -0,0 +1,470 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function formatStatus(status, type) {
+    if (type !== 'display') return status;
+    if (status) {
+        return "Active"
+    } else {
+        return "Dead"
+    }
+}
+
+jQuery.extend(jQuery.fn.dataTableExt.oSort, {
+    "title-numeric-pre": function (a) {
+        var x = a.match(/title="*(-?[0-9\.]+)/)[1];
+        return parseFloat(x);
+    },
+
+    "title-numeric-asc": function (a, b) {
+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+    },
+
+    "title-numeric-desc": function (a, b) {
+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+    }
+});
+
+$(document).ajaxStop($.unblockUI);
+$(document).ajaxStart(function () {
+    $.blockUI({message: '<h3>Loading Executors Page...</h3>'});
+});
+
+function createTemplateURI(appId) {
+    var words = document.baseURI.split('/');
+    var ind = words.indexOf("proxy");
+    if (ind > 0) {
+        var baseURI = words.slice(0, ind + 1).join('/') + '/' + appId + '/static/executorspage-template.html';
+        return baseURI;
+    }
+    ind = words.indexOf("history");
+    if(ind > 0) {
+        var baseURI = words.slice(0, ind).join('/') + '/static/executorspage-template.html';
+        return baseURI;
+    }
+    return location.origin + "/static/executorspage-template.html";
+}
+
+function getStandAloneppId(cb) {
+    var words = document.baseURI.split('/');
+    var ind = words.indexOf("proxy");
+    if (ind > 0) {
+        var appId = words[ind + 1];
+        cb(appId);
+        return;
+    }
+    ind = words.indexOf("history");
+    if (ind > 0) {
+        var appId = words[ind + 1];
+        cb(appId);
+        return;
+    }
+    //Looks like Web UI is running in standalone mode
+    //Let's get application-id using REST End Point
+    $.getJSON(location.origin + "/api/v1/applications", function(response, status, jqXHR) {
+        if (response && response.length > 0) {
+            var appId = response[0].id
+            cb(appId);
+            return;
+        }
+    });
+}
+
+function createRESTEndPoint(appId) {
+    var words = document.baseURI.split('/');
+    var ind = words.indexOf("proxy");
+    if (ind > 0) {
+        var appId = words[ind + 1];
+        var newBaseURI = words.slice(0, ind + 2).join('/');
+        return newBaseURI + "/api/v1/applications/" + appId + "/allexecutors"
+    }
+    ind = words.indexOf("history");
+    if (ind > 0) {
+        var appId = words[ind + 1];
+        var attemptId = words[ind + 2];
+        var newBaseURI = words.slice(0, ind).join('/');
+        if (isNaN(attemptId)) {
+            return newBaseURI + "/api/v1/applications/" + appId + "/allexecutors";
+        } else {
+            return newBaseURI + "/api/v1/applications/" + appId + "/" + attemptId + "/allexecutors";
+        }
+    }
+    return location.origin + "/api/v1/applications/" + appId + "/allexecutors";
+}
+
+function formatLogsCells(execLogs, type) {
+    if (type !== 'display') return Object.keys(execLogs);
+    if (!execLogs) return;
+    var result = '';
+    $.each(execLogs, function (logName, logUrl) {
+        result += '<div><a href=' + logUrl + '>' + logName + '</a></div>'
+    });
+    return result;
+}
+
+// Determine Color Opacity from 0.5-1
+// activeTasks range from 0 to maxTasks
+function activeTasksAlpha(activeTasks, maxTasks) {
+    return maxTasks > 0 ? ((activeTasks / maxTasks) * 0.5 + 0.5) : 1;
+}
+
+function activeTasksStyle(activeTasks, maxTasks) {
+    return activeTasks > 0 ? ("hsla(240, 100%, 50%, " + activeTasksAlpha(activeTasks, maxTasks) + ")") : "";
+}
+
+// failedTasks range max at 10% failure, alpha max = 1
+function failedTasksAlpha(failedTasks, totalTasks) {
+    return totalTasks > 0 ?
+        (Math.min(10 * failedTasks / totalTasks, 1) * 0.5 + 0.5) : 1;
+}
+
+function failedTasksStyle(failedTasks, totalTasks) {
+    return failedTasks > 0 ?
+        ("hsla(0, 100%, 50%, " + failedTasksAlpha(failedTasks, totalTasks) + ")") : "";
+}
+
+// totalDuration range from 0 to 50% GC time, alpha max = 1
+function totalDurationAlpha(totalGCTime, totalDuration) {
+    return totalDuration > 0 ?
+        (Math.min(totalGCTime / totalDuration + 0.5, 1)) : 1;
+}
+
+function totalDurationStyle(totalGCTime, totalDuration) {
+    // Red if GC time over GCTimePercent of total time
+    // When GCTimePercent is edited change ToolTips.TASK_TIME to match
+    var GCTimePercent = 0.1;
+    return (totalGCTime > GCTimePercent * totalDuration) ?
+        ("hsla(0, 100%, 50%, " + totalDurationAlpha(totalGCTime, totalDuration) + ")") : "";
+}
+
+function totalDurationColor(totalGCTime, totalDuration) {
+    // Red if GC time over GCTimePercent of total time
+    // When GCTimePercent is edited change ToolTips.TASK_TIME to match
+    var GCTimePercent = 0.1;
+    return (totalGCTime > GCTimePercent * totalDuration) ? "white" : "black";
+}
+
+$(document).ready(function () {
+    $.extend($.fn.dataTable.defaults, {
+        stateSave: true,
+        lengthMenu: [[20, 40, 60, 100, -1], [20, 40, 60, 100, "All"]],
+        pageLength: 20
+    });
+
+    executorsSummary = $("#active-executors");
+
+    getStandAloneppId(function (appId) {
+    
+        var endPoint = createRESTEndPoint(appId);
+        $.getJSON(endPoint, function (response, status, jqXHR) {
+            var summary = [];
+            var allExecCnt = 0;
+            var allRDDBlocks = 0;
+            var allMemoryUsed = 0;
+            var allMaxMemory = 0;
+            var allDiskUsed = 0;
+            var allTotalCores = 0;
+            var allMaxTasks = 0;
+            var allActiveTasks = 0;
+            var allFailedTasks = 0;
+            var allCompletedTasks = 0;
+            var allTotalTasks = 0;
+            var allTotalDuration = 0;
+            var allTotalGCTime = 0;
+            var allTotalInputBytes = 0;
+            var allTotalShuffleRead = 0;
+            var allTotalShuffleWrite = 0;
+    
+            var activeExecCnt = 0;
+            var activeRDDBlocks = 0;
+            var activeMemoryUsed = 0;
+            var activeMaxMemory = 0;
+            var activeDiskUsed = 0;
+            var activeTotalCores = 0;
+            var activeMaxTasks = 0;
+            var activeActiveTasks = 0;
+            var activeFailedTasks = 0;
+            var activeCompletedTasks = 0;
+            var activeTotalTasks = 0;
+            var activeTotalDuration = 0;
+            var activeTotalGCTime = 0;
+            var activeTotalInputBytes = 0;
+            var activeTotalShuffleRead = 0;
+            var activeTotalShuffleWrite = 0;
+    
+            var deadExecCnt = 0;
+            var deadRDDBlocks = 0;
+            var deadMemoryUsed = 0;
+            var deadMaxMemory = 0;
+            var deadDiskUsed = 0;
+            var deadTotalCores = 0;
+            var deadMaxTasks = 0;
+            var deadActiveTasks = 0;
+            var deadFailedTasks = 0;
+            var deadCompletedTasks = 0;
+            var deadTotalTasks = 0;
+            var deadTotalDuration = 0;
+            var deadTotalGCTime = 0;
+            var deadTotalInputBytes = 0;
+            var deadTotalShuffleRead = 0;
+            var deadTotalShuffleWrite = 0;
+    
+            response.forEach(function (exec) {
+                allExecCnt += 1;
+                allRDDBlocks += exec.rddBlocks;
+                allMemoryUsed += exec.memoryUsed;
+                allMaxMemory += exec.maxMemory;
+                allDiskUsed += exec.diskUsed;
+                allTotalCores += exec.totalCores;
+                allMaxTasks += exec.maxTasks;
+                allActiveTasks += exec.activeTasks;
+                allFailedTasks += exec.failedTasks;
+                allCompletedTasks += exec.completedTasks;
+                allTotalTasks += exec.totalTasks;
+                allTotalDuration += exec.totalDuration;
+                allTotalGCTime += exec.totalGCTime;
+                allTotalInputBytes += exec.totalInputBytes;
+                allTotalShuffleRead += exec.totalShuffleRead;
+                allTotalShuffleWrite += exec.totalShuffleWrite;
+                if (exec.isActive) {
+                    activeExecCnt += 1;
+                    activeRDDBlocks += exec.rddBlocks;
+                    activeMemoryUsed += exec.memoryUsed;
+                    activeMaxMemory += exec.maxMemory;
+                    activeDiskUsed += exec.diskUsed;
+                    activeTotalCores += exec.totalCores;
+                    activeMaxTasks += exec.maxTasks;
+                    activeActiveTasks += exec.activeTasks;
+                    activeFailedTasks += exec.failedTasks;
+                    activeCompletedTasks += exec.completedTasks;
+                    activeTotalTasks += exec.totalTasks;
+                    activeTotalDuration += exec.totalDuration;
+                    activeTotalGCTime += exec.totalGCTime;
+                    activeTotalInputBytes += exec.totalInputBytes;
+                    activeTotalShuffleRead += exec.totalShuffleRead;
+                    activeTotalShuffleWrite += exec.totalShuffleWrite;
+                } else {
+                    deadExecCnt += 1;
+                    deadRDDBlocks += exec.rddBlocks;
+                    deadMemoryUsed += exec.memoryUsed;
+                    deadMaxMemory += exec.maxMemory;
+                    deadDiskUsed += exec.diskUsed;
+                    deadTotalCores += exec.totalCores;
+                    deadMaxTasks += exec.maxTasks;
+                    deadActiveTasks += exec.activeTasks;
+                    deadFailedTasks += exec.failedTasks;
+                    deadCompletedTasks += exec.completedTasks;
+                    deadTotalTasks += exec.totalTasks;
+                    deadTotalDuration += exec.totalDuration;
+                    deadTotalGCTime += exec.totalGCTime;
+                    deadTotalInputBytes += exec.totalInputBytes;
+                    deadTotalShuffleRead += exec.totalShuffleRead;
+                    deadTotalShuffleWrite += exec.totalShuffleWrite;
+                }
+            });
+    
+            var totalSummary = {
+                "execCnt": ( "Total(" + allExecCnt + ")"),
+                "allRDDBlocks": allRDDBlocks,
+                "allMemoryUsed": allMemoryUsed,
+                "allMaxMemory": allMaxMemory,
+                "allDiskUsed": allDiskUsed,
+                "allTotalCores": allTotalCores,
+                "allMaxTasks": allMaxTasks,
+                "allActiveTasks": allActiveTasks,
+                "allFailedTasks": allFailedTasks,
+                "allCompletedTasks": allCompletedTasks,
+                "allTotalTasks": allTotalTasks,
+                "allTotalDuration": allTotalDuration,
+                "allTotalGCTime": allTotalGCTime,
+                "allTotalInputBytes": allTotalInputBytes,
+                "allTotalShuffleRead": allTotalShuffleRead,
+                "allTotalShuffleWrite": allTotalShuffleWrite
+            };
+            var activeSummary = {
+                "execCnt": ( "Active(" + activeExecCnt + ")"),
+                "allRDDBlocks": activeRDDBlocks,
+                "allMemoryUsed": activeMemoryUsed,
+                "allMaxMemory": activeMaxMemory,
+                "allDiskUsed": activeDiskUsed,
+                "allTotalCores": activeTotalCores,
+                "allMaxTasks": activeMaxTasks,
+                "allActiveTasks": activeActiveTasks,
+                "allFailedTasks": activeFailedTasks,
+                "allCompletedTasks": activeCompletedTasks,
+                "allTotalTasks": activeTotalTasks,
+                "allTotalDuration": activeTotalDuration,
+                "allTotalGCTime": activeTotalGCTime,
+                "allTotalInputBytes": activeTotalInputBytes,
+                "allTotalShuffleRead": activeTotalShuffleRead,
+                "allTotalShuffleWrite": activeTotalShuffleWrite
+            };
+            var deadSummary = {
+                "execCnt": ( "Dead(" + deadExecCnt + ")" ),
+                "allRDDBlocks": deadRDDBlocks,
+                "allMemoryUsed": deadMemoryUsed,
+                "allMaxMemory": deadMaxMemory,
+                "allDiskUsed": deadDiskUsed,
+                "allTotalCores": deadTotalCores,
+                "allMaxTasks": deadMaxTasks,
+                "allActiveTasks": deadActiveTasks,
+                "allFailedTasks": deadFailedTasks,
+                "allCompletedTasks": deadCompletedTasks,
+                "allTotalTasks": deadTotalTasks,
+                "allTotalDuration": deadTotalDuration,
+                "allTotalGCTime": deadTotalGCTime,
+                "allTotalInputBytes": deadTotalInputBytes,
+                "allTotalShuffleRead": deadTotalShuffleRead,
+                "allTotalShuffleWrite": deadTotalShuffleWrite
+            };
+    
+            var data = {executors: response, "execSummary": [activeSummary, deadSummary, totalSummary]};
+            $.get(createTemplateURI(appId), function (template) {
+    
+                executorsSummary.append(Mustache.render($(template).filter("#executors-summary-template").html(), data));
+                var selector = "#active-executors-table";
+                var conf = {
+                    "data": response,
+                    "columns": [
+                        {
+                            data: function (row, type) {
+                                return type !== 'display' ? (isNaN(row.id) ? 0 : row.id ) : row.id;
+                            }
+                        },
+                        {data: 'hostPort'},
+                        {data: 'isActive', render: formatStatus},
+                        {data: 'rddBlocks'},
+                        {
+                            data: function (row, type) {
+                                return type === 'display' ? (formatBytes(row.memoryUsed, type) + ' / ' + formatBytes(row.maxMemory, type)) : row.memoryUsed;
+                            }
+                        },
+                        {data: 'diskUsed', render: formatBytes},
+                        {data: 'totalCores'},
+                        {
+                            data: 'activeTasks',
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (sData > 0) {
+                                    $(nTd).css('color', 'white');
+                                    $(nTd).css('background', activeTasksStyle(oData.activeTasks, oData.maxTasks));
+                                }
+                            }
+                        },
+                        {
+                            data: 'failedTasks',
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (sData > 0) {
+                                    $(nTd).css('color', 'white');
+                                    $(nTd).css('background', failedTasksStyle(oData.failedTasks, oData.totalTasks));
+                                }
+                            }
+                        },
+                        {data: 'completedTasks'},
+                        {data: 'totalTasks'},
+                        {
+                            data: function (row, type) {
+                                return type === 'display' ? (formatDuration(row.totalDuration) + ' (' + formatDuration(row.totalGCTime) + ')') : row.totalDuration
+                            },
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (oData.totalDuration > 0) {
+                                    $(nTd).css('color', totalDurationColor(oData.totalGCTime, oData.totalDuration));
+                                    $(nTd).css('background', totalDurationStyle(oData.totalGCTime, oData.totalDuration));
+                                }
+                            }
+                        },
+                        {data: 'totalInputBytes', render: formatBytes},
+                        {data: 'totalShuffleRead', render: formatBytes},
+                        {data: 'totalShuffleWrite', render: formatBytes},
+                        {data: 'executorLogs', render: formatLogsCells},
+                        {
+                            data: 'id', render: function (data, type) {
+                            return type === 'display' ? ("<a href='threadDump/?executorId=" + data + "'>Thread Dump</a>" ) : data;
+                        }
+                        }
+                    ],
+                    "order": [[0, "asc"]]
+                };
+    
+                $(selector).DataTable(conf);
+                $('#active-executors [data-toggle="tooltip"]').tooltip();
+    
+                var sumSelector = "#summary-execs-table";
+                var sumConf = {
+                    "data": [activeSummary, deadSummary, totalSummary],
+                    "columns": [
+                        {
+                            data: 'execCnt',
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                $(nTd).css('font-weight', 'bold');
+                            }
+                        },
+                        {data: 'allRDDBlocks'},
+                        {
+                            data: function (row, type) {
+                                return type === 'display' ? (formatBytes(row.allMemoryUsed, type) + ' / ' + formatBytes(row.allMaxMemory, type)) : row.allMemoryUsed;
+                            }
+                        },
+                        {data: 'allDiskUsed', render: formatBytes},
+                        {data: 'allTotalCores'},
+                        {
+                            data: 'allActiveTasks',
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (sData > 0) {
+                                    $(nTd).css('color', 'white');
+                                    $(nTd).css('background', activeTasksStyle(oData.allActiveTasks, oData.allMaxTasks));
+                                }
+                            }
+                        },
+                        {
+                            data: 'allFailedTasks',
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (sData > 0) {
+                                    $(nTd).css('color', 'white');
+                                    $(nTd).css('background', failedTasksStyle(oData.allFailedTasks, oData.allTotalTasks));
+                                }
+                            }
+                        },
+                        {data: 'allCompletedTasks'},
+                        {data: 'allTotalTasks'},
+                        {
+                            data: function (row, type) {
+                                return type === 'display' ? (formatDuration(row.allTotalDuration, type) + ' (' + formatDuration(row.allTotalGCTime, type) + ')') : row.allTotalDuration
+                            },
+                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
+                                if (oData.allTotalDuration > 0) {
+                                    $(nTd).css('color', totalDurationColor(oData.allTotalGCTime, oData.allTotalDuration));
+                                    $(nTd).css('background', totalDurationStyle(oData.allTotalGCTime, oData.allTotalDuration));
+                                }
+                            }
+                        },
+                        {data: 'allTotalInputBytes', render: formatBytes},
+                        {data: 'allTotalShuffleRead', render: formatBytes},
+                        {data: 'allTotalShuffleWrite', render: formatBytes}
+                    ],
+                    "paging": false,
+                    "searching": false,
+                    "info": false
+    
+                };
+    
+                $(sumSelector).DataTable(sumConf);
+                $('#execSummary [data-toggle="tooltip"]').tooltip();
+    
+            });
+        });
+    });
+});
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 d2161662d5..5b9afb59ef 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
@@ -15,28 +15,6 @@
  * limitations under the License.
  */
 
-// this function works exactly the same as UIUtils.formatDuration
-function formatDuration(milliseconds) {
-  if (milliseconds < 100) {
-    return milliseconds + " ms";
-  }
-  var seconds = milliseconds * 1.0 / 1000;
-  if (seconds < 1) {
-    return seconds.toFixed(1) + " s";
-  }
-  if (seconds < 60) {
-    return seconds.toFixed(0) + " s";
-  }
-  var minutes = seconds / 60;
-  if (minutes < 10) {
-    return minutes.toFixed(1) + " min";
-  } else if (minutes < 60) {
-    return minutes.toFixed(0) + " min";
-  }
-  var hours = minutes / 60;
-  return hours.toFixed(1) + " h";
-}
-
 function makeIdNumeric(id) {
   var strs = id.split("_");
   if (strs.length < 3) {
diff --git a/core/src/main/resources/org/apache/spark/ui/static/utils.js b/core/src/main/resources/org/apache/spark/ui/static/utils.js
new file mode 100644
index 0000000000..edc0ee2ce1
--- /dev/null
+++ b/core/src/main/resources/org/apache/spark/ui/static/utils.js
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// this function works exactly the same as UIUtils.formatDuration
+function formatDuration(milliseconds) {
+    if (milliseconds < 100) {
+        return milliseconds + " ms";
+    }
+    var seconds = milliseconds * 1.0 / 1000;
+    if (seconds < 1) {
+        return seconds.toFixed(1) + " s";
+    }
+    if (seconds < 60) {
+        return seconds.toFixed(0) + " s";
+    }
+    var minutes = seconds / 60;
+    if (minutes < 10) {
+        return minutes.toFixed(1) + " min";
+    } else if (minutes < 60) {
+        return minutes.toFixed(0) + " min";
+    }
+    var hours = minutes / 60;
+    return hours.toFixed(1) + " h";
+}
+
+function formatBytes(bytes, type) {
+    if (type !== 'display') return bytes;
+    if (bytes == 0) return '0.0 B';
+    var k = 1000;
+    var dm = 1;
+    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}