[Kimchi-devel] [PATCH] [Wok 7/7] Plugins management UI

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