It was not considering that cherrypy.request.app.script_name may be an empty string (which happens when accessing a Wok tab and server_root is not defined). And that was leading to set a wrong last page cookie like "/#/tabs/settings.html" (with an extra /) that does not correspond to any tab content. That way, no matter on what Wok page was the last page visited, the user would be always redirected to the default one (which was the first Wok tab - because that the problem was not found before). Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- src/wok/root.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wok/root.py b/src/wok/root.py index 279ca7f..a0323f9 100644 --- a/src/wok/root.py +++ b/src/wok/root.py @@ -116,8 +116,8 @@ class Root(Resource): # template to save the delay of the extra get to the guest page # For that, the tab template needs to know the correct path to ui files paths = cherrypy.request.app.root.paths - script_name = cherrypy.request.app.script_name - last_page = script_name.lstrip("/") + "/tabs/" + page[:-5] + script_name = cherrypy.request.app.script_name or "/" + last_page = os.path.join(script_name, "tabs/", page[:-5]).lstrip("/") data = {} data['ui_dir'] = paths.ui_dir -- 2.9.3

All the AJAX calls should be placed on wok.api.js Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- ui/js/src/wok.api.js | 40 ++++++++++++++++++++++++++++++++++++++++ ui/js/wok.user-log.js | 40 ---------------------------------------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/ui/js/src/wok.api.js b/ui/js/src/wok.api.js index c465dfb..4af3f88 100644 --- a/ui/js/src/wok.api.js +++ b/ui/js/src/wok.api.js @@ -144,5 +144,45 @@ var wok = { success : suc, error : err }); + }, + + getUserLogs : function(suc, err) { + wok.requestJSON({ + url : 'logs', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + resend : true, + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); + }, + + getFilteredUserLogs : function(suc, err, search) { + wok.requestJSON({ + url : 'logs?' + search, + type : 'GET', + contentType : 'application/json', + dataType : 'json', + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); + }, + + downloadLogs : function(suc, err, search) { + wok.requestJSON({ + url : 'logs?'+search+'download=True', + type : 'GET', + contentType : 'application/json', + dataType : 'json', + success : suc, + error : err || function(data) { + wok.message.error(data.responseJSON.reason); + } + }); } }; diff --git a/ui/js/wok.user-log.js b/ui/js/wok.user-log.js index fa4945f..160f9a0 100644 --- a/ui/js/wok.user-log.js +++ b/ui/js/wok.user-log.js @@ -28,46 +28,6 @@ wok.initUserLogConfig = function() { wok.listUserLogConfig(); } -wok.getUserLogs = function(suc, err) { - wok.requestJSON({ - url : 'logs', - type : 'GET', - contentType : 'application/json', - dataType : 'json', - resend : true, - success : suc, - error : err || function(data) { - wok.message.error(data.responseJSON.reason); - } - }); -}; - -wok.getFilteredUserLogs = function(suc, err, search) { - wok.requestJSON({ - url : 'logs?' + search, - type : 'GET', - contentType : 'application/json', - dataType : 'json', - success : suc, - error : err || function(data) { - wok.message.error(data.responseJSON.reason); - } - }); -}; - -wok.downloadLogs = function(suc, err, search) { - wok.requestJSON({ - url : 'logs?'+search+'download=True', - type : 'GET', - contentType : 'application/json', - dataType : 'json', - success : suc, - error : err || function(data) { - wok.message.error(data.responseJSON.reason); - } - }); -}; - wok.listUserLogConfig = function() { var ulGrid = []; -- 2.9.3

The patch renames all the files used by user log to make it consistence to its new tab name. The "Settings" tab will be used to handle plugins management feature. This patch does not add anything new. The changes was to accomodate the files renaming. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- ui/config/tab-ext.xml | 4 +- ui/css/Makefile.am | 10 +- ui/css/src/{settings.scss => user-log.scss} | 2 +- ui/css/user-log.css | 159 +++++++++++++++++++++ ui/css/wok.css | 4 +- ui/js/wok.bootgrid.js | 6 +- ui/js/wok.user-log.js | 22 ++- ...-search.html.tmpl => user-log-search.html.tmpl} | 0 .../{settings.html.tmpl => user-log.html.tmpl} | 10 +- 9 files changed, 187 insertions(+), 30 deletions(-) rename ui/css/src/{settings.scss => user-log.scss} (98%) create mode 100644 ui/css/user-log.css rename ui/pages/tabs/{settings-search.html.tmpl => user-log-search.html.tmpl} (100%) rename ui/pages/tabs/{settings.html.tmpl => user-log.html.tmpl} (87%) diff --git a/ui/config/tab-ext.xml b/ui/config/tab-ext.xml index 348e13e..5780b96 100644 --- a/ui/config/tab-ext.xml +++ b/ui/config/tab-ext.xml @@ -4,8 +4,8 @@ <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> - <title>Settings</title> + <title>Activity Log</title> <order>-1</order> - <path>tabs/settings.html</path> + <path>tabs/user-log.html</path> </tab> </tabs-ext> diff --git a/ui/css/Makefile.am b/ui/css/Makefile.am index a779e61..ea49ec8 100644 --- a/ui/css/Makefile.am +++ b/ui/css/Makefile.am @@ -1,7 +1,7 @@ # # Project Wok # -# Copyright IBM Corp, 2013-2016 +# Copyright IBM Corp, 2013-2017 # # Code derived from Project Kimchi # @@ -22,7 +22,7 @@ SUBDIRS = fontawesome opensans EXTRA_DIST = theme-default cssdir = $(datadir)/wok/ui/css -dist_css_DATA = theme-default.min.css jquery-ui.custom.css wok.css bootstrap.custom.css bootstrap-select.custom.css settings.css datatables.bootstrap.css +dist_css_DATA = $(wildcard *.css) wok: src/wok.scss src/modules/*.scss echo "Compiling .scss file $<" @@ -32,9 +32,9 @@ bootstrap: src/bootstrap.custom.scss echo "Compiling .scss file $<" sassc -s expanded $< bootstrap.custom.css -settings: src/settings.scss +user-log: src/user-log.scss echo "Compiling .scss file $<" - sassc -s expanded $< settings.css + sassc -s expanded $< user-log.css bootstrap-select: src/bootstrap-select.custom.scss echo "Compiling .scss file $<" @@ -44,7 +44,7 @@ datatables: src/datatables.bootstrap.scss echo "Compiling .scss file $<" sassc -s expanded $< datatables.bootstrap.css -css: wok bootstrap bootstrap-select settings datatables +css: wok bootstrap bootstrap-select user-log datatables theme-default.min.css: theme-default/*.css cat $^ > $@ diff --git a/ui/css/src/settings.scss b/ui/css/src/user-log.scss similarity index 98% rename from ui/css/src/settings.scss rename to ui/css/src/user-log.scss index 557605e..d829516 100644 --- a/ui/css/src/settings.scss +++ b/ui/css/src/user-log.scss @@ -1,7 +1,7 @@ /* * Project Wok * - * Copyright IBM Corp, 2016 + * Copyright IBM Corp, 2017 * * Code derived from Project Kimchi * diff --git a/ui/css/user-log.css b/ui/css/user-log.css new file mode 100644 index 0000000..cba4cc6 --- /dev/null +++ b/ui/css/user-log.css @@ -0,0 +1,159 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 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. + */ +/* + * A partial implementation of the Ruby list functions from Compass: + * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extension... + */ +/* + * A partial implementation of the Ruby constants functions from Compass: + * https://github.com/Compass/compass/blob/stable/lib/compass/sass_extension... + */ +/* + * A partial implementation of the Ruby display functions from Compass: + * https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass... + */ +#wok-root-container .accordion { + margin: 12px 20px 12px 60px; + padding-bottom: 18px; + border-bottom: 1px solid #eee; + overflow: visible; + clear: both; +} + +#wok-root-container .accordion:first-child { + margin-top: 24px; +} + +#wok-root-container .accordion > h3 { + margin: 0; + padding: 0; + font-size: 26px; + font-weight: 300; + height: 44px; + display: block; +} + +#wok-root-container .accordion > h3 a { + color: #3a393b; + text-decoration: none; + display: block; + padding: 6px 30px; + margin-left: -30px; + margin-right: -30px; +} + +#wok-root-container .accordion > h3 a span.accordion-icon { + margin-left: -52px; + vertical-align: middle; + display: inline-block; + font: normal normal normal 32px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + color: #3a393b; +} + +#wok-root-container .accordion > h3 a[aria-expanded="false"] span.accordion-icon:before { + content: "\f01a"; +} + +#wok-root-container .accordion > h3 a[aria-expanded="true"] span.accordion-icon:before { + content: "\f01b"; +} + +#wok-root-container .accordion > h3 a span.accordion-text { + margin-left: 23px; + display: inline-block; + vertical-align: middle; +} + +.wok div.modal-footer { + background-color: #d9182d; +} + +.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; +} + +.wok.modal .row.clearfix { + margin-left: -10px; + margin-right: -10px; +} + +.wok.modal .form-group.col-sm-6 { + padding-left: 10px; + padding-right: 10px; +} + +.action-group { + position: absolute; + z-index: 999; +} + +div#user-log-actions { + padding-top: 15px; +} + +.label { + display: inline-block; + vertical-align: middle; +} + +.bootgrid-table th > .column-header-anchor > .icon.fa { + right: 6px; + top: 4px; +} + +span.trim { + display: inline-block; + width: 100%; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 6px; +} + +.table > tbody > tr > td { + vertical-align: middle; +} + +.tooltip > .tooltip-inner { + font-weight: 400; + font-size: 12.5pt; + padding: 8px !important; + 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/wok.css b/ui/css/wok.css index f77b2af..ec269b5 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -1,7 +1,7 @@ /* * Project Wok * - * Copyright IBM Corp, 2015-2016 + * Copyright IBM Corp, 2015-2017 * * Code derived from Project Kimchi * @@ -1473,7 +1473,7 @@ input[type=radio].wok-radio + label { /* * Project Wok * -* Copyright IBM Corp, 2015-2016 +* Copyright IBM Corp, 2015-2017 * * Code derived from Project Kimchi * diff --git a/ui/js/wok.bootgrid.js b/ui/js/wok.bootgrid.js index 1a5a374..e2da393 100644 --- a/ui/js/wok.bootgrid.js +++ b/ui/js/wok.bootgrid.js @@ -1,5 +1,5 @@ /* - * Copyright IBM Corp, 2016 + * Copyright IBM Corp, 2016-2017 * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public @@ -74,10 +74,10 @@ wok.createBootgrid = function(opts) { navigation: navigation, rowSelect: false, formatters: { - "settings-user-log-app": function(column, row) { + "user-log-app": function(column, row) { return '<span class="label label-primary" style="background-color:' + wok.pluginsColor[row.app] + '">' + row.app + '</span> '; }, - "settings-user-log-message": function(column, row) { + "user-log-message": function(column, row) { return '<span class="trim" data-toggle="tooltip" data-placement="auto bottom" title="'+row.message+'">' +row.message+ '</span> '; }, }, diff --git a/ui/js/wok.user-log.js b/ui/js/wok.user-log.js index 560fbfa..80e67e1 100644 --- a/ui/js/wok.user-log.js +++ b/ui/js/wok.user-log.js @@ -1,5 +1,5 @@ /* - * Copyright IBM Corp, 2016 + * Copyright IBM Corp, 2016-2017 * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public @@ -16,18 +16,14 @@ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */ -wok.initSettings = function() { +wok.initUserLog = function() { wok.opts_user_log = {}; wok.opts_user_log['id'] = 'user-log-content'; wok.opts_user_log['gridId'] = "user-log-grid"; wok.opts_user_log['loadingMessage'] = i18n['WOKSETT0007M']; - wok.initUserLog(); + wok.initUserLogContent(); }; -wok.initUserLogConfig = function() { - wok.listUserLogConfig(); -} - wok.listUserLogConfig = function() { var ulGrid = []; @@ -36,7 +32,7 @@ wok.listUserLogConfig = function() { gridFields = [{ "column-id": 'app', "converter": 'string', - "formatter": "settings-user-log-app", + "formatter": "user-log-app", "title": i18n['WOKSETT0001M'] }, { "column-id": 'user', @@ -73,7 +69,7 @@ wok.listUserLogConfig = function() { }, { "column-id": 'message', "converter": 'string', - "formatter": "settings-user-log-message", + "formatter": "user-log-message", "sortable": false, "width": "30%", "title": i18n['WOKSETT0006M'] @@ -133,11 +129,11 @@ wok.initUserLogConfigGridData = function() { }); }; -wok.initUserLog = function() { - $(".content-area", "#wokSettings").css("height", "100%"); - wok.initUserLogConfig(); +wok.initUserLogContent = function() { + $(".content-area", "#wokUserLog").css("height", "100%"); + wok.listUserLogConfig(); $('#advanced-search-button').on('click',function(){ - wok.window.open('tabs/settings-search.html'); + wok.window.open('tabs/user-log-search.html'); }); $("#download-button").on('click',function(){ diff --git a/ui/pages/tabs/settings-search.html.tmpl b/ui/pages/tabs/user-log-search.html.tmpl similarity index 100% rename from ui/pages/tabs/settings-search.html.tmpl rename to ui/pages/tabs/user-log-search.html.tmpl diff --git a/ui/pages/tabs/settings.html.tmpl b/ui/pages/tabs/user-log.html.tmpl similarity index 87% rename from ui/pages/tabs/settings.html.tmpl rename to ui/pages/tabs/user-log.html.tmpl index dde05c8..d45cbaf 100644 --- a/ui/pages/tabs/settings.html.tmpl +++ b/ui/pages/tabs/user-log.html.tmpl @@ -25,7 +25,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <html> <head> - <link rel="stylesheet" type="text/css" href="$href('css/settings.css')"> + <link rel="stylesheet" type="text/css" href="$href('css/user-log.css')"> <script type="text/javascript" src="$href('js/wok.user-log.js')"></script> <script type="text/javascript" src="$href('js/wok.bootgrid.js')"></script> </head> @@ -33,11 +33,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <body> <div id="wok-root-container" class="wok"> <div class="container"> - <div id="wokSettings" class="wok-settings"> + <div id="wokUserLog" class="wok-user-log"> <!-- User Log Panel --> <div class="panel-group content-area accordion" id="user-log-content-area-accordion" role="tablist" aria-multiselectable="true"> <h3> - <a role="button" aria-expanded="true" data-toggle="collapse" data-parent="#user-log-content-area-accordion" href="#user-log-content-area" aria-expanded="false" aria-controls="user-log-content-area" class=""> + <a role="button" data-toggle="collapse" data-parent="#user-log-content-area-accordion" href="#user-log-content-area" aria-expanded="true" aria-controls="user-log-content-area" class=""> <span class="accordion-icon"></span> <span class="accordion-text">$_("User Activity Log")</span> </a> @@ -59,13 +59,15 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> </div> </div> + </div> </div> </div> <div id="modalWindow" class="modal fade settings-modal wok" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true"> </div> + <script> - wok.initSettings(); + wok.initUserLog(); </script> </body> -- 2.9.3

Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- 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; +@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; +@media (min-width: 1017px) { + #plugins-mgmt-content-area span.column-plugin-description { + display: inline-block; + width: 30%; + min-width: 30%; + flex-basis: 30%; + } +} + +@media (min-width: 1302px) { + #plugins-mgmt-content-area span.column-plugin-description { + display: inline-block; + width: 40%; + min-width: 40%; + flex-basis: 40%; + } +} + +@media (min-width: 1540px) { + #plugins-mgmt-content-area span.column-plugin-description { + display: inline-block; + width: 50%; + min-width: 50%; + flex-basis: 50%; + } +} + +@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 +@import "modules/wok-variables"; +// Core variables and mixins +@import "vendor/bootstrap-sass/bootstrap/mixins"; +// Compass Mixins +@import "vendor/compass-mixins/lib/compass"; +// Wok Accordion Mixin +@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 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 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