OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 {{template "header.html" .}} | 4 {{template "header.html" .}} |
5 <title>Skia Buildbot Dashboard</title> | 5 <title>Skia Buildbot Dashboard</title> |
6 | 6 |
7 <style> | 7 <style> |
8 core-header-panel { | 8 core-header-panel { |
9 background: white; | 9 background: white; |
10 font-family: sans-serif; | 10 font-family: sans-serif; |
11 } | 11 } |
12 core-toolbar { | 12 core-toolbar { |
13 background-color: #006C7C; | 13 background-color: #006C7C; |
14 color: #FFFFFF; | 14 color: #FFFFFF; |
15 text-align: center; | 15 text-align: center; |
16 font-size: 15px; | 16 font-size: 15px; |
17 } | 17 } |
| 18 paper-button { |
| 19 text-transform: none; |
| 20 } |
18 h1 { | 21 h1 { |
19 font-size: 1.7em; | 22 font-size: 1.7em; |
20 margin-bottom: 2px; | 23 margin-bottom: 2px; |
21 margin-top: 5px; | 24 margin-top: 5px; |
22 } | 25 } |
23 #maincontent { | 26 #maincontent { |
24 padding: 10px; | 27 padding: 10px; |
25 } | 28 } |
26 #spacer-left { | 29 #spacer-left { |
27 width: 160px; | 30 width: 160px; |
(...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
208 var stats = []; | 211 var stats = []; |
209 for (var series in data) { | 212 for (var series in data) { |
210 stats.push([series, aggregator(data[series])]); | 213 stats.push([series, aggregator(data[series])]); |
211 } | 214 } |
212 stats.sort(function(a, b) { | 215 stats.sort(function(a, b) { |
213 return b[1] - a[1]; | 216 return b[1] - a[1]; |
214 }); | 217 }); |
215 return stats; | 218 return stats; |
216 } | 219 } |
217 | 220 |
218 sk.WebComponentsReady.then(function() { reloadBuilds(); }); | 221 function updateTimePeriod(timePeriod) { |
| 222 var now = Math.round(new Date().getTime() / 1000); |
| 223 reloadBuilds(now - timePeriod * 3600, now); |
| 224 } |
| 225 |
| 226 sk.WebComponentsReady.then(function() { |
| 227 $$$("#time_select_button").addEventListener("click", function(e) { |
| 228 $$$("#time_select").open(); |
| 229 }); |
| 230 var timeMenu = $$$("#time_menu"); |
| 231 timeMenu.addEventListener("core-select", function(e) { |
| 232 $$$("#time_select").close(); |
| 233 if (e.detail.isSelected) { |
| 234 $$$("#time_select_label").innerHTML = e.detail.item.innerHTML; |
| 235 updateTimePeriod(e.detail.item.getAttribute("value")); |
| 236 } |
| 237 }); |
| 238 |
| 239 // Load builds from the pre-selected time period. |
| 240 var timePeriod = null; |
| 241 for (var i = 0; i < timeMenu.children.length; i++) { |
| 242 var child = timeMenu.children[i]; |
| 243 if (child.classList.contains("core-selected")) { |
| 244 $$$("#time_select_label").innerHTML = child.innerHTML; |
| 245 timePeriod = child.getAttribute("value"); |
| 246 } |
| 247 } |
| 248 if (timePeriod) { |
| 249 updateTimePeriod(timePeriod); |
| 250 } else { |
| 251 throw "No time period provided! Can't load data."; |
| 252 } |
| 253 }); |
219 })(); | 254 })(); |
220 </script> | 255 </script> |
221 </head> | 256 </head> |
222 <body fullbleed vertical layout unresolved> | 257 <body fullbleed vertical layout unresolved> |
223 <core-header-panel flex> | 258 <core-header-panel flex> |
224 <core-toolbar class="short"> | 259 <core-toolbar class="short"> |
225 <div id="toolbar" class="top" horizontal layout center fit> | 260 <div id="toolbar" class="top" horizontal layout center fit> |
226 <menu-sk></menu-sk> | 261 <menu-sk></menu-sk> |
227 <div id="spacer-left"></div> | 262 <div id="spacer-left"></div> |
228 <div id="title" vertical layout flex> | 263 <div id="title" vertical layout flex> |
229 <h1>Skia Buildbot Dashboard</h1> | 264 <h1>Skia Buildbot Dashboard</h1> |
230 </div> | 265 </div> |
231 <div id="spacer-right"></div> | 266 <div id="spacer-right"></div> |
232 <login-sk></login-sk> | 267 <login-sk></login-sk> |
233 </div> | 268 </div> |
234 </core-toolbar> | 269 </core-toolbar> |
235 <div id="maincontent" vertical layout> | 270 <div id="maincontent" vertical layout> |
236 <div id="spinner" horizontal layout center fit> | 271 <div id="spinner" horizontal layout center fit> |
237 <div vertical layout center flex> | 272 <div vertical layout center flex> |
238 <paper-spinner active></paper-spinner> | 273 <paper-spinner active></paper-spinner> |
239 </div> | 274 </div> |
240 </div> | 275 </div> |
241 <div id="chart_container" vertical layout> | 276 <div id="chart_container" vertical layout> |
| 277 <div class="controls"> |
| 278 Results from last |
| 279 <paper-button id="time_select_button"> |
| 280 <div id="time_select_label"></div> |
| 281 <core-icon icon="arrow-drop-down"></core-icon> |
| 282 </paper-button> |
| 283 <paper-dropdown id="time_select"> |
| 284 <core-menu id="time_menu" selected=0> |
| 285 <paper-item value=24>24 hours</paper-item> |
| 286 <paper-item value=72>3 days</paper-item> |
| 287 <paper-item value=168>1 week</paper-item> |
| 288 <paper-item value=336>2 weeks</paper-item> |
| 289 </core-menu> |
| 290 </paper-dropdown> |
| 291 </div> |
242 <bar-chart-sk heading="Build Times" id="build_times_chart"></bar-chart
-sk> | 292 <bar-chart-sk heading="Build Times" id="build_times_chart"></bar-chart
-sk> |
243 <bar-chart-sk heading="Step Times" id="step_times_chart"></bar-chart-s
k> | 293 <bar-chart-sk heading="Step Times" id="step_times_chart"></bar-chart-s
k> |
244 <bar-chart-sk heading="Build Failure Rate" id="build_failure_rate_char
t"></bar-chart-sk> | 294 <bar-chart-sk heading="Build Failure Rate" id="build_failure_rate_char
t"></bar-chart-sk> |
245 <bar-chart-sk heading="Step Failure Rate" id="step_failure_rate_chart"
></bar-chart-sk> | 295 <bar-chart-sk heading="Step Failure Rate" id="step_failure_rate_chart"
></bar-chart-sk> |
246 </div> | 296 </div> |
247 </div> | 297 </div> |
248 </core-header-panel> | 298 </core-header-panel> |
249 <div horizontal layout> | 299 <div horizontal layout> |
250 <div flex></div> | 300 <div flex></div> |
251 <version-sk></version-sk> | 301 <version-sk></version-sk> |
252 </div> | 302 </div> |
253 </body> | 303 </body> |
254 </html> | 304 </html> |
OLD | NEW |