[Kimchi-devel] [WOK] List Widget specification

[Samuel Henrique De Oliveira Guimaraes]

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:

[cid:image001.png at 01D0E586.91066C40]

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<http://www.jsfiddle.net>, www.jsbin.com<http://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


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150902/5a1f34a0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 64584 bytes
Desc: image001.png
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150902/5a1f34a0/attachment.png>