[Kimchi-devel] [PATCH 5/9] Adding new-ui to Gingerbase (Host tab)

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Tue Oct 27 21:22:59 UTC 2015


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

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 src/wok/plugins/gingerbase/.gitignore              |   2 +-
 src/wok/plugins/gingerbase/configure.ac            |   1 -
 src/wok/plugins/gingerbase/ui/config/tab-ext.xml   |   2 +-
 src/wok/plugins/gingerbase/ui/css/Makefile.am      |  11 +-
 .../plugins/gingerbase/ui/css/src/gingerbase.scss  |  29 +
 .../gingerbase/ui/css/src/modules/_host.scss       | 172 ++++++
 .../gingerbase/ui/css/theme-default/host.css       | 289 ----------
 .../gingerbase/ui/css/theme-default/report-add.css |  39 --
 .../ui/css/theme-default/report-rename.css         |  41 --
 .../ui/css/theme-default/repository-add.css        |  44 --
 .../ui/css/theme-default/repository-edit.css       |  90 ---
 src/wok/plugins/gingerbase/ui/images/Makefile.am   |   2 -
 src/wok/plugins/gingerbase/ui/images/logo.ico      | Bin 1214 -> 15086 bytes
 .../gingerbase/ui/images/theme-default/Makefile.am |  20 -
 .../ui/images/theme-default/host-icon-sprite.png   | Bin 1034 -> 0 bytes
 .../images/theme-default/kimchi-loading15x15.gif   | Bin 1653 -> 0 bytes
 .../gingerbase/ui/js/src/gingerbase.host.js        | 642 +++++++++++----------
 src/wok/plugins/gingerbase/ui/pages/host.html.tmpl | 211 +++----
 .../gingerbase/ui/pages/report-add.html.tmpl       |  46 +-
 .../gingerbase/ui/pages/report-rename.html.tmpl    |  42 +-
 .../gingerbase/ui/pages/repository-add.html.tmpl   | 124 ++--
 .../gingerbase/ui/pages/repository-edit.html.tmpl  | 138 ++---
 22 files changed, 759 insertions(+), 1186 deletions(-)
 create mode 100644 src/wok/plugins/gingerbase/ui/css/src/gingerbase.scss
 create mode 100644 src/wok/plugins/gingerbase/ui/css/src/modules/_host.scss
 delete mode 100644 src/wok/plugins/gingerbase/ui/css/theme-default/host.css
 delete mode 100644 src/wok/plugins/gingerbase/ui/css/theme-default/report-add.css
 delete mode 100644 src/wok/plugins/gingerbase/ui/css/theme-default/report-rename.css
 delete mode 100644 src/wok/plugins/gingerbase/ui/css/theme-default/repository-add.css
 delete mode 100644 src/wok/plugins/gingerbase/ui/css/theme-default/repository-edit.css
 delete mode 100644 src/wok/plugins/gingerbase/ui/images/theme-default/Makefile.am
 delete mode 100644 src/wok/plugins/gingerbase/ui/images/theme-default/host-icon-sprite.png
 delete mode 100644 src/wok/plugins/gingerbase/ui/images/theme-default/kimchi-loading15x15.gif

diff --git a/src/wok/plugins/gingerbase/.gitignore b/src/wok/plugins/gingerbase/.gitignore
index 96e8ab4..fd46e05 100644
--- a/src/wok/plugins/gingerbase/.gitignore
+++ b/src/wok/plugins/gingerbase/.gitignore
@@ -22,7 +22,6 @@ contrib/DEBIAN/control
 contrib/gingerbase.spec.fedora
 contrib/gingerbase.spec.suse
 contrib/make-deb.sh
-*.min.css
 *.min.js
 *.gmo
 stamp-po
@@ -35,3 +34,4 @@ po/gen-pot
 *.rej
 *.pem
 ui/pages/help/*/*.html
+ui/css/gingerbase.css
\ No newline at end of file
diff --git a/src/wok/plugins/gingerbase/configure.ac b/src/wok/plugins/gingerbase/configure.ac
index 00aba89..055c8f8 100644
--- a/src/wok/plugins/gingerbase/configure.ac
+++ b/src/wok/plugins/gingerbase/configure.ac
@@ -75,7 +75,6 @@ AC_CONFIG_FILES([
     ui/config/Makefile
     ui/css/Makefile
     ui/images/Makefile
-    ui/images/theme-default/Makefile
     ui/js/Makefile
     ui/pages/Makefile
     ui/pages/help/Makefile
diff --git a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
index 2d2d9bd..8366f1f 100644
--- a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
+++ b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
@@ -3,7 +3,7 @@
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="none"/>
-
+        <class>host</class>
         <title>Host</title>
         <path>plugins/gingerbase/host.html</path>
     </tab>
diff --git a/src/wok/plugins/gingerbase/ui/css/Makefile.am b/src/wok/plugins/gingerbase/ui/css/Makefile.am
index 3e19c65..dd0676f 100644
--- a/src/wok/plugins/gingerbase/ui/css/Makefile.am
+++ b/src/wok/plugins/gingerbase/ui/css/Makefile.am
@@ -15,12 +15,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-EXTRA_DIST = theme-default
-
 cssdir = $(datadir)/wok/plugins/gingerbase/ui/css
-dist_css_DATA = theme-default.min.css
-
-theme-default.min.css: theme-default/*.css
-	cat $^ > $@
+dist_css_DATA = gingerbase.css
 
-CLEANFILES = theme-default.min.css
+gingerbase.css: src/gingerbase.scss
+	echo "Compiling .scss file $<"
+	sassc -s expanded $< $(@:.scss=.css)
diff --git a/src/wok/plugins/gingerbase/ui/css/src/gingerbase.scss b/src/wok/plugins/gingerbase/ui/css/src/gingerbase.scss
new file mode 100644
index 0000000..d279a8b
--- /dev/null
+++ b/src/wok/plugins/gingerbase/ui/css/src/gingerbase.scss
@@ -0,0 +1,29 @@
+/*
+ * Ginger Base
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Code derived from Project Kimchi
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Core variables
+ at import "../../../../../../../ui/css/src/modules/wok-variables";
+
+// Compass Mixins
+ at import "../../../../../../../ui/css/src/vendor/compass-mixins/lib/compass";
+
+// Hosts
+
+ at import "modules/host"
\ No newline at end of file
diff --git a/src/wok/plugins/gingerbase/ui/css/src/modules/_host.scss b/src/wok/plugins/gingerbase/ui/css/src/modules/_host.scss
new file mode 100644
index 0000000..b986278
--- /dev/null
+++ b/src/wok/plugins/gingerbase/ui/css/src/modules/_host.scss
@@ -0,0 +1,172 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Code derived from Project Kimchi
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Main Host Dashboard section */
+
+.host-dashboard {
+    padding-top: 40px;
+    padding-bottom: 50px;
+    background: #eee;
+    .container {
+        padding-left: 83px !important; // Overriding container padding to align according to mockups
+        padding-right: 73px !important;
+    }
+    h3 {
+        font-family: $font-family-light;
+        font-size: 21pt;
+        margin: 0 0 13px 0;
+    }
+}
+
+.host-dashboard .col-md-3 {
+    padding: 0 14px;
+    > div {
+        background: #fff;
+        padding: 13px 20px 20px;
+    }
+}
+
+
+/* End of Host Dashboard */
+
+
+/* Line chart objects related to Hosts page */
+
+#container-chart-cpu,
+#container-chart-memory,
+#container-chart-disk-io,
+#container-chart-network-io {
+    border-top: 1px solid #eeeeee;
+    border-bottom: 2px solid #3a393b;
+    padding: 2px 0;
+    height: 99px;
+    width: 310px;
+}
+
+
+/* End of Line chart objects */
+
+
+/* Host Panels Container and Panels */
+
+#host-info-container {
+    padding-top: 53px;
+    margin: 0 -8px;
+}
+
+#host-info-container .col-md-4 {
+    width: 486px;
+    padding-left: 26px;
+    padding-right: 26px;
+}
+
+#software-update-section {
+    margin-top: 24px;
+    border-top: 1px solid #b0b0b0;
+    padding-top: 24px;
+}
+
+// TEMPORARY FIX TO LAYOUT UNTIL WOK.LIST WIDGET IS DONE
+#repositories-grid,
+#available-reports-grid {
+    .wok-list-content {
+        height: 517px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+    .dropdown.menu-flat {
+        float: right;
+        margin-right: 1px;
+    }
+}
+
+// END OF TEMPORARY FIX
+
+/* Basic Information */
+
+#host-info-container {
+    padding-top: 10px;
+    .basic-information-list {
+        height: 517px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        margin: 0;
+        @extend .row; // Extending bootstrap .row clearfix util
+        .basic-information-list dt {
+            font-weight: 600;
+            font-size: 14.5pt;
+            line-height: 12px;
+        }
+        .basic-information-list dd {
+            font-size: 12.5pt;
+            font-weight: 400;
+            margin-bottom: 12px;
+        }
+    }
+}
+
+
+/* End of Basic Information */
+
+
+/* Debug Report */
+
+#available-reports-grid .wok-list-cell {
+    padding-left: 10px;
+}
+
+
+/* End of Debug Report */
+
+
+/* Software Updates */
+
+
+/* Colgroups for low resolution screens */
+
+.software-update-name,
+.software-update-repos {
+    min-width: 224px;
+}
+
+.software-update-version,
+.software-update-arch {
+    min-width: 200px;
+}
+
+
+/* End of Colgroups */
+
+
+/* Software Update Accordion */
+
+.host-panel #software-updates-progress-textarea {
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    height: 100px;
+    padding: .2em .5em;
+    resize: vertical;
+}
+
+
+/* End of Software Update Accordion */
+
+
+/* End of Software Updates */
diff --git a/src/wok/plugins/gingerbase/ui/css/theme-default/host.css b/src/wok/plugins/gingerbase/ui/css/theme-default/host.css
deleted file mode 100644
index 59c0595..0000000
--- a/src/wok/plugins/gingerbase/ui/css/theme-default/host.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/*
- * Project Ginger Base
- *
- * Copyright IBM, Corp. 2013-2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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/gingerbase/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/gingerbase/ui/css/theme-default/report-add.css b/src/wok/plugins/gingerbase/ui/css/theme-default/report-add.css
deleted file mode 100644
index 124a53c..0000000
--- a/src/wok/plugins/gingerbase/ui/css/theme-default/report-add.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Project Ginger Base
- *
- * Copyright IBM, Corp. 2013-2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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;
-}
diff --git a/src/wok/plugins/gingerbase/ui/css/theme-default/report-rename.css b/src/wok/plugins/gingerbase/ui/css/theme-default/report-rename.css
deleted file mode 100644
index e2b3813..0000000
--- a/src/wok/plugins/gingerbase/ui/css/theme-default/report-rename.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Project Ginger Base
- *
- * Copyright IBM, Corp. 2014-2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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/gingerbase/ui/css/theme-default/repository-add.css b/src/wok/plugins/gingerbase/ui/css/theme-default/repository-add.css
deleted file mode 100644
index acf50e2..0000000
--- a/src/wok/plugins/gingerbase/ui/css/theme-default/repository-add.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Project Ginger Base
- *
- * Copyright IBM, Corp. 2014-2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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;
-}
diff --git a/src/wok/plugins/gingerbase/ui/css/theme-default/repository-edit.css b/src/wok/plugins/gingerbase/ui/css/theme-default/repository-edit.css
deleted file mode 100644
index 2a3425d..0000000
--- a/src/wok/plugins/gingerbase/ui/css/theme-default/repository-edit.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Project Ginger Base
- *
- * Copyright IBM, Corp. 2014-2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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;
-}
-
-
-.yum .deb{
-    display: none;
-}
diff --git a/src/wok/plugins/gingerbase/ui/images/Makefile.am b/src/wok/plugins/gingerbase/ui/images/Makefile.am
index 34109bd..7243188 100644
--- a/src/wok/plugins/gingerbase/ui/images/Makefile.am
+++ b/src/wok/plugins/gingerbase/ui/images/Makefile.am
@@ -15,8 +15,6 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-SUBDIRS = theme-default
-
 imagedir = $(datadir)/wok/plugins/gingerbase/ui/images
 
 dist_image_DATA = *.png *.ico
diff --git a/src/wok/plugins/gingerbase/ui/images/logo.ico b/src/wok/plugins/gingerbase/ui/images/logo.ico
index 446143f066a60f479b2cb8f8d04ab3c97ff60e56..1d998c2543576a16c72e49630317afb8e1373b38 100644
GIT binary patch
literal 15086
zcmdU$e{5D)8OLu^Z8H?g=2+O2w-qR|!M3hT7zS8Zp=M4rk!2ZXZeaxKk3Sqp+-M}e
zU{xR)3S)qY8JJ9gMZ`IbTj~sL2#{?>z^QE0ND&l+!dgb;Wqa4__j7yByTj$)`~K)#
zhBx`<IrrRi&iDH~=Q-!z_rCAzc@<uzH*%yWTjzb{1D-d<^Srvcf%EOE->kZZ26JBT
zd7mETc at xz}m(*jRUdHp(F6rpr at UiL>J3lc7P_}Jny|k)s=Dx>QH}79Fr)}eBD{Z}N
z)u&$AA^g>V@^sp$Z(8t$e=~;L&z9A8k>DFJ#!JF)|FyHefj;y#V|2-mu>Gv1o!Y~>
zR;V|=)KiaU^|?jZB{0q{wx6|AKX;(w=S!{{xqZ>_58Jx1RlnPXBUty^=7m)gh4sQO
zggI{P+;-|WLRfv<)>lT2Uw3u_R_z;wZs9C_<KoLW^k**W*Y(X6{wZ{-&+~#W{4}Yr
zt3&<P3cheo{otklTDMJHnK-H6k4*pP;1$r{GHucu*DOeNR>k$DzW#~6>FSI2ZsAs9
zMclvf at n4Ntl<HWDjp`rp()WqJr_^sP at pId$?>OOr!14$V`q(lSeUqmh9UZRcn(6;H
z*$&3Qk6UYB|D-UHezLa-+l1dyrjL8jUj3dCe4$rZs&@465?&Qf3BJL at ZeLqgpD6+w
z7~=&;1H1<e*5ZTh6SnF%U05&7wAUC1A3)f5|ET93JLq{m`#taENze1od)`4|OV;yh
zGXrS4p!&Bw?@fQ8&2jAveJefh9i6k!)CqS9>`%eL#xsP+vTtpw&{`NRGzwP_mWuJT
zXM99Rf!(XF8$n&%xZ-3#dPO)T>=y2dYnxQx(S9xa?cKr_;rGHZ;Wc5eutB(+HtrbW
zN(p}wd<REWp5?YHq^$853+Dv8?}jbc(3Y~}iD!z?=Wtsc#3R?vwvV$KlX&BEm^12p
z7ws8K9Lzghme;jyaeU!=jW<dl)?vOgs)G-|0dqlJyUhu4&k~q}Y)A*X3d%>5bL|?}
z<tH9 at +Bv5Uxk#O`UbxBnAs+HzzToBp^OD>DY}+_%#$KRt$u)8zcK&pYcwKTGK7ssW
z9*9Te{XI at YIqJpv$YA*Gyq2m(+{^_rC at B8$ZC+S4R#+%(61E!qMdqYf9aDGhsuK5a
zguMAjZi%Z^ctha65B?x55XRcvD at FtUi2EtwtMubs_vnejEFop%Yq-BBo{V6*UsRdf
zNXf^|KRNOtxP at TtiSq%WN5}|AI5#nWG{j8|E_oI#R)~qe<xUw+p06x=#4}C!hhY82
zK3XhSzV_mrCg8W_#u9IG%;o0UZ(6?bioGtbM&VS5AOBBYCVuiR%>Sgg-JBy1L*+lY
z=f<BrY!n}P?#BN`yVhr?x<6>wNU`yD+l%Kqp;NGPkB(N_h at 1U}y at s_;E(CeMIMq?}
zh1ARUpuruh*fMKSTu+9$zr)(FW3m46+1+FGoH|!nVcQgI4KF#j&EaOvw{k6MJbV`S
zv%=O=;!hv(u-?8ez>oi}LT=AX;ur5ng})20QBG=`bgdNaj3>?pp-<rR#^NN7q-(@+
zM(WjJ#p*EpXAD1aXb$t}GtW&kQ-^|QzwkA9$z8R1MtDJ35!W`{mviwEe`1gS01Zoo
z2D=_K<_uvIma(Y^I=?~qx^P;spX;y%=Q8mU*N+9uZ!Ixd&)PIx at ShX@DBvfc{I=k7
zQ{Ky5MEM(4C!S`(&Vl8(HpmH$iLY>mxuVW at +So<$h3jaGuY%=tZEjr}4a6ZFZ&w2`
znGxp5cP?)7fPKK_rhL&{nz<k!RtP(Vy$0mpBf{8xTyfXQE%B`u$U){~s}Q><poMt`
z#l$;~pL#PF><JCU<WSO>_L?6YeSUv+kDsmRNoPE;s43I5tf}AcZ_?!e*|gu(>-*_0
z-|ySw`#md#>i2L=<vl<2{q}y}ugR)kRviPRRlYM at o2~L{`>Tb@<xPHNkMC;$4jwS|
ziqxAY<la+^*U1%h-2d%u72pbzRFIUZyMBF at p1toCHVRvWR^gh0IuD`|vC?PKVZvyk
z&fx0De>peu9d#6y(T?tn;5*>+6e&~o!)R`n<z01`!29l##&*l at 6xxK_g~YvF8XpwG
z+N~c4%k6{F^sMYz!F_iTRi+KTG)K(|b<($8uzI8HK3yMEj!BRX@`QLtX-%qQZWixY
zGCcPziyot&Jc-in)~$*1zgVB7;Q`_867=I6bFnzAL)y~?=s%-2gI){bC#RF*obMVw
z%y#1 at U1J1t#Eo}UIqmi<r7Z5&Jo=d%)-UUt_i2E4d|QP-3;4(Ni{9T8TY)@^TgUjr
zS{~G%Dqi+Tt0Nq1avcAH_ZV(`$QjkMcE~^UU-F(6ZNldT_EPdCJO|Vb`hA1AXA7<m
zHs-Snxp%5BF<?$Engi>vS<~#PQ9e9q+YQDV4aAao<4>fPI1bti`R)tcgTwi>G;Yi*
zt=`<1!+Y!hjeg>(__H3|ISAgxTxqe6(<AMyY4#n~@}Sr6=7m+mg*$|Ygf`*3#&S;m
z at Hj1{)UzK*_ZFj{dqhe5C%ObQ?h(!i?t47WcL-k=t}jJrQXgqf8~r8azBEl1(04&_
zbyKGPj_`9$lAdC(8U5r??ir4G(L1tn!u`URgvNWO9=_z69c{uPA*>r;ejt=JU&6kb
z{8=OIxqaVgNB3WZcMVR<whJ|O3~56<?^?s!Io~J at sdjWoH|zIa_EM`$8hKZGLa^_M
zt-YYScG^kX^#ZvbrJee+=egDAT4Ei3UPWVscI(3l`bZ!9N|bi;<{_8ka+a9~Y41qT
zk3QBb-<L$`C!a1$?4#mRfd13c7Z-c{*%6-4D4wCLQ|#9z#DBLmM(sCtE;@#CuPnsx
z1pVwqk4Zl{Wc7wEYj?=^oj5<{+}vFyjnBozpZ#=P9{oGs&-hDU+};_)9>1l(BPRau
z>)yltRr=#{pE(KcUD6(R-{M&zmpja*-V;w?zm1#ka at I>9_gwC?cCWYgpz3aPxulal
zl;;ETo%v`JF4{MxeU32S?Kf0q>1z?lZ>!l_v^PfavQJ9$@Th#3?vcXt_z=~%Ty<u@
ze^?sB&kH;&kTa7?;X=2N5y~Ea^L%!rw4ob~XeHjPQSxWEz_r}7S}{Jbj->l(f$xV_
z71OuSw$e7qXnahT=N)YDoGe?CZp+=AI(&n4zi#yJmmT6?Yg*>=Sn1_AvTqsv*dbj5
z<x&0KDAL;^ko)$#M%M9=%mHhGd at bi59ibmz+M+(cS+B{tPo)lDYtQr9nW at 9W^j+$G
z!jl5uvtp+wapW7*UYFL%!hZxCe=K>_2Cr at BT5&fDEAhjvk1FG*+HMy9E4bfHAJ_SP
zQGJT3lTP-2)~&0bGV?$#%@?L{f41XNHkw|RohOXPSDP1D6Z7f1M!eq<T<x}esE`;~
z-Z(3LtAwzA_ni6J;O30<FbBjCZP*ThIFlPc6ZQ$=m|NY}a=j%^SE2R9R|w~jtKXKN
zc5_PHUn at YP)f#2-{WFE?jB96}-RwQgYK^kwRBnGYdBkrY^2IqyJ9W%kS-y2QbHHyU
zqIA1;7u};xo-+?<iPITXkI&z<YbGwX#nekXYt`P%T+ME|Ej%XsptP_a$bbBZTd(+m
zZq~*;Hy6WWmU3?Ls4c+<)=2E{(TyMDrH#FQrNBC7T?5MGT8q06l%g}K4;suo*k>Xe
z`{15X%sq#;#Dq8((=SP1q1WWY1cA9=U2hOt&{AmsE2SNAE9V+3)~|tI3+ew(zTcnL
z|C?kpwb-7fObvE<b#FD+tL&`|Y(-|kdd4;^tDwHZPY1T$-`&Nzj$<L)XU+rrrhf3G
z^ZrWT=YLfq3v6$#@1O6||FfDjz;e&)Ov}ot<ua}f2ym8qK9RdtZ`Lbx-Y>fXtA7;j
zm(A*vgntwV2W(GTRzI#fuYs`;<ZSReDxJ$7r at sANe+71V)>klO_16$=Cxbe+r at AwU
bLvKw_5T{H{Hi%=kc3}MAXJ2X`9G>?-JFBHw

literal 1214
zcma)*3rLeu6vyu=X_;nPV)$&PPF)r(wTQ|dTGOUtnOdf0mZ=cR#99xbub1{BqnD9^
z^Z>PV6h)fUny6#CN{3di2P{*h2ek at Oq0a4o*=I}2Iv?krbAR`oKi_vQA0faVCr83o
zF{!X2#Dx$Nz}$(sm^sgR<Jj30yCMGpMl1z837jm3H1$<DU4IV>Tbdw<FM-;Hi<#et
z=I}n~iB^qh8{XzCNyvT<I;$&znmT~?eFXZgAE at Om?1h(6Iq+2e1-ca!zOAO7n3*};
zXq6n?2kF<!f%cez;-Fgx4$e+xo{WR;oqhc_OW;#nF!Zm|JK}m8gi6aC+##`QA5PmJ
zfeZ(o(}%&&1P5#*1vVbnssk~XhN5bNz=T)>5^+BS=V54SJ|^z)5I7%kU;>-skiq*{
z5B^=eF<T)pK9+)bV;9UCK>t-HOi+bkR-wK1xpfXL;S<?ho1pQ5gYzxiHR~=e+XHS(
zYe7QMZb3IjWV72H-JpD~6z(tbgwn1o$D2s!YteWNJS!i9l%iW?+34Lvr*KL(6{_X|
zobEjAb{lD|4qsmYvGF;~r0Aunc#>=c)0W4s|D{#(q9~vaX{rGms=((Wn*~LeWqIu}
zkGvlzwaxjL25hey2bVweu<xK*t+ at Oa_)UKTK^x4IwmKMOjm at oL`l)}_NGPy}tdb}w
zHa>H`ji2N7m}Xsj#j7-`#=Dv}`)h&)9th^&^dR%>WH_MB8KcIXVf8p&s1xD|_k)R-
zrk$Z0-|Gf}&4Au$KhU$k?3YR5by~D9M&-q$=ocNz4!IY&p7%OxuJf&+Ei-G(23hU;
zHTLhMtjFR9ExVbPQVLzBFlROcIZ|#jmX6fm_hsVa3XP<aKAeAt8dqp&oBW=V^+d>Q
zkcNnm%Ds?ggd^Rv2~9_o82cv;p6LSBD_g_s-n1uZ8#<EeLwTm~LE9J!Zdo at M&*jFU
zoM+Z%F5)(8$8y`Wz~%Pd;Nlx at aH{<lk}}CcRMRXZMD&%Uhz3Ze$jpg#uec1IlFMPW
MDQ4iZEk#_;cNAJoqyPW_

diff --git a/src/wok/plugins/gingerbase/ui/images/theme-default/Makefile.am b/src/wok/plugins/gingerbase/ui/images/theme-default/Makefile.am
deleted file mode 100644
index 1fc98a3..0000000
--- a/src/wok/plugins/gingerbase/ui/images/theme-default/Makefile.am
+++ /dev/null
@@ -1,20 +0,0 @@
-#
-# Ginger Base
-#
-# Copyright IBM, Corp. 2015
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-imagedir = $(datadir)/wok/plugins/gingerbase/ui/images/theme-default
-
-dist_image_DATA = *.png *.gif
diff --git a/src/wok/plugins/gingerbase/ui/images/theme-default/host-icon-sprite.png b/src/wok/plugins/gingerbase/ui/images/theme-default/host-icon-sprite.png
deleted file mode 100644
index da1cd3f2562a5905a526446bcc8fc18bea06c734..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1034
zcmV+l1oiugP)<h;3K|Lk000e1NJLTq003?P000^Y1^@s6R_JLg00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-3t>283nlSO%wnC03B&m
zSad^gZEa<4bN~PV002XBWnpw>WFU8GbZ8()Nlj2>E at cM*00VAGL_t(&-tAexPZU8E
z{`PW&1_K4^OH?eZvAftnL5(5A#KOeLoryLc6xvbn7idfrLqY*-qLqe%L|Ypgg$i36
z(dbjkBSwPpvl)`j+}`fa-u^(2muzw~^LF01^X{8 at Zysm_jzUN2Fh`A~Pjc5hKFL~I
z+Z}W#NVXC{Y>}KuY7;pNNspw5tO0f7IFeP8D-r4|QCJ)u*CII!fKd<0S(2@?9Y=DD
z<R_9!@=PZG-V7bLl9r_ at 9LG4P1)Rq+9Y?Z{<af)|`7qr|9MBxV)c`acbbCfT&pQC{
z%j$mX<hUFic+YA-2XN6mak_;`9K$+|XK?mUTkTPj&CIsEF5cU<hDHKoBi7iJvbM^i
z*Tus8!czN9a>$8s1<N-8RRC8_`$GnE?vb2Jz_2+0dq-p)ngI3#?S24 at sTh|bQ+;d5
zH%uEL`5>TIAzA4bYua?6Ovagcnjz|Ai5Da5sM6$aQ8E^l$E3xZb^24#IlFC{{Sv!X
zdPZ`HoHhZhMyRZj95%WP!xe at 3m<5`5?4yL_;89M%??>JmIN;83>nfaa#_lVU`y{Vr
z67H9I<>i9?7&xxqKI>29L{6meTNYI%0Emdw!G8E&QVE-1Rcq#UWYToK0q{&jHq+Sd
zU}FNnI)H(=d=J2sh`dW;({;UEMO8gxC-hsZHn6+_8Cz8V%OQ7`GXQ2(brnD(BP{Cx
z=6&CP5~WnH*XNDysWO?Qs#^et%pdJCfS-x(Dpi%PY)T=^F&E8^3~dd>ISl}e&Opgd
z>jQ8Oz$E}@0sK%^x9UJ%4m8_i!$G%aL_`u-2dYWWvJAJ-u<F2q`TaRWw_eh}pDyEv
z>yyFRKMi0z&>mIQrid&iVqA_4oV3~tBC;bQJ7_QMEcIHnC?X#LytKL>s%r052kP~D
zY<0ls{5RDBFDZ*`N~hftRMj`pW7t-CT|^!ky^4A7udB@<*0kwB7vI-)nq=l_0(fe5
zkBi7gBF9Bcoc6<NF-#g4k&RAyOj^9%=3_<YamMC0fYCtLR}r}oxmAjYmj^hLTt`+1
zRCTyh@)?Dxh{Y^e+NuMpIv5&N7WDCVBl5M=0B!+z9Oa;-3`iRt9+5!hy{f(jFa_X-
zh^)1x14RNBkv{-#tLjpkD=*u5$B=13xe4GPc-8~JKL<=Y@!??g0{{R307*qoM6N<$
Ef;%S0RsaA1

diff --git a/src/wok/plugins/gingerbase/ui/images/theme-default/kimchi-loading15x15.gif b/src/wok/plugins/gingerbase/ui/images/theme-default/kimchi-loading15x15.gif
deleted file mode 100644
index aaa4f85a0560dcb59d4bb70154a9144417aae926..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1653
zcmZ?wbhEHb6krfwcz&0`fx$V3fzy*s(30KRoyj+pP0*a%B9B4Xkl)0X$H9|dJd8D}
zo<ZDBSSFF7*jZT0OhTc9Q7nTgk3rREDud*7MxI>8&Ju=(ISf+93MQOdag7Y~1hic{
z8T#{u6)cohTNtM^7+W$J#50+i$>`cj=^O84k`pyFn#{1$Ur8%a&i6QjtgEuCfQhw>
zh77A6gQ$gokA at _-E$2dp^>Sv?oMy2Rvbjr`S1FsTIOwZtnQE_R*m$2oUC1KhF at wT7
z#vS5TPBXdYi#jqhIC*|#&}Xr)`pY25?86wZk@$x}Azj<#4}*rAu{Vcnu(UhJUj}_&
zGsWW!mvn9Irz#jqI|d0m<_4Kq$D4?%x#%8bJFV#KwS(tqvz9fdTmMyIV-~+CKU<>^
zTODbStQ;$e9OEp8kfaJrQB(IojUXN?PfLA&1ruKlE$<Ybz{O>Dnh|c+IZj3l84L_z
z+ZiGkGQ_8gg)Ec{ZB|VbVu;;p8Ir+}TJcZ8St};J)7e)ugI_wAy~kUSA^Gq;v#nzB
zo6<uZ9TN=&l6EuXHCx41&a>X&p6tkweNrgxtWY&KLrITauKX0wDL;*ZSPITdWuHCl
z7S2#|o1wN-skGcGd-j}YNrw7v?ff;HUH7htly%83WoVk=SR=P3TA8QnVNZtdt|Td^
z4tBRT;l<gOCKJSuq^f)gOk<w3o@>%d>z1S5joVY2V;E+x4Cszxn7#dGQiZ}|@k{wq
ze5<)H#@>~ixp+mvx~nC^*GqKvReGJxyd=J8Z|Hp0)LG8{Q?7j|(|J;(^S(;?X-VtX
z{Ej0{$vo>WNUb at RHtpd12Emt&YTJ7ve>HRaY*WxWB$BmO<7<oVrMfE&d+u577yI7H
zdv${AuTG6`J!)PD74G*(XRN&WpI$)mKewN2NU*bGfUA+70W%{51B2pE7EU3C{|q`n
zHZYS2Ffee)GW_S1 at z}87U^9oXR?LYF3lFyoD0|KE*tqCuBO at a=9coY=j!k!j<aB0i
zc<9u4hfS*nq@!EHIP1=djf>s;v1`@Ep>^V-!(BqkNq@`*laF`Fn|H~0Zd!7(0h{Hf
zM42F;^~FLc<zy?bzucZ38xtI`nPf?{Nk)rZI#dI#a%KcAJ>AR3%!JJ}Tb!mjcL>V+
z&Dl|qe5_B>QtnB`#6;Il`9QBD85<TlO;@&EX5(p~fXzf_h=~b~c^s at tPtrczcWUF8
zl$)Y)G4W`lxU|rj6$Xj!z4E$EBA!9O at K)2-%Q<1V)NzW4rQ4Q{qQ at s^Df6<iU^CYa
zVJ@$f%ZvcUgKd2BZZRt+Jap&~-N|`mN5EtIK6cxtnin4*pO_@<TefG1V5)aFPwc)q
zGcP6L3rdhvk&Uz{R5;QluAbJjV`8#<o~Uk<jm4+?Cwh5=mxY`NNH{%#3wux+Vs{|2
sX~(-16pJpOC{Q`pufUDnn>s|9;tWh`McC5^G?`;~3OSj#0+YEl0GD)I?EnA(

diff --git a/src/wok/plugins/gingerbase/ui/js/src/gingerbase.host.js b/src/wok/plugins/gingerbase/ui/js/src/gingerbase.host.js
index 0d52b92..641a806 100644
--- a/src/wok/plugins/gingerbase/ui/js/src/gingerbase.host.js
+++ b/src/wok/plugins/gingerbase/ui/js/src/gingerbase.host.js
@@ -3,8 +3,6 @@
  *
  * Copyright IBM, Corp. 2013-2015
  *
- * Code derived from Project Kimchi
- *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -17,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['GGBREPO6004M'],
-                    'class': 'repository-id'
-                }, {
-                    name: 'config[repo_name]',
-                    label: i18n['GGBREPO6005M'],
-                    'class': 'repository-name'
-                }, {
-                    name: 'enabled',
-                    label: i18n['GGBREPO6009M'],
-                    'class': 'repository-enabled'
-                }];
-        }
-        else if (repo_type == "deb") {
-                gridFields=[{
-                    name: 'baseurl',
-                    label: i18n['GGBREPO6006M'],
-                    makeTitle: true,
-                    'class': 'repository-baseurl deb'
-                }, {
-                    name: 'enabled',
-                    label: i18n['GGBREPO6009M'],
-                    '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['GGBREPO6004M'],
-                'class': 'repository-id'
-                }, {
-                    name: 'enabled',
-                    label: i18n['GGBREPO6009M'],
-                    'class': 'repository-enabled'
-                }, {
-                    name: 'baseurl',
-                    label: i18n['GGBREPO6006M'],
-                    makeTitle: true,
-                    'class': 'repository-baseurl'
-                }];
+                'class': 'repository-id',
+                type: 'name'
+            }, {
+                name: 'config[display_repo_name]',
+                label: i18n['GGBREPO6005M'],
+                'class': 'repository-name',
+                type: 'description'
+            }, {
+                name: 'enabled',
+                label: i18n['GGBREPO6009M'],
+                'class': 'repository-enabled',
+                type: 'status'
+            }];
+        } else if (repo_type === "deb") {
+            gridFields = [{
+                name: 'baseurl',
+                label: i18n['GGBREPO6006M'],
+                makeTitle: true,
+                'class': 'repository-baseurl deb',
+                type: 'description'
+            }, {
+                name: 'enabled',
+                label: i18n['GGBREPO6009M'],
+                '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['GGBREPO6004M'],
+                'class': 'repository-id',
+                type: 'name'
+            }, {
+                name: 'enabled',
+                label: i18n['GGBREPO6009M'],
+                'class': 'repository-enabled',
+                type: 'status'
+            }, {
+                name: 'baseurl',
+                label: i18n['GGBREPO6006M'],
+                makeTitle: true,
+                'class': 'repository-baseurl',
+                type: 'description'
+            }];
         }
-        repositoriesGrid = new wok.widget.Grid({
-            container: 'repositories-grid-container',
+        repositoriesGrid = new wok.widget.List({
+            container: 'repositories-section',
             id: 'repositories-grid',
             title: i18n['GGBREPO6003M'],
             toolbarButtons: [{
                 id: 'repositories-grid-add-button',
                 label: i18n['GGBREPO6012M'],
+                class: 'fa fa-plus-circle',
                 onClick: function(event) {
-                    wok.window.open({url:'plugins/gingerbase/repository-add.html',
-                                    class: repo_type});
+                    wok.window.open({
+                        url: 'plugins/gingerbase/repository-add.html',
+                        class: repo_type
+                    });
                 }
             }, {
                 id: 'repositories-grid-enable-button',
                 label: i18n['GGBREPO6016M'],
+                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'];
@@ -110,31 +113,36 @@ kimchi.host_main = function() {
             }, {
                 id: 'repositories-grid-edit-button',
                 label: i18n['GGBREPO6013M'],
+                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/gingerbase/repository-edit.html',
-                                    class: repo_type});
+                    wok.window.open({
+                        url: 'plugins/gingerbase/repository-edit.html',
+                        class: repo_type
+                    });
                 }
             }, {
                 id: 'repositories-grid-remove-button',
                 label: i18n['GGBREPO6014M'],
+                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['GGBREPO6001M'],
-                        content : i18n['GGBREPO6002M'],
-                        confirm : i18n['GGBAPI6004M'],
-                        cancel : i18n['GGBAPI6003M']
+                        title: i18n['GGBREPO6001M'],
+                        content: i18n['GGBREPO6002M'],
+                        confirm: i18n['GGBAPI6004M'],
+                        cancel: i18n['GGBAPI6003M']
                     };
 
                     wok.confirm(settings, function() {
@@ -142,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);
@@ -168,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['GGBUPD6008M']);
-        });
+                if ($.isFunction(gridCallback)) {
+                    gridCallback([]);
+                }
+                repositoriesGrid &&
+                    repositoriesGrid.showMessage(message || i18n['GGBUPD6008M']);
+            });
 
         $('#repositories-grid-remove-button').prop('disabled', true);
         $('#repositories-grid-edit-button').prop('disabled', true);
@@ -272,22 +278,20 @@ kimchi.host_main = function() {
             wok.topic('kimchi/softwareUpdated').publish({
                 result: result
             });
-            wok.message.warn(i18n['KCHUPD6010M']);
+            wok.message.warn(i18n['GGBUPD6010M']);
         }, function(error) {
-            wok.message.error(i18n['KCHUPD6011M']);
+            wok.message.error(i18n['GGBUPD6011M']);
         }, 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);
                 }
             }
@@ -301,13 +305,13 @@ kimchi.host_main = function() {
             // package manager instance running, so follow that instance updates
             if (message.indexOf("GGBPKGUPD0005E") !== -1) {
                 startSoftwareUpdateProgress();
-                if($.isFunction(gridCallback)) {
+                if ($.isFunction(gridCallback)) {
                     gridCallback([]);
                 }
                 return;
             }
 
-            if($.isFunction(gridCallback)) {
+            if ($.isFunction(gridCallback)) {
                 gridCallback([]);
             }
             softwareUpdatesGrid &&
@@ -327,23 +331,25 @@ kimchi.host_main = function() {
         });
     };
     var initReportGrid = function(reports) {
-        reportGrid = new wok.widget.Grid({
-            container: 'available-reports-grid-container',
+        reportGrid = new wok.widget.List({
+            container: 'debug-report-section',
             id: reportGridID,
             title: i18n['GGBDR6002M'],
             toolbarButtons: [{
                 id: reportGridID + '-generate-button',
+                class: 'fa fa-plus-circle',
                 label: i18n['GGBDR6006M'],
                 onClick: function(event) {
                     wok.window.open('plugins/gingerbase/report-add.html');
                 }
             }, {
                 id: reportGridID + '-rename-button',
+                class: 'fa fa-pencil',
                 label: i18n['GGBDR6008M'],
                 disabled: true,
                 onClick: function(event) {
                     var report = reportGrid.getSelected();
-                    if(!report) {
+                    if (!report) {
                         return;
                     }
 
@@ -351,20 +357,37 @@ kimchi.host_main = function() {
                     wok.window.open('plugins/gingerbase/report-rename.html');
                 }
             }, {
+                id: reportGridID + '-download-button',
+                label: i18n['GGBDR6010M'],
+                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['GGBDR6009M'],
+                critical: true,
                 disabled: true,
                 onClick: function(event) {
                     var report = reportGrid.getSelected();
-                    if(!report) {
+                    if (!report) {
                         return;
                     }
 
                     var settings = {
-                        title : i18n['GGBAPI6004M'],
-                        content : i18n['GGBDR6001M'],
-                        confirm : i18n['GGBAPI6002M'],
-                        cancel : i18n['GGBAPI6003M']
+                        title: i18n['GGBAPI6004M'],
+                        content: i18n['GGBDR6001M'],
+                        confirm: i18n['GGBAPI6002M'],
+                        cancel: i18n['GGBAPI6003M']
                     };
 
                     wok.confirm(settings, function() {
@@ -373,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['GGBDR6010M'],
-                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['GGBDR6007M']) {
-                    var gridElement = $('#'+ reportGridID);
+                if (report['time'] === i18n['GGBDR6007M']) {
+                    var gridElement = $('#' + reportGridID);
                     var row = $('tr:contains(' + report['name'] + ')', gridElement);
                     enableReportButtons(false);
                     row.attr('class', '');
-                }
-                else {
+                } else {
                     enableReportButtons(true);
                 }
             },
@@ -410,26 +418,31 @@ kimchi.host_main = function() {
             fields: [{
                 name: 'name',
                 label: i18n['GGBDR6003M'],
-                'class': 'debug-report-name'
+                'class': 'debug-report-name',
+                type: 'name'
             }, {
                 name: 'time',
                 label: i18n['GGBDR6005M'],
-                '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/gingerbase/debugreports/*')
+        var reports = [];
+        var filter = 'status=running&target_uri=' + encodeURIComponent('^/plugins/gingerbase/debugreports/*');
 
         kimchi.getTasksByFilter(filter, function(tasks) {
-            for(var i = 0; i < tasks.length; i++) {
-                reportName = tasks[i].target_uri.replace(/^\/plugins\/gingerbase\/debugreports\//, '') || i18n['GGBDR6012M'];
-                reports.push({'name': reportName, 'time': i18n['GGBDR6007M']})
+            for (var i = 0; i < tasks.length; i++) {
+                var reportName = tasks[i].target_uri.replace(/^\/plugins\/kimchi\/debugreports\//, '') || i18n['GGBDR6012M'];
+                reports.push({
+                    'name': reportName,
+                    'time': i18n['GGBDR6007M']
+                });
 
-                if(kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
+                if (kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
                     continue;
                 }
 
@@ -455,33 +468,64 @@ kimchi.host_main = function() {
 
     var listDebugReports = function() {
         kimchi.listReports(function(reports) {
-            pendingReports = getPendingReports();
-            allReports = pendingReports.concat(reports);
+            var pendingReports = getPendingReports();
+            var allReports = pendingReports.concat(reports);
             $('#debug-report-section').removeClass('hidden');
+            if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) {
+                $('#debug-report-section, #repositories-section').removeClass('col-md-8');
+                $('#debug-report-section, #repositories-section').addClass('col-md-4');
+            }else {
+                $('#content-sys-info').removeClass('col-md-12');
+                $('#content-sys-info').addClass('col-md-4');
+            }
+
 
             // 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['GGBDR6007M']  + ')', gridElement), function(index, row) {
-                $(row).parent().addClass('no-hover');
-                $(row).attr('id', 'id-debug-img');
+            //  "Generating..."
+            $.each($('td:contains(' + i18n['GGBDR6007M'] + ')', 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');
+                // Check Repositories and resize column
+                if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) {
+                    $('#repositories-section').removeClass('col-md-4');
+                    $('#repositories-section').addClass('col-md-8');
+                }else {
+                    $('#content-sys-info').removeClass('col-md-4');
+                    $('#content-sys-info').addClass('col-md-12');
+                }
                 return;
             }
             $('#debug-report-section').removeClass('hidden');
+            if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) {
+                $('#debug-report-section, #repositories-section').removeClass('col-md-8');
+                $('#debug-report-section, #repositories-section').addClass('col-md-4');
+            }else {
+                $('#content-sys-info').removeClass('col-md-12');
+                $('#content-sys-info').addClass('col-md-4');
+            }
         });
     };
 
@@ -489,10 +533,9 @@ kimchi.host_main = function() {
     var restartButtonID = '#host-button-restart';
     var shutdownHost = function(params) {
         var settings = {
-            title : i18n['GGBAPI6004M'],
-            content : i18n['GGBHOST6008M'],
-            confirm : i18n['GGBAPI6002M'],
-            cancel : i18n['GGBAPI6003M']
+            content: i18n['GGBHOST6008M'],
+            confirm: i18n['GGBAPI6002M'],
+            cancel: i18n['GGBAPI6003M']
         };
 
         wok.confirm(settings, function() {
@@ -500,53 +543,45 @@ kimchi.host_main = function() {
             $(shutdownButtonID).prop('disabled', true);
             $(restartButtonID).prop('disabled', true);
             // Check if there is any VM is running.
-            // FIXME : Find alternative way to figure out if any vms running
-            // kimchi.listVMs(function(vms) {
-            //     for(var i = 0; i < vms.length; i++) {
-            //         if(vms[i]['state'] === 'running') {
-            //             wok.message.error.code('GGBHOST6001E');
-            //             $(shutdownButtonID).prop('disabled', false);
-            //             $(restartButtonID).prop('disabled', false);
-            //             return;
-            //         }
-            //     }
-            //
-            // });
-        }, function() {
-        });
+            kimchi.listVMs(function(vms) {
+                for (var i = 0; i < vms.length; i++) {
+                    if (vms[i]['state'] === 'running') {
+                        wok.message.error.code('GGBHOST6001E');
+                        $(shutdownButtonID).prop('disabled', false);
+                        $(restartButtonID).prop('disabled', false);
+                        return;
+                    }
+                }
+
+            });
+        }, 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']);
+                $('#content-sys-info').removeClass('col-md-12', kimchi.capabilities['repo_mngt_tool']);
+                $('#content-sys-info').addClass('col-md-4', kimchi.capabilities['repo_mngt_tool']);
                 wok.topic('kimchi/repositoryAdded')
                     .subscribe(listRepositories);
                 wok.topic('kimchi/repositoryUpdated')
@@ -555,7 +590,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')
@@ -565,7 +600,7 @@ kimchi.host_main = function() {
                 });
             }
 
-            if(kimchi.capabilities['system_report_tool']) {
+            if (kimchi.capabilities['system_report_tool']) {
                 listDebugReports();
                 wok.topic('kimchi/debugReportAdded')
                     .subscribe(listDebugReports);
@@ -608,40 +643,40 @@ kimchi.host_main = function() {
                 }
             },
             diskIO: {
-                r: {
+                w: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['GGBHOST6004M'],
+                    legend: i18n['GGBHOST6005M'],
+                    'class': 'disk-write',
                     points: []
                 },
-                w: {
+                r: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['GGBHOST6005M'],
-                    'class': 'disk-write',
+                    legend: i18n['GGBHOST6004M'],
                     points: []
                 }
             },
             networkIO: {
-                r: {
+                s: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['GGBHOST6006M'],
+                    legend: i18n['GGBHOST6007M'],
+                    'class': 'network-sent',
                     points: []
                 },
-                s: {
+                r: {
                     type: 'value',
                     base: 2,
                     fixed: 2,
                     unit: 'B/s',
-                    legend: i18n['GGBHOST6007M'],
-                    'class': 'network-sent',
+                    legend: i18n['GGBHOST6006M'],
                     points: []
                 }
             }
@@ -650,38 +685,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;
@@ -695,7 +728,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'],
@@ -704,10 +737,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'];
@@ -732,104 +765,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;
         }
@@ -857,20 +888,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')
@@ -887,4 +917,4 @@ kimchi.host_main = function() {
         wok.topic('kimchi/debugReportAdded').unsubscribe(listDebugReports);
         wok.topic('kimchi/debugReportRenamed').unsubscribe(listDebugReports);
     });
-};
+};
\ No newline at end of file
diff --git a/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl b/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl
index 0afb639..6259f1b 100644
--- a/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl
@@ -25,153 +25,124 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <!DOCTYPE html>
-<html>
+<html> 
 <head>
-<link rel="stylesheet" href="plugins/gingerbase/css/theme-default.min.css">
+<link rel="stylesheet" href="plugins/gingerbase/css/gingerbase.css">
 <script src="plugins/gingerbase/js/gingerbase.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-undo"></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="gingerbase/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>
+<script id="host-tmpl" type="kimchi/template">
+<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-12">
+                <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-section" class="col-md-8 hidden"></div>
+            <div id="debug-report-section" class="col-md-8 hidden"></div>
+        </div>
+        <div class="row">
+            <div id="software-update-section" class="panel panel-default col-md-12 hidden">
+                <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/gingerbase/ui/pages/report-add.html.tmpl b/src/wok/plugins/gingerbase/ui/pages/report-add.html.tmpl
index 78b085d..94f4ed6 100644
--- a/src/wok/plugins/gingerbase/ui/pages/report-add.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/report-add.html.tmpl
@@ -24,35 +24,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/gingerbase/ui/pages/report-rename.html.tmpl b/src/wok/plugins/gingerbase/ui/pages/report-rename.html.tmpl
index b069aad..e5b9401 100644
--- a/src/wok/plugins/gingerbase/ui/pages/report-rename.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/report-rename.html.tmpl
@@ -24,35 +24,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/gingerbase/ui/pages/repository-add.html.tmpl b/src/wok/plugins/gingerbase/ui/pages/repository-add.html.tmpl
index 6dd9d3e..3bf0856 100644
--- a/src/wok/plugins/gingerbase/ui/pages/repository-add.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/repository-add.html.tmpl
@@ -23,93 +23,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/gingerbase/ui/pages/repository-edit.html.tmpl b/src/wok/plugins/gingerbase/ui/pages/repository-edit.html.tmpl
index 67edecb..9e1c54f 100644
--- a/src/wok/plugins/gingerbase/ui/pages/repository-edit.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/repository-edit.html.tmpl
@@ -23,97 +23,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