vdiravka commented on a change in pull request #1692: DRILL-6562: Plugin 
Management improvements
URL: https://github.com/apache/drill/pull/1692#discussion_r267362182
 
 

 ##########
 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">&times;</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 -->
 
 Review comment:
   I started do that, but then rethought it.
   Then `alertModals.ftl` looks a bit messy and other pages (options, profile, 
query) will include additional not necessary code. The pages become larger.
   
   I think it makes sense to factor out common modals and scripts. These modals 
are specific and used only on one page. So it is fine to keep them in the 
appropriate FTL page now. If so, it can be changed in future.

----------------------------------------------------------------
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

Reply via email to