Make tables on the new flakiness dashboard sortable

https://bugs.webkit.org/show_bug.cgi?id=123141

Reviewed by Simon Fraser.

Use jquery.tablesorter.js to make test and builder tables sortable. The jquery plugin is already used by run-perf-tests.

* index.html:
(TestResultsView._populateTestPane): Add tablesorter to the class name and wrap tr's inside a tbody so that tablesorter
could sort them.
(TestResultsView._populateBuilderPane): Ditto.
* main.css:
(.resultsTable thead): Use cursor: pointer to signify the fact it's clickable.
(.resultsTable th): Don't repeat arrows.
(.resultsTable th.headerSortUp): Inline SVG up arrow.
(.resultsTable th.headerSortDown): Inline SVG down arrow.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@157832 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/test-results/ChangeLog b/Websites/test-results/ChangeLog
index d45a8b2..c90c013 100644 (file)
--- a/Websites/test-results/ChangeLog
+++ b/Websites/test-results/ChangeLog
@@ -1,3 +1,22 @@
+2013-10-22  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Make tables on the new flakiness dashboard sortable
+        https://bugs.webkit.org/show_bug.cgi?id=123141
+
+        Reviewed by Simon Fraser.
+
+        Use jquery.tablesorter.js to make test and builder tables sortable. The jquery plugin is already used by run-perf-tests.
+
+        * index.html:
+        (TestResultsView._populateTestPane): Add tablesorter to the class name and wrap tr's inside a tbody so that tablesorter
+        could sort them.
+        (TestResultsView._populateBuilderPane): Ditto.
+        * main.css:
+        (.resultsTable thead): Use cursor: pointer to signify the fact it's clickable.
+        (.resultsTable th): Don't repeat arrows.
+        (.resultsTable th.headerSortUp): Inline SVG up arrow.
+        (.resultsTable th.headerSortDown): Inline SVG down arrow.
+
 2013-10-21  Ryosuke Niwa  <rniwa@webkit.org>
 
         New flakiness dashboard should hyperlink test names, WebKit revisions, and bubbles

diff --git a/Websites/test-results/index.html b/Websites/test-results/index.html
index d14c8f8..d41c7ec 100644 (file)
--- a/Websites/test-results/index.html
+++ b/Websites/test-results/index.html
@@ -4,6 +4,8 @@
 <title>WebKit Test Results</title>
 <link rel="stylesheet" href="common.css">
 <link rel="stylesheet" href="main.css">
+<script src="https://svn.webkit.org/repository/webkit/!svn/bc/128779/trunk/PerformanceTests/Dromaeo/resources/dromaeo/web/lib/jquery-1.6.4.js"></script>
+<script src="https://svn.webkit.org/repository/webkit/!svn/bc/128779/trunk/PerformanceTests/resources/jquery.tablesorter.min.js"></script>
 <script src="js/autocompleter.js"></script>
 <script src="js/build.js"></script>
 <script src="js/dom.js"></script>
@@ -151,7 +153,7 @@ TestResultsView._createResultCell = function (master, builder, result, previousR
 
 TestResultsView._populateTestPane = function(testName, results, section) {
     var test = {name: testName, category: 'LayoutTest'}; // FIXME: Use the real test object.
-    var table = element('table', {'class': 'resultsTable'}, [element('caption', [this._linkifiedTestName(test)])]);
+    var table = element('table', {'class': 'resultsTable tablesorter'}, [element('caption', [this._linkifiedTestName(test)])]);
     table.appendChild(this._createTestResultHeader('Builder'));
 
     var resultsByBuilder = results['builders'];
@@ -167,12 +169,15 @@ TestResultsView._populateTestPane = function(testName, results, section) {
     }
     buildTimes.sort(function (a, b) { return b - a; });
 
+    var tbody = element('tbody');
     for (var builderId in resultsByBuilder) {
         var builder = this._builders[builderId];
         // FIXME: Add a master name if there is more than one.
-        table.appendChild(this._createTestResultRow(builder.name, resultsByBuilder[builderId], builder, buildTimes));
+        tbody.appendChild(this._createTestResultRow(builder.name, resultsByBuilder[builderId], builder, buildTimes));
     }
+    table.appendChild(tbody);
     section.appendChild(table);
+    $(table).tablesorter();
 }
 
 TestResultsView._linkifiedTestName = function (test) {
@@ -328,7 +333,7 @@ TestResultsView._matchesFailureType = function (results, failureType, tn) {
 }
 
 TestResultsView._populateBuilderPane = function(builderName, failureType, results, section) {
-    var table = element('table', {'class': 'resultsTable'}, [element('caption', [builderName])]);
+    var table = element('table', {'class': 'resultsTable tablesorter'}, [element('caption', [builderName])]);
     var resultsByBuilder = results['builders'];
     var resultsByTests;
     var builderId;
@@ -341,15 +346,20 @@ TestResultsView._populateBuilderPane = function(builderName, failureType, result
 
     table.appendChild(this._createTestResultHeader('Test'));
 
+    var tbody = element('tbody');
     var builder = this._builders[builderId];
     for (var testId in resultsByTests) {
         var results = resultsByTests[testId];
         if (!results.length || !this._matchesFailureType(results, failureType, this._availableTests[testId].name))
             continue;
         this._createBuildsAndComputeSlownessOfResults(builderId, resultsByTests[testId]);
-        table.appendChild(this._createTestResultRow(this._linkifiedTestName(this._availableTests[testId]), resultsByTests[testId], builder));
+        tbody.appendChild(this._createTestResultRow(this._linkifiedTestName(this._availableTests[testId]), resultsByTests[testId], builder));
     }
+
+    table.appendChild(tbody);
     section.appendChild(table);
+
+    $(table).tablesorter(); 
 }
 
 TestResultsView.fetchFailingTestsForBuilder = function (builderName, numberOfDays, failureType, doNotUpdateHash) {

diff --git a/Websites/test-results/main.css b/Websites/test-results/main.css
index cede3bf..c2b3a91 100644 (file)
--- a/Websites/test-results/main.css
+++ b/Websites/test-results/main.css
@@ -77,8 +77,24 @@
     vertical-align: bottom;
 }
 
-.resultsTable tr:hover,
-.resultsTable tr:hover {
+.resultsTable thead {
+    cursor: pointer;
+}
+
+.resultsTable th {
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+}
+
+.resultsTable th.headerSortUp {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><polygon points='0,0 8,0 4,6' fill='#999'/></svg>");
+}
+
+.resultsTable th.headerSortDown {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><polygon points='0,6 8,6 4,0' fill='#999'/></svg>");
+}
+
+.resultsTable tbody tr:hover {
     background-color: #eee;
 }