Bug 1321798 - Rewrite the autoclassification UI (#2089)

This rewrite is intended to address the numerous problems that prevented
the old autoclassify UI from recieving wide adoption, and makes the
following changes:

* Moves the code to use angular 1.5 components, for maintainability

* Reduces the number of HTTP requests to one GET / one POST (associated
  with the TextLogError objects), for performance.

* Adds the concept of a selection so that operations can be performed on
  multiple lines at once

* Reorganises the panel a bit to fit better with the rest of the
  treeherder UI.

* Removes the "Ignore Others" action, which, though occasionally helpful,
  was based on an unreliable heuristic.

* Reduces the number of unhelpful bug suggestions displayed by default
  where there are many, and ensures that the most plausible suggestions
  are shown first.

* Adds keybindings for all operations, so that it is possible to use the
  autoclassify panel without touching the mouse.

* Adds basic heuristics for which option to select by default.

ui/css/treeherder-info-panel.css

@@ -473,26 +473,9 @@ div.performance-panel {
 }
 
 /*
- * Error Classification
+ * Failure Viewer
  */
 
-.error-classification-content {
- font-size:11px;
- display:flex;
-}
-
-ul.failure-line-list {
-  width: 100%;
-  margin-bottom: 0;
-  overflow-y: scroll;
-}
-
-.failure-line {
-  padding: 2px 4px 0;
-  display: flex;
-  margin-bottom: 8px;
-}
-
 .failure-line-detail {
   padding-left: 6px;
 }
@@ -528,90 +511,156 @@ ul.failure-line-list {
   font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
 }
 
-.classification-line {
+/*
+ * Autoclassify Panel
+ */
+
+th-autoclassify-panel {
+  font-size: 11px;
+  flex-direction: column;
+}
+
+th-autoclassify-panel .controls {
+  flex: 0;
+  margin-bottom: 2px;
+}
+
+th-autoclassify-panel .controls button {
+  display: inline-block;
+}
+
+
+th-autoclassify-errors {
+  flex-direction: row;
+}
+
+th-autoclassify-errors {
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+}
+
+th-error-line {
   display: flex;
-  margin-bottom: 6px;
 }
 
-.classification-line-actions {
+th-error-line.selected {
+  background-color: #e2ebfa;
+  outline: thin dotted black;
+}
+
+th-error-line .errorline-controls {
   width: 70px;
   text-align: center;
 }
 
-.classification-line-actions > span > select {
+th-error-line .status {
+    width: 6px;
+    margin-right: 3px;
+}
+
+th-error-line .status.classification-disabled {
+    background-color: #0000;
+}
+
+th-error-line .status.verified {
+    background-color: green;
+}
+
+th-error-line .status.unverified-ignore {
+    background-color: grey;
+}
+
+th-error-line .status.unverified-no-bug {
+    background-color: red;
+}
+
+th-error-line .status.unverified {
+    background-color: orange;
+}
+
+th-error-actions select {
   width: 60px;
   margin-bottom: 6px;
 }
 
-.classification-line-detail {
+th-error-line .classification-line-detail {
   width: 100%;
   padding-top: 3px;
   padding-bottom:3px;
   border-bottom: thin solid #eee;
 }
 
-.classification-set-bug {
+th-error-line .classification-set-bug {
   cursor: pointer;
   font-size: 8px;
 }
 
-.classification-icon {
+th-error-line .ignored-line {
+  text-decoration: line-through;
+}
+
+th-error-line.ignored {
+  color: darkgrey;
+}
+
+th-error-line .label-ignored {
+  background-color: lightgrey;
+}
+
+th-static-classification-option .classification-icon, th-classification-option .classification-icon {
   width: 24px;
   margin-top: auto;
   margin-bottom: auto;
   text-align: center;
   display: inline-block;
 }
 
-.classification-icon > * {
+th-static-classification-option .classification-icon > *, th-classification-option .classification-icon > * {
  margin-left: auto;
  margin-right: auto;
 }
 
-.classification-bug-resolution {
+th-classification-option .classification-bug-resolution {
   color: darkgrey;
   font-size: 0.9em;
 }
 
-.classification-options > label {
+th-classification-option label {
     margin-bottom: 0;
     font-weight: normal;
     display: inline;
 }
 
 /* TODO: Make this better */
-.classification-matchers {
+th-classification-option .classification-matchers {
   color: darkgrey;
   padding-left: 43px;
 }
 
-.manual-bug-input {
+th-classification-option .manual-bug-input {
   line-height: 8px;
   margin: 2px 0 0 4px;
 }
-.manual-bug-label {
+
+th-classification-option .manual-bug-label {
   line-height: 15pt;
 }
 
-.line-option-text {
+th-classification-option .line-option-text {
   padding: 4px 0 0 4px;
   position: relative;
   top: 0;
+  vertical-align: middle;
 }
 
-.failure-lines-actions {
-  padding: 4px 4px 4px 4px;
-  text-align: center;
-}
-
-.failure-lines-actions > button {
-  margin-bottom: 4px;
+th-classification-option input {
+  margin: 0 0 0 0;
+  vertical-align: middle;
 }
 
-.ignored-line {
-  text-decoration: line-through;
+th-error-actions {
+  padding: 4px 4px 4px 4px;
+  text-align: center;
 }
 
-.label-ignored {
-  background-color: lightgrey;
-}

ui/index.html

@@ -120,6 +120,7 @@
         <script src="js/models/error.js"></script>
         <script src="js/models/matcher.js"></script>
         <script src="js/models/failure_lines.js"></script>
+        <script src="js/models/text_log_errors.js"></script>
         <script src="js/models/classified_failure.js"></script>
         <script src="js/models/bug_suggestions.js"></script>
         <script src="js/models/text_log_step.js"></script>

ui/js/controllers/bugfiler.js

@@ -2,12 +2,12 @@
 
 treeherder.controller('BugFilerCtrl', [
     '$scope', '$rootScope', '$uibModalInstance', '$http', 'summary', 'thBugzillaProductObject',
-    'thPinboard', 'thEvents', 'fullLog', 'parsedLog', 'reftest', 'selectedJob', 'allFailures',
-    'thNotify',
+    'fullLog', 'parsedLog', 'reftest', 'selectedJob', 'allFailures',
+    'successCallback', 'thNotify',
     function BugFilerCtrl(
         $scope, $rootScope, $uibModalInstance, $http, summary, thBugzillaProductObject,
-        thPinboard, thEvents, fullLog, parsedLog, reftest, selectedJob, allFailures,
-        thNotify) {
+        fullLog, parsedLog, reftest, selectedJob, allFailures,
+        successCallback, thNotify) {
 
         var bzBaseUrl = "https://bugzilla.mozilla.org/";
 
@@ -39,7 +39,6 @@ treeherder.controller('BugFilerCtrl', [
          *  Pre-fill the form with information/metadata from the failure
          */
         $scope.initiate = function() {
-            thPinboard.pinJob($rootScope.selectedJob);
             var thisFailure = "";
             for (var i = 0; i < allFailures.length; i++) {
                 for (var j=0; j < $scope.omittedLeads.length; j++) {
@@ -230,12 +229,7 @@ treeherder.controller('BugFilerCtrl', [
                         thNotify.send("Bugzilla error: " + error.message, "danger", true);
                         $scope.toggleForm(false);
                     } else {
-                        // Auto-classify this failure now that the bug has been filed and we have a bug number
-                        thPinboard.addBug({id: data.success});
-                        $rootScope.$evalAsync($rootScope.$emit(thEvents.saveClassification));
-
-                        // Open the newly filed bug in a new tab or window for further editing
-                        window.open(bzBaseUrl + "show_bug.cgi?id=" + data.success);
+                        successCallback(data);
                         $scope.cancelFiler();
                     }
                 })