blob: 9f0158d579610fef491d8c29d69042ef2d1c3bc4 [file] [log] [blame]
epoger@google.comf9d134d2013-09-27 15:02:44 +00001<!DOCTYPE html>
2
epoger@google.com542b65f2013-10-15 20:10:33 +00003<html ng-app="Loader" ng-controller="Loader.Controller">
epoger@google.comf9d134d2013-09-27 15:02:44 +00004
5<head>
epoger@google.com542b65f2013-10-15 20:10:33 +00006 <title ng-bind="windowTitle"></title>
epoger@google.comf9d134d2013-09-27 15:02:44 +00007 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
8 <script src="loader.js"></script>
9</head>
10
11<body>
epoger@google.comdcb4e652013-10-11 18:45:33 +000012 <em>
13 {{loadingMessage}}
epoger@google.com5f2bb002013-10-02 18:57:48 +000014 </em>
epoger@google.comafaad3d2013-09-30 15:06:25 +000015
epoger@google.comcce4e092013-10-18 18:36:25 +000016 <div ng-hide="!categories">
epoger@google.com9fb6c8a2013-10-09 18:05:58 +000017 <div ng-hide="!(header.isEditable && header.isExported)"
18 style="background-color:#ffbb00">
19 WARNING! These results are editable and exported, so any user
20 who can connect to this server over the network can modify them.
21 </div>
epoger@google.com542b65f2013-10-15 20:10:33 +000022 <div ng-hide="!(header.timeUpdated)">
23 Results current as of {{localTimeString(header.timeUpdated)}}
24 </div>
epoger@google.comcce4e092013-10-18 18:36:25 +000025 <table border="1">
epoger@google.com5f2bb002013-10-02 18:57:48 +000026 <tr>
27 <th colspan="2">
28 Filters
29 </th>
30 <th>
31 Settings
32 </th>
33 </tr>
34 <tr valign="top">
35 <td>
36 resultType<br>
37 <label ng-repeat="(resultType, count) in categories['resultType']">
38 <input type="checkbox"
39 name="resultTypes"
40 value="{{resultType}}"
41 ng-checked="!isHiddenResultType(resultType)"
42 ng-click="toggleHiddenResultType(resultType)">
43 {{resultType}} ({{count}})<br>
44 </label>
45 </td>
46 <td>
47 config<br>
48 <label ng-repeat="(config, count) in categories['config']">
49 <input type="checkbox"
50 name="configs"
51 value="{{config}}"
52 ng-checked="!isHiddenConfig(config)"
53 ng-click="toggleHiddenConfig(config)">
54 {{config}} ({{count}})<br>
55 </label>
56 </td>
57 <td><table>
58 <tr><td>
59 Image size
60 <input type="text" ng-model="imageSizePending"
61 ng-init="imageSizePending=100"
62 ng-change="areUpdatesPending = true"
63 maxlength="4"/>
64 </td></tr>
65 <tr><td>
66 Max records to display
67 <input type="text" ng-model="displayLimitPending"
68 ng-init="displayLimitPending=50"
69 ng-change="areUpdatesPending = true"
70 maxlength="4"/>
71 </td></tr>
72 <tr><td>
73 <button style="font-size:30px"
74 ng-click="updateResults()"
75 ng-disabled="!areUpdatesPending">
76 Update Results
77 </button>
78 </td></tr>
79 </tr></table></td>
80 </tr>
81 </table>
epoger@google.comf9d134d2013-09-27 15:02:44 +000082
epoger@google.comcce4e092013-10-18 18:36:25 +000083 <p>
84 TODO(epoger):
85 <input type="checkbox" name="showTodosCheckbox" value="true"
86 ng-checked="showTodos == true"
87 ng-click="showTodos = !showTodos">
88 show
89 <ul ng-hide="!showTodos">
90 <li>
91 Implement editing of results (we have added the --editable
92 flag to the server, but it&#39;s not fully implemented yet).
93 <div ng-hide="!header.isEditable">
94 Currently selected items are: {{selectedItems}}
95 </div>
96 </li><li>
97 If server was run with --reload flag, automatically check for
98 new results and tell the user when new results are available
99 (the user can reload the page if he wants to see them).
100 </li><li>
101 Add ability to filter builder and test names
102 (using a free-form text field, with partial string match)
103 </li><li>
104 Add more columns, such as pixel diffs, notes/bugs,
105 ignoreFailure boolean
106 </li><li>
107 Improve the column sorting, as per
108 <a href="http://jsfiddle.net/vojtajina/js64b/14/">
109 http://jsfiddle.net/vojtajina/js64b/14/
110 </a>
111 </li><li>
112 Right now, if you change which column is used to
113 sort the data, the column widths may fluctuate based on the
114 longest string <i>currently visible</i> within the top {{displayLimit}}
115 results. Can we fix the column widths to be wide enough to hold
116 any result, even the currently hidden results?
117 </li>
118 </ul>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000119 <p>
epoger@google.comcce4e092013-10-18 18:36:25 +0000120 Found {{filteredTestData.length}} matches, and displaying the first
121 {{displayLimit}}: <br>
122 <!-- TODO(epoger): If (displayLimit <= filteredTestData.length),
123 modify this message to indicate that all results are shown. -->
epoger@google.com5f2bb002013-10-02 18:57:48 +0000124 (click on the column header radio buttons to re-sort by that column)
125 <br>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000126 <table border="1">
127 <tr>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000128 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']">
129 <input type="radio"
130 name="sortColumnRadio"
131 value="{{categoryName}}"
132 ng-checked="(sortColumn == categoryName)"
133 ng-click="sortResultsBy(categoryName)">
134 {{categoryName}}
135 </th>
136 <th>
137 <input type="radio"
138 name="sortColumnRadio"
139 value="expectedHashDigest"
140 ng-checked="(sortColumn == 'expectedHashDigest')"
141 ng-click="sortResultsBy('expectedHashDigest')">
142 expected image
143 </th>
144 <th>
145 <input type="radio"
146 name="sortColumnRadio"
147 value="actualHashDigest"
148 ng-checked="(sortColumn == 'actualHashDigest')"
149 ng-click="sortResultsBy('actualHashDigest')">
150 actual image
151 </th>
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000152 <th ng-hide="!header.isEditable">
153 <!-- item-selection checkbox column -->
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000154 </th>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000155 </tr>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000156 <tr ng-repeat="result in limitedTestData">
157 <td>{{result.resultType}}</td>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000158 <td>{{result.builder}}</td>
159 <td>{{result.test}}</td>
160 <td>{{result.config}}</td>
161 <td>
epoger@google.comdcb4e652013-10-11 18:45:33 +0000162 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png">
epoger@google.comf9d134d2013-09-27 15:02:44 +0000163 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/>
164 </a>
165 </td>
166 <td>
epoger@google.comdcb4e652013-10-11 18:45:33 +0000167 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png">
168 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000169 </a>
170 </td>
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000171 <td ng-hide="!header.isEditable">
172 <input type="checkbox"
173 name="rowSelect"
174 value="{{result.index}}"
175 ng-checked="isItemSelected(result.index)"
176 ng-click="toggleItemSelected(result.index)">
epoger@google.comf9d134d2013-09-27 15:02:44 +0000177 </tr>
178 </table>
epoger@google.comcce4e092013-10-18 18:36:25 +0000179 </div>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000180
181 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and
182 issues list) from
183 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json
184 ? I tried importing the
185 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using
186 that to do so, but I got Access-Control-Allow-Origin errors.
187 -->
188
189</body>
190</html>