<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=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><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;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 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;
color:black;
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;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;
color:black;
mso-fareast-language:EN-US;}
span.EmailStyle20
{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;}
--></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 bgcolor="white" lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span style="color:#1F497D">Hi Atreye,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Thanks! For the action buttons, I know the following piece of code might look ugly but here’s what I’ve done with wok.Grid to support a single button dismissing modal windows or a set of links in
a drop-down button with “Action” label:<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"> var toolbarButtons = this['opts']['toolbarButtons'];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var toolbarNode = null;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var btnHTML, dropHTML = [];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(toolbarButtons) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> toolbarNode = $('<div class="btn-group"></div>');<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> toolbarNode.prependTo(theContainer);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(toolbarButtons.length > 1) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> dropHTML = ['<div class="dropdown menu-flat">',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '<button id="wok-dropdown-button-', containerID, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '<span class="edit-alt"></span>Actions<span class="caret"></span>',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '</button>',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '<ul class="dropdown-menu"></ul>',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '</div>'<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> ].join('');<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> $(dropHTML).appendTo(toolbarNode);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> $.each(toolbarButtons, function(i, button) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> btnHTML = [<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '<li', button.critical === true ? ' class="critical"' : '', '><a data-toggle="modal"',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button.id ? (' id="' + button.id + '"') : '',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> ' class="', button.disabled === true ? ' disabled' : '', '">',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button.class ? ('<i class="' + button.class) + '"></i>' : '',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button.label,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '</a></li>'<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> ].join('');<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var btnNode = $(btnHTML).appendTo(toolbarNode[0].children[0].children[1]);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button.onClick && btnNode.on('click', button.onClick);<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"> }else {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> $.each(toolbarButtons, function(i, button) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> btnHTML = [<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '<button data-dismiss="modal" ',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button['id'] ? (' id="' + button['id'] + '"') : '',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> ' class="btn btn-primary',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button['class'] ? (' ' + button['class']) : '',<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"> button['disabled'] === true ? ' disabled' : '',<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"> button['label'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> '</button>'<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> ].join('');<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var btnNode = $(btnHTML).appendTo(toolbarNode);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> button['onClick'] &&<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> btnNode.on('click', button['onClick']);<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"> }<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">In hosts.js:<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">Repository list:<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">repositoriesGrid = new wok.widget.List({<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> container: 'repositories-grid-container',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: 'repositories-grid',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> title: i18n['KCHREPO6003M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> toolbarButtons: [{<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: 'repositories-grid-add-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHREPO6012M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-plus-circle',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.window.open({url:'plugins/kimchi/repository-add.html',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: repo_type});<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"> }, {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: 'repositories-grid-enable-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHREPO6016M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-play-circle-o',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var repository = repositoriesGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!repository) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"> var name = repository['repo_id'];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var enable = !repository['enabled'];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> $(this).prop('disabled', true);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> kimchi.enableRepository(name, enable, function() {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.topic('kimchi/repositoryUpdated').publish();<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"> }<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"> id: 'repositories-grid-edit-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHREPO6013M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-pencil',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var repository = repositoriesGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!repository) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"> kimchi.selectedRepository = repository['repo_id'];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.window.open({url:'plugins/kimchi/repository-edit.html',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: repo_type});<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"> }, {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: 'repositories-grid-remove-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHREPO6014M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-minus-circle',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> critical: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var repository = repositoriesGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!repository) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var settings = {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> title : i18n['KCHREPO6001M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">
</span><span style="color:#1F497D">content : i18n['KCHREPO6002M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"> confirm : i18n['KCHAPI6004M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"> </span><span lang="EN-US" style="color:#1F497D">cancel : i18n['KCHAPI6003M']<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.confirm(settings, function() {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> kimchi.deleteRepository(<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> repository['repo_id'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> function(result) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.topic('kimchi/repositoryDeleted').publish(result);<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> }, function(error) {<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"> );<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"> }<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Debug reports:<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">var initReportGrid = function(reports) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> reportGrid = new wok.widget.List({<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> container: 'available-reports-grid-container',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: reportGridID,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> title: i18n['KCHDR6002M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> toolbarButtons: [{<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: reportGridID + '-generate-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-plus-circle',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHDR6006M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.window.open('plugins/kimchi/report-add.html');<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"> }, {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: reportGridID + '-rename-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-pencil',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHDR6008M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var report = reportGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!report) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> kimchi.selectedReport = report['name'];<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.window.open('plugins/kimchi/report-rename.html');<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"> }, {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> id: reportGridID + '-download-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHDR6010M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-download',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var report = reportGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!report) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> kimchi.downloadReport({<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> file: report['uri']<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"> }<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"> id: reportGridID + '-remove-button',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> class: 'fa fa-minus-circle',<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> label: i18n['KCHDR6009M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> critical: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> disabled: true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> onClick: function(event) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var report = reportGrid.getSelected();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> if(!report) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> return;<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> var settings = {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> title : i18n['KCHAPI6004M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> content : i18n['KCHDR6001M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> confirm : i18n['KCHAPI6002M'],<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> cancel : i18n['KCHAPI6003M']<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"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.confirm(settings, function() {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> kimchi.deleteReport({<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> name: report['name']<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> }, function(result) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> listDebugReports();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> }, function(error) {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"> wok.message.error(error.responseJSON.reason);<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"> });<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"> }]<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">I’ve added critical parameter (<u>so the critical option always have a red background</u>) and in the class parameter I’m putting font awesome classes (fa fa-circle-plus for instance). The supporting
classes and styles are already in bootstrap.custom.css located in wok ui/libs/themes/base/ folder. By the way, this widget should be name wok.List instead of kimchi.list and added to wok js files. I believe we can use this later for other application scenarios,
not just Kimchi Hosts tab.<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">I had some merge conflicts when I’ve pulled latest commits and applied the latest patches but once I fix my workspace I’ll send a new patch.<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="color:windowtext;mso-fareast-language:PT-BR">From:</span></b><span lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR"> Atreye Mukhopadhyay [mailto:atreyee@linux.vnet.ibm.com]
<br>
<b>Sent:</b> sexta-feira, 11 de setembro de 2015 08:40<br>
<b>To:</b> Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes@eldorado.org.br>; kimchi-devel@ovirt.org<br>
<b>Subject:</b> Re: [Kimchi-devel] [WOK] List Widget specification<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt">Hi Samuel,<br>
I have created new UI widget for Repositories and Debug Report panel. New widget is created using Bootstrap provided css classes and js plugins. I have added some inline css styles to match new-ui spec which we can move to some css class files later.<br>
I am still working on the implementation of action buttons (real functionality when specific action clicked) and scroll bar for these panels.<br>
Attached files are changed for this implementation. kimchi.list.js is for the new widget list which we need to merge in '\plugins\kimchi\ui\js\src ' folder.<br>
<br>
In kimchi.host.js, I replaced kimchi.widget.Grid to kimchi.widget.List for both Repositories and Debug Reports. Also added additional attribute 'type' in the corresponding field configuration of the panel.
<br>
<br>
Code changes of kimchi.host.js look like below for Repositories:<br>
1. Replace the Grid to List<br>
repositoriesGrid = new kimchi.widget.Grid({<br>
to<br>
<b> </b><b><span style="color:#009900"> repositoriesGrid = new kimchi.widget.List({</span></b><b><br>
</b><br>
2. Added additional attribute 'type'<br>
if (repo_type == "yum") {<br>
gridFields=[{<br>
name: 'repo_id',<br>
label: i18n['KCHREPO6004M'],<br>
'class': 'repository-id',<br>
<b><span style="color:#009900">type:'name'</span></b><br>
<br>
}, {<br>
name: 'config[repo_name]',<br>
label: i18n['KCHREPO6005M'],<br>
'class': 'repository-name',<br>
<b><span style="color:#009900">type:'description'</span></b><br>
<br>
}, {<br>
name: 'enabled',<br>
label: i18n['KCHREPO6009M'],<br>
'class': 'repository-enabled',<br>
<span style="color:#009900"> <b>type:'action'</b></span><br>
}];<br>
}<br>
<br>
Similar changes for debug reports as well...<br>
<br>
Please let me know your suggestions.<br>
<br>
Below are the screenshots of the implementation. <br>
<br>
<img width="504" height="373" id="_x0000_i1025" src="cid:image002.jpg@01D0EC70.0DB2FA70">
<img width="397" height="375" id="_x0000_i1026" src="cid:image004.jpg@01D0EC70.0DB2FA70">
<img width="334" height="238" id="_x0000_i1027" src="cid:image006.jpg@01D0EC70.0DB2FA70">
<span style="font-size:12.0pt;mso-fareast-language:PT-BR"><o:p></o:p></span></p>
<div>
<p class="MsoNormal">On 9/2/2015 11:11 PM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal">Hi team,<o:p></o:p></p>
<p class="MsoNormal"> <o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">As we discussed on the chat today, I need help creating a widget for the new-ui while I’m still working on the current Grid widget for Hosts, Storage and Network tabs.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">According to the new-ui design spec doc, in the Host tab, Debug Reports and Repositories panels shouldn’t be presented as tables but as lists with each line having a drop-down button on the right instead of one on the
top below the panel header:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="mso-fareast-language:PT-BR"><img width="725" height="303" id="Picture_x0020_1" src="cid:image007.png@01D0EC70.0DB2FA70"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">This is the current json response for Repositories:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">[</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> {</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "config":{</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "gpgcheck":false,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "gpgkey":<a href="file:///\\etc\pki\rpm-gpg\RPM-GPG-KEY-fedora-$releasever-$basearch">"file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-$releasever-$basearch"</a>,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "metalink":<a href="https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch">"https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch"</a>,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "mirrorlist":"",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "repo_name":"Fedora $releasever - $basearch"</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> },</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "repo_id":"fedora",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "enabled":true,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "baseurl":""</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> }</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">]</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">And Debug Reports:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">[</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> {</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "time":"2015-08-31-15:13:10",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "name":"test2",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "uri":"plugins/kimchi/data/debugreports/test2.tar.xz"</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> },</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> {</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "time":"2015-08-31-15:12:57",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "name":"test",</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> "uri":"plugins/kimchi/data/debugreports/test.tar.xz"</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> }</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">]</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">I’ve planned the following HTML output for this widget:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">- A <i class="fa fa-power-off"></i> tag, empty when repository is not enabled;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">- repo_id: Displays the repository name</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">- repo_name: Repository description</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">- Bootstrap modal button (don’t worry about styles since I’m still customizing it)</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Reference: <a href="http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview">
http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">For debug reports lists:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">-name;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">-time;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">- Bootstrap modal button (don’t worry about styles since I’m still customizing it)</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">It is very important that we keep the same model from kimchi.hosts.js by replacing only the current widget with the new one (example: repositoriesGrid = new kimchi.widget.Grid({ }); to repositoriesGrid = new kimchi.widget.List({
}); ).</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">I don’t think it is necessary to fetch the whole branch and apply the patches to edit kimchi files, this can be done using
<a href="http://www.jsfiddle.net">www.jsfiddle.net</a>, <a href="http://www.jsbin.com">
www.jsbin.com</a> , <a href="http://plnkr.co/">http://plnkr.co/</a> or <a href="http://codepen.io/">
http://codepen.io/</a> (I suggest plnkr or jsfiddle since we can easily include jQuery, FonAwesome and Bootstrap from their CDN servers).</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Thanks,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Samuel</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:PT-BR"><br>
<br>
<br>
<o:p></o:p></span></p>
<pre>_______________________________________________<o:p></o:p></pre>
<pre>Kimchi-devel mailing list<o:p></o:p></pre>
<pre><a href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a><o:p></o:p></pre>
<pre><a href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a><o:p></o:p></pre>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:PT-BR"><o:p> </o:p></span></p>
</div>
</body>
</html>