Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / eb832599b631a09b180ea3615347adba6bd5e363 / . / gm / rebaseline_server / static / view.html
blob: 9bb01fc0c5722a67ed9d2a69a6a9bcf33f3b7c91 [file] [log] [blame]
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]1<!DOCTYPE html>
2
epoger@google.com542b65f2013-10-15 20:10:33 +0000[diff] [blame]3<html ng-app="Loader" ng-controller="Loader.Controller">
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]4
5<head>
epoger@google.com542b65f2013-10-15 20:10:33 +0000[diff] [blame]6 <title ng-bind="windowTitle"></title>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
8 <script src="loader.js"></script>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]9 <link rel="stylesheet" href="view.css">
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]10</head>
11
12<body>
epoger@google.comdcb4e652013-10-11 18:45:33 +0000[diff] [blame]13 <em>
14 {{loadingMessage}}
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]15 </em>
epoger@google.comafaad3d2013-09-30 15:06:25 +0000[diff] [blame]16
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]17 <div ng-hide="!categories"><!-- everything: hide until data is loaded -->
18
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000[diff] [blame]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>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]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
epoger@google.com542b65f2013-10-15 20:10:33 +0000[diff] [blame]58 <div ng-hide="!(header.timeUpdated)">
59 Results current as of {{localTimeString(header.timeUpdated)}}
60 </div>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]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 &nbsp;{{tab}} ({{numResultsPerTab[tab]}})&nbsp;
69 </div>
70 <div style="display:inline-block">
71 &nbsp;
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">
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]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>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]136
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]137 <p>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]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>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]181 <br>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]182
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]183 <table border="1">
184 <tr>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]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>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]209 <th>
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000[diff] [blame]210 <!-- item-selection checkbox column -->
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000[diff] [blame]211 </th>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]212 </tr>
epoger@google.com5f2bb002013-10-02 18:57:48 +0000[diff] [blame]213 <tr ng-repeat="result in limitedTestData">
214 <td>{{result.resultType}}</td>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]215 <td>{{result.builder}}</td>
216 <td>{{result.test}}</td>
217 <td>{{result.config}}</td>
218 <td>
epoger@google.comdcb4e652013-10-11 18:45:33 +0000[diff] [blame]219 <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 +0000[diff] [blame]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>
epoger@google.comdcb4e652013-10-11 18:45:33 +0000[diff] [blame]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"/>
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]226 </a>
227 </td>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]228 <td>
epoger@google.com9fb6c8a2013-10-09 18:05:58 +0000[diff] [blame]229 <input type="checkbox"
230 name="rowSelect"
231 value="{{result.index}}"
232 ng-checked="isItemSelected(result.index)"
233 ng-click="toggleItemSelected(result.index)">
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]234 </tr>
235 </table>
epoger@google.comeb832592013-10-23 15:07:26 +0000[diff] [blame^]236 </div><!-- display of current tab -->
237 </div><!-- everything: hide until data is loaded -->
epoger@google.comf9d134d2013-09-27 15:02:44 +0000[diff] [blame]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>