[gold] Use sort-sk on list-page-sk
We don't put the sort order/direction in the query params
because that would take a bit of refactoring of sort-sk
to support that (more than I want to do right now).
Bug: skia:9525
Change-Id: I5332f5f344613400548664077377ab33ac07bbdf
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/300180
Reviewed-by: Leandro Lovisolo <lovisolo@google.com>
diff --git a/golden/modules/list-page-sk/list-page-sk.js b/golden/modules/list-page-sk/list-page-sk.js
index 4dbe981..7d8e578 100644
--- a/golden/modules/list-page-sk/list-page-sk.js
+++ b/golden/modules/list-page-sk/list-page-sk.js
@@ -16,6 +16,7 @@
import { sendBeginTask, sendEndTask, sendFetchError } from '../common';
import { defaultCorpus } from '../settings';
+import '../../../infra-sk/modules/sort-sk';
import 'elements-sk/icon/group-work-icon-sk';
import 'elements-sk/icon/tune-icon-sk';
import 'elements-sk/checkbox-sk';
@@ -40,22 +41,24 @@
</div>
</div>
-<table>
- <!-- TODO(kjlubick) make these sortable -->
- <thead>
- <tr>
- <th>Test name</th>
- <th>Positive</th>
- <th>Negative</th>
- <th>Untriaged</th>
- <th>Total</th>
- <th>Cluster View</th>
- </tr>
- </thead>
- <tbody>
- ${ele._byTestCounts.map((row) => testRow(row, ele))}
- </tbody>
-</table>
+<!-- lit-html (or maybe html in general) doesn't like sort-sk to go inside the table.-->
+<sort-sk id=sort_table target=rows>
+ <table>
+ <thead>
+ <tr>
+ <th data-key=name data-default=up data-sort-type=alpha>Test name</th>
+ <th data-key=positive>Positive</th>
+ <th data-key=negative>Negative</th>
+ <th data-key=untriaged>Untriaged</th>
+ <th data-key=total>Total</th>
+ <th>Cluster View</th>
+ </tr>
+ </thead>
+ <tbody id=rows>
+ ${ele._byTestCounts.map((row) => testRow(row, ele))}
+ </tbody>
+ </table>
+</sort-sk>
<query-dialog-sk @edit=${ele._currentQueryChanged}></query-dialog-sk>
`;
@@ -67,7 +70,12 @@
+ `&head=${ele._showAllDigests ? 'false' : 'true'}`
+ `&include=${ele._disregardIgnoreRules ? 'true' : 'false'}`;
- return html`<tr>
+ return html`
+<tr data-name=${row.name}
+ data-positive=${row.positive_digests}
+ data-negative=${row.negative_digests}
+ data-untriaged=${row.untriaged_digests}
+ data-total=${row.total_digests}>
<td>
<a href="/search?${searchParams}" target=_blank rel=noopener>
${row.name}
@@ -76,7 +84,7 @@
<td class=center>${row.positive_digests}</td>
<td class=center>${row.negative_digests}</td>
<td class=center>${row.untriaged_digests}</td>
- <td class=center>${row.positive_digests + row.negative_digests + row.untriaged_digests}</td>
+ <td class=center>${row.total_digests}</td>
<td class=center>
<a href="/cluster?${searchParams}" target=_blank rel=noopener>
<group-work-icon-sk></group-work-icon-sk>
@@ -183,7 +191,12 @@
.then(jsonOrThrow)
.then((jsonList) => {
this._byTestCounts = jsonList;
+ this._byTestCounts.forEach((row) => {
+ row.total_digests = row.positive_digests + row.negative_digests + row.untriaged_digests;
+ });
this._render();
+ // Make sure the data is sorted by the default key in the default direction.
+ $$('#sort_table', this).sort('name', 'up', true);
sendEndTask(this);
})
.catch((e) => sendFetchError(this, e, 'list'));
diff --git a/golden/modules/list-page-sk/list-page-sk_test.js b/golden/modules/list-page-sk/list-page-sk_test.js
index 483e618..5af2dc2 100644
--- a/golden/modules/list-page-sk/list-page-sk_test.js
+++ b/golden/modules/list-page-sk/list-page-sk_test.js
@@ -87,6 +87,23 @@
// Second link should be to cluster view (with a very similar href)
expect(links[1].href).to.contain(`/cluster?${sharedParams}`);
});
+
+ it('updates the sort order by clicking on sort-toggle-sk', async () => {
+ let firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
+ expect($$('td', firstRow).innerText).to.equal('this_is_a_test');
+
+ // After first click, it will be sorting in descending order by number of negatives.
+ clickOnNegativeHeader(listPageSk);
+
+ firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
+ expect($$('td', firstRow).innerText).to.equal('this_is_another_test');
+
+ // After second click, it will be sorting in ascending order by number of negatives.
+ clickOnNegativeHeader(listPageSk);
+
+ firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
+ expect($$('td', firstRow).innerText).to.equal('this_is_a_test');
+ });
}); // end describe('html layout')
describe('RPC calls', () => {
@@ -150,3 +167,7 @@
null, '', window.location.origin + window.location.pathname + q,
);
}
+
+function clickOnNegativeHeader(ele) {
+ $$('table > thead > tr > th:nth-child(3)', ele).click();
+}
