Sort results in async report by descending severity.

Previously we just added results to the result table in whatever order
they were received from the server. This commit changes that to
regenerate the entire table on each new fetch result, and to sort the
results first in descending absolute percentage delta. This isn't quite
identical to the non-async version, but it's much closer than what we
had before.

Change-Id: I97866743fb347e9f16f2ba71be4389bc69de29da

Author: georges-arm

lnt/server/ui/templates/reporting/daily_report_async.html

@@ -268,6 +268,14 @@ <h3>Result Table ({{ field.display_name }})</h3>
   return ret;
 }
 
+const MACHINES = {
+{% for machine in report.reporting_machines %}
+  {{ machine.id }}: {
+    name: "{{ machine.name }}",
+  },
+{% endfor %}
+};
+
 const FIELDS = [
 {% for field in report.fields|reverse %}
   {
@@ -277,6 +285,76 @@ <h3>Result Table ({{ field.display_name }})</h3>
 {% endfor %}
 ];
 
+// this is filled in asynchronously and used to regenerate the result table.
+// we cannot just append to the DOM directly since we want the result table
+// to be sorted by some priority metric (largest abs percentage delta).
+var KEY_RUNS = {}; // { machine.id -> run.id }
+var RESULTS = {}; // { field.display_name -> { test.id -> { name, results: { machine.id -> day results }}}}
+
+function test_priority_compare(a, b) {
+  const a_res = a[1].results;
+  const b_res = b[1].results;
+  var a_max_delta = 0;
+  var b_max_delta = 0;
+  for (const [machine_id, rt_day_results] of Object.entries(a[1].results)) {
+    a_max_delta = Math.max(a_max_delta, Math.abs(rt_day_results[0].pct_delta));
+  }
+  for (const [machine_id, rt_day_results] of Object.entries(b[1].results)) {
+    b_max_delta = Math.max(b_max_delta, Math.abs(rt_day_results[0].pct_delta));
+  }
+  // descending order, higher deltas first.
+  return b_max_delta - a_max_delta;
+}
+
+function regenerate_results_tables_for_field(field, results) {
+  var rt_table_id = "rt-" + field.display_name;
+  var rt_table = document.getElementById(rt_table_id);
+  rt_table.innerHTML = '';
+  for (const [rt_test_id, rt_value] of Object.entries(results).sort(test_priority_compare)) {
+    var rt_test_name = rt_value.name;
+    // make the test header (used for multiple machines)
+    var rt_header_str = '';
+    rt_header_str += '<tr>';
+    rt_header_str += '  <td style="{{ styles.td }}" colspan=2><b>' + rt_test_name + '</b></td>';
+    rt_header_str += '  <td style="{{ styles.td }}" colspan="{{report.num_prior_days_to_include + 1}}">&nbsp;</td>';
+    rt_header_str += '</tr>'
+    rt_table.insertAdjacentHTML('beforeend', rt_header_str);
+    // actually write each result
+    for (const [machine_id, rt_day_results] of Object.entries(rt_value.results)) {
+      const machine_name = MACHINES[machine_id].name;
+      const today_key_run = KEY_RUNS[machine_id];
+      var rt_detail_str = '';
+      rt_detail_str += '<tr class="searchable">';
+      rt_detail_str += '  <td style="{{ styles.td }}">&nbsp;</td>';
+      rt_detail_str += '  <td class="machine-name" style="{{ styles.td }}">';
+      // e.g. http://base_url/db_default/v4/db_name/graph?plot=29.348.0&highlight_run=8122
+      rt_detail_str += '    <a href="{{ ts_url }}/graph?plot=' + machine_id + '.' + rt_test_id + '.' + field.index + '&highlight_run=' + today_key_run + '">' + machine_name + '</a>';
+      rt_detail_str += '  </td>';
+      var first = true;
+      for (var i={{ report.num_prior_days_to_include }}-1; i>=0; i--) {
+        const rt_day_val = rt_day_results[i];
+        if (!rt_day_val) {
+          rt_detail_str += '  <td style="{{ styles.td }}">-</td>';
+        } else if (first) {
+          rt_detail_str += get_initial_cell_value(rt_day_val);
+          first = false;
+        } else {
+          rt_detail_str += get_cell_value(rt_day_val);
+        }
+      }
+      rt_detail_str += '  <td>' + spark_plot(rt_day_results) + '</td>';
+      rt_detail_str += '</tr>';
+      rt_table.insertAdjacentHTML('beforeend', rt_detail_str);
+    }
+  }
+}
+
+function regenerate_results_tables() {
+  for (const field of FIELDS) {
+    regenerate_results_tables_for_field(field, RESULTS[field.display_name]);
+  }
+}
+
 function handle_async_populate_result(res) {
   for (const machine of Object.values(res.data.reporting_machines)) {
     for (var i=0; i<{{ report.num_prior_days_to_include }}; i++) {
@@ -297,50 +375,23 @@ <h3>Result Table ({{ field.display_name }})</h3>
     }
     var today_key_run = res.data.machine_runs['' + machine.id]["0"];
     if (today_key_run) {
+      KEY_RUNS[machine.id] = today_key_run.id;
+      // RESULTS: { field.display_name -> { test.id -> { name, results: { machine.id -> day results }}}}
       for (const field of FIELDS) {
-        var rt_table_id = "rt-" + field.display_name;
-        var rt_table = document.getElementById(rt_table_id);
+        RESULTS[field.display_name] = RESULTS[field.display_name] || {};
+        var field_results = RESULTS[field.display_name];
+        // merge new data into (possibly pre-existing from other results) field_results object.
         var rt_data = res.data['result_table'][field.display_name]
         for (const [rt_test_id, rt_value] of Object.entries(rt_data)) {
-          var rt_header_id = rt_table_id + '-' + rt_test_id;
           var rt_test_name = res.data.reporting_tests['' + rt_test_id].name;
-          // merge the same test id under a common header if it already exists.
-          var rt_header = document.getElementById(rt_header_id);
-          if (!rt_header) {
-            var rt_header_str = '';
-            rt_header_str += '<tr id="' + rt_header_id + '">';
-            rt_header_str += '  <td style="{{ styles.td }}" colspan=2><b>' + rt_test_name + '</b></td>';
-            rt_header_str += '  <td style="{{ styles.td }}" colspan="{{report.num_prior_days_to_include + 1}}">&nbsp;</td>';
-            rt_header_str += '</tr>'
-            rt_table.insertAdjacentHTML('beforeend', rt_header_str);
-            rt_header = document.getElementById(rt_header_id);
-          }
-          var rt_detail_str = '';
-          rt_detail_str += '<tr class="searchable">';
-          rt_detail_str += '  <td style="{{ styles.td }}">&nbsp;</td>';
-          rt_detail_str += '  <td class="machine-name" style="{{ styles.td }}">';
-          // e.g. http://base_url/db_default/v4/db_name/graph?plot=29.348.0&highlight_run=8122
-          rt_detail_str += '    <a href="{{ ts_url }}/graph?plot=' + machine.id + '.' + rt_test_id + '.' + field.index + '&highlight_run=' + today_key_run.id + '">' + machine.name + '</a>';
-          rt_detail_str += '  </td>';
-          var first = true;
-          for (var i={{ report.num_prior_days_to_include }}-1; i>=0; i--) {
-            const rt_day_val = rt_value['' + machine.id][i];
-            if (!rt_day_val) {
-              rt_detail_str += '  <td style="{{ styles.td }}">-</td>';
-            } else if (first) {
-              rt_detail_str += get_initial_cell_value(rt_day_val);
-              first = false;
-            } else {
-              rt_detail_str += get_cell_value(rt_day_val);
-            }
-          }
-          rt_detail_str += '  <td>' + spark_plot(rt_value['' + machine.id]) + '</td>';
-          rt_detail_str += '</tr>';
-          rt_header.insertAdjacentHTML('afterend', rt_detail_str);
+          field_results[rt_test_id] = field_results[rt_test_id] || { name: rt_test_name, results: {} };
+          field_results[rt_test_id].results[machine.id] = rt_value['' + machine.id];
         }
       }
     }
   }
+  // now that we've updated the RESULTS object, regenerate any results tables.
+  regenerate_results_tables();
 }
 
 async function populate_table(res) {