[Kimchi-devel] [PATCH 06/10] [new-ui] Gingerbase / Hosts tab

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Tue Nov 10 21:17:35 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       | 227 ++++++++
 src/wok/plugins/gingerbase/ui/images/Makefile.am   |   2 -
 src/wok/plugins/gingerbase/ui/images/logo.ico      | Bin 1214 -> 15086 bytes
 .../gingerbase/ui/js/src/gingerbase.host.js        | 645 +++++++++++----------
 src/wok/plugins/gingerbase/ui/pages/host.html.tmpl | 213 +++----
 .../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 ++---
 14 files changed, 818 insertions(+), 664 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

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..1fb062c
--- /dev/null
+++ b/src/wok/plugins/gingerbase/ui/css/src/modules/_host.scss
@@ -0,0 +1,227 @@
+//
+// 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 {
+    width: 100%;
+    height: 100px;
+    padding-left: 60px;
+    box-sizing: border-box;
+    resize: vertical;
+    border: 1px solid transparent;
+}
+
+.host-panel #software-updates-progress-container {
+    padding: 15px;
+    background: #eee;
+}
+
+#software-updates-progress-container .software-updates-main {
+    background: #fff;
+}
+
+#software-updates-progress-container h3 {
+    width: 100%;
+    margin: 0 !important;
+    padding: 10px 15px;
+    font-size: 20px;
+    border-radius: 2px 2px 0 0;
+}
+
+#software-updates-progress-container a {
+    color: #9e9e9e;
+    text-decoration: none;
+}
+
+#software-updates-progress-container > div > h3 > a {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+    border-bottom: 2px solid transparent;
+}
+
+#software-updates-progress-container h3 > a > span.accordion-icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-size: 30px;
+    color: #5a595b;
+}
+
+#software-updates-progress-container h3 > a > span.accordion-text {
+    margin-left: 20px;
+}
+
+#software-updates-progress-container h3 > a[aria-expanded="true"] > span.accordion-icon:before {
+    content: "\f01b";
+}
+
+#software-updates-progress-container h3 > a[aria-expanded="false"] > span.accordion-icon:before {
+    content: "\f01a";
+}
+
+#software-updates-progress-container > div > h3 > a[aria-expanded="true"] {
+    border-color: #eee;
+}
+
+
+/* End of Software Update Accordion */
+
+
+/* End of Software Updates */
\ No newline at end of file
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/js/src/gingerbase.host.js b/src/wok/plugins/gingerbase/ui/js/src/gingerbase.host.js
index 0d52b92..5e99346 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,17 +590,14 @@ 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')
                     .subscribe(listSoftwareUpdates);
-                $('#software-updates-progress-container').accordion({
-                    collapsible: true
-                });
             }
 
-            if(kimchi.capabilities['system_report_tool']) {
+            if (kimchi.capabilities['system_report_tool']) {
                 listDebugReports();
                 wok.topic('kimchi/debugReportAdded')
                     .subscribe(listDebugReports);
@@ -608,40 +640,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 +682,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 +725,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 +734,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 +762,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 +885,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 +914,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..ff7db9b 100644
--- a/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl
+++ b/src/wok/plugins/gingerbase/ui/pages/host.html.tmpl
@@ -27,151 +27,128 @@
 <!DOCTYPE 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 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">
+                        <div class="software-updates-main">
+                            <h3>
+                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#software-updates-progress-textarea" aria-expanded="true" aria-controls="software-updates-progress-textarea" class="">
+                                <span class="accordion-icon"></span><span class="accordion-text">$_("Update Progress")</span>
+                            </a>
+                            </h3>
+                            <textarea class="collapse in" id="software-updates-progress-textarea" readonly></textarea>
                         </div>
                     </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