[Kimchi-devel] [PATCH] [Wok 7/7] Plugins management UI
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Feb 13 13:37:35 UTC 2017
Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
---
ui/config/tab-ext.xml | 7 ++
ui/css/Makefile.am | 6 +-
ui/css/settings.css | 144 ++++++++++++++++++++++++-----------
ui/css/src/settings.scss | 156 ++++++++++++++++++++++++++++++++++++++
ui/images/pl.png | Bin 0 -> 2904 bytes
ui/js/src/wok.api.js | 26 ++++++-
ui/js/wok.settings.js | 157 +++++++++++++++++++++++++++++++++++++++
ui/pages/i18n.json.tmpl | 4 +
ui/pages/tabs/settings.html.tmpl | 89 ++++++++++++++++++++++
9 files changed, 544 insertions(+), 45 deletions(-)
create mode 100644 ui/css/src/settings.scss
create mode 100644 ui/images/pl.png
create mode 100644 ui/js/wok.settings.js
create mode 100644 ui/pages/tabs/settings.html.tmpl
diff --git a/ui/config/tab-ext.xml b/ui/config/tab-ext.xml
index 5780b96..0cc9c83 100644
--- a/ui/config/tab-ext.xml
+++ b/ui/config/tab-ext.xml
@@ -8,4 +8,11 @@
<order>-1</order>
<path>tabs/user-log.html</path>
</tab>
+ <tab>
+ <access role="admin" mode="admin"/>
+ <access role="user" mode="none"/>
+ <title>Settings</title>
+ <order>0</order>
+ <path>tabs/settings.html</path>
+ </tab>
</tabs-ext>
diff --git a/ui/css/Makefile.am b/ui/css/Makefile.am
index ea49ec8..1a75e6d 100644
--- a/ui/css/Makefile.am
+++ b/ui/css/Makefile.am
@@ -36,6 +36,10 @@ user-log: src/user-log.scss
echo "Compiling .scss file $<"
sassc -s expanded $< user-log.css
+settings: src/settings.scss
+ echo "Compiling .scss file $<"
+ sassc -s expanded $< settings.css
+
bootstrap-select: src/bootstrap-select.custom.scss
echo "Compiling .scss file $<"
sassc -s expanded $< bootstrap-select.custom.css
@@ -44,7 +48,7 @@ datatables: src/datatables.bootstrap.scss
echo "Compiling .scss file $<"
sassc -s expanded $< datatables.bootstrap.css
-css: wok bootstrap bootstrap-select user-log datatables
+css: wok bootstrap bootstrap-select user-log settings datatables
theme-default.min.css: theme-default/*.css
cat $^ > $@
diff --git a/ui/css/settings.css b/ui/css/settings.css
index 0c56597..f184390 100644
--- a/ui/css/settings.css
+++ b/ui/css/settings.css
@@ -83,59 +83,131 @@
vertical-align: middle;
}
-.wok div.modal-footer {
- background-color: #d9182d;
+#plugins-mgmt-content-area .well {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ background: transparent;
}
-.wok .modal-body .nav-tabs > li.active > a,
-.wok .modal-body .nav-tabs > li.active > a:hover,
-.wok .modal-body .nav-tabs > li.active > a:focus {
- border-color: -moz-use-text-color -moz-use-text-color #d9182d;
+#plugins-mgmt-content-area #plugins-mgmt-body > .wok-datagrid-row {
+ display: flex;
+ flex-flow: row wrap;
}
-.wok.modal .row.clearfix {
- margin-left: -10px;
- margin-right: -10px;
+#plugins-mgmt-content-area #plugins-mgmt-body .handle[aria-expanded=true] .fa-chevron-down {
+ transform: rotate(-180deg);
}
-.wok.modal .form-group.col-sm-6 {
- padding-left: 10px;
- padding-right: 10px;
+#plugins-mgmt-content-area #plugins-mgmt-body img {
+ width: 40px;
+ display: inline-block;
}
-.action-group {
- position: absolute;
- z-index: 999;
+#plugins-mgmt-content-area #plugins-mgmt-body img.disabled {
+ filter: opacity(50%);
}
-div#user-log-actions {
- padding-top: 15px;
+#plugins-mgmt-content-area span.column-plugin-name,
+#plugins-mgmt-content-area div.column-plugin-name {
+ width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
}
-.label {
- display: inline-block;
- vertical-align: middle;
+ at media (min-width: 780px) {
+ #plugins-mgmt-content-area span.column-plugin-name,
+ #plugins-mgmt-content-area div.column-plugin-name {
+ width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+ }
}
-.bootgrid-table th > .column-header-anchor > .icon.fa {
- right: 6px;
- top: 4px;
+#plugins-mgmt-content-area span.column-plugin-description {
+ display: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-span.trim {
- display: inline-block;
- width: 100%;
- vertical-align: middle;
+ at media (min-width: 1017px) {
+ #plugins-mgmt-content-area span.column-plugin-description {
+ display: inline-block;
+ width: 30%;
+ min-width: 30%;
+ flex-basis: 30%;
+ }
+}
+
+ at media (min-width: 1302px) {
+ #plugins-mgmt-content-area span.column-plugin-description {
+ display: inline-block;
+ width: 40%;
+ min-width: 40%;
+ flex-basis: 40%;
+ }
+}
+
+ at media (min-width: 1540px) {
+ #plugins-mgmt-content-area span.column-plugin-description {
+ display: inline-block;
+ width: 50%;
+ min-width: 50%;
+ flex-basis: 50%;
+ }
+}
+
+ at media (min-width: 1680px) {
+ #plugins-mgmt-content-area span.column-plugin-description {
+ flex-basis: auto;
+ flex-grow: 1;
+ min-width: auto;
+ width: auto;
+ }
+}
+
+#plugins-mgmt-content-area span.column-plugin-status {
+ width: 80px;
+ min-width: 80px;
+ flex-basis: 80px;
+ text-align: center;
+ text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- padding-right: 6px;
+ display: inline-block;
+ position: relative;
+ padding: 10px;
+}
+
+#plugins-mgmt-content-area span.column-plugin-status > input[type="checkbox"] {
+ top: 20px;
+ left: 20px;
}
-.table > tbody > tr > td {
+#plugins-mgmt-content-area span.column-plugin-status > label {
+ margin-bottom: 0 !important;
+ margin-right: 0 !important;
vertical-align: middle;
}
+#plugins-mgmt-content-area .no-matching-data {
+ text-align: center;
+ font-size: 14.5pt !important;
+ padding: 6px 2px;
+ border-top: 1px solid #eee;
+}
+
+#wok-confirm-modal .modal-body strong,
+.modal-dialog .modal-body strong {
+ border-bottom: 1px dotted;
+}
+
.tooltip > .tooltip-inner {
font-weight: 400;
font-size: 12.5pt;
@@ -143,17 +215,3 @@ span.trim {
max-width: 420px !important;
text-align: left;
}
-
-.search {
- margin: 0 !important;
- width: 514px !important;
-}
-
-.pagination .button {
- font-weight: 600;
- cursor: pointer;
-}
-
-.pagination .disabled .button {
- cursor: not-allowed;
-}
diff --git a/ui/css/src/settings.scss b/ui/css/src/settings.scss
new file mode 100644
index 0000000..2862a6c
--- /dev/null
+++ b/ui/css/src/settings.scss
@@ -0,0 +1,156 @@
+/*
+ * Project Wok
+ *
+ * Copyright IBM Corp, 2016-2017
+ *
+ * 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 "modules/wok-variables";
+// Core variables and mixins
+ at import "vendor/bootstrap-sass/bootstrap/mixins";
+// Compass Mixins
+ at import "vendor/compass-mixins/lib/compass";
+// Wok Accordion Mixin
+ at import "modules/wok-accordion";
+
+#wok-root-container{
+ .accordion {
+ @include wok-accordion();
+ }
+}
+
+#plugins-mgmt-content-area {
+
+ .well {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+ }
+
+ #plugins-mgmt-body > .wok-datagrid-row {
+ display: flex;
+ flex-flow: row wrap;
+ }
+
+ #plugins-mgmt-body .handle[aria-expanded=true] .fa-chevron-down {
+ transform: rotate(-180deg);
+ }
+
+ #plugins-mgmt-body img {
+ width: 40px;
+ display: inline-block;
+ }
+
+ #plugins-mgmt-body img.disabled {
+ filter: opacity(50%);
+ }
+
+ span.column-plugin-name,
+ div.column-plugin-name {
+ width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
+ @media (min-width: $screen-sm + 12) {
+ width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+ }
+ }
+
+ span.column-plugin-description {
+ display: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @media (min-width: $screen-sm + 249) {
+ display: inline-block;
+ width: 30%;
+ min-width: 30%;
+ flex-basis: 30%;
+ }
+
+ @media (min-width: $screen-lg + 102) {
+ display: inline-block;
+ width: 40%;
+ min-width: 40%;
+ flex-basis: 40%;
+ }
+
+ @media (min-width: $screen-xlg) {
+ display: inline-block;
+ width: 50%;
+ min-width: 50%;
+ flex-basis: 50%;
+ }
+
+ @media (min-width: $screen-xlg + 140) {
+ flex-basis: auto;
+ flex-grow: 1;
+ min-width: auto;
+ width: auto;
+ }
+ }
+
+ span.column-plugin-status {
+ width: 80px;
+ min-width: 80px;
+ flex-basis: 80px;
+ text-align: center;
+ text-transform: capitalize;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
+ position: relative;
+ padding: 10px;
+ > input[type="checkbox"] {
+ top: 20px;
+ left: 20px;
+ }
+ > label {
+ margin-bottom: 0 !important;
+ margin-right: 0 !important;
+ vertical-align: middle;
+ }
+ }
+
+ .no-matching-data {
+ text-align: center;
+ font-size: 14.5pt !important;
+ padding: 6px 2px;
+ border-top: 1px solid #eee;
+ }
+}
+
+#wok-confirm-modal .modal-body strong,
+.modal-dialog .modal-body strong {
+ border-bottom: 1px dotted;
+}
+
+.tooltip > .tooltip-inner {
+ font-weight: 400;
+ font-size: 12.5pt;
+ padding: 8px !important;
+ max-width: 420px !important;
+ text-align: left;
+}
diff --git a/ui/images/pl.png b/ui/images/pl.png
new file mode 100644
index 0000000000000000000000000000000000000000..03970c527ba24f97fe5c35643965368dc94ef287
GIT binary patch
literal 2904
zcmb7G_ct4k7fooTL{zP!wW~$##E!OFjXi4b6?@i*UDRw;N{y=6RaC8tB0;PwYO5K0
zRI3zGHDi2z{)F#&=e~Q+JMWkG-aYSJw7#wygpQLA002NV)Kv{G*#830uh3lNU5>ba
z7ewQrrKSov|1S!NrD+!x+NbK~7j0nX{{RGFbJ#D6pa2b>$Dk!D+N%mIv@~{^007;p
zhN_BD at bspYZIY2G$N8L+QWNx3Un;(;<&!bbRJ-FSlfX!3>ezQx2sYi(dK!_Z9b%Zz
ziR4vJDxs~0zh!5#NT+#jU*p~{j^Ug}I8Z~x`-Qxy*>S^BnAM^FKYvccr^0^a?dJN^
zZ1)#iNi19q3_9EVGrOC+eei5yJNy at b>iGj+#w(Zpe^R*~e0t(XG*JRA?y%eg0bQwF
z0f%x?8-OY*{FOy`)M#2p?{W-hEO!-h!?E~p=tPo2N}+}^UF!tZAv~)36R`ElqEM8r
zj)@3r=L_gZ7Kq_yTY{W-6d+0{K<42g&j at 54UfTRhsJZp;fCP)Aq-2yIA$Do}3%hj_
z8xn~;>_3#B(9yOF4t@(b;cm<Orn&0l7W%X08Rh9}FKd+gk=2eDzXgG3-bP8Waj)}R
zTJ^6%sKBGg*ULFD4_8Ez3G_{~-bKXEv0cP4JZhIsh;x>V%ID at eC@CpvQIL_@!-Q7u
zYXR=(R2XgX62azDCUC)wZxcuMvxB8ltks_(uLd5;NXWuXBG0<^Hs0D=b)L-TG}wQM
z-&Q7s>_Yb}y!tMt9)dxpj|!!9PDl^Z6|h|Dr^^|_{lsepgY5FkuoGniqE$Bg&Y}(e
zDG&?>CqD}rE%Ep1&ky}uR@%C+d!EH!^R(T&oLL4*9>od9btNLT50lfoJA8+^4dJ|J
zAdCg=1IDw6KkYRM`3nBd<4cnat;C?AJRRWytuHS+Z&w_Lw<Mu^%&rw95V2?SDADQ>
zp|MFzdQ#S9-qE5jGd%P7C(UN%r$>aWEQx&|4cv*>YOV8dN*M=pVvU2qG|qH<F*JPa
z_TwK*`ZUJSTSc8@%A8V==4K#e%pVFx64{#8n*y5+z}HFI5eDzg4dCJ>RtC(VpE~f7
zLI#Wosd~V0e5ySBF~gWE?B0xLUBpOcczeh5drLTv;dEEF&>SNNrv&%9$>0CVpIG$!
z<)TN>W$yGboY{pTzU8FweWlS++ikS{81{R{8s8A9BCyhWec<p{<YI^x*L5;HSoKPj
zJ!Aamb{sqBv|TFV_sD{WOm-9CgwL1Xr6}??8+j<bPjOUx1!-eIbbtDkd}Ml+3ny}C
z;n`B03jeVc<0V at Q8-|u~8*jbQzqoBqN8A-Q)!2#e-%VXgO66JtfAo-Up>O8w%=&qS
zR6+?ZQ|@{O3S-Yr8MxemhiZqYLp2HFKO~j-m`5F7k=5{83O$XPdqXKOM at LaO#PbpX
zlQZ<TtW(8<|NR(NgS?w*8xh(4imOT1d-lUuQJuIaD<2Ie8#3SIZRwm0Bav{oo__CL
zGi=+3yBZpHW9_A#F^iP5?Yy~qhzCN=bY70vL+oR3B;WYGdr)O-O>9s53rr{nU9WF0
z2ZtCSf20xgB)RdYW3gYMndtm{a|l$(&adEcx3Pn(RKX&c=nlfhx}poyEiVf-lOGhD
zZFUSyVHxEnt8J at af)Ia^*AA&eMG1Znj;VkYOY@}6-y#pz>77x6Mjto1g1WoArQ~6b
zTvo;uW2Ef0N*zTh%t3?TBMvJC4P#(pT)^6Lqs8oj_m~vGjOfl<YOuyo_HB>%ow2e;
z+S(g>zSeiZQUUJZq+d+$Y|1f!LlyuF2!s^YgWj+ut?B!u3`^wNyxkOm>WuL6t~@lX
z=&M&1^`q>2`2%lMz((9{x4m(}q&Rou36)n$kk1HkAGRR$zPk6+bzlL>b9uj;=SJR^
z^p8Y?wK+{2Y`~7b{%t6Ug_ZZ<omh=oY%JE9Xfi{y$N|6y{AP;g9cKH0H!BdY1zsB3
zy{BGsrdqR*e#Og4ivj7}4EuU&v`Me7sl8{hDGaDa94tg^h?O7sDpW%Y;nhoF^Q%A7
zq^n9j1vTihLh9?xbFn=-wdXM^8+Fq{QPzM6K*7bs2ZIkO9npLwQuCc-(HLs#?VAdr
z0mAmjMb)X2M+q;aoAR=-E;Op-9GXj(<+r?>#{m=6!51R&p%zjbYCWG1lMf~r2+z62
zcqD?pI_zNb`a}ipIy-6F)S4@!8rbzQJ^<%>pYuJv{VlIJ8#$&B9<`#8wlc#~$@_B2
zQB;T-N3n#lH at VN3+k8@OL16GSWn*58U^R5B7V<<(eahq60#6N5r+mC)AY0CNb6RF>
z1C^r`#!zW8>iyZ9SPw}2x@?=wRh_pT=d at hUO8oZ?$7je2 at g#{zd8i%ODg-meJ^Yij
zx#|Stgrs206yXxO_&?Pzy)(6n^Y at r#gFSEe#eS=HwQEwx-FbY#3BlmxGt4~{zTh3v
zZg-P2<KusRtgXF6fpFA|n%vd!n~`09krqmgkK?TDYUmWsW<uT)ytJ@;UnH|nVm~LN
zHXfC!QoC08yB@=+_gBYfL$kfY+enGxx&3I7V(|%%b9Ve`R(Gso%hDG|{nEZxy}pbc
zx=0HIl5fJ?q~46y5`2{gk<4Q?Fh#{iqM{O|J7Vf9Ie0z=LE4Pg4XPD8;LikRWNn#i
zUWfY2_ at v=>Iwe at x)Z*3ZO<nX(gfl*p?A7rOF5+%%jtjR|H3I=*=%oUqEsjeCR^mLu
znY|15O_W=v&Ykd(gPu-pan3d}?4|qidqaE%_t&0B#ow*mKKvV9|ATIQpY__~bsBo3
zQ8wH3@&_cIB1eA%x}Y)=Ud+SG0!plFFDzWSxc2al``&U4J7bG=if4AVG$+jPuXYrp
zyzrZs<X55T55}T@$(%-?KPg<4IF49yFVx4IkxzG9w)5|qRN90U6xq)#cJ}dvvaD<S
z-BFwcPbMXKDw|X~Z>_OrztufJ=N|Pti|rL?AktT at e^damZZ)F9y*@K9Ds7U)=VMw>
z%0)9vZJON6(#5Y&^dlyrl_CR)@9fkgNHWF3tkb4We$B;twoLp{@Qr at K-bM~o;<$7`
zAAyc=A&>7jB*gIYDaH-3M!^^T#Ox58A$rDmHU1!nbYHAsOJG@<<)@n|uU#&?77Gk|
zw^i_rk36Yt><N6s2`fdF5T0&W(Dbca5X-w at roko=TeF1S2Fk&<9tG){Rblj#r%H<J
z^7|I))Hxlw2 at 69)m6|pz%CHK2b`@tPkXDy*tHO~)3~Q*3{hg%Bn5<rqd)JY>id{E{
zfJW15S6DWz{>%0mj9l*ej4IE9$~B>>hb(f{T2N9q7bW5UkgLlfLlAK7ou7qh8U)*h
zzJ|~W9U~=4e59b<zE1h>r=Vl=WQXzE)dVA#4&o1|eps*Kq~hSoN-^!+LAVtjp2HQ1
z%)v${{LTs&`wq33g+UEUyxg{gMw$7<f-TC-eDnpH)I|E+j_0%Hi#tHfP- at Uu=U^WJ
zb}n~IYOYe$>yhaWc<Ki*%JS92pbS)gxa`ImpwmsZsH=HFYQ@@^Z(e%c03$jVf$%^0
z^4>i6VUwZf{swaZCNs41TiFy`x|?h_aaw99vVC7SzD4)O#m4g9Rv0x$S`&}O%P_<1
zZUUaNE;Z$1jj#GLC0eySjbj at _KI}<4&VA~7?Z1c;w7j#4l;S6jB6{FC9k-jAowA*+
zxk5}(FSydy6%pg>HG|sh&vN_u|9`6pPd$`il8ip;rBz9|@W23#$GWOj5ACA=2i+fY
A5dZ)H
literal 0
HcmV?d00001
diff --git a/ui/js/src/wok.api.js b/ui/js/src/wok.api.js
index 4af3f88..06b97aa 100644
--- a/ui/js/src/wok.api.js
+++ b/ui/js/src/wok.api.js
@@ -111,7 +111,7 @@ var wok = {
listPlugins : function(suc, err, sync) {
wok.requestJSON({
- url : '/config/plugins',
+ url : 'config/plugins',
type : 'GET',
contentType : 'application/json',
dataType : 'json',
@@ -122,6 +122,30 @@ var wok = {
});
},
+ enablePlugin : function(plugin, suc, err) {
+ wok.requestJSON({
+ url : 'config/plugins/' + encodeURIComponent(plugin) + "/enable",
+ type : 'POST',
+ contentType : 'application/json',
+ dataType : 'json',
+ resend: true,
+ success : suc,
+ error : err
+ });
+ },
+
+ disablePlugin : function(plugin, suc, err) {
+ wok.requestJSON({
+ url : 'config/plugins/' + encodeURIComponent(plugin) + "/disable",
+ type : 'POST',
+ contentType : 'application/json',
+ dataType : 'json',
+ resend: true,
+ success : suc,
+ error : err
+ });
+ },
+
getConfig: function(suc, err, sync) {
wok.requestJSON({
url : 'config',
diff --git a/ui/js/wok.settings.js b/ui/js/wok.settings.js
new file mode 100644
index 0000000..9583fa7
--- /dev/null
+++ b/ui/js/wok.settings.js
@@ -0,0 +1,157 @@
+/*
+ * Copyright IBM Corp, 2017
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+wok.initSettings = function() {
+ wok.initPluginsMgmt();
+};
+
+wok.initPluginsMgmt = function() {
+ // Make wok.plugins is ready to be used
+ if (wok.plugins == undefined) {
+ setTimeout(wok.initPluginsMgmt, 2000);
+ return;
+ }
+
+ var plugins = wok.plugins;
+ if (plugins && plugins.length) {
+ plugins.sort(function(a, b) {
+ if (a.name !== undefined && b.name !== undefined) {
+ return a.name.localeCompare( b.name );
+ } else {
+ return 0
+ }
+ });
+ $("#plugins-mgmt-body").empty();
+ $.each(plugins, function(i,value){
+ wok.generatePluginEntry(value);
+ });
+ $('#plugins-mgmt-datagrid').dataGrid({enableSorting: false});
+ } else {
+ $('#plugins-mgmt-datagrid ul').addClass('hidden');
+ $('#plugins-mgmt-datagrid .no-matching-data').removeClass('hidden');
+ }
+
+ // Filter configuration
+ var pluginsOptions = {
+ valueNames: ['plugin-name-filter', 'plugin-description-filter']
+ };
+ var pluginsFilterList = new List('plugins-mgmt-content-area', pluginsOptions);
+ pluginsFilterList.sort('plugin-name-filter', {
+ order: "asc"
+ });
+
+ pluginsFilterList.search($('#search_input_plugins_mgmt').val());
+ pluginsFilterList.on('searchComplete',function(){
+ if(pluginsFilterList.matchingItems.length == 0){
+ $('#plugins-mgmt-datagrid ul').addClass('hidden');
+ $('#plugins-mgmt-datagrid .no-matching-data').removeClass('hidden');
+ } else {
+ $('#plugins-mgmt-datagrid ul').removeClass('hidden');
+ $('#plugins-mgmt-datagrid .no-matching-data').addClass('hidden');
+ }
+ });
+
+ // Toggle handler
+ $('#plugins-mgmt-body').on('change', '.wok-toggleswitch-checkbox', function(event) {
+ var pluginNode = $(this).parent().parent();
+ if($(this).is(":checked")) {
+ togglePlugin(pluginNode, true);
+ } else {
+ togglePlugin(pluginNode, false);
+ }
+ });
+
+ var enablePlugin = function(plugin) {
+ wok.enablePlugin(plugin, function(result){
+ location.reload();
+ }, function(){});
+ };
+
+ var disablePlugin = function(plugin) {
+ wok.disablePlugin(plugin, function(result){
+ location.reload();
+ }, function(){});
+ };
+
+ var togglePlugin = function(pluginNode, enable) {
+ var plugin = pluginNode.data('id');
+ var depends = $('input[name=plugin-depends]', pluginNode).val();
+ var is_dependency_of = $('input[name=plugin-is-dependency-of]', pluginNode).val();
+
+ var confirmMessage = undefined;
+ if (depends && enable) {
+ var confirmMessage = i18n['WOKPL0001M'].replace('%1', '<strong>' + plugin + '</strong>');
+ confirmMessage = confirmMessage.replace('%2', '<strong>' + depends + '</strong>');
+ } else if (is_dependency_of && !enable) {
+ var confirmMessage = i18n['WOKPL0002M'].replace('%1', '<strong>' + plugin + '</strong>');
+ confirmMessage = confirmMessage.replace('%2', '<strong>' + is_dependency_of + '</strong>');
+ }
+
+ if (confirmMessage) {
+ var settings = {
+ title: i18n['WOKAPI6005M'],
+ content: confirmMessage,
+ confirm: i18n['WOKAPI6004M'],
+ cancel: i18n['WOKAPI6003M']
+ };
+ wok.confirm(settings, function() {
+ $("body").css("cursor", "wait");
+ if (enable)
+ enablePlugin(plugin);
+ else if (!enable)
+ disablePlugin(plugin);
+ }, function() {
+ if (enable) {
+ $('.wok-toggleswitch-checkbox', pluginNode).removeAttr('checked');
+ }
+ else if (!enable) {
+ $('.wok-toggleswitch-checkbox', pluginNode).replaceWith('<input type="checkbox" name="plugin-status[]" id="' + plugin + '" value="' + plugin + '" checked class="wok-toggleswitch-checkbox">');
+ }
+ });
+ } else {
+ if (enable)
+ enablePlugin(plugin);
+ else if (!enable)
+ disablePlugin(plugin);
+ }
+ };
+};
+
+wok.generatePluginEntry = function(value){
+ //var description = value.description;
+ var description = "Plugin description " + value.name;
+ var checked = (value.enabled) ? 'checked' : '';
+
+ var id = 'plugin-' + value.name;
+ var disabled = (value.enabled) ? '' : 'disabled';
+ var pluginstatus = (value.enabled) ? 'On' : 'Off';
+
+ var pluginEntry = $.parseHTML(wok.substitute($("#pluginItem").html(), {
+ id: id,
+ name: value.name,
+ disabled: disabled,
+ checked: checked,
+ pluginstatus: pluginstatus,
+ depends: value.depends.join(", "),
+ is_dependency_of: value.is_dependency_of.join(", "),
+ logo: value.image ? value.image : '../images/pl.png',
+ description: description
+ }));
+
+ $('#plugins-mgmt-body').append(pluginEntry);
+};
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 4329ad0..3c886f9 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -31,6 +31,7 @@
"WOKAPI6007E": "$_("Can not contact the host system. Verify the host system is up and that you have network connectivity to it. HTTP request response %1. ")",
"WOKAPI6003M": "$_("Cancel")",
"WOKAPI6004M": "$_("Confirm")",
+ "WOKAPI6005M": "$_("Action Confirmation")",
"WOKGRD6001M": "$_("Loading...")",
"WOKGRD6002M": "$_("An error occurred while retrieving system information.")",
@@ -58,6 +59,9 @@
"WOKSETT0014M": "$_("IP Address")",
"WOKSETT0015M": "$_("Status")",
+ "WOKPL0001M": "$_("Plugin %1 depends on %2 which will be automatically enabled on this confirmation.")",
+ "WOKPL0002M": "$_("Plugin %1 is dependency of %2 which will be automatically disabled on this confirmation.")",
+
"WOKSESS0001M": "$_("Your session will be expired on: %1 s. Do you want to renew it?")",
"WOKFMT2001M": "$_("Ki")",
diff --git a/ui/pages/tabs/settings.html.tmpl b/ui/pages/tabs/settings.html.tmpl
new file mode 100644
index 0000000..ccc5b01
--- /dev/null
+++ b/ui/pages/tabs/settings.html.tmpl
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+Copyright IBM Corp, 2015
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+-->
+#unicode UTF-8
+#import gettext
+#from wok.cachebust import href
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
+#silent _ = t.gettext
+#silent _t = t.gettext
+<html>
+
+<head>
+ <link rel="stylesheet" type="text/css" href="$href('css/settings.css')">
+ <script type="text/javascript" src="$href('js/wok.settings.js')"></script>
+ <script type="text/javascript" src="$href('js/wok.bootgrid.js')"></script>
+</head>
+
+<body>
+ <div id="wok-root-container" class="wok">
+ <div class="container">
+ <div id="wokSettings" class="wok-settings">
+ <!-- Plugins Management -->
+ <div class="panel-group accordion" id="plugins-mgmt-accordion" role="tablist" aria-multiselectable="false">
+ <h3>
+ <a role="button" data-toggle="collapse" data-parent="#plugin-mgmt-accordion" href="#plugins-mgmt-content-area" aria-expanded="true" aria-controls="plugins-mgmt-content-area" class="">
+ <span class="accordion-icon"></span><span class="accordion-text" id="plugins-mgmt-header">$_("Plugins Management")</span>
+ </a>
+ </h3>
+ <div id="plugins-mgmt-content-area" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="plugins-mgmt-header">
+ <div id="plugins-mgmt-alert-container"></div>
+ <div class="row grid-control">
+ <div class="pull-right">
+ <label for="search_input_plugins_mgmt" class="sr-only">$_("Filter"):</label>
+ <input type="text" class="filter form-control search" id="search_input_plugins_mgmt" placeholder="$_("Filter")">
+ </div>
+ </div>
+ <div class="wok-datagrid" id="plugins-mgmt-datagrid">
+ <div class="wok-datagrid-header">
+ <span class="column-plugin-name" data-placement="auto bottom" data-toggle="tooltip" title="$_('Name')">$_("Name")</span><!--
+ --><span class="column-plugin-description" data-placement="auto bottom" data-toggle="tooltip" title="$_('Description')">$_("Description")</span><!--
+ --><span class="column-plugin-status" data-placement="auto bottom" data-toggle="tooltip" title="$_('Status')">$_("Status")</span>
+ </div>
+ <div class="well">
+ <ul class="wok-datagrid-body list" id="plugins-mgmt-body"></ul>
+ <div class="no-matching-data hidden">
+ <span role="row">$_("No result found")</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- -->
+ </div>
+ </div>
+ </div>
+
+ <script id="pluginItem" type="html/text">
+ <li class="wok-datagrid-row" id="{id}" data-id="{name}" role="row">
+ <input type="hidden" name="plugin-depends" value="{depends}">
+ <input type="hidden" name="plugin-is-dependency-of" value="{is_dependency_of}">
+ <div role="gridcell" class="column-plugin-name">
+ <img src="{logo}" longdesc="{name} logotype" alt="{name} plugin" title="{name} plugin" class="{disabled}"/>
+ <span class="plugin-name-filter" title="{name}">{name}</span>
+ </div>
+ <span role="gridcell" title="{description}" class="column-plugin-description plugin-description-filter">{description}</span><!--
+ --><span role="gridcell" class="column-plugin-status"><input type="checkbox" name="plugin-status[]" id="{name}" value="{name}" {checked} class="wok-toggleswitch-checkbox"><label for="{name}" class="wok-toggleswitch-label"><span class="sr-only">{pluginstatus}</span></label></span>
+ </li>
+ </script>
+ <script>
+ wok.initSettings();
+ </script>
+</body>
+
+</html>
--
2.9.3
More information about the Kimchi-devel
mailing list