Clicking on a test name on the new flakiness dashboard should add a new test pane

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

Reviewed by Simon Fraser.

Added a new click handler on each test name inside the builder test view add a new test pane.
Moved the old trac link to a right-arrow inline SVG icon.

Also tweaked the style so that the builder test view looks different from other test panes.

* index.html:
(TestResultsView._urlFromTest): Extracted from TestResultsView._linkifiedTestName.
(TestResultsView._populateBuilderPane): Fetch the test when its name is clicked.
Added a circled right arrow for the old trac link.
* main.css: Tweaked the style to move the rounded border around the builder test view to be
around the form controls to clearly differentiate it from a regular test pane.

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

diff --git a/Websites/test-results/ChangeLog b/Websites/test-results/ChangeLog
index 179baffa0c23f3ad708b0e98d9d9a2d1803e80c4..8c41c1c5f9ca089de562e76fdb1a16f46099f36b 100644 (file)
--- a/Websites/test-results/ChangeLog
+++ b/Websites/test-results/ChangeLog
@@ -1,3 +1,22 @@
+2013-10-23  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Clicking on a test name on the new flakiness dashboard should add a new test pane
+        https://bugs.webkit.org/show_bug.cgi?id=123194
+
+        Reviewed by Simon Fraser.
+
+        Added a new click handler on each test name inside the builder test view add a new test pane.
+        Moved the old trac link to a right-arrow inline SVG icon.
+
+        Also tweaked the style so that the builder test view looks different from other test panes.
+
+        * index.html:
+        (TestResultsView._urlFromTest): Extracted from TestResultsView._linkifiedTestName.
+        (TestResultsView._populateBuilderPane): Fetch the test when its name is clicked.
+        Added a circled right arrow for the old trac link.
+        * main.css: Tweaked the style to move the rounded border around the builder test view to be
+        around the form controls to clearly differentiate it from a regular test pane.
+

 2013-10-22  Ryosuke Niwa  <rniwa@webkit.org>
 
         New flakiness dashboard's test pane should show the latest WebKit revision for each builder
 2013-10-22  Ryosuke Niwa  <rniwa@webkit.org>
 
         New flakiness dashboard's test pane should show the latest WebKit revision for each builder

diff --git a/Websites/test-results/index.html b/Websites/test-results/index.html
index d38182150361cd03a432f133a48709a002550bc2..01dd94cb41b038fc9205c274ae26f0f6b2b3ccba 100644 (file)
--- a/Websites/test-results/index.html
+++ b/Websites/test-results/index.html
@@ -26,6 +26,7 @@
     placeholder="Type in a test name, or copy and paste test names on results.html or NRWT stdout (including junks)"></form>
 <div id="testView"></div>
 
     placeholder="Type in a test name, or copy and paste test names on results.html or NRWT stdout (including junks)"></form>
 <div id="testView"></div>
 

+<div id="buildersView">

 <form>
 Show
 <label>tests <select id="builderFailureTypeView"><option>failing</option><option>flaky</option><option value="wrongexpectations">has wrong expectations</option></select></label>
 <form>
 Show
 <label>tests <select id="builderFailureTypeView"><option>failing</option><option>flaky</option><option value="wrongexpectations">has wrong expectations</option></select></label>


@@ -33,6 +34,7 @@ Show
 <label for="builderDaysView">in the last <select id="builderDaysView"><option>5</option><option>15</option><option>30</option></select> days</label>
 </form>
 <div id="builderFailingTestsView"></div>
 <label for="builderDaysView">in the last <select id="builderDaysView"><option>5</option><option>15</option><option>30</option></select> days</label>
 </form>
 <div id="builderFailingTestsView"></div>

+</div>

 
 <div id="tooltipContainer"></div>
 
 
 <div id="tooltipContainer"></div>
 


@@ -185,12 +187,16 @@ TestResultsView._populateTestPane = function(testName, results, section) {
     $(table).tablesorter();
 }
 
     $(table).tablesorter();
 }
 

-TestResultsView._linkifiedTestName = function (test) {
+TestResultsView._urlFromTest = function (test) {

     var category = this._testCategories[test.category];
     if (!category)
     var category = this._testCategories[test.category];
     if (!category)

-        return test.name;
+        return null;
+    return category.url.replace(/\$testName/g, test.name);
+}

 
 

-    return element('a', {'href': category.url.replace(/\$testName/g, test.name)}, [test.name]);
+TestResultsView._linkifiedTestName = function (test) {
+    var url = this._urlFromTest(test);
+    return url ? element('a', {'href': url}, [test.name]) : test.name;

 }
 
 TestResultsView._createTestResultHeader = function (labelForFirstColumn, repositories) {
 }
 
 TestResultsView._createTestResultHeader = function (labelForFirstColumn, repositories) {


@@ -332,6 +338,7 @@ TestResultsView.fetchTests = function (testNames, doNotUpdateHash) {
 }
 
 TestResultsView._matchesFailureType = function (results, failureType, tn) {
 }
 
 TestResultsView._matchesFailureType = function (results, failureType, tn) {

+    return true;

     if (!results.length)
         return false;
     var latestActualResult = results[0].actual;
     if (!results.length)
         return false;
     var latestActualResult = results[0].actual;


@@ -378,12 +385,21 @@ TestResultsView._populateBuilderPane = function(builderName, failureType, result
 
     var tbody = element('tbody');
     var builder = this._builders[builderId];
 
     var tbody = element('tbody');
     var builder = this._builders[builderId];

+    var self = this;

     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]);
     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]);

-        tbody.appendChild(this._createTestResultRow(this._linkifiedTestName(this._availableTests[testId]), resultsByTests[testId], builder));
+        var test = this._availableTests[testId];
+        var externalTestLink = element('a', {'class': 'externalTestLink', 'href': this._urlFromTest(test)});
+        var testName = element('a', {'href':'#'}, [test.name]);
+        testName.onclick = function (event) {
+            self.fetchTests([this.textContent]);
+            event.preventDefault();
+            return false;
+        }
+        tbody.appendChild(this._createTestResultRow(element('span', [testName, externalTestLink]), resultsByTests[testId], builder));

     }
 
     table.appendChild(tbody);
     }
 
     table.appendChild(tbody);


@@ -401,7 +417,7 @@ TestResultsView.fetchFailingTestsForBuilder = function (builderName, numberOfDay
 
     var self = this;
     var xhr = new XMLHttpRequest();
 
     var self = this;
     var xhr = new XMLHttpRequest();

-    xhr.open("GET", 'api/failing-tests.php?builder=' + escape(builderName) + '&days=' + numberOfDays, true);  
+    xhr.open("GET", 'api/failing-tests.php?builder=' + escape(builderName) + '&days=' + numberOfDays + '&failureType=' + failureType, true);  

     xhr.onload = function(event) {
         var response = JSON.parse(xhr.response);
         section.innerHTML = '';
     xhr.onload = function(event) {
         var response = JSON.parse(xhr.response);
         section.innerHTML = '';


@@ -420,9 +436,9 @@ TestResultsView.fetchFailingTestsForBuilder = function (builderName, numberOfDay
     xhr.send();
 }
 
     xhr.send();
 }
 

-TestResultsView.updateLocationHash = function () {
+TestResultsView._createLocationHash = function (tests) {

     var params = {
     var params = {

-        'tests': this._tests.join(','),
+        'tests': tests.join(','),

         'builder': this._currentBuilder,
         'builderFailureType': this._currentBuilderFailureType,
         'builderDays': this._currentBuilderDays,
         'builder': this._currentBuilder,
         'builderFailureType': this._currentBuilderFailureType,
         'builderDays': this._currentBuilderDays,


@@ -434,7 +450,11 @@ TestResultsView.updateLocationHash = function () {
             continue;
         hash += '&' + decodeURIComponent(key) + '=' + decodeURIComponent(value);
     }
             continue;
         hash += '&' + decodeURIComponent(key) + '=' + decodeURIComponent(value);
     }

-    location.hash = hash;
+    return hash;
+}
+
+TestResultsView.updateLocationHash = function () {
+    location.hash = this._createLocationHash(this._tests);

     this._oldHash = location.hash;
 }
 
     this._oldHash = location.hash;
 }
 

diff --git a/Websites/test-results/main.css b/Websites/test-results/main.css
index c2b3a9172785384a9b8cc42489347ba9d6f6f3cf..42a4165e2e9e3e1a208bac4b265834ac56c8cc65 100644 (file)
--- a/Websites/test-results/main.css
+++ b/Websites/test-results/main.css
@@ -15,10 +15,23 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 5px;

-    margin: 10px 0px;
+    margin: 1em 0px;

     position: relative;
 }
 
     position: relative;
 }
 

+#buildersView {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 2em 0 1em 0;
+}
+
+#buildersView .testResults {
+    border: none;
+    margin: 1em 0 0 0;
+    padding: 0;
+}
+

 .closeButton {
     position: absolute;
     right: 5px;
 .closeButton {
     position: absolute;
     right: 5px;


@@ -98,17 +111,26 @@
     background-color: #eee;
 }
 
     background-color: #eee;
 }
 

+.resultsTable .externalTestLink {
+    margin-left: 0.5em;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='10' cy='8' r='5' fill='transparent' stroke='#999'></circle><polygon points='8,5 13,8 8,11' fill='#999'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right center;
+}
+

 .resultsTable a {
     color: #00f;
     text-shadow: none;
 .resultsTable a {
     color: #00f;
     text-shadow: none;

-    text-decoration: underline;

 }
 
 .resultsTable a:visited {
     color: #006;
 }
 
 }
 
 .resultsTable a:visited {
     color: #006;
 }
 

-.resultsTable span a {
+.resultsTable .resultCell a {

     display: block;
     width: 1.5em;
     height: 2.5em;
     display: block;
     width: 1.5em;
     height: 2.5em;