| 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 h1 { | |
| 19 font-size: 1.7em; | |
| 20 margin-bottom: 2px; | |
| 21 margin-top: 5px; | |
| 22 } | |
| 23 #maincontent { | |
| 24 padding: 10px; | |
| 25 } | |
| 26 #spacer-left { | 18 #spacer-left { |
| 27 width: 160px; | 19 width: 160px; |
| 28 } | 20 } |
| 29 #spacer-right { | 21 #spacer-right { |
| 30 width: 0px; | 22 width: 0px; |
| 31 } | 23 } |
| 32 login-sk { | 24 login-sk { |
| 33 width: 200px; | 25 width: 200px; |
| 34 } | 26 } |
| 35 tree-status-sk { | 27 tree-status-sk { |
| 36 font-size: 1em; | 28 font-size: 1em; |
| 37 } | 29 } |
| 38 </style> | 30 </style> |
| 39 <script type="text/javascript" src="https://www.google.com/jsapi"></script> | |
| 40 <script type="text/javascript"> | |
| 41 (function() { | |
| 42 var chartsReady = false; | |
| 43 var ChartsReady = new Promise(function(resolve, reject) { | |
| 44 if (chartsReady) { | |
| 45 resolve(); | |
| 46 } else { | |
| 47 google.setOnLoadCallback(resolve); | |
| 48 } | |
| 49 }) | |
| 50 | |
| 51 google.load("visualization", "1.0", {"packages": ["corechart"]}); | |
| 52 google.setOnLoadCallback(function() { chartsReady = true; }); | |
| 53 | |
| 54 var builds = []; | |
| 55 var buildTimes = {}; | |
| 56 var stepTimes = {}; | |
| 57 var buildResults = {}; | |
| 58 var stepResults = {}; | |
| 59 | |
| 60 var blacklist = []; | |
| 61 var match = []; | |
| 62 | |
| 63 var palette = [ | |
| 64 "#03DCFB", "#00C2DD", "#008699", "#006C7C", "#00535E", // Blue | |
| 65 "#FFAE00", "#FFAE00", "#FAAB00", "#CA8A00", "#9A6900", // Yellow | |
| 66 "#FF1300", "#FF1300", "#FA1200", "#CA0F00", "#9A0B00", // Red | |
| 67 ]; | |
| 68 var paletteRowLen = 5; | |
| 69 var colors = [ | |
| 70 palette[2*paletteRowLen+3], | |
| 71 palette[1*paletteRowLen+3], | |
| 72 palette[0*paletteRowLen+3], | |
| 73 ]; | |
| 74 | |
| 75 function reloadBuilds(start, end) { | |
| 76 console.time("loadData"); | |
| 77 url = "/json/builds"; | |
| 78 if (!!start) { | |
| 79 url += "?start=" + start; | |
| 80 if (!!end) { | |
| 81 url += "&end=" + end; | |
| 82 } | |
| 83 } | |
| 84 document.getElementById("spinner").style.display = "flex"; | |
| 85 document.getElementById("chart_container").style.display = "none"; | |
| 86 sk.get(url).then(JSON.parse).then(function(json) { | |
| 87 console.timeEnd("loadData"); | |
| 88 builds = json; | |
| 89 processBuilds(); | |
| 90 document.getElementById("spinner").style.display = "none"; | |
| 91 document.getElementById("chart_container").style.display = "flex"; | |
| 92 }); | |
| 93 } | |
| 94 | |
| 95 function includeBuilder(builder) { | |
| 96 for (var i = 0; i < blacklist.length; i++) { | |
| 97 if (builder.match(blacklist[i])) { | |
| 98 return false; | |
| 99 } | |
| 100 } | |
| 101 for (var i = 0; i < match.length; i++) { | |
| 102 if (!builder.match(match[i])) { | |
| 103 return false; | |
| 104 } | |
| 105 } | |
| 106 return true; | |
| 107 } | |
| 108 | |
| 109 function mean(data) { | |
| 110 // TODO(borenet): Use a more stable algorithm. | |
| 111 var sum = 0; | |
| 112 for (var i = 0; i < data.length; i++) { | |
| 113 sum += data[i]; | |
| 114 } | |
| 115 return sum / data.length; | |
| 116 } | |
| 117 | |
| 118 function processBuilds() { | |
| 119 console.time("processBuilds"); | |
| 120 buildTimes = {}; | |
| 121 stepTimes = {}; | |
| 122 buildResults = {}; | |
| 123 stepResults = {}; | |
| 124 | |
| 125 for (var i = 0; i < builds.length; i++) { | |
| 126 var build = builds[i]; | |
| 127 if (!includeBuilder(build.Builder)) { | |
| 128 continue; | |
| 129 } | |
| 130 | |
| 131 var duration = build.Finished - build.Started; | |
| 132 if (!buildTimes[build.Builder]) { | |
| 133 buildTimes[build.Builder] = []; | |
| 134 } | |
| 135 buildTimes[build.Builder].push(duration); | |
| 136 | |
| 137 if (!buildResults[build.Builder]) { | |
| 138 buildResults[build.Builder] = []; | |
| 139 } | |
| 140 buildResults[build.Builder].push(build.Results == 0 ? 0 : 1); | |
| 141 | |
| 142 for (var j = 0; j < build.Steps.length; j++) { | |
| 143 var step = build.Steps[j]; | |
| 144 // Always exclude these steps. | |
| 145 if (step.Name == "steps" || step.Name == "Uncaught Exception") { | |
| 146 continue; | |
| 147 } | |
| 148 var stepDuration = step.Finished - step.Started; | |
| 149 if (!stepTimes[step.Name]) { | |
| 150 stepTimes[step.Name] = []; | |
| 151 } | |
| 152 stepTimes[step.Name].push(stepDuration); | |
| 153 | |
| 154 if (!stepResults[step.Name]) { | |
| 155 stepResults[step.Name] = []; | |
| 156 } | |
| 157 stepResults[step.Name].push(step.Results == 0 ? 0 : 1); | |
| 158 } | |
| 159 } | |
| 160 | |
| 161 console.timeEnd("processBuilds"); | |
| 162 drawCharts(); | |
| 163 } | |
| 164 | |
| 165 function drawCharts() { | |
| 166 console.time("drawCharts"); | |
| 167 // Draw charts. | |
| 168 ChartsReady.then(function() { | |
| 169 var chart = null; | |
| 170 | |
| 171 // Build times. | |
| 172 chart = document.getElementById("build_times_chart"); | |
| 173 chart.colors = colors; | |
| 174 chart.draw( | |
| 175 [["string", "Builder"], | |
| 176 ["number", "Time (s)"]], | |
| 177 generateStats(buildTimes, mean)); | |
| 178 | |
| 179 // Step times. | |
| 180 chart = document.getElementById("step_times_chart"); | |
| 181 chart.colors = colors; | |
| 182 chart.draw( | |
| 183 [["string", "Step"], | |
| 184 ["number", "Time (s)"]], | |
| 185 generateStats(stepTimes, mean)); | |
| 186 | |
| 187 // Build failure rate. | |
| 188 chart = document.getElementById("build_failure_rate_chart"); | |
| 189 chart.colors = colors; | |
| 190 chart.draw( | |
| 191 [["string", "Builder"], | |
| 192 ["number", "Failure Rate"]], | |
| 193 generateStats(buildResults, mean)); | |
| 194 | |
| 195 // Step failure rate. | |
| 196 chart = document.getElementById("step_failure_rate_chart"); | |
| 197 chart.colors = colors; | |
| 198 chart.draw( | |
| 199 [["string", "Step"], | |
| 200 ["number", "Failure Rate"]], | |
| 201 generateStats(stepResults, mean)); | |
| 202 | |
| 203 console.timeEnd("drawCharts"); | |
| 204 }); | |
| 205 } | |
| 206 | |
| 207 function generateStats(data, aggregator) { | |
| 208 var stats = []; | |
| 209 for (var series in data) { | |
| 210 stats.push([series, aggregator(data[series])]); | |
| 211 } | |
| 212 stats.sort(function(a, b) { | |
| 213 return b[1] - a[1]; | |
| 214 }); | |
| 215 return stats; | |
| 216 } | |
| 217 | |
| 218 sk.WebComponentsReady.then(function() { reloadBuilds(); }); | |
| 219 })(); | |
| 220 </script> | |
| 221 </head> | 31 </head> |
| 222 <body fullbleed vertical layout unresolved> | 32 <body fullbleed vertical layout unresolved> |
| 223 <core-header-panel flex> | 33 <core-header-panel flex> |
| 224 <core-toolbar class="short"> | 34 <core-toolbar class="short"> |
| 225 <div id="toolbar" class="top" horizontal layout center fit> | 35 <div id="toolbar" class="top" horizontal layout center fit> |
| 226 <menu-sk></menu-sk> | 36 <menu-sk></menu-sk> |
| 227 <div id="spacer-left"></div> | 37 <div id="spacer-left"></div> |
| 228 <div id="title" vertical layout flex> | 38 <div id="title" vertical layout flex> |
| 229 <h1>Skia Buildbot Dashboard</h1> | 39 <h1>Skia Buildbot Dashboard</h1> |
| 230 </div> | 40 </div> |
| 231 <div id="spacer-right"></div> | 41 <div id="spacer-right"></div> |
| 232 <login-sk></login-sk> | 42 <login-sk></login-sk> |
| 233 </div> | 43 </div> |
| 234 </core-toolbar> | 44 </core-toolbar> |
| 235 <div id="maincontent" vertical layout> | 45 <buildbot-dash-sk></buildbot-dash-sk> |
| 236 <div id="spinner" horizontal layout center fit> | |
| 237 <div vertical layout center flex> | |
| 238 <paper-spinner active></paper-spinner> | |
| 239 </div> | |
| 240 </div> | |
| 241 <div id="chart_container" vertical layout> | |
| 242 <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> | |
| 244 <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> | |
| 246 </div> | |
| 247 </div> | |
| 248 </core-header-panel> | 46 </core-header-panel> |
| 249 <div horizontal layout> | 47 <div horizontal layout> |
| 250 <div flex></div> | 48 <div flex></div> |
| 251 <version-sk></version-sk> | 49 <version-sk></version-sk> |
| 252 </div> | 50 </div> |
| 253 </body> | 51 </body> |
| 254 </html> | 52 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1051173003:
Add controls to buildbot dashboard (Closed)
Base URL: https://skia.googlesource.com/buildbot@master