[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..104c1e32f69ddbda295388e4d56c6a32ca9cd02f 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 = {};
+      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[culprit_result] = window[result];
+          for (var i in update[culprit_result]) {
+            update[culprit_result][i] = update[culprit_result][i]['url'];
+          }
+        } else {
+          update[culprit_result] = window[result];
+        }
+      } else if (target.hasClass('unsure')) {
+        var triage_status = 3;
+      }
+      update[result + '_triage_status'] = triage_status;
+
+      $.post('triage-fracas-analysis?key={{key}}', {'update': JSON.stringify(update)}, 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[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 = {};
+      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[properties[i]] = value;
+        }
+      }
+      $.post('triage-fracas-analysis?key={{key}}', {'update': JSON.stringify(update)}, 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);

[stgao, 2016/07/09 01:20:52]

Are we still updating the triage history per-click of the
correct/incorrect/unsure?

From the UI, it looks more like that the user should fill in all feedback of all
fields and then click the "Save" button to save them in one request.

[Sharu Jiang, 2016/07/11 18:37:46]

The current design is, we update the triage history per-click, but save all the
culprit results and note using Save button, because I think it tooks some time
for sheriffs to enter the culprit results and note, and they may not click the
save button if they just click 'correct' for all the results.

+      $.each(analysis_correct, function(result, triage_status) {
+        if (triage_status == 1) {

[stgao, 2016/07/09 01:20:52]

Should we add a comment to explain which scenario this is?
Same for below.

[Sharu Jiang, 2016/07/11 18:37:46]

Done.

+          $('.incorrect[result_property=\'' + result + '\']').addClass('triaged').removeClass('triage');
+          $('#' + result + '_culprit_input').removeClass('not-display');
+        } else if (triage_status == 2) {
+          $('.correct[result_property=\'' + result + '\']').addClass('triaged').removeClass('triage');
+          $('#' + result + '_culprit_input').addClass('not-display');
+        } else if (triage_status == 3) {
+          $('.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>