[Kimchi-devel] [PATCH 2/2] Adding new-ui to Hosts tab and modal windows

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Fri Oct 16 19:36:21 UTC 2015


From: samhenri <samuel.guimaraes at eldorado.org.br>

Some CSS files are empty to avoid conflicts with next patches and or commits when deleted/moved to gingerbase

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 src/wok/plugins/kimchi/ui/config/tab-ext.xml       |  10 +-
 .../plugins/kimchi/ui/css/theme-default/host.css   | 270 ---------
 .../kimchi/ui/css/theme-default/report-add.css     |  20 -
 .../kimchi/ui/css/theme-default/report-rename.css  |  22 -
 .../kimchi/ui/css/theme-default/repository-add.css |  25 -
 .../ui/css/theme-default/repository-edit.css       |  62 ---
 src/wok/plugins/kimchi/ui/js/src/kimchi.api.js     |  39 ++
 src/wok/plugins/kimchi/ui/js/src/kimchi.host.js    | 614 +++++++++++----------
 src/wok/plugins/kimchi/ui/pages/host.html.tmpl     | 207 +++----
 .../plugins/kimchi/ui/pages/report-add.html.tmpl   |  46 +-
 .../kimchi/ui/pages/report-rename.html.tmpl        |  42 +-
 .../kimchi/ui/pages/repository-add.html.tmpl       | 124 ++---
 .../kimchi/ui/pages/repository-edit.html.tmpl      | 138 ++---
 13 files changed, 583 insertions(+), 1036 deletions(-)

diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
index ee88c88..b2a842b 100644
--- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml
+++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
@@ -3,35 +3,35 @@
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="none"/>
-
+        <class>host</class>
         <title>Host</title>
         <path>plugins/kimchi/host.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="byInstance"/>
-
+        <class>guests</class>
         <title>Guests</title>
         <path>plugins/kimchi/guests.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="none"/>
-
+        <class>templates</class>
         <title>Templates</title>
         <path>plugins/kimchi/templates.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="read-only"/>
-
+        <class>storage</class>
         <title>Storage</title>
         <path>plugins/kimchi/storage.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="read-only"/>
-
+        <class>network</class>
         <title>Network</title>
         <path>plugins/kimchi/network.html</path>
     </tab>
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/host.css b/src/wok/plugins/kimchi/ui/css/theme-default/host.css
index a0cccb1..bb693cc 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/host.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/host.css
@@ -15,273 +15,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.host-panel {
-    font-size: 12px;
-    margin-bottom: 100px;
-}
-
-.host-panel .logo-container, .host-panel .info-container,
-.host-panel .section-label, .host-panel .section-value {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.host-panel .section-label {
-    display: inline-block;
-    margin-right: 1em;
-    vertical-align: top;
-}
-
-.host-panel .logo {
-    background: url("plugins/kimchi/images/icon-vm.png") no-repeat left top;
-    height: 128px;
-    width: 128px;
-}
-
-.host-panel .hostname {
-    text-decoration: underline;
-}
-
-.host-panel .action-panel {
-    margin-top: 2em;
-    padding-left: 10px;
-}
-
-.host-panel .button-icon {
-    background: url("../images/theme-default/host-icon-sprite.png") no-repeat
-                left top;
-    display: inline-block;
-    height: 12px;
-    width: 12px;
-}
-
-.host-panel .action-icon-stop {
-    background-position: -14px 0;
-}
-
-.host-panel .action-icon-restart {
-    background-position: -28px 0;
-}
-
-.host-panel .action-icon-download {
-    background-position: -42px 0;
-}
-
-.host-panel .action-icon-connect {
-    background-position: -56px 0;
-}
-
-.host-panel .action-icon-add {
-    background-position: -70px 0;
-}
-
-.host-panel .action-icon-edit {
-    background-position: -84px 0;
-}
-
-.host-panel .action-icon-remove {
-    background-position: -98px 0;
-}
-
-.host-panel button:disabled .action-icon-start {
-    background-position: 0 -14px;
-}
-
-.host-panel button:disabled .action-icon-stop {
-    background-position: -14px -14px;
-}
-
-.host-panel button:disabled .action-icon-restart {
-    background-position: -28px -14px;
-}
-
-.host-panel button:disabled .action-icon-download {
-    background-position: -42px -14px;
-}
-
-.host-panel button:disabled .action-icon-connect {
-    background-position: -56px -14px;
-}
-
-.host-panel button:disabled .action-icon-add {
-    background-position: -70px -14px;
-}
-
-.host-panel button:disabled .action-icon-edit {
-    background-position: -84px -14px;
-}
-
-.host-panel button:disabled .action-icon-remove {
-    background-position: -98px -14px;
-}
-
-.host-panel .info-container {
-    padding-top: 16px;
-    width: 890px;
-}
-
-.host-panel .section-header {
-    background: #EEE;
-    border-radius: 5px;
-    cursor: pointer;
-    line-height: 2em;
-    margin: 1em 0 1em;
-    padding-left: 6px;
-}
-
-.host-panel .section-header:hover {
-    background: #06f;
-    color: white;
-}
-
-.host-panel .section-content {
-    padding-left: 1em;
-}
-
-.host-panel .section-header .arrow {
-    border-color: transparent;
-    border-style: solid;
-    display: inline-block;
-    margin-right: 6px;
-    width: 0;
-}
-
-.host-panel .section-header[aria-expanded="true"] .arrow {
-    border-top-color: black;
-    border-width: 8px 4px 0;
-    border-bottom: none;
-}
-
-.host-panel .section-header[aria-expanded="true"]:hover .arrow {
-    border-top-color: white;
-}
-
-.host-panel .section-header[aria-expanded="false"] .arrow {
-    border-left-color: black;
-    border-right: none;
-    border-width: 4px 0 4px 8px;
-}
-
-.host-panel .section-header[aria-expanded="false"]:hover .arrow {
-    border-left-color: white;
-}
-
-.host-panel .section-row {
-    line-height: 1.6em;
-    margin-bottom: 1em;
-}
-
-.host-panel .section-label {
-    width: 100px;
-}
-
-#frequency-textbox {
-    width: 20px;
-}
-
-#container-chart-cpu,
-#container-chart-memory,
-#container-chart-disk-io,
-#container-chart-network-io {
-    border: 1px solid white;
-    box-shadow: 2px 2px 2px gray, 2px -2px 2px gray, -2px -2px 2px gray, -2px
-                2px 2px gray;
-    height: 100px;
-    width: 500px;
-}
-
-#container-chart-disk-io .disk-write,
-#container-chart-network-io .network-sent {
-    stroke: #f80;
-}
-
-/* Debug Report */
-.cell-text-wrapper {
-    margin-left: 10px;
-}
-
-.host-panel #available-reports-grid {
-    border-color: #ddd;
-    height: 400px;
-    width: 850px;
-}
-
-.host-panel select#available-reports-list {
-    width: 300px;
-}
-
-.host-panel select#available-reports-list option {
-    margin: .2em 1em;
-}
-
-.debug-report-name,
-.debug-report-time {
-    width: 424px;
-}
-
-#id-debug-img {
-    background: url(../images/theme-default/kimchi-loading15x15.gif) 12px
-            center no-repeat;
-    padding-left: 23px;
-}
-
-/* End of Debug Report */
-
-/* Software Updates */
-.host-panel #software-updates-grid {
-    border-color: #ddd;
-    height: 300px;
-    width: 850px;
-}
-
-.software-update-name,
-.software-update-repos {
-    width: 224px;
-}
-
-.software-update-version,
-.software-update-arch {
-    width: 200px;
-}
-
-.host-panel #software-updates-progress-textarea {
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    height: 100px;
-    padding: .2em .5em;
-    resize: vertical;
-    width: 852px;
-}
-/* End of Software Updates */
-
-/* Repository */
-.host-panel #repositories-grid {
-    border-color: #ddd;
-    height: 200px;
-    width: 850px;
-}
-
-.host-panel #repositories-grid .repository-id {
-    width: 120px;
-}
-
-.host-panel #repositories-grid .repository-name {
-    width: 640px;
-}
-
-.host-panel #repositories-grid .repository-enabled {
-    width: 88px;
-}
-
-.host-panel #repositories-grid .repository-baseurl.deb {
-    width: 400px;
-}
-
-.host-panel #repositories-grid .repository-enabled.deb {
-    width: 100px;
-}
-
-.host-panel #repositories-grid .repository-gpgcheck.deb {
-    width: 150px;
-}
-/* End of Repository */
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css
index 8020182..3769daa 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css
@@ -15,23 +15,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#report-add-window {
-    height: 300px;
-    width: 400px;
-}
-
-#report-add-window .field {
-    font-size: 12px;
-}
-
-#report-name-textbox {
-    margin: 0;
-    width: 100%;
-}
-
-.info-add-debug-report {
-    font-size: 12px;
-    color: #999999;
-    font-weight: lighter;
-    font-family: 'Helvetica Neue', Helvetica, Arial;
-}
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css b/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css
index 2fb2698..2d9e4a2 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css
@@ -15,25 +15,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#report-rename-window {
-    height: 300px;
-    width: 400px;
-}
-
-#report-rename-window .field {
-    font-size: 12px;
-}
-
-#report-name-textbox {
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 0;
-    width: 100%;
-}
-
-.info-debug-report-rename {
-    font-size: 12px;
-    color: #999999;
-    font-weight: lighter;
-    font-family: 'Helvetica Neue', Helvetica, Arial;
-}
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css
index 4344569..2d9e4a2 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css
@@ -15,28 +15,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#repository-add-window {
-    height: 500px;
-    width: 1000px;
-}
-
-#repository-add-window span.required {
-    color: red;
-    padding-left: 5px;
-    vertical-align: top;
-}
-
-#repository-add-window .textbox-wrapper input[type="text"] {
-    box-sizing: border-box;
-    width: 100%;
-}
-
-#repository-add-window .textbox-wrapper label {
-    vertical-align: middle;
-}
-
-#isMirrorLabel {
-    font-size: 14px;
-    font-weight: lighter;
-    font-family: 'Helvetica Neue', Helvetica, Arial;
-}
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css b/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css
index 383a7fe..d50bbc1 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css
@@ -15,68 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.yum div#repository-edit-window {
-    height: 680px;
-    width: 1000px;
-}
-
-.deb div#repository-edit-window {
-    height: 480px;
-    width: 1000px;
-}
-
-
-.repository-edit-fieldset {
-    float: left;
-    padding: 0 30px;
-    width: 95%;
-}
-
-.repository-edit-wrapper-label, .repository-edit-wrapper-controls {
-    display: inline-block;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    vertical-align: top;
-}
-
-.repository-edit-wrapper-label {
-    margin-top: 10px;
-    width: 150px;
-}
-
-.repository-edit-wrapper-controls label {
-    vertical-align: middle;
-}
-
-.repository-edit-wrapper-controls {
-    width: 100%;
-}
-
-.repository-edit-wrapper-controls input[type="text"] {
-    font-size: 16px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    width: 100%;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    border: 1px solid #CCCCCC;
-}
-
-
-.repository-edit-wrapper-controls input[type="text"][readonly] {
-    color: #bbb;
-    background-color: #fafafa;
-}
-
-
-.repository-edit-wrapper-controls input[type="text"][disabled] {
-    color: #bbb;
-    background-color: #fafafa;
-    cursor: not-allowed;
-}
-
 
 .deb .yum{
     display: none;
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
index c82d040..f5839f1 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
@@ -884,6 +884,45 @@ var kimchi = {
         });
     },
 
+    tailSoftwareUpdateLogs : function(suc, err, progress) {
+        var taskID = -1;
+        var onResponse = function(data) {
+            taskID = data['id'];
+            trackTask();
+        };
+
+        var trackTask = function() {
+            kimchi.getTask(taskID, onTaskResponse, err);
+        };
+
+        var onTaskResponse = function(result) {
+            var taskStatus = result['status'];
+            switch(taskStatus) {
+            case 'running':
+                progress && progress(result);
+                setTimeout(function() {
+                    trackTask();
+                }, 1000);
+                break;
+            case 'finished':
+            case 'failed':
+                suc(result);
+                break;
+            default:
+                break;
+            }
+        };
+
+        wok.requestJSON({
+            url : 'plugins/kimchi/host/taillogs',
+            type : "POST",
+            contentType : "application/json",
+            dataType : "json",
+            success : onResponse,
+            error : err
+        });
+    },
+
     updateSoftware : function(suc, err, progress) {
         var taskID = -1;
         var onResponse = function(data) {
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js
index c3765dc..06e4792 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js
@@ -15,87 +15,92 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-kimchi.host={};
+kimchi.host = {};
 
 kimchi.host_main = function() {
-    var expand = function(header, toExpand) {
-        var controlledNode = $(header).attr('aria-controls');
-        $('#' + controlledNode)[toExpand ? 'removeClass' : 'addClass']('hidden');
-        $(header).attr('aria-expanded', toExpand ? 'true' : 'false');
-    };
-
+    "use strict";
     var repositoriesGrid = null;
     var initRepositoriesGrid = function(repo_type) {
-        var gridFields=[];
-        if (repo_type == "yum") {
-                gridFields=[{
-                    name: 'repo_id',
-                    label: i18n['KCHREPO6004M'],
-                    'class': 'repository-id'
-                }, {
-                    name: 'config[display_repo_name]',
-                    label: i18n['KCHREPO6005M'],
-                    'class': 'repository-name'
-                }, {
-                    name: 'enabled',
-                    label: i18n['KCHREPO6009M'],
-                    'class': 'repository-enabled'
-                }];
-        }
-        else if (repo_type == "deb") {
-                gridFields=[{
-                    name: 'baseurl',
-                    label: i18n['KCHREPO6006M'],
-                    makeTitle: true,
-                    'class': 'repository-baseurl deb'
-                }, {
-                    name: 'enabled',
-                    label: i18n['KCHREPO6009M'],
-                    'class': 'repository-enabled deb'
-                }, {
-                    name: 'config[dist]',
-                    label: "dist",
-                    'class': 'repository-gpgcheck deb'
-                }, {
-                    name: 'config[comps]',
-                    label: "comps",
-                    'class': 'repository-gpgcheck deb'
-                }];
-        }
-        else {
-            gridFields=[{
+        var gridFields = [];
+        if (repo_type === "yum") {
+            gridFields = [{
                 name: 'repo_id',
                 label: i18n['KCHREPO6004M'],
-                'class': 'repository-id'
-                }, {
-                    name: 'enabled',
-                    label: i18n['KCHREPO6009M'],
-                    'class': 'repository-enabled'
-                }, {
-                    name: 'baseurl',
-                    label: i18n['KCHREPO6006M'],
-                    makeTitle: true,
-                    'class': 'repository-baseurl'
-                }];
+                'class': 'repository-id',
+                type: 'name'
+            }, {
+                name: 'config[display_repo_name]',
+                label: i18n['KCHREPO6005M'],
+                'class': 'repository-name',
+                type: 'description'
+            }, {
+                name: 'enabled',
+                label: i18n['KCHREPO6009M'],
+                'class': 'repository-enabled',
+                type: 'status'
+            }];
+        } else if (repo_type === "deb") {
+            gridFields = [{
+                name: 'baseurl',
+                label: i18n['KCHREPO6006M'],
+                makeTitle: true,
+                'class': 'repository-baseurl deb',
+                type: 'description'
+            }, {
+                name: 'enabled',
+                label: i18n['KCHREPO6009M'],
+                'class': 'repository-enabled deb',
+                type: 'status'
+            }, {
+                name: 'config[dist]',
+                label: "dist",
+                'class': 'repository-gpgcheck deb'
+            }, {
+                name: 'config[comps]',
+                label: "comps",
+                'class': 'repository-gpgcheck deb'
+            }];
+        } else {
+            gridFields = [{
+                name: 'repo_id',
+                label: i18n['KCHREPO6004M'],
+                'class': 'repository-id',
+                type: 'name'
+            }, {
+                name: 'enabled',
+                label: i18n['KCHREPO6009M'],
+                'class': 'repository-enabled',
+                type: 'status'
+            }, {
+                name: 'baseurl',
+                label: i18n['KCHREPO6006M'],
+                makeTitle: true,
+                'class': 'repository-baseurl',
+                type: 'description'
+            }];
         }
-        repositoriesGrid = new wok.widget.Grid({
+        repositoriesGrid = new wok.widget.List({
             container: 'repositories-grid-container',
             id: 'repositories-grid',
             title: i18n['KCHREPO6003M'],
             toolbarButtons: [{
                 id: 'repositories-grid-add-button',
                 label: i18n['KCHREPO6012M'],
+                class: 'fa fa-plus-circle',
                 onClick: function(event) {
-                    wok.window.open({url:'plugins/kimchi/repository-add.html',
-                                    class: repo_type});
+                    wok.window.open({
+                        url: 'plugins/kimchi/repository-add.html',
+                        class: repo_type
+                    });
                 }
             }, {
                 id: 'repositories-grid-enable-button',
                 label: i18n['KCHREPO6016M'],
+                class: 'fa fa-play-circle-o',
                 disabled: true,
                 onClick: function(event) {
                     var repository = repositoriesGrid.getSelected();
-                    if(!repository) {
+                    if (!repository) {
                         return;
                     }
                     var name = repository['repo_id'];
@@ -108,31 +113,36 @@ kimchi.host_main = function() {
             }, {
                 id: 'repositories-grid-edit-button',
                 label: i18n['KCHREPO6013M'],
+                class: 'fa fa-pencil',
                 disabled: true,
                 onClick: function(event) {
                     var repository = repositoriesGrid.getSelected();
-                    if(!repository) {
+                    if (!repository) {
                         return;
                     }
                     kimchi.selectedRepository = repository['repo_id'];
-                    wok.window.open({url:'plugins/kimchi/repository-edit.html',
-                                    class: repo_type});
+                    wok.window.open({
+                        url: 'plugins/kimchi/repository-edit.html',
+                        class: repo_type
+                    });
                 }
             }, {
                 id: 'repositories-grid-remove-button',
                 label: i18n['KCHREPO6014M'],
+                class: 'fa fa-minus-circle',
+                critical: true,
                 disabled: true,
                 onClick: function(event) {
                     var repository = repositoriesGrid.getSelected();
-                    if(!repository) {
+                    if (!repository) {
                         return;
                     }
 
                     var settings = {
-                        title : i18n['KCHREPO6001M'],
-                        content : i18n['KCHREPO6002M'],
-                        confirm : i18n['KCHAPI6004M'],
-                        cancel : i18n['KCHAPI6003M']
+                        title: i18n['KCHREPO6001M'],
+                        content: i18n['KCHREPO6002M'],
+                        confirm: i18n['KCHAPI6004M'],
+                        cancel: i18n['KCHAPI6003M']
                     };
 
                     wok.confirm(settings, function() {
@@ -140,15 +150,15 @@ kimchi.host_main = function() {
                             repository['repo_id'],
                             function(result) {
                                 wok.topic('kimchi/repositoryDeleted').publish(result);
-                            }, function(error) {
-                            }
+                            },
+                            function(error) {}
                         );
                     });
                 }
             }],
             onRowSelected: function(row) {
                 var repository = repositoriesGrid.getSelected();
-                if(!repository) {
+                if (!repository) {
                     return;
                 }
                 $('#repositories-grid-remove-button').prop('disabled', false);
@@ -166,28 +176,26 @@ kimchi.host_main = function() {
 
     var listRepositories = function(gridCallback) {
         kimchi.listRepositories(function(repositories) {
-            if($.isFunction(gridCallback)) {
-                gridCallback(repositories);
-            }
-            else {
-                if(repositoriesGrid) {
-                    repositoriesGrid.setData(repositories);
-                }
-                else {
-                    initRepositoriesGrid();
-                    repositoriesGrid.setData(repositories);
+                if ($.isFunction(gridCallback)) {
+                    gridCallback(repositories);
+                } else {
+                    if (repositoriesGrid) {
+                        repositoriesGrid.setData(repositories);
+                    } else {
+                        initRepositoriesGrid();
+                        repositoriesGrid.setData(repositories);
+                    }
                 }
-            }
-        },
-        function(error) {
-            var message = error && error['responseJSON'] && error['responseJSON']['reason'];
+            },
+            function(error) {
+                var message = error && error['responseJSON'] && error['responseJSON']['reason'];
 
-            if($.isFunction(gridCallback)) {
-                gridCallback([]);
-            }
-            repositoriesGrid &&
-                repositoriesGrid.showMessage(message || i18n['KCHUPD6008M']);
-        });
+                if ($.isFunction(gridCallback)) {
+                    gridCallback([]);
+                }
+                repositoriesGrid &&
+                    repositoriesGrid.showMessage(message || i18n['KCHUPD6008M']);
+            });
 
         $('#repositories-grid-remove-button').prop('disabled', true);
         $('#repositories-grid-edit-button').prop('disabled', true);
@@ -258,16 +266,32 @@ kimchi.host_main = function() {
         });
     };
 
+    var startSoftwareUpdateProgress = function() {
+        var progressArea = $('#' + progressAreaID)[0];
+        $('#software-updates-progress-container').removeClass('hidden');
+        $(progressArea).text('');
+        !wok.isElementInViewport(progressArea) &&
+            progressArea.scrollIntoView();
+
+        kimchi.tailSoftwareUpdateLogs(function(result) {
+            reloadProgressArea(result);
+            wok.topic('kimchi/softwareUpdated').publish({
+                result: result
+            });
+            wok.message.warn(i18n['KCHUPD6010M']);
+        }, function(error) {
+            wok.message.error(i18n['KCHUPD6011M']);
+        }, reloadProgressArea);
+    };
+
     var listSoftwareUpdates = function(gridCallback) {
         kimchi.listSoftwareUpdates(function(softwareUpdates) {
-            if($.isFunction(gridCallback)) {
+            if ($.isFunction(gridCallback)) {
                 gridCallback(softwareUpdates);
-            }
-            else {
-                if(softwareUpdatesGrid) {
+            } else {
+                if (softwareUpdatesGrid) {
                     softwareUpdatesGrid.setData(softwareUpdates);
-                }
-                else {
+                } else {
                     initSoftwareUpdatesGrid(softwareUpdates);
                 }
             }
@@ -276,7 +300,18 @@ kimchi.host_main = function() {
             $(updateButton).prop('disabled', softwareUpdates.length === 0);
         }, function(error) {
             var message = error && error['responseJSON'] && error['responseJSON']['reason'];
-            if($.isFunction(gridCallback)) {
+
+            // cannot get the list of packages because there is another
+            // package manager instance running, so follow that instance updates
+            if (message.indexOf("KCHPKGUPD0005E") !== -1) {
+                startSoftwareUpdateProgress();
+                if ($.isFunction(gridCallback)) {
+                    gridCallback([]);
+                }
+                return;
+            }
+
+            if ($.isFunction(gridCallback)) {
                 gridCallback([]);
             }
             softwareUpdatesGrid &&
@@ -296,23 +331,25 @@ kimchi.host_main = function() {
         });
     };
     var initReportGrid = function(reports) {
-        reportGrid = new wok.widget.Grid({
+        reportGrid = new wok.widget.List({
             container: 'available-reports-grid-container',
             id: reportGridID,
             title: i18n['KCHDR6002M'],
             toolbarButtons: [{
                 id: reportGridID + '-generate-button',
+                class: 'fa fa-plus-circle',
                 label: i18n['KCHDR6006M'],
                 onClick: function(event) {
                     wok.window.open('plugins/kimchi/report-add.html');
                 }
             }, {
                 id: reportGridID + '-rename-button',
+                class: 'fa fa-pencil',
                 label: i18n['KCHDR6008M'],
                 disabled: true,
                 onClick: function(event) {
                     var report = reportGrid.getSelected();
-                    if(!report) {
+                    if (!report) {
                         return;
                     }
 
@@ -320,20 +357,37 @@ kimchi.host_main = function() {
                     wok.window.open('plugins/kimchi/report-rename.html');
                 }
             }, {
+                id: reportGridID + '-download-button',
+                label: i18n['KCHDR6010M'],
+                class: 'fa fa-download',
+                disabled: true,
+                onClick: function(event) {
+                    var report = reportGrid.getSelected();
+                    if (!report) {
+                        return;
+                    }
+
+                    kimchi.downloadReport({
+                        file: report['uri']
+                    });
+                }
+            }, {
                 id: reportGridID + '-remove-button',
+                class: 'fa fa-minus-circle',
                 label: i18n['KCHDR6009M'],
+                critical: true,
                 disabled: true,
                 onClick: function(event) {
                     var report = reportGrid.getSelected();
-                    if(!report) {
+                    if (!report) {
                         return;
                     }
 
                     var settings = {
-                        title : i18n['KCHAPI6004M'],
-                        content : i18n['KCHDR6001M'],
-                        confirm : i18n['KCHAPI6002M'],
-                        cancel : i18n['KCHAPI6003M']
+                        title: i18n['KCHAPI6004M'],
+                        content: i18n['KCHDR6001M'],
+                        confirm: i18n['KCHAPI6002M'],
+                        cancel: i18n['KCHAPI6003M']
                     };
 
                     wok.confirm(settings, function() {
@@ -342,36 +396,21 @@ kimchi.host_main = function() {
                         }, function(result) {
                             listDebugReports();
                         }, function(error) {
-                           wok.message.error(error.responseJSON.reason);
+                            wok.message.error(error.responseJSON.reason);
                         });
                     });
                 }
-            }, {
-                id: reportGridID + '-download-button',
-                label: i18n['KCHDR6010M'],
-                disabled: true,
-                onClick: function(event) {
-                    var report = reportGrid.getSelected();
-                    if(!report) {
-                        return;
-                    }
-
-                    kimchi.downloadReport({
-                        file: report['uri']
-                    });
-                }
             }],
             onRowSelected: function(row) {
                 var report = reportGrid.getSelected();
                 // Only enable report buttons if the selected line is not a
                 // pending report
-                if (report['time'] == i18n['KCHDR6007M']) {
-                    var gridElement = $('#'+ reportGridID);
+                if (report['time'] === i18n['KCHDR6007M']) {
+                    var gridElement = $('#' + reportGridID);
                     var row = $('tr:contains(' + report['name'] + ')', gridElement);
                     enableReportButtons(false);
                     row.attr('class', '');
-                }
-                else {
+                } else {
                     enableReportButtons(true);
                 }
             },
@@ -379,26 +418,31 @@ kimchi.host_main = function() {
             fields: [{
                 name: 'name',
                 label: i18n['KCHDR6003M'],
-                'class': 'debug-report-name'
+                'class': 'debug-report-name',
+                type: 'name'
             }, {
                 name: 'time',
                 label: i18n['KCHDR6005M'],
-                'class': 'debug-report-time'
+                'class': 'debug-report-time',
+                type: 'description'
             }],
             data: reports
         });
     };
 
     var getPendingReports = function() {
-        var reports = []
-        var filter = 'status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/debugreports/*')
+        var reports = [];
+        var filter = 'status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/debugreports/*');
 
         kimchi.getTasksByFilter(filter, function(tasks) {
-            for(var i = 0; i < tasks.length; i++) {
-                reportName = tasks[i].target_uri.replace(/^\/plugins\/kimchi\/debugreports\//, '') || i18n['KCHDR6012M'];
-                reports.push({'name': reportName, 'time': i18n['KCHDR6007M']})
+            for (var i = 0; i < tasks.length; i++) {
+                var reportName = tasks[i].target_uri.replace(/^\/plugins\/kimchi\/debugreports\//, '') || i18n['KCHDR6012M'];
+                reports.push({
+                    'name': reportName,
+                    'time': i18n['KCHDR6007M']
+                });
 
-                if(kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
+                if (kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
                     continue;
                 }
 
@@ -424,29 +468,36 @@ kimchi.host_main = function() {
 
     var listDebugReports = function() {
         kimchi.listReports(function(reports) {
-            pendingReports = getPendingReports();
-            allReports = pendingReports.concat(reports);
-            $('#debug-report-section').removeClass('hidden');
+            var pendingReports = getPendingReports();
+            var allReports = pendingReports.concat(reports);
 
             // Row selection will be cleared so disable buttons here
             enableReportButtons(false);
 
-            if(reportGrid) {
+            if (reportGrid) {
                 reportGrid.setData(allReports);
-            }
-            else {
+            } else {
                 initReportGrid(allReports);
             }
 
+            if (!allReports.length)  {
+                $('#available-reports-grid-btn-group').removeClass('hidden');
+            }else {
+                $('#available-reports-grid-btn-group').addClass('hidden');
+            }
+
             // Set id-debug-img to pending reports
             // It will display a loading icon
             var gridElement = $('#' + reportGridID);
-                $.each($('td:contains(' + i18n['KCHDR6007M']  + ')', gridElement), function(index, row) {
-                $(row).parent().addClass('no-hover');
-                $(row).attr('id', 'id-debug-img');
+            //  "Generating..."
+            $.each($('td:contains(' + i18n['KCHDR6007M'] + ')', gridElement), function(index, row) {
+                console.log(row);
+                $(row).parent().addClass('generating');
+                $(row).parent().find('.dropdown-toggle').addClass('disabled');
+                //$(row).attr('id', 'id-debug-img');
             });
         }, function(error) {
-            if(error['status'] == 403) {
+            if (error['status'] === 403) {
                 $('#debug-report-section').addClass('hidden');
                 return;
             }
@@ -458,10 +509,9 @@ kimchi.host_main = function() {
     var restartButtonID = '#host-button-restart';
     var shutdownHost = function(params) {
         var settings = {
-            title : i18n['KCHAPI6004M'],
-            content : i18n['KCHHOST6008M'],
-            confirm : i18n['KCHAPI6002M'],
-            cancel : i18n['KCHAPI6003M']
+            content: i18n['KCHHOST6008M'],
+            confirm: i18n['KCHAPI6002M'],
+            cancel: i18n['KCHAPI6003M']
         };
 
         wok.confirm(settings, function() {
@@ -470,8 +520,8 @@ kimchi.host_main = function() {
             $(restartButtonID).prop('disabled', true);
             // Check if there is any VM is running.
             kimchi.listVMs(function(vms) {
-                for(var i = 0; i < vms.length; i++) {
-                    if(vms[i]['state'] === 'running') {
+                for (var i = 0; i < vms.length; i++) {
+                    if (vms[i]['state'] === 'running') {
                         wok.message.error.code('KCHHOST6001E');
                         $(shutdownButtonID).prop('disabled', false);
                         $(restartButtonID).prop('disabled', false);
@@ -480,39 +530,30 @@ kimchi.host_main = function() {
                 }
 
             });
-        }, function() {
-        });
+        }, function() {});
     };
 
     var initPage = function() {
-        $('#host-info-container .section-header').each(function(i, header) {
-            $('<span class="arrow"></span>').prependTo(header);
-            var toExpand = $(header).attr('aria-expanded') !== 'false';
-            expand(header, toExpand);
-        });
-
-        $('#host-info-container').on('click', '.section-header', function(event) {
-            var toExpand = $(this).attr('aria-expanded') === 'false';
-            expand(this, toExpand);
-        });
 
         $('#host-button-shutdown').on('click', function(event) {
+            event.preventDefault();
             shutdownHost(null);
         });
 
         $('#host-button-restart').on('click', function(event) {
+            event.preventDefault();
             shutdownHost({
                 reboot: true
             });
         });
 
         var setupUI = function() {
-            if (kimchi.capabilities == undefined) {
+            if (kimchi.capabilities === undefined) {
                 setTimeout(setupUI, 2000);
                 return;
             }
 
-            if((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool']!="None")) {
+            if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) {
                 initRepositoriesGrid(kimchi.capabilities['repo_mngt_tool']);
                 $('#repositories-section').switchClass('hidden', kimchi.capabilities['repo_mngt_tool']);
                 wok.topic('kimchi/repositoryAdded')
@@ -523,7 +564,7 @@ kimchi.host_main = function() {
                     .subscribe(listRepositories);
             }
 
-            if(kimchi.capabilities['update_tool']) {
+            if (kimchi.capabilities['update_tool']) {
                 $('#software-update-section').removeClass('hidden');
                 initSoftwareUpdatesGrid();
                 wok.topic('kimchi/softwareUpdated')
@@ -533,7 +574,7 @@ kimchi.host_main = function() {
                 });
             }
 
-            if(kimchi.capabilities['system_report_tool']) {
+            if (kimchi.capabilities['system_report_tool']) {
                 listDebugReports();
                 wok.topic('kimchi/debugReportAdded')
                     .subscribe(listDebugReports);
@@ -576,40 +617,40 @@ kimchi.host_main = function() {
                 }
             },
             diskIO: {
-                r: {
+                w: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['KCHHOST6004M'],
+                    legend: i18n['KCHHOST6005M'],
+                    'class': 'disk-write',
                     points: []
                 },
-                w: {
+                r: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['KCHHOST6005M'],
-                    'class': 'disk-write',
+                    legend: i18n['KCHHOST6004M'],
                     points: []
                 }
             },
             networkIO: {
-                r: {
+                s: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['KCHHOST6006M'],
+                    legend: i18n['KCHHOST6007M'],
+                    'class': 'network-sent',
                     points: []
                 },
-                s: {
+                r: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['KCHHOST6007M'],
-                    'class': 'network-sent',
+                    legend: i18n['KCHHOST6006M'],
                     points: []
                 }
             }
@@ -618,38 +659,36 @@ kimchi.host_main = function() {
         var cursor = SIZE;
 
         var add = function(stats) {
-            for(var key in stats) {
+            for (var key in stats) {
                 var item = stats[key];
-                for(var metrics in item) {
+                for (var metrics in item) {
                     var value = item[metrics]['v'];
                     var max = item[metrics]['max'];
                     var unifiedMetrics = statsArray[key][metrics];
                     var ps = unifiedMetrics['points'];
-                    if(!Array.isArray(value)){
+                    if (!Array.isArray(value)) {
                         ps.push(value);
-                        if(ps.length > SIZE + 1) {
+                        if (ps.length > SIZE + 1) {
                             ps.shift();
                         }
+                    } else {
+                        ps = ps.concat(value);
+                        ps.splice(0, ps.length - SIZE - 1);
+                        unifiedMetrics['points'] = ps;
                     }
-                    else{
-                        ps=ps.concat(value);
-                        ps.splice(0, ps.length-SIZE-1);
-                        unifiedMetrics['points']=ps;
-                    }
-                    if(max !== undefined) {
+                    if (max !== undefined) {
                         unifiedMetrics['max'] = max;
-                    }
-                    else {
-                        if(unifiedMetrics['type'] !== 'value') {
+                    } else {
+                        if (unifiedMetrics['type'] !== 'value') {
                             continue;
                         }
                         max = -Infinity;
                         $.each(ps, function(i, value) {
-                            if(value > max) {
+                            if (value > max) {
                                 max = value;
                             }
                         });
-                        if(max === 0) {
+                        if (max === 0) {
                             ++max;
                         }
                         max *= 1.1;
@@ -663,7 +702,7 @@ kimchi.host_main = function() {
         var get = function(which) {
             var stats = statsArray[which];
             var lines = [];
-            for(var k in stats) {
+            for (var k in stats) {
                 var obj = stats[k];
                 var line = {
                     type: obj['type'],
@@ -672,10 +711,10 @@ kimchi.host_main = function() {
                     fixed: obj['fixed'],
                     legend: obj['legend']
                 };
-                if(obj['max']) {
+                if (obj['max']) {
                     line['max'] = obj['max'];
                 }
-                if(obj['class']) {
+                if (obj['class']) {
                     line['class'] = obj['class'];
                 }
                 var ps = obj['points'];
@@ -700,104 +739,102 @@ kimchi.host_main = function() {
     };
 
     var Tracker = function(charts) {
-      var charts = charts;
-      var timer = null;
-      var statsPool = new StatsMgr();
-      var setCharts = function(newCharts) {
-          charts = newCharts;
-          for(var key in charts) {
-              var chart = charts[key];
-              chart.updateUI(statsPool.get(key));
-          }
-      };
-
-      var self = this;
-
-      var UnifyStats = function(stats) {
-          var result= {
-              cpu: {
-                  u: {
-                      v: stats['cpu_utilization']
-                  }
-              },
-              memory: {
-                  u: {
-                  }
-              },
-              diskIO: {
-                  r: {
-                      v: stats['disk_read_rate']
-                  },
-                  w: {
-                      v: stats['disk_write_rate']
-                  }
-              },
-              networkIO: {
-                  r: {
-                      v: stats['net_recv_rate']
-                  },
-                  s: {
-                      v: stats['net_sent_rate']
-                  }
-              }
-          };
-          if(Array.isArray(stats['memory'])){
-              result.memory.u['v']=[];
-              result.memory.u['max']=-Infinity;
-              for(var i=0;i<stats['memory'].length;i++){
-                  result.memory.u['v'].push(stats['memory'][i]['avail']);
-                  result.memory.u['max']=Math.max(result.memory.u['max'],stats['memory'][i]['total']);
-              }
-          }
-          else {
-              result.memory.u['v']=stats['memory']['avail'],
-              result.memory.u['max']=stats['memory']['total']
-          }
-          return(result);
-      };
-
-
-      var statsCallback = function(stats) {
-              var unifiedStats = UnifyStats(stats);
-              statsPool.add(unifiedStats);
-              for(var key in charts) {
-                  var chart = charts[key];
-                  chart.updateUI(statsPool.get(key));
-              }
-              timer = setTimeout(function() {
-                  continueTrack();
-              }, 1000);
-          };
-
-      var track = function() {
-          kimchi.getHostStatsHistory(statsCallback,
-            function() {
-                continueTrack();
-            });
-      };
+        var charts = charts;
+        var timer = null;
+        var statsPool = new StatsMgr();
+        var setCharts = function(newCharts) {
+            charts = newCharts;
+            for (var key in charts) {
+                var chart = charts[key];
+                chart.updateUI(statsPool.get(key));
+            }
+        };
 
-      var continueTrack = function() {
-          kimchi.getHostStats(statsCallback,
-            function() {
+        var self = this;
+
+        var UnifyStats = function(stats) {
+            var result = {
+                cpu: {
+                    u: {
+                        v: stats['cpu_utilization']
+                    }
+                },
+                memory: {
+                    u: {}
+                },
+                diskIO: {
+                    w: {
+                        v: stats['disk_write_rate']
+                    },
+                    r: {
+                        v: stats['disk_read_rate']
+                    }
+                },
+                networkIO: {
+                    s: {
+                        v: stats['net_sent_rate']
+                    },
+                    r: {
+                        v: stats['net_recv_rate']
+                    }
+                }
+            };
+            if (Array.isArray(stats['memory'])) {
+                result.memory.u['v'] = [];
+                result.memory.u['max'] = -Infinity;
+                for (var i = 0; i < stats['memory'].length; i++) {
+                    result.memory.u['v'].push(stats['memory'][i]['avail']);
+                    result.memory.u['max'] = Math.max(result.memory.u['max'], stats['memory'][i]['total']);
+                }
+            } else {
+                result.memory.u['v'] = stats['memory']['avail'],
+                    result.memory.u['max'] = stats['memory']['total']
+            }
+            return (result);
+        };
+
+
+        var statsCallback = function(stats) {
+            var unifiedStats = UnifyStats(stats);
+            statsPool.add(unifiedStats);
+            for (var key in charts) {
+                var chart = charts[key];
+                chart.updateUI(statsPool.get(key));
+            }
+            timer = setTimeout(function() {
                 continueTrack();
-            });
-      };
-
-      var destroy = function() {
-          timer && clearTimeout(timer);
-          timer = null;
-      };
-
-      return {
-        setCharts: setCharts,
-        start: track,
-        stop: destroy
-      };
+            }, 1000);
+        };
+
+        var track = function() {
+            kimchi.getHostStatsHistory(statsCallback,
+                function() {
+                    continueTrack();
+                });
+        };
+
+        var continueTrack = function() {
+            kimchi.getHostStats(statsCallback,
+                function() {
+                    continueTrack();
+                });
+        };
+
+        var destroy = function() {
+            timer && clearTimeout(timer);
+            timer = null;
+        };
+
+        return {
+            setCharts: setCharts,
+            start: track,
+            stop: destroy
+        };
     };
 
     var initTracker = function() {
         // TODO: Extend tabs with onUnload event to unregister timers.
-        if(kimchi.hostTimer) {
+        if (kimchi.hostTimer) {
             kimchi.hostTimer.stop();
             delete kimchi.hostTimer;
         }
@@ -825,20 +862,19 @@ kimchi.host_main = function() {
             })
         };
 
-        if(kimchi.hostTimer) {
+        if (kimchi.hostTimer) {
             kimchi.hostTimer.setCharts(trackedCharts);
-        }
-        else {
+        } else {
             kimchi.hostTimer = new Tracker(trackedCharts);
             kimchi.hostTimer.start();
         }
     };
 
     $('#host-root-container').on('remove', function() {
-        if(kimchi.hostTimer) {
+        if (kimchi.hostTimer) {
             kimchi.hostTimer.stop();
             delete kimchi.hostTimer;
-            }
+        }
 
         repositoriesGrid && repositoriesGrid.destroy();
         wok.topic('kimchi/repositoryAdded')
diff --git a/src/wok/plugins/kimchi/ui/pages/host.html.tmpl b/src/wok/plugins/kimchi/ui/pages/host.html.tmpl
index d87debc..3c6eda8 100644
--- a/src/wok/plugins/kimchi/ui/pages/host.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/host.html.tmpl
@@ -23,153 +23,124 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <!DOCTYPE html>
-<html>
+<html> 
 <head>
 <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css">
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
 <div id="host-root-container">
-    <div class="toolbar">
-        <div class="tools">
-        </div>
+<nav class="navbar navbar-default toolbar">
+  <div class="container">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="toolbar">
+      <ul class="nav navbar-nav navbar-right tools">
+        <li><a id="host-button-restart" href="javascript:void(0);"><i class="fa fa-refresh"></i><span>$_("Restart")</span></a></li>
+        <li><a id="host-button-shutdown" href="javascript:void(0);"><i class="fa fa-ban"></i><span>$_("Shut down")</span></a></li>
+        <!-- <li><a href="javascript:void(0);"><i class="fa fa-desktop"></i><span>$_("Connect")</span></a></li> -->
+      </ul>
     </div>
+  </div>
+</nav>
     <div id="host-content-container" class="empty-when-logged-off"></div>
 </div>
 
 <script id="host-tmpl" type="kimchi/template">
-    <div class="host-panel">
-        <div class="logo-container">
-            <div class="logo" style="background-image: url({logo});"></div>
-        </div>
-        <div id="host-info-container" class="info-container">
-            <h2 class="hostname">{hostname}</h2>
-            <div class="action-panel">
-                <button id="host-button-shutdown" class="btn-normal-1 stop">
-                    <div class="button-icon action-icon-stop"></div>
-                    $_("Shut down")
-                </button>
-                <button id="host-button-restart" class="btn-normal-1 restart">
-                    <div class="button-icon action-icon-restart"></div>
-                    $_("Restart")
-                </button>
-                <button class="btn-normal-1 connect" disabled="disabled">
-                    <div class="button-icon action-icon-connect"></div>
-                    $_("Connect")
-                </button>
-            </div>
-            <div class="host-section">
-                <h3 class="section-header"
-                    aria-expanded="false"
-                    aria-controls="content-sys-info">
-                    $_("Basic Information")
-                </h3>
-                <div id="content-sys-info" class="section-content">
-                    <div class="section-row">
-                        <div class="section-label">$_("OS Distro")</div>
-                        <div class="section-value">{os_distro}</div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("OS Version")</div>
-                        <div class="section-value">{os_version}</div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("OS Code Name")</div>
-                        <div class="section-value">{os_codename}</div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("Processor")</div>
-                        <div class="section-value">{cpu_model}</div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("CPU(s)")</div>
-                        <div class="section-value">{cpus}</div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("Memory")</div>
-                        <div class="section-value">{memory}</div>
+<div class="host-dashboard">
+    <div class="container">
+        <div id="alert-container"></div>
+        <div id="content-sys-statistics" class="row">
+            <div class="col-md-3">
+                <div id="cpu-dashboard">
+                    <h3 class="section-label">$_("CPU")</h3>
+                    <div class="section-value">
+                        <div id="container-chart-cpu" class="inline-block"></div>
                     </div>
                 </div>
             </div>
-            <div class="host-section">
-                <h3 class="section-header"
-                    aria-controls="content-sys-statistics">
-                    $_("System Statistics")
-                </h3>
-                <div id="content-sys-statistics" class="section-content">
-                    <div class="section-row">
-                        <div class="section-label">$_("CPU")</div>
-                        <div class="section-value">
-                            <div id="container-chart-cpu" class="inline-block"></div>
-                        </div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("Memory")</div>
-                        <div class="section-value">
-                            <div id="container-chart-memory" class="inline-block"></div>
-                        </div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("Disk I/O")</div>
-                        <div class="section-value">
-                            <div id="container-chart-disk-io" class="inline-block"></div>
-                        </div>
-                    </div>
-                    <div class="section-row">
-                        <div class="section-label">$_("Network I/O")</div>
-                        <div class="section-value">
-                            <div id="container-chart-network-io" class="inline-block"></div>
-                        </div>
+            <div class="col-md-3">
+                <div id="memory-dashboard">
+                    <h3 class="section-label">$_("Memory")</h3>
+                    <div class="section-value">
+                        <div id="container-chart-memory" class="inline-block"></div>
                     </div>
                 </div>
             </div>
-            <div id="software-update-section" class="host-section hidden">
-                <h3 class="section-header"
-                    aria-controls="content-software-update">
-                    $_("Software Updates")
-                </h3>
-                <div id="content-software-update" class="section-content">
-                    <div class="section-row">
-                        <div class="section-value">
-                            <div id="software-updates-grid-container"></div>
-                            <div id="software-updates-progress-container" class="hidden">
-                                <label for="software-updates-progress-textarea">$_("Update Progress")</label>
-                                <textarea id="software-updates-progress-textarea" readonly></textarea>
-                            </div>
-                        </div>
+            <div class="col-md-3">
+                <div id="disk-dashboard">
+                    <h3 class="section-label">$_("Disk I/O")</h3>
+                    <div class="section-value">
+                        <div id="container-chart-disk-io" class="inline-block"></div>
                     </div>
                 </div>
             </div>
-            <div id="repositories-section" class="host-section hidden">
-                <h3 class="section-header"
-                    aria-controls="content-repositories">
-                    $_("Repositories")
-                </h3>
-                <div id="content-repositories" class="section-content">
-                    <div class="section-row">
-                        <div class="section-value">
-                            <div id="repositories-grid-container"></div>
-                        </div>
+            <div class="col-md-3">
+                <div id="network-dashboard">
+                    <h3 class="section-label">$_("Network I/O")</h3>
+                    <div class="section-value">
+                        <div id="container-chart-network-io" class="inline-block"></div>
                     </div>
                 </div>
             </div>
-            <div id="debug-report-section" class="host-section hidden">
-                <h3 class="section-header"
-                    aria-controls="content-sys-reports">
-                    $_("Debug Reports")
-                </h3>
-                <div id="content-sys-reports" class="section-content">
-                    <div class="section-row">
-                        <div class="section-value">
-                            <div id="available-reports-grid-container"></div>
-                        </div>
+        </div>
+    </div>
+</div>
+<div class="host-panel">
+    <div class="container">
+        <div id="host-info-container" class="row">
+            <div id="content-sys-info" class="panel panel-default col-md-4">
+                <div class="panel-heading">
+                    <h3 class="panel-title">$_("Basic Information")</h3>
+                </div>
+                <div class="panel-body">
+                    <dl class="basic-information-list">
+                        <dt>{os_distro}</dt>
+                        <dd>$_("OS Distro")</dd>
+                        <dt>{os_version}</dt>
+                        <dd>$_("OS Version")</dd>
+                        <dt>{os_codename}</dt>
+                        <dd>$_("OS Code Name")</dd>
+                        <dt>{cpu_model}</dt>
+                        <dd>$_("Processor")</dd>
+                        <dt>{cpus}</dt>
+                        <dd>$_("CPU(s)")</dd>
+                        <dt>{memory}</dt>
+                        <dd>$_("Memory")</dd>
+                    </dl>
+                </div>
+            </div>
+            <div id="repositories-grid-container" class="col-md-4"></div>
+            <div id="available-reports-grid-container" class="col-md-4"></div>
+        </div>
+        <div class="row">
+            <div id="software-update-section" class="panel panel-default col-md-12">
+                <div class="panel-heading">
+                    <h3 class="panel-title">$_("Software Updates")</h3>
+                </div>
+                <div id="content-software-update" class="panel panel-default">
+                    <div id="software-updates-grid-container"></div>
+                    <div id="software-updates-progress-container" class="hidden">
+                        <label for="software-updates-progress-textarea">$_("Update Progress")</label>
+                        <textarea id="software-updates-progress-textarea" readonly></textarea>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
 </script>
-
+<div id="modalWindow" class="modal fade host-modal" tabindex="-1" role="dialog" aria-labelledby="hostsModalLabel" aria-hidden="true">
+</div>
 <script type="text/javascript">
     kimchi.host_main();
 </script>
diff --git a/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl
index 25bf0a9..8d6fb38 100644
--- a/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl
@@ -22,35 +22,25 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <!DOCTYPE html>
-<div id="report-add-window" class="window">
-    <header>
-        <h1 class="title h1 grey">$_("Generate a New Debug Report")</h1>
-    </header>
-    <div class="content">
-        <form id="form-report-add">
-            <section class="form-section">
-                <h2>
-                    <label for="report-name-textbox">$_("Report Name")</label>
-                </h2>
-                <div class="field">
-                    <input type="text" class="text" id="report-name-textbox" name="name" />
-                    <span class="icon-info-circled light-grey c1"></span>
-                    <span class="info-add-debug-report">
-                        $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").")
-                    </span>
-                </div>
-            </section>
-        </form>
-    </div>
-    <footer>
-        <div class="btn-group">
-            <button id="button-report-add" class="btn-normal"><span class="text">$_("Generate")</span></button>
-            <button id="button-report-cancel" class="btn-normal close" type="button">
-                <span calss="text">$_("Cancel")</span>
-            </button>
+<div class="modal-content">
+  <div class="modal-header">
+    <h4 class="modal-title">$_("Generate a New Debug Report")</h4>
+  </div>
+  <div class="modal-body">
+    <form id="form-report-add">
+        <div class="form-group">
+            <label for="report-name-textbox">$_("Report Name")</label>
+            <input type="text" class="form-control" id="report-name-textbox" name="name" />
+            <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").")
+            </p>
         </div>
-    </footer>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" id="button-report-add" class="btn btn-default" data-dismiss="modal">$_("Generate")</button>
+    <button type="button" id="button-report-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+  </div>
 </div>
 <script>
     kimchi.report_add_main();
-</script>
+</script> 
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl b/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl
index 90a0a80..f89da19 100644
--- a/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl
@@ -22,35 +22,27 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <!DOCTYPE html>
-<div id="report-rename-window" class="window">
-    <header>
-        <h1 class="title h1 grey">$_("Rename a Debug Report")</h1>
-    </header>
-    <div class="content">
+<div class="modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title">$_("Rename a Debug Report")</h4>
+    </div>
+    <div class="modal-body">
         <form id="form-report-rename">
-            <section class="form-section">
-                <h2>
-                    <label for="report-name-textbox">$_("Report Name")</label>
-                </h2>
-                <div class="field">
-                    <input type="text" class="text" id="report-name-textbox" name="name" />
-                    <span class="icon-info-circled light-grey c1"></span>
-                    <span class="info-debug-report-rename">
-                        $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").")
-                    </span>
-                </div>
-            </section>
+            <div class="form-group">
+                <label for="report-name-textbox">$_("Report Name")</label>
+                <input type="text" class="form-control" id="report-name-textbox" name="name" />
+                <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").")
+                </p>
+            </div>
         </form>
     </div>
-    <footer>
-        <div class="btn-group">
-            <button id="button-report-rename" class="btn-normal"><span class="text">$_("Submit")</span></button>
-            <button id-"button-report-rename-cancel" class="btn-normal close" type="button">
-                <span class="text">$_("Cancel")</span>
-            </button>
-        </div>
-    </footer>
+    <div class="modal-footer">
+        <button type="button" id="button-report-rename" class="btn btn-default" data-dismiss="modal">$_("Submit")</button>
+        <button type="button" id- "button-report-rename-cancel" class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")
+        </button>
+    </div>
 </div>
 <script>
     kimchi.report_rename_main();
 </script>
+ 
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl
index 950252a..6da8c05 100644
--- a/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl
@@ -21,93 +21,51 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
 #silent _ = t.gettext
 #silent _t = t.gettext
-<div id="repository-add-window" class="window">
-    <form id="form-repository-add">
-        <header class="window-header">
-            <h1 class="title h1 grey">$_("Add a Repository")</h1>
-        </header>
-        <section>
-            <div class="content">
-                <div class="form-section yum">
-                    <h2>$_("Identifier")</h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" class="text" name="repo_id" />
-                        </div>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("Single word, unique identifier for the repository.")
+<div class="modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title">$_("Add a Repository")</h4>
+    </div>
+    <div class="modal-body">
+        <form id="form-repository-add">
+                <div class="form-group yum">
+                        <label for="repo_id">$_("Identifier")</label>
+                        <input type="text" class="form-control" name="repo_id" />
+                        <p class="help-block"><i class="fa fa-info-circle"></i> $_("Single word, unique identifier for the repository.")
                         </p>
-                    </div>
                 </div>
-                <section class="form-section yum">
-                    <h2>$_("Name")</h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" class="text" name="config[repo_name]" />
-                        </div>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("Textual name for the repository.")
+                <div class="form-group yum">
+                    <label for="repo_name">$_("Name")</label>
+                        <input type="text" class="form-control" id="repo_name" name="config[repo_name]" />
+                        <p class="help-block"><i class="fa fa-info-circle"></i> $_("Textual name for the repository.")
                         </p>
-                    </div>
-                </section>
-                <section class="form-section">
-                    <h2>$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" class="text required" name="baseurl" />
-                        </div>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("URL to the repository. Supported protocols are http, ftp, and file.")
-                        </p>
-                    </div>
-                    <div class="field yum">
-                        <p class="yum">
-                            <input type="checkbox" name="isMirror" value="true" id="isMirror" />
-                            <label id="isMirrorLabel" for="isMirror">$_("Repository is a mirror")</label>
-                        </p>
-                    </div>
-                </section>
-                <section class="form-section repository-dist deb">
-                    <h2>$_("Distribution")</h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" class="text" name="config[dist]" />
-                        </div>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("Distribution of the DEB repository.")
-                        </p>
-                    </div>
-                </section>
-                <section class="form-section repository-comps deb">
-                    <h2>$_("Components")</h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" class="text" name="config[comps]" />
-                        </div>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("List of components in DEB repository.")
-                        </p>
-                    </div>
-                </section>
-            </div>
-        </section>
-        <footer>
-            <div class="btn-group">
-                <button type="submit" id="button-repository-add" class="btn-normal" disabled="disabled">
-                    <span class="text">$_("Add")</span>
-                </button>
-                <button type="button" id="button-repository-close" class="btn-normal close">
-                    <span class="text">$("Cancel")</span>
-                </button>
-            </div>
-        </footer>
-    </form>
+                </div>
+                <div class="form-group">                
+                        <label for="baseurl">$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></label>
+                        <input type="text" class="form-control required" id="baseurl" name="baseurl" />
+                        <p class="help-block"><i class="fa fa-info-circle"></i> $_("URL to the repository. Supported protocols are http, ftp, and file.")</p>
+                </div>
+                <div class="checkbox yum">
+                            <label id="isMirrorLabel" for="isMirror">
+                            <input type="checkbox" name="isMirror" value="true" id="isMirror" /> $_("Repository is a mirror")</label>
+                </div>
+                <div class="form-group repository-dist deb">
+                    <label>$_("Distribution")</label>
+                    <input type="text" class="form-control" name="config[dist]" />
+                    <p class="help-block"><i class="fa fa-info-circle"></i> $_("Distribution of the DEB repository.")</p>
+                </div>
+                <div class="form-group repository-comps deb">
+                    <label>$_("Components")</label>
+                    <input type="text" class="form-control" name="config[comps]" />
+                    <p class="help-block"><i class="fa fa-info-circle"></i> $_("List of components in DEB repository.")</p>
+                </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+                <button type="submit" id="button-repository-add" class="btn btn-default" disabled="disabled">$_("Add")</button>
+                <button type="button" id="button-repository-close" data-dismiss="modal" class="btn btn-default">$("Cancel")</button>
+    </div>
 </div>
 <script>
     kimchi.repository_add_main();
 </script>
+ 
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl b/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl
index e5a3cfb..33e5eee 100644
--- a/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl
@@ -21,97 +21,57 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
 #silent _ = t.gettext
 #silent _t = t.gettext
-
-<div id="repository-edit-window" class="window">
-    <form id="form-repository-edit">
-        <header>
-            <h1 class="title h1 grey">$_("Edit Repository")</h1>
-        </header>
-        <div class="content">
-            <section id="form-repository-edit">
-                <fieldset class="repository-edit-fieldset">
-                    <div class="repository-id yum">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-id-textbox">$_("ID")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-id-textbox" name="repo_id" type="text" disabled="disabled" readonly="readonly"/>
-                        </div>
-                    </div>
-                    <div class="repository-name yum">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-name-textbox">$_("Name")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-name-textbox" class="yum" name="config[repo_name]" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-url">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-baseurl-textbox">$_("URL")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-baseurl-textbox" name="baseurl" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-dist deb">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-urlargs-textbox">$_("Distribution")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-urlargs-textbox" class="deb" name="config[dist]" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-mirrorlist yum">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-urlargs-textbox">$_("Mirror List URL")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-urlargs-textbox" class="yum" name="config[mirrorlist]" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-comps deb">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-urlargs-textbox">$_("Components")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-urlargs-textbox" class="deb" name="config[comps]" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-gpgkey yum">
-                        <div class="repository-edit-wrapper-label">
-                            <label for="repository-edit-gpgkey-textbox">$_("GPG Key")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-gpgkey-textbox" class="yum" name="config[gpgkey]" type="text" />
-                        </div>
-                    </div>
-                    <div class="repository-gpgcheck yum">
-                        <div class="repository-edit-wrapper-label">
-                            <label>$_("GPG Check")</label>
-                        </div>
-                        <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" />
-                            <label for="repository-edit-gpgcheck-radio-true">$_("Yes")</label>
-                            <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" />
-                            <label for="repository-edit-gpgcheck-radio-false">$_("No")</label>
-                        </div>
-                    </div>
-                </fieldset>
-            </section>
-        </div>
-        <footer>
-            <div class="btn-group">
-                <button type="submit" id="repository-edit-button-save" class="btn-normal">
-                    <span class="text">$_("Save")</span>
-                </button>
-                <button type="button" id="repository-edit-button-cancel" class="close btn-normal">
-                    <span class="text">$_("Cancel")</span>
-                </button>
+<div class="modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title">$_("Edit Repository")</h4>
+    </div>
+    <div class="modal-body">
+        <form id="form-repository-edit">
+            <div class="form-group repository-id yum">
+                <label for="repository-edit-id-textbox">$_("ID")</label>
+                <input id="repository-edit-id-textbox" class="form-control" name="repo_id" type="text" disabled="disabled" readonly="readonly" />
             </div>
-        </footer>
-    </form>
+            <div class="form-group repository-name yum">
+                <label for="repository-edit-name-textbox">$_("Name")</label>
+                <input id="repository-edit-name-textbox" class="form-control yum" name="config[repo_name]" type="text" />
+            </div>
+            <div class="form-group repository-url">
+                <label for="repository-edit-baseurl-textbox">$_("URL")</label>
+                <input id="repository-edit-baseurl-textbox" class="form-control" name="baseurl" type="text" />
+            </div>
+            <div class="form-group repository-dist deb">
+                <label for="repository-edit-urlargs-textbox">$_("Distribution")</label>
+                <input id="repository-edit-urlargs-textbox" class="form-control deb" name="config[dist]" type="text" />
+            </div>
+            <div class="form-group repository-mirrorlist yum">
+                <label for="repository-edit-urlargs-textbox">$_("Mirror List URL")</label>
+                <input id="repository-edit-urlargs-textbox" class="form-control yum" name="config[mirrorlist]" type="text" />
+            </div>
+            <div class="form-group repository-comps deb">
+                <label for="repository-edit-urlargs-textbox">$_("Components")</label>
+                <input id="repository-edit-urlargs-textbox" class="form-control deb" name="config[comps]" type="text" />
+            </div>
+            <div class="form-group repository-gpgkey yum">
+                <label for="repository-edit-gpgkey-textbox">$_("GPG Key")</label>
+                <input id="repository-edit-gpgkey-textbox" class="form-control yum" name="config[gpgkey]" type="text" />
+            </div>
+            <div class="form-group repository-gpgcheck yum">
+                <label>$_("GPG Check")</label>
+                <label for="repository-edit-gpgcheck-radio-true" class="radio inline control-label">
+                    <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" /> $_("Yes")
+                </label>
+                <label for="repository-edit-gpgcheck-radio-false" class="radio inline control-label">
+                    <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" /> $_("No")
+                </label>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" id="repository-edit-button-save" class="btn btn-default">$_("Save")</button>
+        <button type="button" id="repository-edit-button-cancel" class="btn btn-default">$_("Cancel")</button>
+    </div>
 </div>
 <script type="text/javascript">
     kimchi.repository_edit_main();
 </script>
+ 
\ No newline at end of file
-- 
1.9.3




More information about the Kimchi-devel mailing list