Sortable columns in UI
------=_Part_4640012_120094896.1399991871152 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 7bit Hey guys, oVirt UI has been missing column sort functionality for quite a while now, but here's some good news. I've just merged patch [1] that adds support for both server-side and client-side sorting of table columns. This patch adds the necessary infra/API; column sorting must be enabled per-column for given table, just like with column resizing. [1] http://gerrit.ovirt.org/#/c/25910/ Currently, only TextColumnWithTooltip (and its subclasses) support sorting, however this can easily be changed in future by having the column class extend SortableColumn. To enable sorting: // Enables server-side sorting via search query // ... SORTBY name ASC|DESC column.makeSortable("name"); // consider using shared constant -or- // Enables client-side sorting using comparator column.makeSortable(comparator); In order for server-side sorting to work properly, corresponding SearchableListModel must apply the search options while executing "Search" query. For example, in DataCenterListModel: @Override public boolean supportsServerSideSorting() { // Default is false return true; } @Override protected void syncSearch() { // Append "SORTBY" clause to search query String search = applySortOptions(getSearchString()); ... } If a model doesn't support server-side sorting, client-side sorting will be used as fall back (assuming a comparator was provided). In general, all main tab list models in WebAdmin utilize "Search" query, so we can enable server-side sorting for columns that exist within main tab tables. As for sub tabs (whose list models generally don't use "Search" query, but also don't support paging at the moment), these can simply use client-side sorting, i.e. reuse existing comparators defined in Linq class. PS: I've attached a screenshot depicting sorted column in action. Regards, Vojtech ------=_Part_4640012_120094896.1399991871152 Content-Type: image/png; name=sorted-column.png Content-Disposition: attachment; filename=sorted-column.png Content-Transfer-Encoding: base64 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 5XBt5cJfXp9stfJGjXqOyIjvlOk3Qt/mm398RXz8Fv46bS7hy//GhAn9TCpz7rzPMBhsWLp0PiUl Rfyhd1/++72F5N0GJ+t855FkJmV86ODg8Q3yyZH6+sRKxSW6Vm6g18Od3PvThQXljyb2YGMDhYWg 1cC9weNp5fZgGVWnhYD8u6AvKX9uaweOjqA1HlddesQa3RHaWlpV+niknZ3xtK5p+aPy9MPKqDqt 0YCjk+XtlKyr0Z1DS5IlZKAlVZGBllRFBlpSFRloSVVkoCVVkYGWVEW5Du3o7kae3vKvCjZHQ9Ur qY8S6HYtH/24dgC0lOPaSdYjTzkkVZGBllRFBlpSFRloSVVkoCVVkYGWVEUGWlIVGWhJVVQbaE3V T7bWc5n1UV9tHnV9vxUmfQQrXKOhZ8+edV7/2LFjhArx8BUlyVrCwsJEWFiYqKvl5Z8JfehjOdS5 zMp27twp/P39hYODg/D19RVxcXHKsnXr1omOHTsKe3t74efnJ+Lj45VlZ8+eFd26dROurq4iJiZG UKn++iizqtqWXbt2TQwYMEA4OjqKvn37isuXLyvLbty4IUaOHCl0Op144oknxJEjR+rU7trq+z0z OdBCPDzU5oZZCCH8/PzE5s2bRVFRkfj++++Fj4+PsszV1VUcOXJElJSUiDVr1ogePXooy4KDg8X8 +fPFnTt3xMcff2z0gtdHmVXVtmzixIlixowZ4s6dO2LOnDli3LhxyrLJkyeLmTNniry8PLF+/Xqj +mtrtwx09cwKtBA1h9qSMFdVXFz8QDBnzpxpdISr4ObmJrKysoQQQqSlpdX4gtdHmULUHjAPDw+R kZEhhBAiMzNTPPbYY8oyd3d3kZmZWeO2NbVbBrp6Zr8pDBWC8Crzwu/Nt0R8fDyBgYE4OTmh0xnf ARgTE0N2djZPPfUU3bt3Z+/evcqy3NxcXFxcAHB1da33MjUaTZ3fmOXk5Cjbt2rViuzsbGXZrVu3 aNmy+rGra2u3VANzj9AVllv5yNymTRuxatUqcefOHZGXl1ftkchgMIjIyEjh6empzHN1dVWOplev XjXarj7KrKq2ZW3btlWOwpmZmaJt27bKMg8PD5GamlrtdrW1u7b6fs8svmxXcaS21tWMLl264Ovr S0lJCYsXL8bNzY2LFy8C0Lt3b6KioigtLaVDhw6Uld0fZTEwMJB//vOf3L17l++++87o6FkfZZpi yJAhLF26lPz8fJYsWcLgwYOVZSNHjmTRokXk5uYSFRWFv79/ndot1cDSI7S1JSYmChcXF+Ht7S22 b98u5s2bJ5o2bSqEECIuLk74+vqKJk2aiM6dO4vY2Fhlu1OnTomuXbuKVq1aiY0bNwqdTicMBkO9 lVkV94dJVR4V0tLSRP/+/YWjo6MYPHiwSEtLU5ZlZ2eL4cOHC3t7e+Hv7y8OHjxYp75AHqGrpYxt N2PGjIb7qZIkK1HtXwql3ycZaElVZKAlVZGBllRFBlpSFRloSVVkoCVVUe6HvnnrdkO2Q5KsQgl0 E12zhmyHJFmFPOWQVEUGWlIVGWhJVWSgJVWRgZZURQZaUhUZaElVGl2gnXR2yqN92zZM+OOL/JyU VKdtS0tLmffRbNxbNre4DRXGjHrGorKkR8ukkZPW6OxMHjlpQqHe5EblFeoxGAykXr3K6lURPDNs ENt2xPMffn61bpd27RpffrGI1OtZJtdZk4sXLlitLKn+mRToCYV61ujsCK3DuuH31jeXVqulvbc3 H86Zi1ar5fNPPyFyzf8BkJFxnSmvv8qhgwfo2SuQf0VF06KFMz2fLP+AqaeHO3mFevbE7+aD9/+b lORkPL28WLzkKwYPGQqUH4XzKrWv6jTAwH5BpKZexUlnx/QZs5g7f4HZ+yM9Giafckwo1D8wHkdV loa5qldefY19e/co0zPen4afnz8pV9LoFfgUH8/7CIDs3LsASjCnT3uPBf/zOdcysvnrtA94d+pf TKp3994EpTwZ5t8Gk47QFSYU6gmv4Uht7TADODu7cOfO/Zun4nfv4sjxkzRzdGTqu+8xsG9Qtdsd OXZKef7SuPG8NeV1q7ZLanzMflNY3ZG6PsIMcPnSJdzc3JXpvLw7dPT2xElnRwevtmRkXK92u317 99A/qDdt3Fxwc3GyerukxseiqxyVQ11fYQZYFfEDAwcPUabd3VtzPesmeYV68gr1yqlGVX9+eRJ/ mfoOF1Oukp6ZY7RMq9Wi15e3Nysrs17aLT16Fl+2qwh1fYQ5PT2NxQs/J2LlD3wwY5Yyf8iwYfzt qy8pKCgg4ocVjB4xrNrtO/v60qmzLyX6Er763yW4urqRkpwMQJs2HmzdEsvdvDz+9uUSbG2rP/t6 7LG2pCQnU1JSYvX9k6zPrHPoqqwd5orrwE2bNaNPn75s3baTDo8/riyfv+B/eGvKG3Ro3xZPT0/+ 9vU31Zbzadgixox8hhYtWvD1N8vQaDT851M9yMy5zdyPF/DO2+VvEsMWf4GjoxNCiAeG+4resInn g0dx5/YdLqWmW3U/JetTRk56+91pDd0WSbJYo/tLoSRZQgZaUhUZaElVZKAlVZGBllRFBlpSFRlo SVWUP6yUFOY3ZDskySqUQLd0adGQ7ZAkq5CnHJKqyEBLqiIDLamKDLSkKjLQkqrIQEuqIgMtqYoM tKQqMtCSqshAS6oiAy2pigy0pCoy0JKqyEBLqiIDLamKDLSkKjLQkqrIQEuqIgMtqYoMtKQqMtCS qshAS6oiAy2pigy0pCr/H+pGyQEKLWVgAAAAAElFTkSuQmCC ------=_Part_4640012_120094896.1399991871152--
Yay!!!! Thank you for making this happen. This is a basic need that users have talked to me about in almost all UX conversations I have had so far! ----- Original Message ----- From: "Vojtech Szocs" <vszocs@redhat.com> To: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:37:51 AM Subject: [ovirt-devel] Sortable columns in UI Hey guys, oVirt UI has been missing column sort functionality for quite a while now, but here's some good news. I've just merged patch [1] that adds support for both server-side and client-side sorting of table columns. This patch adds the necessary infra/API; column sorting must be enabled per-column for given table, just like with column resizing. [1] http://gerrit.ovirt.org/#/c/25910/ Currently, only TextColumnWithTooltip (and its subclasses) support sorting, however this can easily be changed in future by having the column class extend SortableColumn. To enable sorting: // Enables server-side sorting via search query // ... SORTBY name ASC|DESC column.makeSortable("name"); // consider using shared constant -or- // Enables client-side sorting using comparator column.makeSortable(comparator); In order for server-side sorting to work properly, corresponding SearchableListModel must apply the search options while executing "Search" query. For example, in DataCenterListModel: @Override public boolean supportsServerSideSorting() { // Default is false return true; } @Override protected void syncSearch() { // Append "SORTBY" clause to search query String search = applySortOptions(getSearchString()); ... } If a model doesn't support server-side sorting, client-side sorting will be used as fall back (assuming a comparator was provided). In general, all main tab list models in WebAdmin utilize "Search" query, so we can enable server-side sorting for columns that exist within main tab tables. As for sub tabs (whose list models generally don't use "Search" query, but also don't support paging at the moment), these can simply use client-side sorting, i.e. reuse existing comparators defined in Linq class. PS: I've attached a screenshot depicting sorted column in action. Regards, Vojtech _______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel
Many thanks, Vojtech, for making it happen - it is highly appreciated! Clarifying that, to my understanding, just the infrastructure is in place - there aren't any sortable columns in the GUI yet. In order to turn columns in the GUI to sortable, need to follow Vojtech's instructions below for each relevant column. ---- Thanks, Einav ----- Original Message -----
From: "Malini Rao" <mrao@redhat.com> To: "Vojtech Szocs" <vszocs@redhat.com> Cc: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:48:44 AM Subject: Re: [ovirt-devel] Sortable columns in UI
Yay!!!! Thank you for making this happen. This is a basic need that users have talked to me about in almost all UX conversations I have had so far!
----- Original Message ----- From: "Vojtech Szocs" <vszocs@redhat.com> To: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:37:51 AM Subject: [ovirt-devel] Sortable columns in UI
Hey guys,
oVirt UI has been missing column sort functionality for quite a while now, but here's some good news.
I've just merged patch [1] that adds support for both server-side and client-side sorting of table columns. This patch adds the necessary infra/API; column sorting must be enabled per-column for given table, just like with column resizing.
[1] http://gerrit.ovirt.org/#/c/25910/
Currently, only TextColumnWithTooltip (and its subclasses) support sorting, however this can easily be changed in future by having the column class extend SortableColumn.
To enable sorting:
// Enables server-side sorting via search query // ... SORTBY name ASC|DESC column.makeSortable("name"); // consider using shared constant
-or-
// Enables client-side sorting using comparator column.makeSortable(comparator);
In order for server-side sorting to work properly, corresponding SearchableListModel must apply the search options while executing "Search" query.
For example, in DataCenterListModel:
@Override public boolean supportsServerSideSorting() { // Default is false return true; }
@Override protected void syncSearch() { // Append "SORTBY" clause to search query String search = applySortOptions(getSearchString()); ... }
If a model doesn't support server-side sorting, client-side sorting will be used as fall back (assuming a comparator was provided).
In general, all main tab list models in WebAdmin utilize "Search" query, so we can enable server-side sorting for columns that exist within main tab tables.
As for sub tabs (whose list models generally don't use "Search" query, but also don't support paging at the moment), these can simply use client-side sorting, i.e. reuse existing comparators defined in Linq class.
PS: I've attached a screenshot depicting sorted column in action.
Regards, Vojtech
_______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel _______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel
Thanks Malini & Einav :-) Indeed, the patch only adds the necessary infrastructure; sorting must be enabled for individual columns (either server-side or client-side sorting). Currently, sort icon (triangle) is positioned to the left of column header text. Alternatively, it could be positioned to the right-corner of column header, but this would interfere with resize area (mouse area where cursor changes, indicating that user can click and drag to resize). Each column that supports sorting uses following (default) styling: - mouse move over the header -> text color changes from black to dark grey -> cursor changes to "hand" (CSS cursor:pointer) - using default GWT CellTable triangle icon (Above default styling can be changed anytime.) Vojtech ----- Original Message -----
From: "Einav Cohen" <ecohen@redhat.com> To: "Vojtech Szocs" <vszocs@redhat.com>, "Malini Rao" <mrao@redhat.com> Cc: devel@ovirt.org Sent: Tuesday, May 13, 2014 4:54:38 PM Subject: Re: [ovirt-devel] Sortable columns in UI
Many thanks, Vojtech, for making it happen - it is highly appreciated! Clarifying that, to my understanding, just the infrastructure is in place - there aren't any sortable columns in the GUI yet. In order to turn columns in the GUI to sortable, need to follow Vojtech's instructions below for each relevant column.
---- Thanks, Einav
----- Original Message -----
From: "Malini Rao" <mrao@redhat.com> To: "Vojtech Szocs" <vszocs@redhat.com> Cc: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:48:44 AM Subject: Re: [ovirt-devel] Sortable columns in UI
Yay!!!! Thank you for making this happen. This is a basic need that users have talked to me about in almost all UX conversations I have had so far!
----- Original Message ----- From: "Vojtech Szocs" <vszocs@redhat.com> To: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:37:51 AM Subject: [ovirt-devel] Sortable columns in UI
Hey guys,
oVirt UI has been missing column sort functionality for quite a while now, but here's some good news.
I've just merged patch [1] that adds support for both server-side and client-side sorting of table columns. This patch adds the necessary infra/API; column sorting must be enabled per-column for given table, just like with column resizing.
[1] http://gerrit.ovirt.org/#/c/25910/
Currently, only TextColumnWithTooltip (and its subclasses) support sorting, however this can easily be changed in future by having the column class extend SortableColumn.
To enable sorting:
// Enables server-side sorting via search query // ... SORTBY name ASC|DESC column.makeSortable("name"); // consider using shared constant
-or-
// Enables client-side sorting using comparator column.makeSortable(comparator);
In order for server-side sorting to work properly, corresponding SearchableListModel must apply the search options while executing "Search" query.
For example, in DataCenterListModel:
@Override public boolean supportsServerSideSorting() { // Default is false return true; }
@Override protected void syncSearch() { // Append "SORTBY" clause to search query String search = applySortOptions(getSearchString()); ... }
If a model doesn't support server-side sorting, client-side sorting will be used as fall back (assuming a comparator was provided).
In general, all main tab list models in WebAdmin utilize "Search" query, so we can enable server-side sorting for columns that exist within main tab tables.
As for sub tabs (whose list models generally don't use "Search" query, but also don't support paging at the moment), these can simply use client-side sorting, i.e. reuse existing comparators defined in Linq class.
PS: I've attached a screenshot depicting sorted column in action.
Regards, Vojtech
_______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel _______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel
I must chime in as well (for old time sake … :) Nice to see things evolving in the GUI - this one specifically was there from day ONE. Great work, Vojtech!!! Miki On May 13, 2014, at 8:06 PM, Vojtech Szocs <vszocs@redhat.com> wrote:
Thanks Malini & Einav :-)
Indeed, the patch only adds the necessary infrastructure; sorting must be enabled for individual columns (either server-side or client-side sorting).
Currently, sort icon (triangle) is positioned to the left of column header text. Alternatively, it could be positioned to the right-corner of column header, but this would interfere with resize area (mouse area where cursor changes, indicating that user can click and drag to resize).
Each column that supports sorting uses following (default) styling: - mouse move over the header -> text color changes from black to dark grey -> cursor changes to "hand" (CSS cursor:pointer) - using default GWT CellTable triangle icon
(Above default styling can be changed anytime.)
Vojtech
----- Original Message -----
From: "Einav Cohen" <ecohen@redhat.com> To: "Vojtech Szocs" <vszocs@redhat.com>, "Malini Rao" <mrao@redhat.com> Cc: devel@ovirt.org Sent: Tuesday, May 13, 2014 4:54:38 PM Subject: Re: [ovirt-devel] Sortable columns in UI
Many thanks, Vojtech, for making it happen - it is highly appreciated! Clarifying that, to my understanding, just the infrastructure is in place - there aren't any sortable columns in the GUI yet. In order to turn columns in the GUI to sortable, need to follow Vojtech's instructions below for each relevant column.
---- Thanks, Einav
----- Original Message -----
From: "Malini Rao" <mrao@redhat.com> To: "Vojtech Szocs" <vszocs@redhat.com> Cc: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:48:44 AM Subject: Re: [ovirt-devel] Sortable columns in UI
Yay!!!! Thank you for making this happen. This is a basic need that users have talked to me about in almost all UX conversations I have had so far!
----- Original Message ----- From: "Vojtech Szocs" <vszocs@redhat.com> To: devel@ovirt.org Sent: Tuesday, May 13, 2014 10:37:51 AM Subject: [ovirt-devel] Sortable columns in UI
Hey guys,
oVirt UI has been missing column sort functionality for quite a while now, but here's some good news.
I've just merged patch [1] that adds support for both server-side and client-side sorting of table columns. This patch adds the necessary infra/API; column sorting must be enabled per-column for given table, just like with column resizing.
[1] http://gerrit.ovirt.org/#/c/25910/
Currently, only TextColumnWithTooltip (and its subclasses) support sorting, however this can easily be changed in future by having the column class extend SortableColumn.
To enable sorting:
// Enables server-side sorting via search query // ... SORTBY name ASC|DESC column.makeSortable("name"); // consider using shared constant
-or-
// Enables client-side sorting using comparator column.makeSortable(comparator);
In order for server-side sorting to work properly, corresponding SearchableListModel must apply the search options while executing "Search" query.
For example, in DataCenterListModel:
@Override public boolean supportsServerSideSorting() { // Default is false return true; }
@Override protected void syncSearch() { // Append "SORTBY" clause to search query String search = applySortOptions(getSearchString()); ... }
If a model doesn't support server-side sorting, client-side sorting will be used as fall back (assuming a comparator was provided).
In general, all main tab list models in WebAdmin utilize "Search" query, so we can enable server-side sorting for columns that exist within main tab tables.
As for sub tabs (whose list models generally don't use "Search" query, but also don't support paging at the moment), these can simply use client-side sorting, i.e. reuse existing comparators defined in Linq class.
PS: I've attached a screenshot depicting sorted column in action.
Regards, Vojtech
_______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel _______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel
_______________________________________________ Devel mailing list Devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/devel
participants (4)
-
Einav Cohen -
Malini Rao -
Michal Kenneth -
Vojtech Szocs