| 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 |