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 <table border="1"> |
| 22 <ul> | 22 <tr> |
| 23 <!-- TODO(epoger): Now that we get multiple result types in a single | 23 <th colspan="2"> |
| 24 fetch, modify the UI: add a column showing resultType, and allow | 24 Filters |
| 25 the user to sort/filter on that column just like all the | 25 </th> |
| 26 others. --> | 26 <th> |
| 27 <li>show results of type | 27 Settings |
| 28 <select ng-model="showResultsOfType" | 28 </th> |
| 29 ng-init="showResultsOfType='failed'"> | 29 </tr> |
| 30 <option ng-repeat="(resultType, count) in categories['resultType']" | 30 <tr valign="top"> |
| 31 value="{{resultType}}"> | 31 <td> |
| 32 {{resultType}} ({{count}}) | 32 resultType<br> |
| 33 </option> | 33 <label ng-repeat="(resultType, count) in categories['resultType']"> |
| 34 </select> | 34 <input type="checkbox" |
| 35 <!-- | 35 name="resultTypes" |
| 36 TODO(epoger): See results.py: for now, I have disabled | 36 value="{{resultType}}" |
| 37 returning succeeded tests as part of the JSON, because it | 37 ng-checked="!isHiddenResultType(resultType)" |
| 38 makes the returned JSON too big (and slows down the client). | 38 ng:click="toggleHiddenResultType(resultType)"> |
|
jcgregorio
2013/10/02 13:24:05
Is there a reason this isn't ng-click, i.e. keep e
epoger
2013/10/02 16:05:59
Done.
| |
| 39 | 39 {{resultType}} ({{count}})<br> |
| 40 Also, we should use some sort of lazy-loading technique | 40 </label> |
| 41 (e.g. http://www.appelsiini.net/projects/lazyload ), so that | 41 </td> |
| 42 the images are only loaded as they become viewable... | 42 <td> |
| 43 that will help with long lists like resultType='no-comparison'. | 43 config<br> |
| 44 --> | 44 <label ng-repeat="(config, count) in categories['config']"> |
| 45 <br> | 45 <input type="checkbox" |
| 46 TODO(epoger): 'no-comparison' will probably take forever; | 46 name="configs" |
| 47 see HTML source for details | 47 value="{{config}}" |
| 48 <br> | 48 ng-checked="!isHiddenConfig(config)" |
| 49 TODO(epoger): 'succeeded' will not show any results; | 49 ng:click="toggleHiddenConfig(config)"> |
| 50 see HTML source for details | 50 {{config}} ({{count}})<br> |
| 51 </li> | 51 </label> |
| 52 <li>image size | 52 </td> |
| 53 <input type="text" ng-model="imageSizePending" | 53 <td><table> |
| 54 ng-init="imageSizePending=100; imageSize=100" | 54 <tr><td> |
| 55 maxlength="4"/> | 55 Image size |
| 56 <button ng:click="imageSize=imageSizePending">apply</button> | 56 <input type="text" ng-model="imageSizePending" |
| 57 </li> | 57 ng-init="imageSizePending=100" |
| 58 </ul> | 58 ng-change="areUpdatesPending = true" |
| 59 maxlength="4"/> | |
| 60 </td></tr> | |
| 61 <tr><td> | |
| 62 Max records to display | |
| 63 <input type="text" ng-model="displayLimitPending" | |
| 64 ng-init="displayLimitPending=50" | |
| 65 ng-change="areUpdatesPending = true" | |
| 66 maxlength="4"/> | |
| 67 </td></tr> | |
| 68 <tr><td> | |
| 69 <button style="font-size:30px" | |
| 70 ng:click="updateResults()" | |
| 71 ng-disabled="!areUpdatesPending"> | |
| 72 Update Results | |
| 73 </button> | |
| 74 </td></tr> | |
| 75 </tr></table></td> | |
| 76 </tr> | |
| 77 </table> | |
| 59 | 78 |
| 60 <p> | 79 <p> |
|
jcgregorio
2013/10/02 13:24:05
<em ng-hide="categories">(Spinner GIF goes here) L
epoger
2013/10/02 16:05:59
Thanks, did that above!
| |
| 61 Click on the column header radio buttons to re-sort by that column...<br> | 80 TODO(epoger): Show some sort of "loading" message, instead of |
| 62 <!-- TODO(epoger): Show some sort of "loading" message, instead of | 81 an empty table, while the data is loading. Otherwise, the slow |
| 63 an empty table, while the data is loading. Otherwise, if there are | 82 load time might make a user think that it's stuck. |
| 64 a lot of failures and it takes a long time to load them, the user | 83 <p> |
| 65 might think there are NO failures and leave the page! --> | 84 Found {{filteredTestData.length}} matches, and displaying the first |
| 85 {{displayLimit}}: <br> | |
| 86 <!-- TODO(epoger): If (displayLimit <= filteredTestData.length), | |
| 87 modify this message to indicate that all results are shown. --> | |
| 88 (click on the column header radio buttons to re-sort by that column)<br> | |
| 66 <table border="1"> | 89 <table border="1"> |
| 67 <tr> | 90 <tr> |
| 68 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="builder">Builder</input></th> | 91 |
| 69 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="test">Test</input></th> | 92 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf ig', 'expectedHashDigest', 'actualHashDigest']"> |
| 70 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="config">Config</input></th> | 93 <input type="radio" |
| 71 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="expectedHashDigest">Expected Image</input></th> | 94 name="sortColumnRadio" |
| 72 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="actualHashDigest">Actual Image</input></th> | 95 value="{{categoryName}}" |
| 96 ng-checked="(sortColumn == categoryName)" | |
| 97 ng:click="sortResultsBy(categoryName)"> | |
| 98 {{categoryName}} | |
| 99 </input> | |
| 100 </th> | |
| 73 <!-- TODO(epoger): Add more columns, such as... | 101 <!-- TODO(epoger): Add more columns, such as... |
| 74 pixel diff | 102 pixel diff |
| 75 notes/bugs | 103 notes/bugs |
| 76 ignoreFailure boolean | 104 ignoreFailure boolean |
| 77 --> | 105 --> |
| 78 </tr> | 106 </tr> |
| 79 <!-- TODO(epoger): improve the column sorting, as per | 107 <!-- TODO(epoger): improve the column sorting, as per |
| 80 http://jsfiddle.net/vojtajina/js64b/14/ --> | 108 http://jsfiddle.net/vojtajina/js64b/14/ --> |
| 81 <tr ng-repeat="result in testData | filter: { resultType: showResultsOfT ype } | orderBy: sortColumn"> | 109 <tr ng-repeat="result in limitedTestData"> |
| 110 <td>{{result.resultType}}</td> | |
| 82 <td>{{result.builder}}</td> | 111 <td>{{result.builder}}</td> |
| 83 <td>{{result.test}}</td> | 112 <td>{{result.test}}</td> |
| 84 <td>{{result.config}}</td> | 113 <td>{{result.config}}</td> |
| 85 <td> | 114 <td> |
| 86 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png"> | 115 <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"/> | 116 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/> |
| 88 </a> | 117 </a> |
| 89 </td> | 118 </td> |
| 90 <td> | 119 <td> |
| 91 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png"> | 120 <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"/> | 121 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/> |
| 93 </a> | 122 </a> |
| 94 </td> | 123 </td> |
| 95 </tr> | 124 </tr> |
| 96 </table> | 125 </table> |
| 97 </div> | 126 </div> |
| 98 | 127 |
| 99 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and | 128 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and |
| 100 issues list) from | 129 issues list) from |
| 101 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json | 130 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json |
| 102 ? I tried importing the | 131 ? I tried importing the |
| 103 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using | 132 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. | 133 that to do so, but I got Access-Control-Allow-Origin errors. |
| 105 --> | 134 --> |
| 106 | 135 |
| 107 </body> | 136 </body> |
| 108 </html> | 137 </html> |
| OLD | NEW |
