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

13 Feb 2017

Signed-off-by: Aline Manera <alinefm@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;
+@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

    