[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..ca9c2f06720a74bb217f779df6ad886fc75004cc 100644
--- a/appengine/findit/templates/crash/fracas_result_feedback.html
+++ b/appengine/findit/templates/crash/fracas_result_feedback.html
@@ -9,9 +9,80 @@
       background-color: #e98080;
       border-color: #a77272;
     }
+    .triage-area {
+      border-radius: 7px;
+      display: inline-block;
+    }
+    .triage, .triaged {
+      display: block;
+      float: left;
+      vertical-align: middle;
+    }

[stgao, 2016/06/30 17:16:40]

How about putting these to the common.css as they seems shared from the other
template?

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+    .triage {
+      background-color: #e5e5e5;
+      cursor: pointer;
+    }
+    .triaged {
+      cursor: default;
+    }
+    .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;
+    }
+    .not-display, .hidden-row {
+      display: none;
+    }
   </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}}'

[stgao, 2016/06/30 17:16:40]

style nit: no ending ";".

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+    var suspected_components = {{suspected_components | tojson | safe}};
+    var culprit_regression_range = {{culprit_regression_range | tojson | safe}};
+    var culprit_cls = {{culprit_cls | tojson | safe}};
+
+    for (i = 0; i < culprit_cls.length; i++) {
+      culprit_cls[i] = culprit_cls[i]['url'];

[stgao, 2016/06/30 17:16:40]

Why this is needed?

[Sharu Jiang, 2016/07/01 22:05:49]

culprit_cls has a lot of information, like 'author', 'score', 'reason'...
But I only want to show the url in the textarea.

+    }
+
+    var culprit_project = '{{culprit_project}}';
+    var culprit_components = {{culprit_components | tojson | safe}};
+    var note = '{{note}}';
+
+
     function createUrl(base_url, parameters) {
       var params = [];
       for(var key in parameters) {
@@ -27,6 +98,7 @@
       }
     }
 
+
     function constructMonorailUrl() {
       var parameters = {};
       parameters.status = 'Unconfirmed';
@@ -42,8 +114,97 @@
                        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;
+        update[culprit_result] = window[result];
+      } else if (target.hasClass('unsure')) {
+        var triage_status = 3;
+      }
+      update[result + '_triage_status'] = triage_status;
+
+      $.getJSON('triage-fracas-analysis?key={{key}}&update=' + encodeURIComponent(JSON.stringify(update)), function(data) {
+        if (data['success']) {
+          $(".triaged[result_property='" + result + "']").addClass('triage').removeClass('triaged');

[stgao, 2016/06/30 17:16:40]

style: use single quote ['] in JS code, but double quote ["] in html code.

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+          target.addClass('triaged').removeClass('triage');
+          if (triage_status == 2) {
+            $("form[result_property='" + result + "']").addClass('not-display');
+            $('#' + culprit_result).val(update[culprit_result]);
+          } else {
+            $("form.not-display[result_property='" + result + "']").removeClass('not-display');
+          }
+        } else {
+          alert('Failed to update datastore. Please refresh and try again.');

[stgao, 2016/06/30 17:16:40]

nit: it is unnecessary to mention datastore here.

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+        }
+      }).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;
+        }
+      }
+      $.getJSON('triage-fracas-analysis?key={{key}}&update=' + encodeURIComponent(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);
+      $.each(analysis_correct, function(result, triage_status) {
+        if (triage_status == 1) {
+          $(".incorrect[result_property='" + result + "']").addClass('triaged').removeClass('triage');
+          $("form.not-display[result_property='" + result + "']").removeClass('not-display');

[stgao, 2016/06/30 17:16:40]

Just an idea: can we use element id instead?

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+        } else if (triage_status == 2) {
+          $(".correct[result_property='" + result + "']").addClass('triaged').removeClass('triage');
+          $("form[result_property='" + result + "']").addClass('not-display');
+        } else if (triage_status == 3) {
+          $(".unsure[result_property='" + result + "']").addClass('triaged').removeClass('triage');
+          $("form.not-display[result_property='" + result + "']").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 +267,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>

[stgao, 2016/06/30 17:16:40]

I like the icon.

[Sharu Jiang, 2016/07/01 22:05:49]

Thanks :)

+      <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>
+      <form class="not-display" result_property="regression_range">

[stgao, 2016/06/30 17:16:40]

Why a form is needed? This form is not used to submitted the data, right?
Same as below.

[Sharu Jiang, 2016/07/01 22:05:49]

Done.

+        <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>
+      </form>
+    </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 +307,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>
+      <form class="not-display" result_property="suspected_cls">
+        <br><br>Culprit suspected cls: (e.g.  https://chromium.googlesource.com/chromium/src/+/346a46f9cc4151e989b961d2d0429d16aeb49c14)<br>
+        <textarea id="culprit_cls" size="30" rows="1" cols="100"></textarea>
+      </form>
+    </div>
   </div>
 
   <div>
@@ -148,6 +327,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>
+      <form class="not-display" result_property="suspected_project">
+        <br><br>Culprit project: (e.g.  chromium)<br>
+        <textarea id="culprit_project" size="30" rows="1"></textarea>
+      </form>
+    </div>
   </div>
 
   <div>
@@ -163,6 +351,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>
+      <form class="not-display" result_property="suspected_components">
+        <br><br>Culprit components: (e.g.  Blink>API, Blink>DOM)<br>
+        <textarea id="culprit_components" rows="1"></textarea>
+      </form>
+    </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>