[Findit] Add feedback button for manual triage.

appengine/findit/templates/crash/fracas_result_feedback.html

Index: appengine/findit/templates/crash/fracas_result_feedback.html
diff --git a/appengine/findit/templates/crash/fracas_result_feedback.html b/appengine/findit/templates/crash/fracas_result_feedback.html
index bcba0285b088e4ae61f04f026f28b8c0e21b1693..eb28aa6605bc2ec9a7cba1fe85a2f2d56b751237 100644
--- a/appengine/findit/templates/crash/fracas_result_feedback.html
+++ b/appengine/findit/templates/crash/fracas_result_feedback.html
@@ -9,9 +9,58 @@
       background-color: #e98080;
       border-color: #a77272;
     }
+    .correct {
+      border-top: solid 1px;
+      border-bottom: solid 1px;
+      border-left: solid 1px;
+      border-top-left-radius: 7px;
+      border-bottom-left-radius: 7px;
+      padding-left: 10px;
+      padding-right: 10px;
+      margin: auto;
+    }
+    .incorrect {
+      border: solid 1px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    .unsure {
+      border-top: solid 1px;
+      border-bottom: solid 1px;
+      border-right: solid 1px;
+      border-top-right-radius: 7px;
+      border-bottom-right-radius: 7px;
+      padding-left: 10px;
+      padding-right: 14px;
+    }
+    .correct:hover, .correct.triaged {
+      background-color: #8fdf5f;
+    }
+    .incorrect:hover, .incorrect.triaged {
+      background-color: #e98080;
+    }
+    .unsure:hover, .unsure.triaged {
+      background-color: #FFD700;
+    }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script>
+    var analysis_completed = '{{analysis_completed}}' == 'True';
+    var analysis_failed = '{{analysis_failed}}' == 'True';
+    var analysis_correct = {{analysis_correct | tojson | safe}};
+    var regression_range = {{regression_range | tojson | safe}};
+    var suspected_cls = {{suspected_cls | tojson | safe}};
+    var suspected_project = '{{suspected_project}}';
+    var suspected_components = {{suspected_components | tojson | safe}};
+
+    var culprit_regression_range = {{culprit_regression_range | tojson | safe}};
+    var culprit_cls = {{culprit_cls | tojson | safe}};
+    var culprit_project = '{{culprit_project}}' == 'None' ? undefined : '{{culprit_project}}';
+    var culprit_components = {{culprit_components | tojson | safe}};
+    
+    var note = '{{note}}' == 'None' ? undefined : '{{note}}';
+
+
     function createUrl(base_url, parameters) {
       var params = [];
       for(var key in parameters) {
@@ -27,6 +76,7 @@
       }
     }
 
+
     function constructMonorailUrl() {
       var parameters = {};
       parameters.status = 'Unconfirmed';
@@ -42,8 +92,104 @@
                        parameters);
     }
 
+
+    function getCulpritPropertyNameForResult(result) {
+      if (result.match('^suspected'))
+        return result.replace('suspected', 'culprit');
+
+      return 'culprit_' + result;
+    }
+
+
+    function triageAnalysisResult(e) {
+      var target = $(this);
+      if (target.hasClass('triaged'))
+        return;
+
+      var new_analysis = {};
+      var update_data = {};
+      var result = target.attr('result_property');
+      var culprit_result = getCulpritPropertyNameForResult(result)
+      if (target.hasClass('incorrect')) {
+        var triage_status = 1;
+      } else if (target.hasClass('correct')) {
+        var triage_status = 2;
+        if (result == 'suspected_cls') {
+          update_data[culprit_result] = window[result];
+          for (var i in update_data[culprit_result]) {
+            update_data[culprit_result][i] = update_data[culprit_result][i]['url'];
+          }
+        } else {
+          update_data[culprit_result] = window[result];
+        }
+      } else if (target.hasClass('unsure')) {
+        var triage_status = 3;
+      }
+      update_data[result + '_triage_status'] = triage_status;
+
+      $.post('triage-fracas-analysis?key={{key}}', {'update-data': JSON.stringify(update_data)}, function(data) {
+        if (data['success']) {
+          $('.triaged[result_property=\'' + result + '\']').addClass('triage').removeClass('triaged');
+          target.addClass('triaged').removeClass('triage');
+          if (triage_status == 2) {
+            $('#' + result + '_culprit_input').addClass('not-display');
+            $('#' + culprit_result).val(update_data[culprit_result]);
+          } else {
+            $('#' + result + '_culprit_input').removeClass('not-display');
+          }
+        } else {
+          alert('Failed to update triage results. Please refresh and try again.');
+        }
+      }).error(function(xhr) {
+        // Replace the whole page with errors from server side.
+        document.body.outerHTML = xhr.responseText;
+      });
+      e.preventDefault();
+    }
+
+
+    function saveCulprits(e) {
+      e.preventDefault();
+      var update_data = {};
+      var properties = ['culprit_regression_range', 'culprit_cls', 'culprit_project', 'culprit_components', 'note']
+      for (var i in properties) {
+        var value = $('#' + properties[i]).val()
+        if (value) {
+          update_data[properties[i]] = value;
+        }
+      }
+      $.post('triage-fracas-analysis?key={{key}}', {'update-data': JSON.stringify(update_data)}, function(data) {
+          if (!data['success']) {
+            alert('Failed to update datastore. Please refresh and try again.');
+          }
+        }).error(function(xhr) {
+          // Replace the whole page with errors from server side.
+          document.body.outerHTML = xhr.responseText;
+        });
+    }
+
+
     $(document).ready(function() {
       $('#monorail-bug').attr('href', constructMonorailUrl());
+      $('.triage').click(triageAnalysisResult);
+      $.each(analysis_correct, function(result, triage_status) {
+        if (triage_status == 1) {  // Triaged-incorrect.
+          $('.incorrect[result_property=\'' + result + '\']').addClass('triaged').removeClass('triage');
+          $('#' + result + '_culprit_input').removeClass('not-display');
+        } else if (triage_status == 2) {  // Triaged-correct.
+          $('.correct[result_property=\'' + result + '\']').addClass('triaged').removeClass('triage');
+          $('#' + result + '_culprit_input').addClass('not-display');
+        } else if (triage_status == 3) {  // Triaged-unsure.
+          $('.unsure[result_property=\'' + result + '\']').addClass('triaged').removeClass('triage');
+          $('#' + result + '_culprit_input').removeClass('not-display');
+        }
+      });
+      $('#culprit_regression_range').val(culprit_regression_range);
+      $('#culprit_cls').val(culprit_cls);
+      $('#culprit_project').val(culprit_project);
+      $('#culprit_components').val(culprit_components);
+      $('#note').val(note);
+      $('#save-button').click(saveCulprits);
     })
   </script>
 </head>
@@ -106,11 +252,20 @@
       Not found
     {% endif %}
     <br>
+    <div class="triage-area">
+      <div class="triage correct" result_property="regression_range">Correct<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_satisfied_black_24dp.png"/></div>
+      <div class="triage incorrect" result_property="regression_range">Incorrect<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_dissatisfied_black_24dp.png"/></div>
+      <div class="triage unsure" result_property="regression_range">Unsure<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_neutral_black_24dp.png"/></div>
+      <div class="not-display" id="regression_range_culprit_input">
+        <br><br>Culprit regression range: (e.g. 53.0.2749.0, 53.0.2750.0)<br>
+        <textarea id="culprit_regression_range" size="30" rows="1" cols="30"></textarea>
+      </div>
+    </div>
   <div>
 
   <div>
-    <br><br>
     {% if analysis_completed %}
+      <br><br>
       {% if analysis_failed %}
       <span class="error">No result because of some error in analysis!</span>
       {% else %}
@@ -137,6 +292,15 @@
         {% endif %}
       {% endif %}
     {% endif %}
+    <div class="triage-area">
+      <div class="triage correct" result_property="suspected_cls">Correct<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_satisfied_black_24dp.png"/></div>
+      <div class="triage incorrect" result_property="suspected_cls">Incorrect<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_dissatisfied_black_24dp.png"/></div>
+      <div class="triage unsure" result_property="suspected_cls">Unsure<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_neutral_black_24dp.png"/></div>
+      <div class="not-display" id="suspected_cls_culprit_input">
+        <br><br>Culprit suspected cls: (e.g.  https://chromium.googlesource.com/chromium/src/+/346a46f9cc4151e989b961d2d0429d16aeb49c14)<br>
+        <textarea id="culprit_cls" size="30" rows="3" cols="100"></textarea>
+      </div>
+    </div>
   </div>
 
   <div>
@@ -148,6 +312,15 @@
       Not found
     {% endif %}
     <br>
+    <div class="triage-area">
+      <div class="triage correct" result_property="suspected_project">Correct<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_satisfied_black_24dp.png"/></div>
+      <div class="triage incorrect" result_property="suspected_project">Incorrect<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_dissatisfied_black_24dp.png"/></div>
+      <div class="triage unsure" result_property="suspected_project">Unsure<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_neutral_black_24dp.png"/></div>
+      <div class="not-display" id="suspected_project_culprit_input">
+        <br><br>Culprit project: (e.g.  chromium)<br>
+        <textarea id="culprit_project" size="30" rows="1"></textarea>
+      </div>
+    </div>
   </div>
 
   <div>
@@ -163,6 +336,46 @@
     {% else %}
       Not found <br>
     {% endif %}
+    <div class="triage-area">
+      <div class="triage correct" result_property="suspected_components">Correct<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_satisfied_black_24dp.png"/></div>
+      <div class="triage incorrect" result_property="suspected_components">Incorrect<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_dissatisfied_black_24dp.png"/></div>
+      <div class="triage unsure" result_property="suspected_components">Unsure<img src="https://www.gstatic.com/images/icons/material/system/1x/sentiment_neutral_black_24dp.png"/></div>
+      <div class="not-display" id="suspected_components_culprit_input">
+        <br><br>Culprit components: (e.g.  Blink>API, Blink>DOM)<br>
+        <textarea id="culprit_components" rows="2"></textarea>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <form>
+      <br><br>
+      <b>Note:<br></b>
+      <textarea id="note" rows="5" cols="80"></textarea>
+      <br>
+    </form>
   </div>
 
+  <button type="submit" id="save-button">Save</button>
+
+  <div>
+    <br><br>
+    {% if triage_history %}
+    Triage history:
+    <table>
+      <tr><th>When</th><th>Who</th><th>Property</th><th>Result</th></tr>
+      <tbody>
+        {% for triage_record in triage_history %}
+          <tr>
+            <td>{{triage_record.triage_time}}</td>
+            <td>{{triage_record.user_name}}</td>
+            <td>{{triage_record.result_property}}</td>
+            <td>{{triage_record.triage_status}}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% endif %}
+  <div>
+
 </body>