view.html revision eb832599b631a09b180ea3615347adba6bd5e363
1<!DOCTYPE html> 2 3<html ng-app="Loader" ng-controller="Loader.Controller"> 4 5<head> 6 <title ng-bind="windowTitle"></title> 7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> 8 <script src="loader.js"></script> 9 <link rel="stylesheet" href="view.css"> 10</head> 11 12<body> 13 <em> 14 {{loadingMessage}} 15 </em> 16 17 <div ng-hide="!categories"><!-- everything: hide until data is loaded --> 18 19 <div ng-hide="!(header.isEditable && header.isExported)" 20 style="background-color:#ffbb00"> 21 WARNING! These results are editable and exported, so any user 22 who can connect to this server over the network can modify them. 23 </div> 24 25 <div style="background-color:#bbffbb"><!-- TODOs --> 26 <p> 27 TODO(epoger): 28 <input type="checkbox" name="showTodosCheckbox" value="true" 29 ng-checked="showTodos == true" 30 ng-click="showTodos = !showTodos"> 31 show 32 <ul ng-hide="!showTodos"> 33 <li> 34 If server was run with --reload flag, automatically check for 35 new results and tell the user when new results are available 36 (the user can reload the page if he wants to see them). 37 </li><li> 38 Add ability to filter builder and test names 39 (using a free-form text field, with partial string match) 40 </li><li> 41 Add more columns, such as pixel diffs, notes/bugs, 42 ignoreFailure boolean 43 </li><li> 44 Improve the column sorting, as per 45 <a href="http://jsfiddle.net/vojtajina/js64b/14/"> 46 http://jsfiddle.net/vojtajina/js64b/14/ 47 </a> 48 </li><li> 49 Right now, if you change which column is used to 50 sort the data, the column widths may fluctuate based on the 51 longest string <i>currently visible</i> within the top {{displayLimit}} 52 results. Can we fix the column widths to be wide enough to hold 53 any result, even the currently hidden results? 54 </li> 55 </ul> 56 </div><!-- TODOs --> 57 58 <div ng-hide="!(header.timeUpdated)"> 59 Results current as of {{localTimeString(header.timeUpdated)}} 60 </div> 61 62 <div style="font-size:20px"><!-- tabs --> 63 <div ng-repeat="tab in tabs" 64 style="display:inline-block"> 65 <div class="tab-{{tab == viewingTab}}" 66 style="display:inline-block" 67 ng-click="setViewingTab(tab)"> 68 {{tab}} ({{numResultsPerTab[tab]}}) 69 </div> 70 <div style="display:inline-block"> 71 72 </div> 73 </div> 74 </div><!-- tabs --> 75 76 <div class="tab-true"><!-- display of current tab --> 77 78 <br> 79 <table ng-hide="viewingTab != defaultTab" border="1"> 80 <tr> 81 <th colspan="2"> 82 Filters 83 </th> 84 <th> 85 Settings 86 </th> 87 </tr> 88 <tr valign="top"> 89 <td> 90 resultType<br> 91 <label ng-repeat="(resultType, count) in categories['resultType']"> 92 <input type="checkbox" 93 name="resultTypes" 94 value="{{resultType}}" 95 ng-checked="!isHiddenResultType(resultType)" 96 ng-click="toggleHiddenResultType(resultType)"> 97 {{resultType}} ({{count}})<br> 98 </label> 99 </td> 100 <td> 101 config<br> 102 <label ng-repeat="(config, count) in categories['config']"> 103 <input type="checkbox" 104 name="configs" 105 value="{{config}}" 106 ng-checked="!isHiddenConfig(config)" 107 ng-click="toggleHiddenConfig(config)"> 108 {{config}} ({{count}})<br> 109 </label> 110 </td> 111 <td><table> 112 <tr><td> 113 Image size 114 <input type="text" ng-model="imageSizePending" 115 ng-init="imageSizePending=100" 116 ng-change="areUpdatesPending = true" 117 maxlength="4"/> 118 </td></tr> 119 <tr><td> 120 Max records to display 121 <input type="text" ng-model="displayLimitPending" 122 ng-init="displayLimitPending=50" 123 ng-change="areUpdatesPending = true" 124 maxlength="4"/> 125 </td></tr> 126 <tr><td> 127 <button style="font-size:30px" 128 ng-click="updateResults()" 129 ng-disabled="!areUpdatesPending"> 130 Update Results 131 </button> 132 </td></tr> 133 </tr></table></td> 134 </tr> 135 </table> 136 137 <p> 138 139 <div ng-hide="'Pending Approval' != viewingTab"> 140 <div style="display:inline-block"> 141 <button style="font-size:20px" 142 ng-click="submitApprovals(filteredTestData)" 143 ng-disabled="submitPending || (filteredTestData.length == 0)"> 144 Update these {{filteredTestData.length}} expectations on the server 145 </button> 146 </div> 147 <div style="display:inline-block"> 148 <div style="font-size:20px" 149 ng-hide="!submitPending"> 150 Submitting, please wait... 151 </div> 152 </div> 153 </div> 154 155 <p> 156 157 <div> 158 <div style="float:left"> 159 Found {{filteredTestData.length}} matches; 160 <span ng-hide="filteredTestData.length <= limitedTestData.length"> 161 displaying the first {{limitedTestData.length}} 162 </span> 163 <span ng-hide="filteredTestData.length > limitedTestData.length"> 164 displaying them all 165 </span> 166 <br> 167 (click on the column header radio buttons to re-sort by that column) 168 </div> 169 <div style="float:right"> 170 <div ng-repeat="otherTab in tabs"> 171 <button ng-click="moveSelectedItemsToTab(otherTab)" 172 ng-disabled="selectedItems.length == 0" 173 ng-hide="otherTab == viewingTab"> 174 {{selectedItems.length}} move selected tests to {{otherTab}} tab 175 </button> 176 </div> 177 </div> 178 <div style="clear:both"> 179 </div> 180 </div> 181 <br> 182 183 <table border="1"> 184 <tr> 185 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']"> 186 <input type="radio" 187 name="sortColumnRadio" 188 value="{{categoryName}}" 189 ng-checked="(sortColumn == categoryName)" 190 ng-click="sortResultsBy(categoryName)"> 191 {{categoryName}} 192 </th> 193 <th> 194 <input type="radio" 195 name="sortColumnRadio" 196 value="expectedHashDigest" 197 ng-checked="(sortColumn == 'expectedHashDigest')" 198 ng-click="sortResultsBy('expectedHashDigest')"> 199 expected image 200 </th> 201 <th> 202 <input type="radio" 203 name="sortColumnRadio" 204 value="actualHashDigest" 205 ng-checked="(sortColumn == 'actualHashDigest')" 206 ng-click="sortResultsBy('actualHashDigest')"> 207 actual image 208 </th> 209 <th> 210 <!-- item-selection checkbox column --> 211 </th> 212 </tr> 213 <tr ng-repeat="result in limitedTestData"> 214 <td>{{result.resultType}}</td> 215 <td>{{result.builder}}</td> 216 <td>{{result.test}}</td> 217 <td>{{result.config}}</td> 218 <td> 219 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"> 220 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/> 221 </a> 222 </td> 223 <td> 224 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"> 225 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/> 226 </a> 227 </td> 228 <td> 229 <input type="checkbox" 230 name="rowSelect" 231 value="{{result.index}}" 232 ng-checked="isItemSelected(result.index)" 233 ng-click="toggleItemSelected(result.index)"> 234 </tr> 235 </table> 236 </div><!-- display of current tab --> 237 </div><!-- everything: hide until data is loaded --> 238 239 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and 240 issues list) from 241 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json 242 ? I tried importing the 243 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using 244 that to do so, but I got Access-Control-Allow-Origin errors. 245 --> 246 247</body> 248</html> 249