[Kimchi-devel] [WOK] List Widget specification

[Atreye Mukhopadhyay]

Hi Samuel,
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.
I am still working on the implementation of action buttons (real 
functionality when specific action clicked) and scroll bar for these panels.
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.

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.

Code changes of kimchi.host.js look like below  for Repositories:
1. Replace the Grid to List
         repositoriesGrid = new kimchi.widget.Grid({
to
*repositoriesGrid = new kimchi.widget.List({
*
2. Added additional attribute 'type'
         if (repo_type == "yum") {
                 gridFields=[{
                     name: 'repo_id',
                     label: i18n['KCHREPO6004M'],
                     'class': 'repository-id',
*type:'name'*

                 }, {
                     name: 'config[repo_name]',
                     label: i18n['KCHREPO6005M'],
                     'class': 'repository-name',
*type:'description'*

                 }, {
                     name: 'enabled',
                     label: i18n['KCHREPO6009M'],
                     'class': 'repository-enabled',
*type:'action'*
                 }];
         }

Similar changes for debug reports as well...

Please let me know your suggestions.

Below are the screenshots of the implementation.



On 9/2/2015 11:11 PM, Samuel Henrique De Oliveira Guimaraes wrote:
>
> Hi team,
>
> 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.
>
> 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:
>
> This is the current json response for Repositories:
>
> [
>
>   {
>
>     "config":{
>
>       "gpgcheck":false,
>
> "gpgkey":"file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-$releasever-$basearch",
>
> "metalink":"https://mirrors.fedoraproject.org/metalink?repo=fedora-$releasever&arch=$basearch",
>
>       "mirrorlist":"",
>
> "repo_name":"Fedora $releasever - $basearch"
>
>     },
>
>     "repo_id":"fedora",
>
>     "enabled":true,
>
>     "baseurl":""
>
>   }
>
> ]
>
> And Debug Reports:
>
> [
>
>   {
>
> "time":"2015-08-31-15:13:10",
>
>     "name":"test2",
>
> "uri":"plugins/kimchi/data/debugreports/test2.tar.xz"
>
>   },
>
>   {
>
> "time":"2015-08-31-15:12:57",
>
>     "name":"test",
>
> "uri":"plugins/kimchi/data/debugreports/test.tar.xz"
>
>   }
>
> ]
>
> I’ve planned the following HTML output for this widget:
>
> - A <i class="fa fa-power-off"></i> tag, empty when repository is not 
> enabled;
>
> - repo_id: Displays the repository name
>
> - repo_name: Repository description
>
> - Bootstrap modal button (don’t worry about styles since I’m still 
> customizing it)
>
> Reference: http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview 
> <http://plnkr.co/edit/SgQcpfu5b5vVXWD9imND?p=preview>
>
> For debug reports lists:
>
> -name;
>
> -time;
>
> - Bootstrap modal button (don’t worry about styles since I’m still 
> customizing it)
>
> 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({ }); ).
>
> 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 www.jsfiddle.net 
> <http://www.jsfiddle.net>, www.jsbin.com <http://www.jsbin.com> , 
> http://plnkr.co/ or http://codepen.io/ <http://codepen.io/> (I suggest 
> plnkr or jsfiddle since we can easily include jQuery, FonAwesome and 
> Bootstrap from their CDN servers).
>
> Thanks,
>
> Samuel
>
>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: jddbdbhb.png
Type: image/png
Size: 39449 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: gdaahacf.png
Type: image/png
Size: 44405 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: aieiicbi.png
Type: image/png
Size: 16370 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 64584 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: kimchi.host.js
Type: application/x-javascript
Size: 31598 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment.js>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: kimchi.list.js
Type: application/x-javascript
Size: 15071 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150911/ea2f5778/attachment-0001.js>