HTTP GM results viewer: server now returns category summaries along with testData

(SkipBuildbotRuns)

R=borenet@google.com

Review URL: https://codereview.chromium.org/25045003

git-svn-id: http://skia.googlecode.com/svn/trunk@11520 2bbb7eff-a529-9590-31e7-b0007b416f81

2 files changed, 36 insertions, 27 deletions

diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js
index 68da73afda..d08fdccbf6 100644
--- a/gm/rebaseline_server/static/loader.js
+++ b/gm/rebaseline_server/static/loader.js
@@ -1,7 +1,7 @@
 /*
  * Loader:
- * Reads GM result reports written out by results_loader.py, and imports
- * their data into $scope.results .
+ * Reads GM result reports written out by results.py, and imports
+ * them into $scope.categories and $scope.testData .
  */
 var Loader = angular.module(
     'Loader',
@@ -12,8 +12,10 @@ Loader.controller(
   function($scope, $http) {
     $http.get("/results/all").then(
       function(response) {
-        $scope.results = response.data;
+        $scope.categories = response.data.categories;
+        $scope.testData = response.data.testData;
         $scope.sortColumn = 'test';
+	$scope.showResultsOfType = 'failed';
       }
     );
   }
diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index 89ef538271..5913e5c2ca 100644
--- a/gm/rebaseline_server/static/view.html
+++ b/gm/rebaseline_server/static/view.html
@@ -15,6 +15,9 @@
   --export mode
   -->
 
+  <!-- TODO(epoger): Add some indication of how old the
+  expected/actual data is -->
+
  Settings:
   <ul>
     <!-- TODO(epoger): Now that we get multiple result types in a single
@@ -24,45 +27,49 @@
     <li>show results of type
       <select ng-model="showResultsOfType"
               ng-init="showResultsOfType='failed'">
-        <option>failed</option>
-        <option>failure-ignored</option>
-        <!--
-        <option>no-comparison</option>
-
-        TODO(epoger): For now, I have disabled viewing the
-        no-comparison results because there are so many of them, and
-        the browser takes forever to download all the images.  Maybe
-        we should use some sort of lazy-loading technique
-        (e.g. http://www.appelsiini.net/projects/lazyload ), so that
-        the images are only loaded as they become viewable...
-        -->
-        <!--
-        <option>succeeded</option>
-
+        <option ng-repeat="(resultType, count) in categories['resultType']"
+                value="{{resultType}}">
+          {{resultType}} ({{count}})
+        </option>
+      </select>
+      <!--
         TODO(epoger): See results.py: for now, I have disabled
         returning succeeded tests as part of the JSON, because it
         makes the returned JSON too big (and slows down the client).
-        -->
-      </select>
+
+        Also, we should use some sort of lazy-loading technique
+        (e.g. http://www.appelsiini.net/projects/lazyload ), so that
+        the images are only loaded as they become viewable...
+        that will help with long lists like resultType='no-comparison'.
+      -->
+      <br>
+      TODO(epoger): 'no-comparison' will probably take forever;
+      see HTML source for details
+      <br>
+      TODO(epoger): 'succeeded' will not show any results;
+      see HTML source for details
     </li>
     <li>image size
-      <input type="text" ng-model="imageSize" ng-init="imageSize=100"
+      <input type="text" ng-model="imageSizePending"
+             ng-init="imageSizePending=100; imageSize=100"
              maxlength="4"/>
+      <button ng:click="imageSize=imageSizePending">apply</button>
     </li>
   </ul>
 
     <p>
+      Click on the column header radio buttons to re-sort by that column...<br>
       <!-- TODO(epoger): Show some sort of "loading" message, instead of
            an empty table, while the data is loading.  Otherwise, if there are
            a lot of failures and it takes a long time to load them, the user
            might think there are NO failures and leave the page! -->
       <table border="1">
         <tr>
-          <th ng:click="sortColumn='builder'">Builder</th>
-          <th ng:click="sortColumn='test'">Test</th>
-          <th ng:click="sortColumn='config'">Config</th>
-          <th ng:click="sortColumn='expectedHashDigest'">Expected Image</th>
-          <th ng:click="sortColumn='actualHashDigest'">Actual Image</th>
+          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="builder">Builder</input></th>
+          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="test">Test</input></th>
+          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="config">Config</input></th>
+          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="expectedHashDigest">Expected Image</input></th>
+          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="actualHashDigest">Actual Image</input></th>
           <!-- TODO(epoger): Add more columns, such as...
                pixel diff
                notes/bugs
@@ -71,7 +78,7 @@
         </tr>
         <!-- TODO(epoger): improve the column sorting, as per
              http://jsfiddle.net/vojtajina/js64b/14/ -->
-        <tr ng-repeat="result in results | filter: { resultType: showResultsOfType } | orderBy: sortColumn">
+        <tr ng-repeat="result in testData | filter: { resultType: showResultsOfType } | orderBy: sortColumn">
           <td>{{result.builder}}</td>
           <td>{{result.test}}</td>
           <td>{{result.config}}</td>