| OLD | NEW |
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <title>Chromium Perf Tracker</title> |
| 4 <link rel="stylesheet" href="styles/style.css"> |
| 5 <script src="scripts/util.js"></script> |
| 6 <script src="jst/util.js" type="text/javascript"></script> |
| 7 <script src="jst/jsevalcontext.js" type="text/javascript"></script> |
| 8 <script src="jst/jstemplate.js" type="text/javascript"></script> |
| 9 <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| 10 </head> |
| 11 |
| 12 <body onLoad="main()"> |
| 13 <h1><div id="header">Chromium Page Tracker TestSets</div></h1> |
| 14 |
| 15 <script> |
| 16 data = {} |
| 17 networks_map = {}; // maps from db.Key to pretty name. |
| 18 cpus_map = {}; // maps from db.Key to pretty name. |
| 19 |
| 20 function loadFilters() { |
| 21 // Fetch data for the filters. |
| 22 var filter_data_url = "/json?type=filters"; |
| 23 new XHRGet(filter_data_url, function(result) { |
| 24 data.filters = JSON.parse(result); |
| 25 var context = JsEvalContext.create(data.filters); |
| 26 var template = document.getElementById("filters_template"); |
| 27 jstProcess(context, template); |
| 28 JsEvalContext.recycle(context); |
| 29 |
| 30 var params = getParams(); |
| 31 setSelectValue("version_filter", params["version"]); |
| 32 setSelectValue("networks_filter", params["network"]); |
| 33 setSelectValue("cpus_filter", params["cpu"]); |
| 34 |
| 35 // Populate the networks list |
| 36 for (index in data.filters.networks) { |
| 37 networks_map[data.filters.networks[index][1]] = |
| 38 data.filters.networks[index][0]; |
| 39 } |
| 40 for (index in data.filters.cpus) { |
| 41 cpus_map[data.filters.cpus[index][1]] = |
| 42 data.filters.cpus[index][0]; |
| 43 } |
| 44 ProcessResults(); |
| 45 }); |
| 46 } |
| 47 |
| 48 function loadData() { |
| 49 var url = "/json?type=set_search"; |
| 50 var params = getParams(); |
| 51 if (params["version"]) url += "&version_filter=" + params["version"]; |
| 52 if (params["network"]) url += "&networks_filter=" + params["network"]; |
| 53 if (params["cpu"]) url += "&cpus_filter=" + params["cpu"]; |
| 54 |
| 55 new XHRGet(url, function(result) { |
| 56 data.results = JSON.parse(result); |
| 57 ProcessResults(); |
| 58 }); |
| 59 } |
| 60 |
| 61 function ProcessResults() { |
| 62 if (!data.results || !data.filters) { |
| 63 return; // Still waiting for XHR to finish. |
| 64 } |
| 65 |
| 66 var context = JsEvalContext.create(data); |
| 67 var template = document.getElementById("data_template"); |
| 68 jstProcess(context, template); |
| 69 drawChart(data.results); |
| 70 JsEvalContext.recycle(context); |
| 71 } |
| 72 |
| 73 google.load('visualization', '1', {'packages':['annotatedtimeline']}); |
| 74 |
| 75 function drawChart(results) { |
| 76 var graph_data = new google.visualization.DataTable(); |
| 77 graph_data.addColumn('date', 'Date'); |
| 78 graph_data.addColumn('number', 'PLT'); |
| 79 graph_data.addColumn('number', 'First Paint'); |
| 80 |
| 81 for (var i = 0; i < results.length; ++i) { |
| 82 graph_data.addRow([new Date(results[i].date), |
| 83 results[i].total_time, |
| 84 results[i].paint_time, ]); |
| 85 } |
| 86 |
| 87 var chart_div = document.getElementById('chart_div'); |
| 88 if (graph_data.getNumberOfRows()) { |
| 89 var chart = new google.visualization.AnnotatedTimeLine(chart_div); |
| 90 chart.draw(graph_data, {displayAnnotations: true}); |
| 91 } else { |
| 92 chart_div.innerHTML = "No data"; |
| 93 } |
| 94 } |
| 95 |
| 96 function filterChanged() { |
| 97 var params = {}; |
| 98 var versionFilter = getSelectValue("version_filter"); |
| 99 if (versionFilter) params["version"] = versionFilter; |
| 100 var networksFilter = getSelectValue("networks_filter"); |
| 101 if (networksFilter) params["network"] = networksFilter; |
| 102 var cpusFilter = getSelectValue("cpus_filter"); |
| 103 if (cpusFilter) params["cpu"] = cpusFilter; |
| 104 setParams(params); |
| 105 loadData(); |
| 106 } |
| 107 |
| 108 function main() { |
| 109 loadData(); |
| 110 loadFilters(); |
| 111 } |
| 112 |
| 113 </script> |
| 114 |
| 115 <div id="filters_template"> |
| 116 <div id="filter" style="border:1px solid black"> |
| 117 <table class="sortable"> |
| 118 <tr> |
| 119 <td>Version</td> |
| 120 <td>Network</td> |
| 121 <td>CPU</td> |
| 122 </tr> |
| 123 <tr> |
| 124 <td> |
| 125 <select id="version_filter" onchange="filterChanged()"> |
| 126 <option></option> |
| 127 <option jsselect="versions" jscontent="$this[0]" |
| 128 jsvalues=".value:$this[1]"></option> |
| 129 </select> |
| 130 </td> |
| 131 <td><select id="networks_filter" onchange="filterChanged()"> |
| 132 <option></option> |
| 133 <option jsselect="networks" jscontent="$this[0]" |
| 134 jsvalues=".value:$this[1]"></option> |
| 135 </select> |
| 136 </td> |
| 137 <td><select id="cpus_filter" onchange="filterChanged()"> |
| 138 <option></option> |
| 139 <option jsselect="cpus" jscontent="$this[0]" |
| 140 jsvalues=".value:$this[1]"></option> |
| 141 </select> |
| 142 </td> |
| 143 </tr> |
| 144 </table> |
| 145 </div> |
| 146 </div> |
| 147 |
| 148 <div id='chart_div' style='width: 700px; height: 240px;'></div> |
| 149 |
| 150 <div id="data_template"> |
| 151 <form method="GET" action="/do_compare_set"> |
| 152 <table class="sortable"> |
| 153 <tr> |
| 154 <th>Date</th> |
| 155 <th>Machine</th> |
| 156 <th>CPU</th> |
| 157 <th>Network</th> |
| 158 <th>URLs</th> |
| 159 <th>Iterations</th> |
| 160 <th>Start</th> |
| 161 <th>DNS</th> |
| 162 <th>Connect</th> |
| 163 <th>First Byte</th> |
| 164 <th>Last Byte</th> |
| 165 <th>Paint</th> |
| 166 <th>Interactive</th> |
| 167 <th>DCL</th> |
| 168 <th>Load</th> |
| 169 <th><a href="#" onclick="document.forms[0].submit(); return false;">Comp
are</a></th> |
| 170 </tr> |
| 171 <tr jsselect="results"> |
| 172 <td><span jseval="$val = '/do_view_set?id=' + key"></span><a jsvalues="h
ref:$val" jscontent="date"></a></td> |
| 173 <td jscontent="client_hostname.split('.')[0] + (notes ? ' ' + notes : ''
)"></td> |
| 174 <td jscontent="cpus_map[cpu]"></td> |
| 175 <td jscontent="networks_map[network]"></td> |
| 176 <td class="righttext" jscontent="url_count"></td> |
| 177 <td class="righttext" jscontent="iterations"></td> |
| 178 <td class="righttext" jscontent="start_load_time"></td> |
| 179 <td class="righttext" jscontent="dns_time"></td> |
| 180 <td class="righttext" jscontent="connect_time"></td> |
| 181 <td class="righttext" jscontent="first_byte_time"></td> |
| 182 <td class="righttext" jscontent="last_byte_time"></td> |
| 183 <td class="righttext" jscontent="paint_time"></td> |
| 184 <td class="righttext" jscontent="doc_load_time"></td> |
| 185 <td class="righttext" jscontent="dcl_time"></td> |
| 186 <td class="righttext" jscontent="total_time"></td> |
| 187 <td class="righttext"><input type="checkbox" name="id" jsvalues="value:k
ey"></td> |
| 188 </table> |
| 189 </form> |
| 190 </div> |
| 191 <div id="footer"> |
| 192 ©2011 Google - <a href="http://code.google.com/p/web-page-replay/wiki
/ChromeBenchmarkMetrics">Metric definitions</a> | <a href="http://code.google.co
m/p/web-page-replay/wiki/ChromeBenchmark">Running the benchmark</a><br> |
| 193 Powered by <a href="http://code.google.com/p/web-page-replay/">Web Page Re
play</a> |
| 194 </div> |
| 195 </body> |
| 196 </html> |
| OLD | NEW |