[Kimchi-devel] [RFC] Replace jQuery Bootgrid with Datatables.net

[Samuel Henrique De Oliveira Guimaraes]

FYI, This is what the Datatables.net would look like with Wok Styles:

http://jsfiddle.net/sguimaraes/rrjpcdgv/

Notice that the sort arrows are using FontAwesome icons.

Regards,
Samuel

From: Samuel Henrique De Oliveira Guimaraes
Sent: terça-feira, 21 de junho de 2016 18:13
To: Kimchi Devel <kimchi-devel at ovirt.org>
Subject: [RFC] Replace jQuery Bootgrid with Datatables.net

Hi team,

As part of the redesign process of some Ginger and Gingerbase panels, one of the main issues is that the jQuery Bootgrid tables are not exactly fitting with the Design Spec. If you compare System Modules and System Services tables with Kimchi they look and feel like part of the same application but if you navigate through Ginger Network and Storage tabs, there are some alignment and spacing issues. Most of these UI glitches could be fixed with plain CSS and / or editing jQuery Bootgrid "formatters" but we already faced some issues with the Software Updates and Network Configuration that required some workarounds that were not documented by jQuery Bootgrid authors.
Based on that, I suggested to Aline and Daniel if we could redesign these panels using Datatables.net instead of just shaping Bootgrid with CSS changes that may require rework once or if we update Bootgrid library due security or any other reason. I've mentioned before that we would probably have to update to this library if we decided to use Bootstrap 4 in the future but it seems that we may need to change the library and rewrite some panels a little bit earlier.
For the UI development it makes sense to use this library instead of adding "native" sort, filters and paging to wok.datagrid component because it has a larger community, a support board and tons of documented examples. Plus, it already has accessibility improvements that we would have to manually implement to our panels. In the future we could even drop wok.datagrid entirely and port everything that doesn't have a Gallery / List view design pattern to Datatables.net.

Here's the plan:

1-      jQuery Bootgrid and Datatables.net will coexist within Wok and we will update Ginger panel by panel until there isn't a trace of jQuery Bootgrid.

2-      Update Software Updates to Datatables.net

3-      Update User Logs to Datatables.net

4-      Remove jQuery Bootgrid from Wok

5-      Update Kimchi Storage to Datatables.net (at least the main table can be replaced, the Storage Volumes view would have to keep the old wok.datagrid because of the Gallery/List switch)

6-      Update Kimchi Network to Datatables.net

7-      Rename or rewrite wok.datagrid to something else like wok.gallery-view for Kimchi Guests, Templates and Storage Volumes

About Datatables.net:

1-      License: https://datatables.net/faqs/index#Licensing<https://datatables.net/faqs/index%23Licensing>

2-      Support: Although the license is MIT, they offer a paid and the community support - https://datatables.net/support/index

3-      API Examples: https://datatables.net/examples/index

4-      Manual: https://datatables.net/manual/index

5-      Styling (spoiler alert: they support almost every CSS library): https://datatables.net/examples/styling/bootstrap.html

Let me know your opinions.

Regards,
Samuel

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160623/c62ee6de/attachment.html>