MAPREDUCE-4720. Browser thinks History Server main page JS is taking too long (Ravi Prakash via bobby)

git-svn-id: https://svn.apache.org/repos/asf/hadoop/common/branches/branch-0.23@1409610 13f79535-47bb-0310-9956-ffa450edef68

hadoop-mapreduce-project/CHANGES.txt

@@ -20,6 +20,9 @@ Release 0.23.5 - UNRELEASED
 
   OPTIMIZATIONS
 
+    MAPREDUCE-4720. Browser thinks History Server main page JS is taking too
+    long (Ravi Prakash via bobby)
+
   BUG FIXES
 
     MAPREDUCE-4674. Hadoop examples secondarysort has a typo

hadoop-mapreduce-project/hadoop-mapreduce-client/hadoop-mapreduce-client-hs/src/main/java/org/apache/hadoop/mapreduce/v2/hs/webapp/HsJobsBlock.java

@@ -21,6 +21,7 @@ package org.apache.hadoop.mapreduce.v2.hs.webapp;
 import java.text.SimpleDateFormat;
 import java.util.Date;
 
+import org.apache.commons.lang.StringEscapeUtils;
 import org.apache.hadoop.mapreduce.v2.app.AppContext;
 import org.apache.hadoop.mapreduce.v2.app.job.Job;
 import org.apache.hadoop.mapreduce.v2.hs.webapp.dao.JobInfo;
@@ -67,22 +68,36 @@ public class HsJobsBlock extends HtmlBlock {
             th("Reduces Completed")._()._().
         tbody();
     LOG.info("Getting list of all Jobs.");
+    // Write all the data into a JavaScript array of arrays for JQuery
+    // DataTables to display
+    StringBuilder jobsTableData = new StringBuilder("[\n");
     for (Job j : appContext.getAllJobs().values()) {
       JobInfo job = new JobInfo(j);
-      tbody.
-        tr().
-          td(dateFormat.format(new Date(job.getStartTime()))).
-          td(dateFormat.format(new Date(job.getFinishTime()))).
-          td().a(url("job", job.getId()), job.getId())._().
-          td(job.getName()).
-          td(job.getUserName()).
-          td(job.getQueueName()).
-          td(job.getState()).
-          td(String.valueOf(job.getMapsTotal())).
-          td(String.valueOf(job.getMapsCompleted())).
-          td(String.valueOf(job.getReducesTotal())).
-          td(String.valueOf(job.getReducesCompleted()))._();
+      jobsTableData.append("[\"")
+      .append(dateFormat.format(new Date(job.getStartTime()))).append("\",\"")
+      .append(dateFormat.format(new Date(job.getFinishTime()))).append("\",\"")
+      .append("<a href='").append(url("job", job.getId())).append("'>")
+      .append(job.getId()).append("</a>\",\"")
+      .append(StringEscapeUtils.escapeJavaScript(job.getName()))
+      .append("\",\"")
+      .append(StringEscapeUtils.escapeJavaScript(job.getUserName()))
+      .append("\",\"")
+      .append(StringEscapeUtils.escapeJavaScript(job.getQueueName()))
+      .append("\",\"")
+      .append(job.getState()).append("\",\"")
+      .append(String.valueOf(job.getMapsTotal())).append("\",\"")
+      .append(String.valueOf(job.getMapsCompleted())).append("\",\"")
+      .append(String.valueOf(job.getReducesTotal())).append("\",\"")
+      .append(String.valueOf(job.getReducesCompleted())).append("\"],\n");
     }
+
+    //Remove the last comma and close off the array of arrays
+    if(jobsTableData.charAt(jobsTableData.length() - 2) == ',') {
+      jobsTableData.delete(jobsTableData.length()-2, jobsTableData.length()-1);
+    }
+    jobsTableData.append("]");
+    html.script().$type("text/javascript").
+    _("var jobsTableData=" + jobsTableData)._();
     tbody._().
     tfoot().
       tr().

hadoop-mapreduce-project/hadoop-mapreduce-client/hadoop-mapreduce-client-hs/src/main/java/org/apache/hadoop/mapreduce/v2/hs/webapp/HsTasksBlock.java

@@ -100,6 +100,10 @@ public class HsTasksBlock extends HtmlBlock {
     theadRow.th("Elapsed Time"); //Attempt
 
     TBODY<TABLE<Hamlet>> tbody = theadRow._()._().tbody();
+
+    // Write all the data into a JavaScript array of arrays for JQuery
+    // DataTables to display
+    StringBuilder tasksTableData = new StringBuilder("[\n");
     for (Task task : app.getJob().getTasks().values()) {
       if (type != null && task.getType() != type) {
         continue;
@@ -138,54 +142,34 @@ public class HsTasksBlock extends HtmlBlock {
         attemptElapsed = ta.getElapsedTime();
       }
 
-      TR<TBODY<TABLE<Hamlet>>> row = tbody.tr();
-      row.
-          td().
-            br().$title(String.valueOf(info.getTaskNum()))._(). // sorting
-            a(url("task", tid), tid)._().
-          td(info.getState()).
-          td().
-            br().$title(String.valueOf(startTime))._().
-            _(Times.format(startTime))._().
-          td().
-            br().$title(String.valueOf(finishTime))._().
-            _(Times.format(finishTime))._().
-          td().
-            br().$title(String.valueOf(elapsed))._().
-            _(formatTime(elapsed))._().
-          td().
-            br().$title(String.valueOf(attemptStartTime))._().
-            _(Times.format(attemptStartTime))._();
+      tasksTableData.append("[\"")
+      .append("<a href='" + url("task", tid)).append("'>")
+      .append(tid).append("</a>\",\"")
+      .append(info.getState()).append("\",\"")
+      .append(startTime).append("\",\"")
+      .append(finishTime).append("\",\"")
+      .append(elapsed).append("\",\"")
+      .append(attemptStartTime).append("\",\"");
       if(type == TaskType.REDUCE) {
-        row.td().
-          br().$title(String.valueOf(shuffleFinishTime))._().
-          _(Times.format(shuffleFinishTime))._();
-        row.td().
-        br().$title(String.valueOf(sortFinishTime))._().
-        _(Times.format(sortFinishTime))._();
+        tasksTableData.append(shuffleFinishTime).append("\",\"")
+        .append(sortFinishTime).append("\",\"");
       }
-      row.
-          td().
-            br().$title(String.valueOf(attemptFinishTime))._().
-            _(Times.format(attemptFinishTime))._();
-
+      tasksTableData.append(attemptFinishTime).append("\",\"");
       if(type == TaskType.REDUCE) {
-        row.td().
-          br().$title(String.valueOf(elapsedShuffleTime))._().
-        _(formatTime(elapsedShuffleTime))._();
-        row.td().
-        br().$title(String.valueOf(elapsedSortTime))._().
-      _(formatTime(elapsedSortTime))._();
-        row.td().
-          br().$title(String.valueOf(elapsedReduceTime))._().
-        _(formatTime(elapsedReduceTime))._();
+        tasksTableData.append(elapsedShuffleTime).append("\",\"")
+        .append(elapsedSortTime).append("\",\"")
+        .append(elapsedReduceTime).append("\",\"");
       }
-
-      row.td().
-        br().$title(String.valueOf(attemptElapsed))._().
-        _(formatTime(attemptElapsed))._();
-      row._();
+      tasksTableData.append(attemptElapsed).append("\"],\n");
+    }
+    //Remove the last comma and close off the array of arrays
+    if(tasksTableData.charAt(tasksTableData.length() - 2) == ',') {
+      tasksTableData.delete(tasksTableData.length()-2, tasksTableData.length()-1);
     }
+    tasksTableData.append("]");
+    html.script().$type("text/javascript").
+    _("var tasksTableData=" + tasksTableData)._();
+    
     TR<TFOOT<TABLE<Hamlet>>> footRow = tbody._().tfoot().tr();
     footRow.th().input("search_init").$type(InputType.text).$name("task")
         .$value("ID")._()._().th().input("search_init").$type(InputType.text)

hadoop-mapreduce-project/hadoop-mapreduce-client/hadoop-mapreduce-client-hs/src/main/java/org/apache/hadoop/mapreduce/v2/hs/webapp/HsTasksPage.java

@@ -67,18 +67,32 @@ public class HsTasksPage extends HsView {
       type = MRApps.taskType(symbol);
     }
     StringBuilder b = tableInit().
-    append(",aoColumnDefs:[");
-    b.append("{'sType':'title-numeric', 'aTargets': [ 0, 4");
+    append(", 'aaData': tasksTableData");
+    b.append(", bDeferRender: true");
+    b.append(", bProcessing: true");
+
+    b.append("\n, aoColumnDefs: [\n");
+    b.append("{'sType':'numeric', 'aTargets': [ 0 ]");
+    b.append(", 'mRender': parseHadoopID }");
+
+    b.append(", {'sType':'numeric', 'aTargets': [ 4");
     if(type == TaskType.REDUCE) {
       b.append(", 9, 10, 11, 12");
     } else { //MAP
       b.append(", 7");
     }
-    b.append(" ] }]");
+    b.append(" ], 'mRender': renderHadoopElapsedTime }");
 
-    // Sort by id upon page load
-    b.append(", aaSorting: [[0, 'asc']]");
+    b.append("\n, {'sType':'numeric', 'aTargets': [ 2, 3, 5");
+    if(type == TaskType.REDUCE) {
+      b.append(", 6, 7, 8");
+    } else { //MAP
+      b.append(", 6");
+    }
+    b.append(" ], 'mRender': renderHadoopDate }]");
 
+    // Sort by id upon page load
+    b.append("\n, aaSorting: [[0, 'asc']]");
     b.append("}");
     return b.toString();
   }

hadoop-mapreduce-project/hadoop-mapreduce-client/hadoop-mapreduce-client-hs/src/main/java/org/apache/hadoop/mapreduce/v2/hs/webapp/HsView.java

@@ -82,17 +82,15 @@ public class HsView extends TwoColumnLayout {
    */
   private String jobsTableInit() {
     return tableInit().
+        append(", 'aaData': jobsTableData").
+        append(", bDeferRender: true").
+        append(", bProcessing: true").
+
         // Sort by id upon page load
         append(", aaSorting: [[2, 'desc']]").
         append(", aoColumnDefs:[").
-        // Maps Total
-        append("{'sType':'numeric', 'bSearchable': false, 'aTargets': [ 7 ] }").
-        // Maps Completed
-        append(",{'sType':'numeric', 'bSearchable': false, 'aTargets': [ 8 ] }").
-        // Reduces Total
-        append(",{'sType':'numeric', 'bSearchable': false, 'aTargets': [ 9 ] }").
-        // Reduces Completed
-        append(",{'sType':'numeric', 'bSearchable': false, 'aTargets': [ 10 ] }").
+        // Maps Total, Maps Completed, Reduces Total and Reduces Completed
+        append("{'sType':'numeric', 'bSearchable': false, 'aTargets': [ 7, 8, 9, 10 ] }").
         append("]}").
         toString();
   }

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/java/org/apache/hadoop/yarn/webapp/view/JQueryUI.java

@@ -73,14 +73,15 @@ public class JQueryUI extends HtmlBlock {
   @Override
   protected void render(Block html) {
     html.
-      link(join("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css")).
-      link(root_url("static/dt-1.7.5/css/jui-dt.css")).
-      script("https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js").
-      script("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js").
-      script(root_url("static/dt-1.7.5/js/jquery.dataTables.min.js")).
+      link("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base"
+          + "/jquery-ui.css").
+      link(root_url("static/dt-1.9.4/css/jui-dt.css")).
+      script(root_url("static/jquery-1.8.2.min.js")).
+      script(root_url("static/jquery-ui-1.9.1.custom.min.js")).
+      script(root_url("static/dt-1.9.4/js/jquery.dataTables.min.js")).
       script(root_url("static/yarn.dt.plugins.js")).
       style("#jsnotice { padding: 0.2em; text-align: center; }",
-            ".ui-progressbar { height: 1em; min-width: 5em }"); // required
+        ".ui-progressbar { height: 1em; min-width: 5em }"); // required
 
     List<String> list = Lists.newArrayList();
     initAccordions(list);

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/resources/webapps/static/yarn.dt.plugins.js

@@ -55,3 +55,50 @@ jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay )
   } );
   return this;
 }
+
+function renderHadoopDate(data, type, full) {
+  if (type === 'display') {
+    return new Date(parseInt(data)).toUTCString();
+  }
+  // 'filter', 'sort', 'type' and undefined all just use the number
+  return data;  
+}
+
+function renderHadoopElapsedTime(data, type, full) {
+  if (type === 'display') {
+    var timeDiff = parseInt(data);
+    if(timeDiff < 0)
+      return "N/A";
+    
+    var hours = Math.floor(timeDiff / (60*60*1000));
+    var rem = (timeDiff % (60*60*1000));
+    var minutes =  Math.floor(rem / (60*1000));
+    rem = rem % (60*1000);
+    var seconds = Math.floor(rem / 1000);
+    
+    var toReturn = "";
+    if (hours != 0){
+      toReturn += hours;
+      toReturn += "hrs, ";
+    }
+    if (minutes != 0){
+      toReturn += minutes;
+      toReturn += "mins, ";
+    }
+    toReturn += seconds;
+    toReturn += "sec";
+    return toReturn;
+  }
+  // 'filter', 'sort', 'type' and undefined all just use the number
+  return data;  
+}
+
+function parseHadoopID(data, type, full) {
+  if (type === 'display' || type === 'filter') {
+    return data;
+  }
+  //Parse the ID for 'sort', 'type' and undefined
+  //The number after the last '_' and before the end tag '<'
+  var splits = data.split('_');
+  return splits[parseInt(splits.length-1)].split('<')[0];
+}