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

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, www.jsbin.com , http://plnkr.co/ or 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@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel