* [PATCH 1/2] toaster: reset table to default orderby when orderby column is hidden
2016-07-22 8:58 [PATCH 0/2] Revert to default table sort when sort column is hidden Elliot Smith
@ 2016-07-22 8:58 ` Elliot Smith
2016-07-22 8:58 ` [PATCH 2/2] toaster-tests: add tests for reverting to default sort Elliot Smith
2016-07-27 10:46 ` [PATCH 0/2] Revert to default table sort when sort column is hidden Barros Pena, Belen
2 siblings, 0 replies; 4+ messages in thread
From: Elliot Smith @ 2016-07-22 8:58 UTC (permalink / raw)
To: toaster
When a ToasterTable is sorted by a column, and that column is
hidden from view, the sort doesn't revert to the default for the
table.
Modify the JS responsible for reloading the table data so that
it doesn't rely on clicking a table column heading (as this is
inflexible and error-prone). Instead, use a function to apply
the sort to the table; and call that function when column
headings are clicked.
This means that the ordering can be changed programmatically
to a specified default ordering when a column is hidden, without
having to click on a column heading.
Use this function when the current sort column is hidden, to
apply the default sort for the table.
[YOCTO #9836]
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
---
bitbake/lib/toaster/toastergui/static/js/table.js | 78 +++++++++++++++++------
1 file changed, 60 insertions(+), 18 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js b/bitbake/lib/toaster/toastergui/static/js/table.js
index 7b55102..176ce57 100644
--- a/bitbake/lib/toaster/toastergui/static/js/table.js
+++ b/bitbake/lib/toaster/toastergui/static/js/table.js
@@ -15,6 +15,7 @@ function tableInit(ctx){
orderby : null,
filter : null,
search : null,
+ default_orderby: null,
};
var defaultHiddenCols = [];
@@ -192,6 +193,8 @@ function tableInit(ctx){
tableHeadRow.html("");
editColMenu.html("");
+ tableParams.default_orderby = tableData.default_orderby;
+
if (!tableParams.orderby && tableData.default_orderby){
tableParams.orderby = tableData.default_orderby;
}
@@ -217,6 +220,7 @@ function tableInit(ctx){
var title = $('<a href=\"#\" ></a>');
title.data('field-name', col.field_name);
+ title.attr('data-sort-field', col.field_name);
title.text(col.title);
title.click(sortColumnClicked);
@@ -344,31 +348,67 @@ function tableInit(ctx){
}
}
- function sortColumnClicked(e){
- e.preventDefault();
+ /* Apply an ordering to the current table.
+ *
+ * 1. Find the column heading matching the sortSpecifier
+ * 2. Set its up/down arrow and add .sorted
+ *
+ * orderby: e.g. "-started_on", "completed_on"
+ * colHeading: column heading element to activate (by showing the caret
+ * up/down, depending on sort order); if not set, the correct column
+ * heading is selected from the DOM using orderby as a key
+ */
+ function applyOrderby(orderby, colHeading) {
+ if (!orderby) {
+ return;
+ }
- /* We only have one sort at a time so remove any existing sort indicators */
- $("#"+ctx.tableName+" th .icon-caret-down").hide();
- $("#"+ctx.tableName+" th .icon-caret-up").hide();
- $("#"+ctx.tableName+" th a").removeClass("sorted");
+ // We only have one sort at a time so remove existing sort indicators
+ $("#" + ctx.tableName + " th .icon-caret-down").hide();
+ $("#" + ctx.tableName + " th .icon-caret-up").hide();
+ $("#" + ctx.tableName + " th a").removeClass("sorted");
- var fieldName = $(this).data('field-name');
+ // normalise the orderby so we can use it to find the link we want
+ // to style
+ var fieldName = orderby;
+ if (fieldName.indexOf('-') === 0) {
+ fieldName = fieldName.slice(1);
+ }
- /* if we're already sorted sort the other way */
- if (tableParams.orderby === fieldName &&
- tableParams.orderby.indexOf('-') === -1) {
- tableParams.orderby = '-' + $(this).data('field-name');
- $(this).parent().children('.icon-caret-up').show();
- } else {
- tableParams.orderby = $(this).data('field-name');
- $(this).parent().children('.icon-caret-down').show();
+ // find the table header element which corresponds to the sort field
+ // (if we don't already have it)
+ if (!colHeading) {
+ colHeading = $('[data-sort-field="' + fieldName + '"]');
}
- $(this).addClass("sorted");
+ colHeading.addClass("sorted");
+
+ var parent = colHeading.parent();
+ if (orderby.indexOf('-') === 0) {
+ parent.children('.icon-caret-up').show();
+ }
+ else {
+ parent.children('.icon-caret-down').show();
+ }
+
+ tableParams.orderby = orderby;
loadData(tableParams);
}
+ function sortColumnClicked(e){
+ e.preventDefault();
+
+ /* if we're already sorted sort the other way */
+ var orderby = $(this).data('field-name');
+ if (tableParams.orderby === orderby &&
+ tableParams.orderby.indexOf('-') === -1) {
+ orderby = '-' + orderby;
+ }
+
+ applyOrderby(orderby, $(this));
+ }
+
function pageButtonClicked(e) {
tableParams.page = Number($(this).text());
loadData(tableParams);
@@ -385,11 +425,13 @@ function tableInit(ctx){
table.find("."+col).show();
} else {
table.find("."+col).hide();
- /* If we're ordered by the column we're hiding remove the order by */
+ // If we're ordered by the column we're hiding remove the order by
+ // and apply the default one instead
if (col === tableParams.orderby ||
'-' + col === tableParams.orderby){
tableParams.orderby = null;
- $("#"+ctx.tableName +" .default-orderby").click();
+
+ applyOrderby(tableParams.default_orderby);
}
}
--
2.7.4
^ permalink raw reply related [flat|nested] 4+ messages in thread* [PATCH 2/2] toaster-tests: add tests for reverting to default sort
2016-07-22 8:58 [PATCH 0/2] Revert to default table sort when sort column is hidden Elliot Smith
2016-07-22 8:58 ` [PATCH 1/2] toaster: reset table to default orderby when orderby " Elliot Smith
@ 2016-07-22 8:58 ` Elliot Smith
2016-07-27 10:46 ` [PATCH 0/2] Revert to default table sort when sort column is hidden Barros Pena, Belen
2 siblings, 0 replies; 4+ messages in thread
From: Elliot Smith @ 2016-07-22 8:58 UTC (permalink / raw)
To: toaster
Add tests for ToasterTable UI table sort reverting, which can
only be exercised via the browser.
Check that if a table is sorted by a column, and that column
is hidden, then the sort reverts to the default for the table.
[YOCTO #9836]
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
---
.../toaster/tests/browser/test_toastertable_ui.py | 160 +++++++++++++++++++++
1 file changed, 160 insertions(+)
create mode 100644 bitbake/lib/toaster/tests/browser/test_toastertable_ui.py
diff --git a/bitbake/lib/toaster/tests/browser/test_toastertable_ui.py b/bitbake/lib/toaster/tests/browser/test_toastertable_ui.py
new file mode 100644
index 0000000..53ddf30
--- /dev/null
+++ b/bitbake/lib/toaster/tests/browser/test_toastertable_ui.py
@@ -0,0 +1,160 @@
+#! /usr/bin/env python
+# ex:ts=4:sw=4:sts=4:et
+# -*- tab-width: 4; c-basic-offset: 4; indent-tabs-mode: nil -*-
+#
+# BitBake Toaster Implementation
+#
+# Copyright (C) 2013-2016 Intel Corporation
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License version 2 as
+# published by the Free Software Foundation.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along
+# with this program; if not, write to the Free Software Foundation, Inc.,
+# 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+from datetime import datetime
+
+from django.core.urlresolvers import reverse
+from django.utils import timezone
+from tests.browser.selenium_helpers import SeleniumTestCase
+from orm.models import BitbakeVersion, Release, Project, Build
+
+class TestToasterTableUI(SeleniumTestCase):
+ """
+ Tests for the UI elements of ToasterTable (sorting etc.);
+ note that the tests cover generic functionality of ToasterTable which
+ manifests as UI elements in the browser, and can only be tested via
+ Selenium.
+ """
+
+ def setUp(self):
+ pass
+
+ def _get_orderby_heading(self, table):
+ """
+ Get the current order by finding the column heading in <table> with
+ the sorted class on it.
+
+ table: WebElement for a ToasterTable
+ """
+ selector = 'thead a.sorted'
+ heading = table.find_element_by_css_selector(selector)
+ return heading.get_attribute('innerHTML').strip()
+
+ def _get_datetime_from_cell(self, row, selector):
+ """
+ Return the value in the cell selected by <selector> on <row> as a
+ datetime.
+
+ row: <tr> WebElement for a row in the ToasterTable
+ selector: CSS selector to use to find the cell containing the date time
+ string
+ """
+ cell = row.find_element_by_css_selector(selector)
+ cell_text = cell.get_attribute('innerHTML').strip()
+ return datetime.strptime(cell_text, '%d/%m/%y %H:%M')
+
+ def test_revert_orderby(self):
+ """
+ Test that sort order for a table reverts to the default sort order
+ if the current sort column is hidden.
+ """
+ now = timezone.now()
+ later = now + timezone.timedelta(hours=1)
+ even_later = later + timezone.timedelta(hours=1)
+
+ bbv = BitbakeVersion.objects.create(name='test bbv', giturl='/tmp/',
+ branch='master', dirpath='')
+ release = Release.objects.create(name='test release',
+ branch_name='master',
+ bitbake_version=bbv)
+
+ project = Project.objects.create_project('project', release)
+
+ # set up two builds which will order differently when sorted by
+ # started_on or completed_on
+
+ # started first, finished last
+ build1 = Build.objects.create(project=project,
+ started_on=now,
+ completed_on=even_later,
+ outcome=Build.SUCCEEDED)
+
+ # started second, finished first
+ build2 = Build.objects.create(project=project,
+ started_on=later,
+ completed_on=later,
+ outcome=Build.SUCCEEDED)
+
+ url = reverse('all-builds')
+ self.get(url)
+ table = self.wait_until_visible('#allbuildstable')
+
+ # check ordering (default is by -completed_on); so build1 should be
+ # first as it finished last
+ active_heading = self._get_orderby_heading(table)
+ self.assertEqual(active_heading, 'Completed on',
+ 'table should be sorted by "Completed on" by default')
+
+ row_selector = '#allbuildstable tbody tr'
+ cell_selector = 'td.completed_on'
+
+ rows = self.find_all(row_selector)
+ row1_completed_on = self._get_datetime_from_cell(rows[0], cell_selector)
+ row2_completed_on = self._get_datetime_from_cell(rows[1], cell_selector)
+ self.assertTrue(row1_completed_on > row2_completed_on,
+ 'table should be sorted by -completed_on')
+
+ # turn on started_on column
+ self.click('#edit-columns-button')
+ self.click('#checkbox-started_on')
+
+ # sort by started_on column
+ links = table.find_elements_by_css_selector('th.started_on a')
+ for link in links:
+ if link.get_attribute('innerHTML').strip() == 'Started on':
+ link.click()
+ break
+
+ # wait for table data to reload in response to new sort
+ self.wait_until_visible('#allbuildstable')
+
+ # check ordering; build1 should be first
+ active_heading = self._get_orderby_heading(table)
+ self.assertEqual(active_heading, 'Started on',
+ 'table should be sorted by "Started on"')
+
+ cell_selector = 'td.started_on'
+
+ rows = self.find_all(row_selector)
+ row1_started_on = self._get_datetime_from_cell(rows[0], cell_selector)
+ row2_started_on = self._get_datetime_from_cell(rows[1], cell_selector)
+ self.assertTrue(row1_started_on < row2_started_on,
+ 'table should be sorted by started_on')
+
+ # turn off started_on column
+ self.click('#edit-columns-button')
+ self.click('#checkbox-started_on')
+
+ # wait for table data to reload in response to new sort
+ self.wait_until_visible('#allbuildstable')
+
+ # check ordering (should revert to completed_on); build2 should be first
+ active_heading = self._get_orderby_heading(table)
+ self.assertEqual(active_heading, 'Completed on',
+ 'table should be sorted by "Completed on" after hiding sort column')
+
+ cell_selector = 'td.completed_on'
+
+ rows = self.find_all(row_selector)
+ row1_completed_on = self._get_datetime_from_cell(rows[0], cell_selector)
+ row2_completed_on = self._get_datetime_from_cell(rows[1], cell_selector)
+ self.assertTrue(row1_completed_on > row2_completed_on,
+ 'table should be sorted by -completed_on')
--
2.7.4
^ permalink raw reply related [flat|nested] 4+ messages in thread