rebaseline_server: add tabs, and ability to submit new baselines to the server

gm/rebaseline_server/static/loader.js

 /*
  * Loader:
  * Reads GM result reports written out by results.py, and imports
  * them into $scope.categories and $scope.testData .
  */
 var Loader = angular.module(
     'Loader',
     []
 );
 
 // TODO(epoger): Combine ALL of our filtering operations (including
 // truncation) into this one filter, so that runs most efficiently?
 // (We would have to make sure truncation still took place after
 // sorting, though.)
 Loader.filter(
   'removeHiddenItems',
   function() {
-    return function(unfilteredItems, hiddenResultTypes, hiddenConfigs) {
+    return function(unfilteredItems, hiddenResultTypes, hiddenConfigs,
+                    viewingTab) {
       var filteredItems = [];
       for (var i = 0; i < unfilteredItems.length; i++) {
         var item = unfilteredItems[i];
         if (!(true == hiddenResultTypes[item.resultType]) &&
-            !(true == hiddenConfigs[item.config])) {
+            !(true == hiddenConfigs[item.config]) &&
+            (viewingTab == item.tab)) {
           filteredItems.push(item);
         }
       }
       return filteredItems;
     };
   }
 );
 
 Loader.controller(
   'Loader.Controller',
     function($scope, $http, $filter, $location) {
     $scope.windowTitle = "Loading GM Results...";
     var resultsToLoad = $location.search().resultsToLoad;
     $scope.loadingMessage = "Loading results of type '" + resultsToLoad +
         "', please wait...";
 
     $http.get("/results/" + resultsToLoad).success(
       function(data, status, header, config) {
         $scope.loadingMessage = "Processing data, please wait...";
 
         $scope.header = data.header;
         $scope.categories = data.categories;
         $scope.testData = data.testData;
         $scope.sortColumn = 'test';
-        $scope.showTodos = true;
+        $scope.showTodos = false;
 
+        // Create the list of tabs (lists into which the user can file each
+        // test).  This may vary, depending on isEditable.
+        $scope.tabs = [
+          'Unfiled', 'Hidden'
+        ];
+        if (data.header.isEditable) {
+          $scope.tabs = $scope.tabs.concat(
+              ['Pending Approval']);

[epoger, 2013/10/19 01:15:56]

So, if run without --editable, you still have two tabs: Unfiled and Hidden. 
This allows the user to hide test results that are merely a distraction.

On the other hand, now that the checkboxes show up even if --editable was not
set, it makes it harder for the user to know whether he will be able to approve
results within the UI.  (The only difference right now is the missing Pending
Approval tab.)  Any thoughts on this?

+        }
+        $scope.defaultTab = $scope.tabs[0];
+        $scope.viewingTab = $scope.defaultTab;
+
+        // Add index and tab fields to all records.
         for (var i = 0; i < $scope.testData.length; i++) {
           $scope.testData[i].index = i;
+          $scope.testData[i].tab = $scope.defaultTab;

[epoger, 2013/10/19 01:15:56]

Each test result belongs to a single tab.

         }
 
         $scope.hiddenResultTypes = {
           'failure-ignored': true,
           'no-comparison': true,
           'succeeded': true,
         };
         $scope.hiddenConfigs = {};
-        $scope.selectedItems = {};
+        $scope.selectedItems = [];
 
         $scope.updateResults();
         $scope.loadingMessage = "";
         $scope.windowTitle = "Current GM Results";
       }
     ).error(
       function(data, status, header, config) {
         $scope.loadingMessage = "Failed to load results of type '"
             + resultsToLoad + "'";
         $scope.windowTitle = "Failed to Load GM Results";
       }
     );
 
     $scope.isItemSelected = function(index) {
-      return (true == $scope.selectedItems[index]);
+      return (-1 != $scope.selectedItems.indexOf(index));

[epoger, 2013/10/19 01:15:56]

Maintaining $scope.isItemSelected as an array made the other changes in this CL
easier.

     }
     $scope.toggleItemSelected = function(index) {
-      if (true == $scope.selectedItems[index]) {
-        delete $scope.selectedItems[index];
+      var i = $scope.selectedItems.indexOf(index);
+      if (-1 == i) {
+        $scope.selectedItems.push(index);
       } else {
-        $scope.selectedItems[index] = true;
+        $scope.selectedItems.splice(i, 1);
       }
       // unlike other toggle methods below, does not set
       // $scope.areUpdatesPending = true;
     }
 
     $scope.isHiddenResultType = function(thisResultType) {
       return (true == $scope.hiddenResultTypes[thisResultType]);
     }
     $scope.toggleHiddenResultType = function(thisResultType) {
       if (true == $scope.hiddenResultTypes[thisResultType]) {
@@ skipping 14 matching lines @@
     }
     $scope.toggleHiddenConfig = function(thisConfig) {
       if (true == $scope.hiddenConfigs[thisConfig]) {
         delete $scope.hiddenConfigs[thisConfig];
       } else {
         $scope.hiddenConfigs[thisConfig] = true;
       }
       $scope.areUpdatesPending = true;
     }
 
+    $scope.setViewingTab = function(tab) {
+      $scope.viewingTab = tab;
+      $scope.updateResults();
+    }
+
     $scope.localTimeString = function(secondsPastEpoch) {
       var d = new Date(secondsPastEpoch * 1000);
       return d.toString();
     }
 
+    $scope.moveSelectedItems = function() {
+      var itemIndex;
+      var selectedItemsLength = $scope.selectedItems.length;
+      for (var i = 0; i < selectedItemsLength; i++) {
+        itemIndex = $scope.selectedItems[i];
+        $scope.testData[itemIndex].tab = $scope.newTab;
+      }
+      $scope.selectedItems = [];
+      $scope.updateResults();
+    }
+
     $scope.updateResults = function() {
       $scope.displayLimit = $scope.displayLimitPending;
       // TODO(epoger): Every time we apply a filter, AngularJS creates
       // another copy of the array.  Is there a way we can filter out
       // the items as they are displayed, rather than storing multiple
       // array copies?  (For better performance.)
-      $scope.filteredTestData =
-          $filter("orderBy")(
-              $filter("removeHiddenItems")(
-                  $scope.testData,
-                  $scope.hiddenResultTypes,
-                  $scope.hiddenConfigs
-              ),
-              $scope.sortColumn);
-      $scope.limitedTestData = $filter("limitTo")(
-          $scope.filteredTestData, $scope.displayLimit);
+
+      if ($scope.viewingTab == $scope.defaultTab) {
+        $scope.filteredTestData =
+            $filter("orderBy")(
+                $filter("removeHiddenItems")(
+                    $scope.testData,
+                    $scope.hiddenResultTypes,
+                    $scope.hiddenConfigs,
+                    $scope.viewingTab
+                ),
+                $scope.sortColumn);
+        $scope.limitedTestData = $filter("limitTo")(
+            $scope.filteredTestData, $scope.displayLimit);
+      } else {
+        $scope.filteredTestData =
+            $filter("orderBy")(
+                $filter("filter")(

[epoger, 2013/10/19 01:15:56]

In the tabs other than "Unfiled", we don't allow the user to hide tests by name,
config, etc.  (We want the user to know exactly which tests she has filed as
Pending Approval)

+                    $scope.testData,
+                    {tab: $scope.viewingTab},
+                    true
+                ),
+                $scope.sortColumn);
+        $scope.limitedTestData = $filter("limitTo")(
+            $scope.filteredTestData, $scope.displayLimit);
+      }
       $scope.imageSize = $scope.imageSizePending;
       $scope.areUpdatesPending = false;
     }
 
     $scope.sortResultsBy = function(sortColumn) {
       $scope.sortColumn = sortColumn;
       $scope.updateResults();
     }
   }
 );