<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
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> <font color="#009900"> repositoriesGrid = new
kimchi.widget.List({</font><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>
<font color="#009900"><b>type:'name'</b></font><br>
<br>
}, {<br>
name: 'config[repo_name]',<br>
label: i18n['KCHREPO6005M'],<br>
'class': 'repository-name',<br>
<font color="#009900"><b>type:'description'</b></font><br>
<br>
}, {<br>
name: 'enabled',<br>
label: i18n['KCHREPO6009M'],<br>
'class': 'repository-enabled',<br>
<font color="#009900"> <b>type:'action'</b></font><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 src="cid:part1.04060203.00060806@linux.vnet.ibm.com" alt=""
height="373" width="504"> <img
src="cid:part2.07080908.00020908@linux.vnet.ibm.com" alt=""
height="375" width="397"> <img
src="cid:part3.02070309.01060002@linux.vnet.ibm.com" alt=""
height="238" width="334"> <br>
<br>
<div class="moz-cite-prefix">On 9/2/2015 11:11 PM, Samuel Henrique
De Oliveira Guimaraes wrote:<br>
</div>
<blockquote
cite="mid:85b97e65f03a48c5b5a900166666cc06@serv031.corp.eldorado.org.br"
type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<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;}
/* 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;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
mso-fareast-language:EN-US;}
@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]-->
<div class="WordSection1">
<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.<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">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:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="mso-fareast-language:PT-BR"><img
id="Picture_x0020_1"
src="cid:part4.05060301.07020207@linux.vnet.ibm.com"
height="303" width="725"></span><span lang="EN-US"><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">This is the current json
response for Repositories:<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">[<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"> "config":{<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "gpgcheck":false,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"gpgkey":<a class="moz-txt-link-rfc2396E" href="file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-$releasever-$basearch">"file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-$releasever-$basearch"</a>,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"metalink":<a class="moz-txt-link-rfc2396E" href="https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch">"https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch"</a>,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "mirrorlist":"",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"repo_name":"Fedora $releasever - $basearch"<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"> "repo_id":"fedora",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "enabled":true,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "baseurl":""<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">]<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">And Debug Reports:<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">[<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">
"time":"2015-08-31-15:13:10",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "name":"test2",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"uri":"plugins/kimchi/data/debugreports/test2.tar.xz"<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"> {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"time":"2015-08-31-15:12:57",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "name":"test",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">
"uri":"plugins/kimchi/data/debugreports/test.tar.xz"<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">]<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">I’ve planned the
following HTML output for this widget:<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">- A <i class="fa
fa-power-off"></i> tag, empty when repository is
not enabled;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">- repo_id: Displays the
repository name<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">- repo_name: Repository
description<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">- Bootstrap modal button
(don’t worry about styles since I’m still customizing it)<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">Reference: <a
moz-do-not-send="true"
href="http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview">
<a class="moz-txt-link-freetext" href="http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview">http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview</a></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">For debug reports lists:<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">-name;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">-time;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">- Bootstrap modal button
(don’t worry about styles since I’m still customizing it)<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">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({ }); ).<o:p></o:p></span></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 moz-do-not-send="true" href="http://www.jsfiddle.net">www.jsfiddle.net</a>,
<a moz-do-not-send="true" href="http://www.jsbin.com">
www.jsbin.com</a> , <a moz-do-not-send="true"
href="http://plnkr.co/">http://plnkr.co/</a> or <a
moz-do-not-send="true" href="http://codepen.io/">
<a class="moz-txt-link-freetext" href="http://codepen.io/">http://codepen.io/</a></a> (I suggest plnkr or jsfiddle since
we can easily include jQuery, FonAwesome and Bootstrap from
their CDN servers).<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">Thanks,<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>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>