[Findit] Rewrite UI page.

appengine/findit/templates/build_failure.html

Index: appengine/findit/templates/build_failure.html
diff --git a/appengine/findit/templates/build_failure.html b/appengine/findit/templates/build_failure.html
index 391eb01618d9a7f948727ac7e62edd703478289e..b860f8ce77c0ce143b804fc7cb5621f0e48524e7 100644
--- a/appengine/findit/templates/build_failure.html
+++ b/appengine/findit/templates/build_failure.html
@@ -94,94 +94,7 @@
     findit.showTriageHelpButton = '{{show_triage_help_button}}' == 'True';
     findit.showDebugInfo = '{{show_debug_info}}' == 'True';
     findit.analysisResult = {{analysis_result | tojson | safe}};
-
-    function generateStringForSingleCL(cl) {
-      var clString = '';
-      clString += '<td><a href="' + findit.builderUrl + '/builds/' + cl.build_number + '">' + cl.build_number + '</a></td>';
-      clString += '<td>' + cl.repo_name + '</td>';
-      clString += '<td><a href="' + cl.url + '">' + cl.commit_position || cl.revision + '</a></td>';
-      clString += '<td>' + cl.score + '</td>';
-      clString += '<td>';
-
-      var sortedHintsList = Object.keys(cl.hints).sort(function(a, b) {
-        return cl.hints[b] - cl.hints[a];
-      }); // Sorts hints by score in descending order.
-      $.each(sortedHintsList, function(index, hint) {
-        clString += '<li>' + hint + '</li>';
-      });
-      clString += '</td>';
-      return clString;
-    }
-
-    function addRowToResultTable(stepIndex, testIndex, failure, type) {
-      var rowString;
-      var failureWithLink;
-      if (type == 'step') {
-        rowString = '<tr id="' + stepIndex.toString() +'">';
-        var stepUrl = findit.buildUrl + '/steps/' + failure.step_name;
-        var arrowImg = '';
-        if (failure.tests && failure.tests.length > 0) {
-          arrowImg = '<a class="collapsed"> <img class="toggle-img" src="https://www.gstatic.com/images/icons/material/system/1x/keyboard_arrow_right_black_24dp.png"> </a>';
-        }
-
-        if (findit.showDebugInfo) {
-          failureWithLink = arrowImg + '<a href="./failure-log?url=' + stepUrl + '"><font class="valign-middle">' + failure.step_name + '</font></a>';
-        } else {
-          failureWithLink = arrowImg + '<a href="' + stepUrl + '">' + failure.step_name + '</a>';
-        }
-
-      } else {
-        rowString = '<tr id="' + stepIndex.toString() + '-' + testIndex.toString() + '-0" class="hidden-row">';
-        failureWithLink = '<i>' + failure.test_name + '</i>';
-      }
-
-      var rowsSpan = failure.suspected_cls.length > 0 ? failure.suspected_cls.length : 1;
-      rowString += '<td valigh="middle" rowspan="' + rowsSpan + '">' + failureWithLink + '</td>';
-      rowString += '<td rowspan="' + rowsSpan + '"><a href="' + findit.builderUrl + '/builds/' + failure.first_failure + '">' + failure.first_failure + '</a></td>';
-      if (failure.last_pass) {
-        rowString += '<td rowspan="' + rowsSpan + '"><a href="' + findit.builderUrl + '/builds/' + failure.last_pass + '">' + failure.last_pass + '</a></td>';
-      } else {
-        rowString += '<td rowspan="' + rowsSpan + '">N/A</td>';
-      }
-      if (failure.suspected_cls.length > 0) {
-        clString = generateStringForSingleCL(failure.suspected_cls[0]);
-        rowString += clString + '</tr>';
-        $('#failures tbody').append(rowString);
-
-        for (var i = 1; i < failure.suspected_cls.length; i++) {
-          if (type == 'step') {
-            rowString = '<tr>';
-          } else {
-            rowString = '<tr id="' + stepIndex.toString() + '-' + testIndex.toString() + '-' + i.toString() + '" class="hidden-row">';
-          }
-
-          clString = generateStringForSingleCL(failure.suspected_cls[i]);
-          rowString += clString + '</tr>';
-          $('#failures tbody').append(rowString);
-        }
-      } else {
-        rowString += '<td colspan="5">';
-        if(type == 'step' && failure.supported == false) {
-          rowString += 'Not Supported</td>';
-        } else {
-          rowString += 'Not Found</td>';
-        }
-        rowString += '</tr>';
-        $('#failures tbody').append(rowString);
-      }
-
-      if(type == 'step' && failure.tests && failure.tests.length > 0) {
-        $.each(failure.tests, function(testIndex, value) {
-          addRowToResultTable(stepIndex, testIndex, value, 'test');
-        });
-      }
-    }
-
-    function displayAnalysisResult() {
-      $.each(findit.analysisResult.failures, function(index, value) {
-        addRowToResultTable(index, -1, value, 'step');
-      });
-    }
+    findit.tryjobStatusMessageTable = {{status_message_map | tojson | safe}}

[stgao, 2016/03/29 00:26:06]

nit: table -> map.

In a html, table has its special meaning I guess.

[chanli, 2016/03/29 01:36:08]

Done.

 
     function triageAnalysisResult(e) {
       var target = $(this);
@@ -234,38 +147,6 @@
       e.preventDefault();
     }
 
-    function toggleTests(thisobj) {
-      var imgDirection;
-      var rowAddedClass;
-      var rowRemovedClass;
-      if (thisobj.hasClass("collapsed")) {
-        thisobj.removeClass("collapsed").addClass("expanded");
-        imgDirection = 'down';
-        rowAddedClass = "displayed-row";
-        rowRemovedClass = "hidden-row";
-      } else {
-        thisobj.removeClass("expanded").addClass("collapsed");
-        imgDirection = 'right';
-        rowAddedClass = "hidden-row";
-        rowRemovedClass = "displayed-row";
-      }
-      thisobj.html('<img class="toggle-img" src="https://www.gstatic.com/images/icons/material/system/1x/keyboard_arrow_' + imgDirection + '_black_24dp.png">');
-      var stepRowId = thisobj.closest("tr").attr("id");
-      var testRowId = stepRowId + "-" + "0";
-      var i = 0;
-      while ($("#" + testRowId + "-" + "0").length) {
-        var clRowId = testRowId + "-" + "0";
-        var j = 0;
-        while ($("#" + clRowId).length) {
-          $( "#" + clRowId ).addClass(rowAddedClass).removeClass(rowRemovedClass);
-          j++;
-          clRowId = testRowId + "-" + j;
-        }
-        i++;
-        testRowId = stepRowId + "-" + i;
-      }
-    }
-
     function toggleList(thisobj) {
       var thisObjId = thisobj.attr("id");
       if (thisobj.hasClass("collapsed_list")) {
@@ -279,123 +160,138 @@
       }
     }
 
-    function displaySwarmingTask() {
-      $.getJSON('swarming-task?url=' + findit.buildUrl, function(data) {
-          if (! jQuery.isEmptyObject(data) ) {
-            var tableString = '<table><tr><th>Step</th><th>Test(s)</th><th>Status</th><th>Task</th></tr>';
-            var hasTaskData = false;
-            $.each(data, function(step, task_info) {
-              var tasks = task_info.swarming_tasks;
-              if (tasks.length == 0) {
-                return true;  // Broken data, continue to next one.
-              }
-              for (var i = 0; i < tasks.length; i++) {
-                hasTaskData = true;
-                task = tasks[i];
-                tableString += '<tr>';
-                tableString += '<td>' + step + '</td><td>';
-
-                var j = 0;
-                for (; j < (task.tests.length > 5 ? 5 : task.tests.length); j++) {
-                  tableString += '<li><div title="' + task.tests[j] + '" class="truncate">' + task.tests[j] + '</div></li>';
-                }
-
-                if(task.tests.length > 5) {
-                  tableString += '<div id="list-' + i + '"class="not-display">';
-                  for (; j < task.tests.length; j++) {
-                    tableString += '<li><div title="' + task.tests[j] + '" class="truncate">' + task.tests[j] + '</div></li>';
-                  }
-                  tableString += '</div><a id="' + i + '"href="#" class="collapsed_list">Show more</a>';
-                }
-
-                tableString += '</td>';
-                if (task.status == 'Completed') {
-                  status_class = 'completed';
-                } else if (task.status == 'Error') {
-                  status_class = 'error';
-                } else {
-                  // If status is either 'Pending' or 'Running', add 'running' style.
-                  status_class = 'running';
-                }
-                tableString += '<td><span class="' + status_class + '">' + task.status + '</span></td>';
-                if (task.task_id) {
-                  tableString += '<td><a href="' + task.task_url + '">' + task.task_id + '</a></td>';
-                } else {
-                  tableString += '<td></td>';
-                }
-                tableString += '</tr>';
-              }
-            });
-            tableString += '</table>';
-            if (hasTaskData) {
-              $('#swarming_task_table').html(tableString);
-              $('#swarming_task').removeClass('not-display');
-            }
-          }
+    function displayCommonCells(step_name, category, index, tests, first_failure, last_pass, rowspan) {

[stgao, 2016/03/29 00:26:06]

name nit: displayCommonCells -> generateCommonClessForSuspectedCL or something
more explicit?

We don't display anything yet in this func.

[chanli, 2016/03/29 01:36:07]

Done.

+      var rowString = '<td rowspan="' + rowspan + '">' + step_name + '</td>';
+
+      rowString += '<td rowspan="' + rowspan + '">';
+      var j = 0;
+      for (; j < (tests.length > 5 ? 5 : tests.length); j++) {
+        rowString += '<li><div title="' + tests[j] + '" class="truncate">' + tests[j] + '</div></li>';

[stgao, 2016/03/29 00:26:06]

Why an div? Could it be just an <li>?

[chanli, 2016/03/29 01:36:07]

This div is to truncate the test name if it's too long. I can't do it with <li>

+      }
+      if(tests.length > 5) {

[lijeffrey, 2016/03/29 00:49:44]

nit: space after if

[chanli, 2016/03/29 01:36:07]

Done.

+        rowString += '<div id="list-'  + category + '-' + index +  '" class="not-display">';

[lijeffrey, 2016/03/29 00:49:44]

nit: + index + <remove 1 space>

[chanli, 2016/03/29 01:36:07]

Done.

+        for (; j < tests.length; j++) {
+          rowString += '<li><div title="' + tests[j] + '" class="truncate">' + tests[j] + '</div></li>';
+        }
+        rowString += '</div><a id="' + category + '-' + index + '"href="#" class="collapsed_list">Show more</a>';
+      }
+      rowString += '</td>';
+
+      rowString += '<td rowspan="' + rowspan + '"><a href="' + findit.builderUrl + '/builds/' + first_failure + '">' + first_failure + '</a></td>';
+      if (last_pass) {
+        rowString += '<td rowspan="' + rowspan + '"><a href="' + findit.builderUrl + '/builds/' + last_pass + '">' + last_pass + '</a></td>';
+      } else {
+        rowString += '<td rowspan="' + rowspan + '">N/A</td>';
+      }
+
+      return rowString;
+    }
+
+    function generateStringForSingleCL(cl) {
+      var clString = '<td><a href="' + findit.builderUrl + '/builds/' + cl.build_number + '">' + cl.build_number + '</a></td>';
+      clString += '<td>' + cl.repo_name + '</td>';

[stgao, 2016/03/29 00:26:06]

We don't show the repo_name above, so let's do the same here.

After we support sub-CLs in DEPS rolls, we could add it back.

[chanli, 2016/03/29 01:36:08]

Done.

+      clString += '<td><a href="' + cl.url + '">' + cl.commit_position || cl.revision + '</a></td>';
+      clString += '<td>' + cl.score + '</td>';
+      clString += '<td>';
+
+      var sortedHintsList = Object.keys(cl.hints).sort(function(a, b) {
+        return cl.hints[b] - cl.hints[a];
+      }); // Sorts hints by score in descending order.
+      $.each(sortedHintsList, function(index, hint) {
+        clString += '<li>' + hint + '</li>';
       });
+      clString += '</td>';
+      return clString;
     }
 
-    function displayTryJobResult() {
-      $.getJSON('try-job-result?url=' + findit.buildUrl, function(data) {
-          if (! jQuery.isEmptyObject(data)) {
-            var tableString = '<table><tr><th>Step</th><th>Test</th><th>Link</th><th>Status</th><th>Culprit</th></tr>';
-            var hasTryJobData = false;
-            $.each(data, function(key, value) {
-              tableString += '<tr>';
-              tableString += '<td>' + value.step_name + '</td>';
-              tableString += '<td><li><div title="' + value.test_name + '" class="truncate">' + value.test_name + '</div></li></td>';
-              if (value.try_job_url) {
-                tableString += '<td><a href="' + value.try_job_url + '">' + value.try_job_build_number + '</a></td>';
-              } else {
-                tableString += '<td></td>';
-              }
-
-              if (value.status) {
-                hasTryJobData = true;
-              } else {
-                return true;  // Broken data, continue to next one.
-              }
-              var status;
-              var revision;
-              noTryJobStatuses = ['Flaky', 'Skipped'];
-              if (noTryJobStatuses.indexOf(value.status) > -1) {
-                status = '';
-                revision = value.status;
-              } else if (value.status == 'Completed'){
-                status = value.status;
-                revision = value.commit_position || value.revision || 'Not Found';
-              } else {
-                status = value.status;
-                revision = '';
-              }
-              if (status == 'Completed') {
-                status_class = 'completed';
-              } else if (status == 'Error') {
-                status_class = 'error';
-              } else {
-                // If status is either 'Scheduled' or 'Running', add 'running' style.
-                status_class = 'running';
-              }
-              tableString += '<td><span class="' + status_class + '">' + status + '</span></td>';
-              if (value.review_url) {
-                tableString += '<td><a href="' + value.review_url + '">' + revision + '</a></td>';
-              } else {
-                var tdWithTitleMap = {
-                    'Flaky': '<td title="The test is flaky based on swarming task result.">',
-                    'Skipped': '<td title="There is no result from swarming task to identify flakiness so skip the step to avoid false positive.">'
-                };
-                tableString += tdWithTitleMap[revision] || '<td>';
-                tableString += revision + '</td>';
-              }
-              tableString += '</tr>';
-            });
-            tableString += '</table>';
-            if (hasTryJobData) {
-              $('#try_job_result').html(tableString);
-              $('#try_job').removeClass('not-display');
-            }
-          }
+    function displayHeuristicCulpritCls(suspectedCls, supported){

[stgao, 2016/03/29 00:26:05]

name nit: no display in this func yet.

[chanli, 2016/03/29 01:36:07]

Done.

+      var cellTableString = '';
+
+      if (suspectedCls.length > 0){

[stgao, 2016/03/29 00:26:06]

style nit: space ") {"

[chanli, 2016/03/29 01:36:07]

Done.

+          cellTableString += generateStringForSingleCL(suspectedCls[0]);
+        for (var i = 1; i < suspectedCls.length; i++) {
+          cellTableString += '<tr>' + generateStringForSingleCL(suspectedCls[i]) + '</tr>';
+        }
+      } else {
+        cellTableString += '<td colspan="5">';
+        if(supported == false) {

[lijeffrey, 2016/03/29 00:49:44]

why not if (!supported)?

[lijeffrey, 2016/03/29 00:49:45]

nit: space after if

[chanli, 2016/03/29 01:36:07]

Done.

[chanli, 2016/03/29 01:36:07]

Done.

+          cellTableString += 'Not Supported</td>';
+        } else {
+          cellTableString += 'Not Found</td>';
+        }
+      }
+      return cellTableString;
+    }
+
+    function displayDeterminedResult(step_name, results) {

[stgao, 2016/03/29 00:26:06]

nit: DeterminedResult-> ReliableFailures

[chanli, 2016/03/29 01:36:08]

Done.

+      var tableString = '';
+      $.each(results, function(index, result){

[lijeffrey, 2016/03/29 00:49:44]

nit: space before {

[chanli, 2016/03/29 01:36:07]

Done.

+        tableString += '<tr>';
+        var rowspan = result.heuristic_analysis.suspected_cls.length > 0 ? result.heuristic_analysis.suspected_cls.length : 1;
+
+        tableString += displayCommonCells(step_name, 'determined', index, result.tests, result.first_failure, result.last_failure, rowspan);
+
+        var tryJob = result.try_job;
+        var tryJobCulprit = tryJob.culprit;
+        if (! jQuery.isEmptyObject(tryJobCulprit)) {
+          var build_number = result.try_job.try_job_key.split('/')[2];

[stgao, 2016/03/29 00:26:05]

A comment on example of the try_job_key and what does the build number refer to.

[chanli, 2016/03/29 01:36:07]

Done.

+          tableString += '<td rowspan="' + rowspan + '"><a href="' + findit.builderUrl + '/builds/' + build_number + '">' + build_number + '</a></td>';
+          tableString += '<td rowspan="' + rowspan + '"><a href="' + tryJobCulprit.review_url + '">' + tryJobCulprit.commit_position || tryJobCulprit.revision + '</a></td>';

[stgao, 2016/03/29 00:26:06]

Is it review_url? If no review url, we default to git log url.

This seems a potential bug.

[chanli, 2016/03/29 01:36:07]

Done.

+
+        tableString += '<td rowspan="' + rowspan + '">';
+        tableString += '<li>Tests are reliable based on result of swarming rerun <a href="' + tryJob.task_url+ '">' + tryJob.task_id + '</a></li>';

[stgao, 2016/03/29 00:26:06]

The message seems a bit long, we'd better shorten it.

Reliable failure: <a href='url/to/swarming/task'>swarming rerun</a>

[chanli, 2016/03/29 01:36:07]

Done.

+        tableString += '<li>For try job details: <a href="' + tryJob.try_job_url+ '">' + tryJob.try_job_build_number + '</a></li></td>';
+        } else {
+          tableString += '<td colspan="3" rowspan="' + rowspan + '">' + findit.tryjobStatusMessageTable[tryJob.status] + '</td>';
+        }
+
+        tableString += displayHeuristicCulpritCls(result.heuristic_analysis.suspected_cls, result.supported);
+        tableString += '</tr>';
+      });
+
+      if (!jQuery.isEmptyObject(results)) {

[stgao, 2016/03/29 00:26:06]

Should we check this at the beginning instead?

Same for the other two categories below.

[chanli, 2016/03/29 01:36:07]

Done.

+        $('#determined_results_table tbody').append(tableString);
+        $('#determined_results').removeClass('not-display');
+      }
+    }
+
+    function displayFlakyResult(step_name, results) {

[stgao, 2016/03/29 00:26:06]

name nit: FlakyResult -> flakyfailures.

[chanli, 2016/03/29 01:36:07]

Done.

+      var tableString = '';
+      $.each(results, function(index, result){
+        tableString += '<tr>';
+        var rowspan = result.heuristic_analysis.suspected_cls.length > 0 ? result.heuristic_analysis.suspected_cls.length : 1;
+        tableString += displayCommonCells(step_name, 'flaky', index, result.tests, result.first_failure, result.last_failure, rowspan);
+
+        tableString += '<td rowspan="' + rowspan + '"><a href="' + result.try_job.task_url + '">' + result.try_job.task_id + '</a></td>';
+
+        tableString += displayHeuristicCulpritCls(result.heuristic_analysis.suspected_cls, result.supported);
+
+        tableString += '</tr>';
       });
+
+      if (!jQuery.isEmptyObject(results)) {
+        $('#flaky_results_table tbody').append(tableString);
+        $('#flaky_results').removeClass('not-display');
+      }
+    }
+
+    function displayUndeterminedResult(step_name, results) {

[stgao, 2016/03/29 00:26:06]

name nit: UnderterminedResult -> UnclassifiedFailures.

Also update var naming and id naming.

[chanli, 2016/03/29 01:36:07]

I'll go with unreliableFailures.

+      var tableString = '';
+      $.each(results, function(index, result){
+        tableString += '<tr>';
+        var rowspan = result.heuristic_analysis.suspected_cls.length > 0 ? result.heuristic_analysis.suspected_cls.length : 1;
+        tableString += displayCommonCells(step_name, 'undetermined', index, result.tests, result.first_failure, result.last_failure, rowspan);
+
+        tableString += '<td rowspan="' + rowspan + '">' + findit.tryjobStatusMessageTable[result.try_job.status] + '</td>';
+
+        tableString += displayHeuristicCulpritCls(result.heuristic_analysis.suspected_cls, result.supported);
+        tableString += '</tr>';
+      });
+
+      if (!jQuery.isEmptyObject(results)) {
+        $('#undetermined_results_table tbody').append(tableString);
+        $('#undetermined_results').removeClass('not-display');
+      }
     }
 
     $(document).ready(function() {
@@ -420,23 +316,25 @@
 
           $('.triage').click(triageAnalysisResult);
 
-          if (findit.analysisResult.failures.length > 0) {
-            displayAnalysisResult();
+          if (!jQuery.isEmptyObject(findit.analysisResult)) {
+            $.each(findit.analysisResult, function(step_name, step_results) {
+              $.each(step_results.results, function(category, results) {
+                  if (category == 'determined_results') {
+                    displayDeterminedResult(step_name, results);
+                  } else if (category == 'undetermined_results') {
+                    displayUndeterminedResult(step_name, results);
+                  } else if (category == 'flaky_results'){
+                    displayFlakyResult(step_name, results);
+                  }

[stgao, 2016/03/29 00:26:06]

Give an alert to file bug for the "else" case?

[chanli, 2016/03/29 01:36:07]

Done.

+              });
+            });
           } else {
             $('#triage-and-table').text('no failure is found');
           }
-          $(document).on("click",".expanded, .collapsed",function() {
-            toggleTests($(this));
-          });
 
           if (findit.showTriageHelpButton) {
             $('#triage_help_button').click(triageHelp);
           }
-          if (findit.analysisCorrect == 'True') {
-            $('.thumb-up').addClass('triaged').removeClass('triage');
-          } else if (findit.analysisCorrect == 'False') {
-            $('.thumb-down').addClass('triaged').removeClass('triage');
-          }
         }
       }
 
@@ -449,12 +347,6 @@
         $('#score-explanation-dialog').dialog('open');
       });
 
-      // Displays Swarming task if any.
-      displaySwarmingTask();
-
-      // Displays Try Job Result if any.
-      displayTryJobResult();
-
       $(document).on("click",".collapsed_list, .expanded_list",function() {
         toggleList($(this));
       });
@@ -474,20 +366,6 @@
   </div>
   <br>
 
-  <div id='swarming_task' class='not-display'>
-    <b> Swarming Task:</b>
-    <div id='swarming_task_table'></div>
-    <br>
-  </div>
-  <br>
-
-  <div id='try_job' class='not-display'>
-    <b> Try job or Swarming Task Result:</b>
-    <div id='try_job_result'></div>
-    <br>
-  </div>
-  <br>
-
   <b>Analysis info:</b>
   <div id="analysis_info">
     status: <span id="status_message"></span>
@@ -518,26 +396,90 @@
           <div class="triage thumb-up">Correct <img src="https://www.gstatic.com/images/icons/material/system/1x/thumb_up_black_24dp.png"/></div>
           <div class="triage thumb-down"><img src="https://www.gstatic.com/images/icons/material/system/1x/thumb_down_black_24dp.png"/> Incorrect</div>
         </div>
+        <br>
         <div id="analysis_result">
-          <table id="failures">
-            <thead>
-              <tr>
-                <th rowspan="2" title="Failed step/test name">Step/<font class="header-test">Test</font></th>
-                <th rowspan="2" title="The build cycle in which the step started to fail">First Failure</th>
-                <th rowspan="2" title="The last build cycle in which the step passed">Last Pass<br>Before Failure</th>
-                <th colspan="7">Suspected CLs</th>
-              </tr>
-              <tr>
-                <th title="The build cycle in which the CL was built or tested for the first time">Build Number</th>
-                <th title="The Git repo name of the CL">Repo Name</th>
-                <th title="Git commit position/hash">Commit</th>
-                <th title="The higher score, the more suspected">Score (<a id="score-info" href="javascript:">?</a>)</th>
-                <th title="Why this CL is related to the failure">Hints</th>
-              </tr>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
+          <div id="determined_results" class='not-display'>
+            <b>Determined Results</b>

[stgao, 2016/03/29 00:26:06]

Reliable failures

[chanli, 2016/03/29 01:36:07]

Done.

+            <table id="determined_results_table">
+              <thead>
+                <tr>
+                  <th rowspan="3" title="Failed step name">Step</th>
+                  <th rowspan="3" title="Failed test name">Test(s)</th>

[stgao, 2016/03/29 00:26:06]

How about setting the width of the tests?

[chanli, 2016/03/29 01:36:07]

Done.

+                  <th rowspan="3" title="The build cycle in which the step started to fail">First Failure</th>
+                  <th rowspan="3" title="The last build cycle in which the step passed">Last Pass<br>Before Failure</th>
+                  <th colspan="8">Suspected CLs</th>
+                </tr>
+                <tr>
+                  <th colspan="3">Try Job Result</th>
+                  <th colspan="5">Heuristic Analysis Result</th>
+                </tr>
+                <tr>
+                  <th title="The build cycle in which the CL was built or tested for the first time">Build Number</th>
+                  <th title="Git commit position/hash">Commit</th>
+                  <th title="Information about related swarming rerun and try job">Swarming rerun and Try Job Info</th>
+                  <th title="The build cycle in which the CL was built or tested for the first time">Build Number</th>
+                  <th title="The Git repo name of the CL">Repo Name</th>
+                  <th title="Git commit position/hash">Commit</th>
+                  <th title="The higher score, the more suspected">Score (<a id="score-info" href="javascript:">?</a>)</th>
+                  <th title="Why this CL is related to the failure">Hints</th>
+                </tr>
+              </thead>
+              <tbody>
+              </tbody>
+            </table>
+          </div>
+
+          <div id="flaky_results" class='not-display'>
+            <br>
+            <b>Flaky Results</b>

[stgao, 2016/03/29 00:26:06]

Flaky failures.

[chanli, 2016/03/29 01:36:07]

Done.

+            <table id="flaky_results_table">
+              <thead>
+                <tr>
+                  <th rowspan="2" title="Failed step name">Step</th>
+                  <th rowspan="2" title="Failed test name">Test(s)</th>
+                  <th rowspan="2" title="The build cycle in which the step started to fail">First Failure</th>
+                  <th rowspan="2" title="The last build cycle in which the step passed">Last Pass<br>Before Failure</th>
+                  <th rowspan="2" title="link to swarming rerun">Swaring Rerun</th>

[lijeffrey, 2016/03/29 00:49:45]

Swaring -> Swarming

[chanli, 2016/03/29 01:36:07]

Done.

+                  <th colspan="5">Suspected CLs</th>

[lijeffrey, 2016/03/29 00:49:44]

Maybe also add "Heuristic Analysis Result" under Suspected CL so it is clear to
the sheriff that anything found here was from heuristic-based analysis just like
"Determined Results". Same with "Undetermined Results"

[chanli, 2016/03/29 01:36:08]

Done.

+                </tr>
+                <tr>
+                  <th title="The build cycle in which the CL was built or tested for the first time">Build Number</th>
+                  <th title="The Git repo name of the CL">Repo Name</th>
+                  <th title="Git commit position/hash">Commit</th>
+                  <th title="The higher score, the more suspected">Score (<a id="score-info" href="javascript:">?</a>)</th>
+                  <th title="Why this CL is related to the failure">Hints</th>
+                </tr>
+              </thead>
+              <tbody>
+              </tbody>
+            </table>
+          </div>
+
+          <div id="undetermined_results" class='not-display'>
+            <br>
+            <b>Undetermined Results</b>

[stgao, 2016/03/29 00:26:06]

Unclassified failures.

[chanli, 2016/03/29 01:36:07]

Done.

+            <table id="undetermined_results_table">
+              <thead>
+                <tr>
+                  <th rowspan="2" title="Failed step name">Step</th>
+                  <th rowspan="2" title="Failed test name">Test(s)</th>
+                  <th rowspan="2" title="The build cycle in which the step started to fail">First Failure</th>
+                  <th rowspan="2" title="The last build cycle in which the step passed">Last Pass<br>Before Failure</th>
+                  <th rowspan="2" title="The reason why we're not sure about this result">Reason</th>
+                  <th colspan="5">Suspected CLs</th>
+                </tr>
+                <tr>
+                  <th title="The build cycle in which the CL was built or tested for the first time">Build Number</th>
+                  <th title="The Git repo name of the CL">Repo Name</th>
+                  <th title="Git commit position/hash">Commit</th>
+                  <th title="The higher score, the more suspected">Score (<a id="score-info" href="javascript:">?</a>)</th>
+                  <th title="Why this CL is related to the failure">Hints</th>
+                </tr>
+              </thead>
+              <tbody>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     {% endif %}