src/third_party/WebKit/LayoutTests/fast/harness/archived-results-dashboard.html

   1 <!DOCTYPE html>
   2 <style>
   3
   4 html {
   5     height: 100%;
   6 }
   7
   8 body {
   9     margin: 1.0em;
  10     font-family: Helvetica, sans-serif;
  11     font-size: 11pt;
  12     display: -webkit-flex;
  13     -webkit-flex-direction: column;
  14     height: 100%;
  15 }
  16
  17 body > * {
  18     margin-left: 4px;
  19     margin-top: 4px;
  20 }
  21
  22 h1 {
  23     font-size: 150%;
  24     margin-top: 1.5em;
  25     text-align: center;
  26 }
  27
  28 a {
  29     text-decoration: none;
  30 }
  31
  32 table {
  33     position: relative;
  34     top: 100px;
  35 }
  36
  37 th {
  38     background: rgb(200, 200, 200);
  39     border-radius: 5px;
  40 }
  41
  42 td {
  43     padding: 1px 4px;
  44     vertical-align: middle;
  45     min-width: 20px;
  46     height: 25px;
  47     border: 1px solid rgb(200, 200, 200);
  48     border-radius: 5px;
  49 }
  50
  51 input[type=text] {
  52     border: 2px solid rgb(128, 128, 128);
  53     font-size: 120%;
  54     height: 30px;
  55     margin-bottom: 1.0em;
  56     margin-top: 1.0em;
  57     margin-left: 1.0em;
  58     padding-left: 0.8em;
  59     width: 500px;
  60 }
  61
  62 input[type=checkbox] {
  63     padding: 0.1em;
  64     width: 20px;
  65     height: 20px;
  66 }
  67
  68 .rerun-button {
  69     background: rgb(66, 184, 221);
  70     border-radius: 5px;
  71     font-size: 120%;
  72     height: 40px;
  73     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  74     width: 150px;
  75 }
  76
  77 .rerun-button:hover {
  78     background: rgb(80, 200, 250);
  79 }
  80
  81 .result-cell, .test-pass, .test-fail, .test-skip, .test-run{
  82     border: 0px;
  83     border-radius: 5px;
  84 }
  85
  86 .test-pass {
  87     background-color: rgb(143, 223, 95);
  88 }
  89
  90 .test-fail {
  91     background-color: rgb(233, 128, 128);
  92 }
  93
  94 .test-skip {
  95     background-color: rgb(255, 255, 255);
  96 }
  97
  98 .test-run {
  99     background-color: rgb(255, 252, 108);
 100 }
 101
 102 .log {
 103     font-family: "Courier New";
 104     display: block;
 105     position: relative;
 106 }
 107
 108 .stdio-href {
 109     color: grey;
 110     font-weight: bold;
 111     text-decoration: underline;
 112 }
 113
 114 .stdio-href:hover {
 115     color:black;
 116 }
 117
 118 .odd-row {
 119     background: rgb(66, 184, 221);
 120 }
 121
 122 .even-row {
 123     background: rgb(200, 200, 200);
 124 }
 125
 126 .toolbox {
 127     display: block;
 128     position: fixed;
 129     padding: 4px;
 130     top: 10px;
 131     right: 10px;
 132     z-index: 9999;
 133 }
 134
 135 .toolbox span {
 136     color: rgb(104, 104, 104);
 137     position: absolute;
 138     text-align: right;
 139     top: 30px;
 140     left: 570px;
 141     width: 100px;
 142 }
 143
 144 </style>
 145 <script>
 146 var g_state;
 147 function globalState()
 148 {
 149     if (!g_state) {
 150         g_state = {
 151             results: {}
 152         }
 153     }
 154     return g_state;
 155 }
 156
 157 function ADD_RESULTS(input)
 158 {
 159     globalState().results = input;
 160 }
 161 </script>
 162 <script src="archived_results.json"></script>
 163 <script>
 164 function processGlobalStateFor(testObject)
 165 {
 166     var table = document.getElementById('results-table');
 167     var row = table.insertRow(-1);
 168     if (table.rows.length % 2 == 0)
 169         row.className = 'even-row';
 170     else
 171         row.className = 'odd-row';
 172     var checkboxcell = row.insertCell(-1);
 173     var checkbox = document.createElement("input");
 174     checkbox.setAttribute('type','checkbox');
 175     checkboxcell.appendChild(checkbox);
 176     var cell = row.insertCell(-1);
 177     cell.innerHTML = testObject.name;
 178     for (var result in testObject.archived_results) {
 179         var res = testObject.archived_results[result];
 180         var cell = row.insertCell(-1);
 181         if( res == 'PASS')
 182             cell.className = 'test-pass';
 183         else if( res == 'SKIP')
 184             cell.className = 'test-skip';
 185         else
 186             cell.className = 'test-fail';
 187         var hrefElement = document.createElement("a");
 188         hrefElement.href = globalState().results.result_links[result];
 189         hrefElement.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';
 190         cell.appendChild(hrefElement);
 191     }
 192
 193
 194 }
 195 function forEachTest(handler, opt_tree, opt_prefix)
 196 {
 197     var tree = opt_tree || globalState().results.tests;
 198     var prefix = opt_prefix || '';
 199
 200     for (var key in tree) {
 201         var newPrefix = prefix ? (prefix + '/' + key) : key;
 202         if ('archived_results' in tree[key]) {
 203             var testObject = tree[key];
 204             testObject.name = newPrefix;
 205             handler(testObject);
 206         } else
 207             forEachTest(handler, tree[key], newPrefix);
 208     }
 209 }
 210 function getTests()
 211 {
 212     var table = document.getElementById('results-table');
 213     var testCount = table.rows.length;
 214     var tests_list = {
 215         tests : []
 216     };
 217     for(var i = 2; i < testCount; i++) {
 218         var selected = table.rows[i].cells[0].getElementsByTagName("input")[0];
 219         if(selected.checked) {
 220             var test = table.rows[i].cells[1].innerHTML;
 221             tests_list.tests.push(test);
 222         }
 223     }
 224     return tests_list;
 225 }
 226 function rerun()
 227 {
 228     var log = document.getElementById('log');
 229     var testList = JSON.stringify(getTests());
 230     var logText = document.createElement('p');
 231     logText.innerHTML = 'Re running the tests';
 232     logText.className = 'test-run';
 233     var stdioIframe = document.createElement("IFRAME");
 234     stdioIframe.style.display = 'none';
 235     stdioIframe.width = window.innerWidth;
 236     stdioIframe.height = '100px';
 237     stdioIframe.onload = function () {
 238             stdioIframe.contentWindow.scrollTo(0,stdioIframe.contentWindow.document.body.scrollHeight);
 239     }
 240     var stdio = document.createElement("a");
 241     stdio.innerHTML = '<p>stdio<p>';
 242     stdio.className = 'stdio-href';
 243     stdio.onclick = function() {
 244         if(stdioIframe.style.display == 'none')
 245             stdioIframe.style.display = 'block';
 246         else
 247             stdioIframe.style.display = 'none';
 248
 249     };
 250     log.appendChild(logText);
 251     log.appendChild(stdio);
 252     log.appendChild(stdioIframe);
 253     if (testList == '')
 254         alert('Please select atlest one Test');
 255     else {
 256         xmlhttp = new XMLHttpRequest();
 257         var url ='http://localhost:9630/';
 258         xmlhttp.open('POST', url, true);
 259         xmlhttp.onerror = function() {
 260             logText.innerHTML = 'Please run the server using "webkit-patch layout-test-server"';
 261             logText.className = 'test-fail';
 262             alert('Server offline');
 263         }
 264         xmlhttp.setRequestHeader("Content-type", "application/json");
 265         xmlhttp.onreadystatechange = function() {
 266             if(xmlhttp.readyState > 0) {
 267                 stdioIframe.srcdoc = xmlhttp.responseText;
 268             }
 269             if(xmlhttp.readyState == 4) {
 270                 logText.innerHTML = 'Tests Re-run done Reloading this page';
 271                 logText.className = 'test-pass';
 272                 location.reload();
 273             }
 274         }
 275         xmlhttp.send(testList);
 276     }
 277 }
 278 function checkalltests()
 279 {
 280     var value = document.getElementById("check_all").checked;
 281     var table = document.getElementById("results-table");
 282     var length = table.rows.length;
 283     for (var i = 2; i < length; i++) {
 284         var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
 285         var disabled = checkbox.disabled;
 286         if(!disabled)
 287             checkbox.checked = value;
 288     }
 289
 290 }
 291
 292 function searchTable(filterExp)
 293 {
 294     var table = document.getElementById('results-table');
 295     var testCount = table.rows.length;
 296     var tests_list = {
 297         tests : []
 298     };
 299     var searchCount = 0;
 300     for(var i = 2; i < testCount; i++) {
 301         var cellContent = table.rows[i].cells[1].innerHTML;
 302         var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
 303         var index = cellContent.search(filterExp);
 304         if (index < 0) {
 305             table.rows[i].style.display = 'none';
 306             checkbox.checked = false;
 307             checkbox.disabled = true;
 308         }
 309         else {
 310             table.rows[i].style.display = '';
 311             checkbox.disabled = false;
 312             searchCount += 1;
 313         }
 314     }
 315     return searchCount;
 316 }
 317 function applyfilter()
 318 {
 319     var filterString = document.getElementById('applyfilter').value;
 320     var searchCount = document.getElementById('searchcount');
 321     var filterExp = new RegExp(filterString, "i");
 322     var count = searchTable(filterExp);
 323     if(filterString == '') {
 324         searchCount.innerHTML = '';
 325         return;
 326     }
 327     var totalCount = document.getElementById('results-table').rows.length - 2;
 328     searchCount.innerHTML = count + '/' + totalCount;
 329 }
 330
 331 function createTableHeader()
 332 {
 333     var count = globalState().results.result_links.length;
 334     var tableHeader= '<table id=results-table><thead><tr>' +
 335         '<th rowspan="2">' +
 336             '<input type="checkbox" name="checkall" id="check_all" onclick="checkalltests()"></input>' +
 337         '</th>' +
 338         '<th rowspan="2" text-align:left;>Tests</th>' +
 339         '<th colspan= '+ count +'>Latest &#8594; Oldest</th> </tr><tr>';
 340     for( var i = 0; i < count; i++)
 341         tableHeader += '<th>'+ (i+1) +'</th>';
 342     tableHeader += '</tr></thead></table>';
 343     document.body.innerHTML += tableHeader;
 344 }
 345
 346 function generatePage()
 347 {
 348     createTableHeader();
 349     forEachTest(processGlobalStateFor);
 350 }
 351
 352 </script>
 353 <!-- To run the tests -->
 354 <script src="resources/archived-results-dashboard-test.js"></script>
 355 <body onload="generatePage()">
 356     <h1>Dashboard</h1>
 357     <div id=log class="log"></div>
 358     <div class="toolbox">
 359         <button onclick=rerun() class="rerun-button">Re Run Tests</button>
 360         <input type="text" id=applyfilter oninput="applyfilter()" placeholder="Search via regular expression"></input>
 361         <span id=searchcount></span>
 362     </div>
 363 </body>
 364 </html>