<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;}
/* 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]-->
</head>
<body lang="PT-BR" link="#0563C1" vlink="#954F72">
<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 width="725" height="303" id="Picture_x0020_1" src="cid:image001.png@01D0E586.91066C40"></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":"file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-$releasever-$basearch",<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> "metalink":"https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch",<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 href="http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview">
http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview</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 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).<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>
</body>
</html>