7:39 a.m.
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(a)ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel
