<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:36.0pt;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:1451899401;
mso-list-type:hybrid;
mso-list-template-ids:261266750 1040643070 68550681 68550683 68550671 68550681 68550683 68550671 68550681 68550683;}
@list l0:level1
{mso-level-text:%1-;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1
{mso-list-id:1730182489;
mso-list-type:hybrid;
mso-list-template-ids:-684820126 58915358 68550681 68550683 68550671 68550681 68550683 68550671 68550681 68550683;}
@list l1:level1
{mso-level-text:%1-;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l1:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">FYI, This is what the Datatables.net would look like with Wok Styles:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><a href="http://jsfiddle.net/sguimaraes/rrjpcdgv/">http://jsfiddle.net/sguimaraes/rrjpcdgv/</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Notice that the sort arrows are using FontAwesome icons.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span lang="EN-US" style="mso-fareast-language:PT-BR">From:</span></b><span lang="EN-US" style="mso-fareast-language:PT-BR"> Samuel Henrique De Oliveira Guimaraes
<br>
<b>Sent:</b> terça-feira, 21 de junho de 2016 18:13<br>
<b>To:</b> Kimchi Devel <kimchi-devel@ovirt.org><br>
<b>Subject:</b> [RFC] Replace jQuery Bootgrid with Datatables.net<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-US">Hi team,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">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.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Here’s the plan:<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">1-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">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.<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">2-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Update Software Updates to Datatables.net<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">3-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Update User Logs to Datatables.net<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">4-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Remove jQuery Bootgrid from Wok<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">5-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">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)<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">6-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Update Kimchi Network to Datatables.net<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">7-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Rename or rewrite wok.datagrid to something else like wok.gallery-view for Kimchi Guests, Templates and Storage Volumes<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">About Datatables.net:<o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">1-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">License: <a href="https://datatables.net/faqs/index%23Licensing">
https://datatables.net/faqs/index#Licensing</a> <o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">2-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Support: Although the license is MIT, they offer a paid and the community support -
<a href="https://datatables.net/support/index">https://datatables.net/support/index</a><o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">3-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">API Examples: <a href="https://datatables.net/examples/index">
https://datatables.net/examples/index</a><o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">4-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Manual: <a href="https://datatables.net/manual/index">
https://datatables.net/manual/index</a><o:p></o:p></span></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span lang="EN-US"><span style="mso-list:Ignore">5-<span style="font:7.0pt "Times New Roman"">
</span></span></span><![endif]><span lang="EN-US">Styling (spoiler alert: they support almost every CSS library):
<a href="https://datatables.net/examples/styling/bootstrap.html">https://datatables.net/examples/styling/bootstrap.html</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Let me know your opinions.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
</div>
</body>
</html>