From 60df77313d279b9c3863c9fe81e56a1865dde650 Mon Sep 17 00:00:00 2001 From: "rniwa@webkit.org" Date: Wed, 23 Oct 2013 00:08:57 +0000 Subject: [PATCH] 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 --- Websites/test-results/ChangeLog | 19 +++++++++++++++++++ Websites/test-results/index.html | 18 ++++++++++++++---- Websites/test-results/main.css | 20 ++++++++++++++++++-- 3 files changed, 51 insertions(+), 6 deletions(-) diff --git a/Websites/test-results/ChangeLog b/Websites/test-results/ChangeLog index d45a8b2..c90c013 100644 --- a/Websites/test-results/ChangeLog +++ b/Websites/test-results/ChangeLog @@ -1,3 +1,22 @@ +2013-10-22 Ryosuke Niwa + + 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 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 --- a/Websites/test-results/index.html +++ b/Websites/test-results/index.html @@ -4,6 +4,8 @@ WebKit Test Results + + @@ -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 --- 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,"); +} + +.resultsTable th.headerSortDown { + background-image: url("data:image/svg+xml;utf8,"); +} + +.resultsTable tbody tr:hover { background-color: #eee; } -- 1.8.3.1