Chromium Code Reviews Chromium Code Reviews
Issue 25555003:
More improvements to HTTP baseline viewer (for GM results) (Closed)
Base URL: http://skia.googlecode.com/svn/trunk/| 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 <p> | |
| 96 Found {{filteredTestData.length}} matches, and displaying the first | |
| 97 {{displayLimit}}: <br> | |
| 98 <!-- TODO(epoger): If (displayLimit <= filteredTestData.length), | |
| 99 modify this message to indicate that all results are shown. --> | |
| 100 (click on the column header radio buttons to re-sort by that column) | |
| 101 <br> | |
| 66 <table border="1"> | 102 <table border="1"> |
| 67 <tr> | 103 <tr> |
| 68 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="builder">Builder</input></th> | 104 <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> | 105 <input type="radio" |
| 70 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="config">Config</input></th> | 106 name="sortColumnRadio" |
| 71 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="expectedHashDigest">Expected Image</input></th> | 107 value="{{categoryName}}" |
| 72 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="actualHashDigest">Actual Image</input></th> | 108 ng-checked="(sortColumn == categoryName)" |
| 73 <!-- TODO(epoger): Add more columns, such as... | 109 ng-click="sortResultsBy(categoryName)"> |
| 74 pixel diff | 110 {{categoryName}} |
| 75 notes/bugs | 111 </th> |
| 76 ignoreFailure boolean | 112 <th> |
| 77 --> | 113 <input type="radio" |
| 114 name="sortColumnRadio" | |
| 115 value="expectedHashDigest" | |
| 116 ng-checked="(sortColumn == 'expectedHashDigest')" | |
| 117 ng-click="sortResultsBy('expectedHashDigest')"> | |
| 118 expected image | |
| 119 </th> | |
| 120 <th> | |
| 121 <input type="radio" | |
| 122 name="sortColumnRadio" | |
| 123 value="actualHashDigest" | |
| 124 ng-checked="(sortColumn == 'actualHashDigest')" | |
| 125 ng-click="sortResultsBy('actualHashDigest')"> | |
| 126 actual image | |
| 127 </th> | |
| 78 </tr> | 128 </tr> |
| 79 <!-- TODO(epoger): improve the column sorting, as per | 129 <tr ng-repeat="result in limitedTestData"> |
| 80 http://jsfiddle.net/vojtajina/js64b/14/ --> | 130 <td>{{result.resultType}}</td> |
| 81 <tr ng-repeat="result in testData | filter: { resultType: showResultsOfT ype } | orderBy: sortColumn"> | |
| 82 <td>{{result.builder}}</td> | 131 <td>{{result.builder}}</td> |
| 83 <td>{{result.test}}</td> | 132 <td>{{result.test}}</td> |
| 84 <td>{{result.config}}</td> | 133 <td>{{result.config}}</td> |
| 85 <td> | 134 <td> |
| 86 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png"> | 135 <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"/> | 136 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/> |
| 88 </a> | 137 </a> |
| 89 </td> | 138 </td> |
| 90 <td> | 139 <td> |
| 91 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png"> | 140 <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"/> | 141 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/> |
| 93 </a> | 142 </a> |
| 94 </td> | 143 </td> |
| 95 </tr> | 144 </tr> |
| 96 </table> | 145 </table> |
|
borenet
2013/10/02 18:30:30
I noticed some funny behavior with the column widt
epoger
2013/10/02 18:57:14
Right, that would make for a nicer experience when
| |
| 97 </div> | 146 </div> |
| 147 </div> | |
| 98 | 148 |
| 99 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and | 149 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and |
| 100 issues list) from | 150 issues list) from |
| 101 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json | 151 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json |
| 102 ? I tried importing the | 152 ? I tried importing the |
| 103 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using | 153 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. | 154 that to do so, but I got Access-Control-Allow-Origin errors. |
| 105 --> | 155 --> |
| 106 | 156 |
| 107 </body> | 157 </body> |
| 108 </html> | 158 </html> |
| OLD | NEW |
