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