| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html ng-app="Loader"> | 3 <html ng-app="Loader"> |
| 4 | 4 |
| 5 <head> | 5 <head> |
| 6 <title>Current GM Results</title> | 6 <title>Current GM Results</title> |
| 7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"
></script> | 7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"
></script> |
| 8 <script src="loader.js"></script> | 8 <script src="loader.js"></script> |
| 9 </head> | 9 </head> |
| 10 | 10 |
| 11 <body> | 11 <body> |
| 12 <div ng-controller="Loader.Controller"> | 12 <div ng-controller="Loader.Controller"> |
| 13 | 13 |
| 14 <!-- TODO(epoger): Add a warning banner if the server is running in | 14 <!-- TODO(epoger): Add a warning banner if the server is running in |
| 15 --export mode | 15 --export mode |
| 16 --> | 16 --> |
| 17 | 17 |
| 18 <!-- TODO(epoger): Add some indication of how old the | 18 <!-- TODO(epoger): Add some indication of how old the |
| 19 expected/actual data is --> | 19 expected/actual data is --> |
| 20 | 20 |
| 21 Settings: | 21 <em ng-hide="categories"> |
| 22 <ul> | 22 Loading data, please wait... |
| 23 <!-- TODO(epoger): Now that we get multiple result types in a single | 23 </em> |
| 24 fetch, modify the UI: add a column showing resultType, and allow | |
| 25 the user to sort/filter on that column just like all the | |
| 26 others. --> | |
| 27 <li>show results of type | |
| 28 <select ng-model="showResultsOfType" | |
| 29 ng-init="showResultsOfType='failed'"> | |
| 30 <option ng-repeat="(resultType, count) in categories['resultType']" | |
| 31 value="{{resultType}}"> | |
| 32 {{resultType}} ({{count}}) | |
| 33 </option> | |
| 34 </select> | |
| 35 <!-- | |
| 36 TODO(epoger): See results.py: for now, I have disabled | |
| 37 returning succeeded tests as part of the JSON, because it | |
| 38 makes the returned JSON too big (and slows down the client). | |
| 39 | 24 |
| 40 Also, we should use some sort of lazy-loading technique | 25 <div ng-hide="!categories"> |
| 41 (e.g. http://www.appelsiini.net/projects/lazyload ), so that | 26 <table border="1"> |
| 42 the images are only loaded as they become viewable... | 27 <tr> |
| 43 that will help with long lists like resultType='no-comparison'. | 28 <th colspan="2"> |
| 44 --> | 29 Filters |
| 45 <br> | 30 </th> |
| 46 TODO(epoger): 'no-comparison' will probably take forever; | 31 <th> |
| 47 see HTML source for details | 32 Settings |
| 48 <br> | 33 </th> |
| 49 TODO(epoger): 'succeeded' will not show any results; | 34 </tr> |
| 50 see HTML source for details | 35 <tr valign="top"> |
| 51 </li> | 36 <td> |
| 52 <li>image size | 37 resultType<br> |
| 53 <input type="text" ng-model="imageSizePending" | 38 <label ng-repeat="(resultType, count) in categories['resultType']"> |
| 54 ng-init="imageSizePending=100; imageSize=100" | 39 <input type="checkbox" |
| 55 maxlength="4"/> | 40 name="resultTypes" |
| 56 <button ng:click="imageSize=imageSizePending">apply</button> | 41 value="{{resultType}}" |
| 57 </li> | 42 ng-checked="!isHiddenResultType(resultType)" |
| 58 </ul> | 43 ng-click="toggleHiddenResultType(resultType)"> |
| 44 {{resultType}} ({{count}})<br> |
| 45 </label> |
| 46 </td> |
| 47 <td> |
| 48 config<br> |
| 49 <label ng-repeat="(config, count) in categories['config']"> |
| 50 <input type="checkbox" |
| 51 name="configs" |
| 52 value="{{config}}" |
| 53 ng-checked="!isHiddenConfig(config)" |
| 54 ng-click="toggleHiddenConfig(config)"> |
| 55 {{config}} ({{count}})<br> |
| 56 </label> |
| 57 </td> |
| 58 <td><table> |
| 59 <tr><td> |
| 60 Image size |
| 61 <input type="text" ng-model="imageSizePending" |
| 62 ng-init="imageSizePending=100" |
| 63 ng-change="areUpdatesPending = true" |
| 64 maxlength="4"/> |
| 65 </td></tr> |
| 66 <tr><td> |
| 67 Max records to display |
| 68 <input type="text" ng-model="displayLimitPending" |
| 69 ng-init="displayLimitPending=50" |
| 70 ng-change="areUpdatesPending = true" |
| 71 maxlength="4"/> |
| 72 </td></tr> |
| 73 <tr><td> |
| 74 <button style="font-size:30px" |
| 75 ng-click="updateResults()" |
| 76 ng-disabled="!areUpdatesPending"> |
| 77 Update Results |
| 78 </button> |
| 79 </td></tr> |
| 80 </tr></table></td> |
| 81 </tr> |
| 82 </table> |
| 59 | 83 |
| 60 <p> | 84 <p> |
| 61 Click on the column header radio buttons to re-sort by that column...<br> | 85 TODO(epoger): Add ability to filter builder and test names |
| 62 <!-- TODO(epoger): Show some sort of "loading" message, instead of | 86 (using a free-form text field, with partial string match) |
| 63 an empty table, while the data is loading. Otherwise, if there are | 87 <br> |
| 64 a lot of failures and it takes a long time to load them, the user | 88 TODO(epoger): Add more columns, such as pixel diffs, notes/bugs, |
| 65 might think there are NO failures and leave the page! --> | 89 ignoreFailure boolean |
| 90 <br> |
| 91 TODO(epoger): Improve the column sorting, as per |
| 92 <a href="http://jsfiddle.net/vojtajina/js64b/14/"> |
| 93 http://jsfiddle.net/vojtajina/js64b/14/ |
| 94 </a> |
| 95 <br> |
| 96 TODO(epoger): Right now, if you change which column is used to |
| 97 sort the data, the column widths may fluctuate based on the |
| 98 longest string <i>currently visible</i> within the top {{displayLimit}} |
| 99 results. Can we fix the column widths to be wide enough to hold |
| 100 any result, even the currently hidden results? |
| 101 <p> |
| 102 Found {{filteredTestData.length}} matches, and displaying the first |
| 103 {{displayLimit}}: <br> |
| 104 <!-- TODO(epoger): If (displayLimit <= filteredTestData.length), |
| 105 modify this message to indicate that all results are shown. --> |
| 106 (click on the column header radio buttons to re-sort by that column) |
| 107 <br> |
| 66 <table border="1"> | 108 <table border="1"> |
| 67 <tr> | 109 <tr> |
| 68 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v
alue="builder">Builder</input></th> | 110 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf
ig']"> |
| 69 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v
alue="test">Test</input></th> | 111 <input type="radio" |
| 70 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v
alue="config">Config</input></th> | 112 name="sortColumnRadio" |
| 71 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v
alue="expectedHashDigest">Expected Image</input></th> | 113 value="{{categoryName}}" |
| 72 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v
alue="actualHashDigest">Actual Image</input></th> | 114 ng-checked="(sortColumn == categoryName)" |
| 73 <!-- TODO(epoger): Add more columns, such as... | 115 ng-click="sortResultsBy(categoryName)"> |
| 74 pixel diff | 116 {{categoryName}} |
| 75 notes/bugs | 117 </th> |
| 76 ignoreFailure boolean | 118 <th> |
| 77 --> | 119 <input type="radio" |
| 120 name="sortColumnRadio" |
| 121 value="expectedHashDigest" |
| 122 ng-checked="(sortColumn == 'expectedHashDigest')" |
| 123 ng-click="sortResultsBy('expectedHashDigest')"> |
| 124 expected image |
| 125 </th> |
| 126 <th> |
| 127 <input type="radio" |
| 128 name="sortColumnRadio" |
| 129 value="actualHashDigest" |
| 130 ng-checked="(sortColumn == 'actualHashDigest')" |
| 131 ng-click="sortResultsBy('actualHashDigest')"> |
| 132 actual image |
| 133 </th> |
| 78 </tr> | 134 </tr> |
| 79 <!-- TODO(epoger): improve the column sorting, as per | 135 <tr ng-repeat="result in limitedTestData"> |
| 80 http://jsfiddle.net/vojtajina/js64b/14/ --> | 136 <td>{{result.resultType}}</td> |
| 81 <tr ng-repeat="result in testData | filter: { resultType: showResultsOfT
ype } | orderBy: sortColumn"> | |
| 82 <td>{{result.builder}}</td> | 137 <td>{{result.builder}}</td> |
| 83 <td>{{result.test}}</td> | 138 <td>{{result.test}}</td> |
| 84 <td>{{result.config}}</td> | 139 <td>{{result.config}}</td> |
| 85 <td> | 140 <td> |
| 86 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g
oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa
shDigest}}.png"> | 141 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g
oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa
shDigest}}.png"> |
| 87 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e
xpectedHashDigest}}.png"/> | 142 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e
xpectedHashDigest}}.png"/> |
| 88 </a> | 143 </a> |
| 89 </td> | 144 </td> |
| 90 <td> | 145 <td> |
| 91 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g
oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi
gest}}.png"> | 146 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g
oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi
gest}}.png"> |
| 92 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act
ualHashDigest}}.png"/> | 147 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata
storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act
ualHashDigest}}.png"/> |
| 93 </a> | 148 </a> |
| 94 </td> | 149 </td> |
| 95 </tr> | 150 </tr> |
| 96 </table> | 151 </table> |
| 97 </div> | 152 </div> |
| 153 </div> |
| 98 | 154 |
| 99 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and | 155 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and |
| 100 issues list) from | 156 issues list) from |
| 101 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json | 157 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json |
| 102 ? I tried importing the | 158 ? I tried importing the |
| 103 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using | 159 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using |
| 104 that to do so, but I got Access-Control-Allow-Origin errors. | 160 that to do so, but I got Access-Control-Allow-Origin errors. |
| 105 --> | 161 --> |
| 106 | 162 |
| 107 </body> | 163 </body> |
| 108 </html> | 164 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 25555003:
More improvements to HTTP baseline viewer (for GM results) (Closed)
Base URL: http://skia.googlecode.com/svn/trunk/