vdiravka commented on a change in pull request #1692: DRILL-6562: Plugin Management improvements URL: https://github.com/apache/drill/pull/1692#discussion_r267365164
########## File path: exec/java-exec/src/main/resources/rest/storage/list.ftl ########## @@ -17,79 +17,280 @@ limitations under the License. --> + <#include "*/generic.ftl"> <#macro page_head> + <script src="/static/js/jquery.form.js"></script> + + <!-- Ace Libraries for Syntax Formatting --> + <script src="/static/js/ace-code-editor/ace.js" type="text/javascript" charset="utf-8"></script> + <script src="/static/js/ace-code-editor/theme-eclipse.js" type="text/javascript" charset="utf-8"></script> </#macro> <#macro page_body> <div class="page-header"> </div> - <h4>Enabled Storage Plugins</h4> - <div class="table-responsive"> + + <h4 class="col-xs-6">Plugin Management</h4> + <table style="margin: 10px" class="table"> + <tbody> + <tr> + <td style="border:none;"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new-plugin-modal"> + Create + </button> + <button type="button" class="btn btn-primary" name="all" data-toggle="modal" data-target="#pluginsModal"> + Export all + </button> + </td> + </tr> + </tbody> + </table> + + <div class="page-header" style="margin: 5px;"></div> + + <div class="table-responsive col-sm-12 col-md-6 col-lg-5 col-xl-5"> + <h4>Enabled Storage Plugins</h4> <table class="table"> <tbody> <#list model as plugin> <#if plugin.enabled() == true> <tr> - <td style="border:none; width:200px;"> + <td style="border:none; max-width: 200px; overflow: hidden; text-overflow: ellipsis;"> ${plugin.getName()} </td> <td style="border:none;"> - <a class="btn btn-primary" href="/storage/${plugin.getName()}">Update</a> - <a class="btn btn-default" onclick="doEnable('${plugin.getName()}', false)">Disable</a> - <a class="btn btn-default" href="/storage/${plugin.getName()}/export"">Export</a> + <button type="button" class="btn btn-primary" onclick="location.href='/storage/${plugin.getName()}'"> + Update + </button> + <button type="button" class="btn btn-primary" onclick="doEnable('${plugin.getName()}', false)"> + Disable + </button> + <button type="button" class="btn btn-primary" name="${plugin.getName()}" data-toggle="modal" + data-target="#pluginsModal"> + Export + </button> </td> </tr> </#if> </#list> </tbody> </table> </div> - <div class="page-header"> - </div> - <h4>Disabled Storage Plugins</h4> - <div class="table-responsive"> + + <div class="table-responsive col-sm-12 col-md-6 col-lg-7 col-xl-7"> + <h4>Disabled Storage Plugins</h4> <table class="table"> <tbody> <#list model as plugin> <#if plugin.enabled() == false> <tr> - <td style="border:none; width:200px;"> + <td style="border:none; max-width: 200px; overflow: hidden; text-overflow: ellipsis;"> ${plugin.getName()} </td> <td style="border:none;"> - <a class="btn btn-primary" href="/storage/${plugin.getName()}">Update</a> - <a class="btn btn-primary" onclick="doEnable('${plugin.getName()}', true)">Enable</a> + <button type="button" class="btn btn-primary" onclick="location.href='/storage/${plugin.getName()}'"> + Update + </button> + <button type="button" class="btn btn-primary" onclick="doEnable('${plugin.getName()}', true)"> + Enable + </button> + <button type="button" class="btn btn-primary" name="${plugin.getName()}" data-toggle="modal" + data-target="#pluginsModal"> + Export + </button> </td> </tr> </#if> </#list> </tbody> </table> </div> - <div class="page-header"> + + + <#-- Modal window for exporting plugin config (including group plugins modal) --> + <div class="modal fade" id="pluginsModal" tabindex="-1" role="dialog" aria-labelledby="exportPlugin" aria-hidden="true"> + <div class="modal-dialog modal-sm" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="exportPlugin">Plugin config</h4> + </div> + <div class="modal-body"> + <div id="format" style="display: inline-block; position: relative;"> + <label for="format">Format</label> + <div class="radio"> + <label> + <input type="radio" name="format" id="json" value="json" checked="checked"> + JSON + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="format" id="hocon" value="conf"> + HOCON + </label> + </div> + </div> + + <div id="plugin-set" class="" style="display: inline-block; position: relative; float: right;"> + <label for="format">Plugin group</label> + <div class="radio"> + <label> + <input type="radio" name="group" id="all" value="all" checked="checked"> + ALL + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="group" id="enabled" value="enabled"> + ENABLED + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="group" id="disabled" value="disabled"> + DISABLED + </label> + </div> + </div> + </div> + + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" id="export" class="btn btn-primary">Export</button> + </div> + </div> + </div> </div> - <div> - <h4>New Storage Plugin</h4> - <form class="form-inline" id="newStorage" role="form" action="/" method="GET"> - <div class="form-group"> - <input type="text" class="form-control" id="storageName" placeholder="Storage Name"> + <#-- Modal window for exporting plugin config (including group plugins modal) --> + + <#-- Modal window for creating plugin --> + <div class="modal fade" id="new-plugin-modal" role="dialog" aria-labelledby="configuration"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="configuration">New Storage Plugin</h4> + </div> + <div class="modal-body"> + + <form id="createForm" role="form" action="/storage/create" method="POST"> + <input type="text" class="form-control" name="name" placeholder="Storage Name"> + <h3>Configuration</h3> + <div class="form-group"> + <div id="editor" class="form-control"></div> + <textarea class="form-control" id="config" name="config" data-editor="json" style="display: none;"> + </textarea> + </div> + <div style="text-align: right; margin: 10px"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="submit" class="btn btn-primary" onclick="doCreate()">Create</button> + </div> + </form> + + <div id="message" class="hidden alert alert-info"> + </div> + </div> </div> - <button type="submit" class="btn btn-default" onclick="doSubmit()">Create</button> - </form> + </div> </div> + <#-- Modal window for creating plugin --> + <script> - function doSubmit() { - var name = document.getElementById("storageName"); - var form = document.getElementById("newStorage"); - form.action = "/storage/" + name.value; - form.submit(); - }; function doEnable(name, flag) { - $.get("/storage/" + name + "/enable/" + flag, function(data) { + $.get("/storage/" + name + "/enable/" + flag, function() { Review comment: Done in similar way, how it is done in other pages ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services