DRILL-6942: Provide ability to sort list of profiles on Drill Web UI

This provides an option to order the list of query profiles based on any of the displayed fields, including total duration. This way, a user can easily identify long running queries.
In addition, the number of profiles listed per page for both, completed and running list of queries, has been made configurable with the parameter: `drill.exec.http.profiles_per_page` (default is 10,25,50,100)

closes #1594

7 files changed, 30 insertions, 32 deletions

diff --git a/exec/java-exec/src/main/java/org/apache/drill/exec/ExecConstants.java b/exec/java-exec/src/main/java/org/apache/drill/exec/ExecConstants.java
index 6ce4822ff..bab94a180 100644
--- a/exec/java-exec/src/main/java/org/apache/drill/exec/ExecConstants.java
+++ b/exec/java-exec/src/main/java/org/apache/drill/exec/ExecConstants.java
@@ -203,6 +203,7 @@ public final class ExecConstants {
   public static final String HAZELCAST_SUBNETS = "drill.exec.cache.hazel.subnets";
   public static final String HTTP_ENABLE = "drill.exec.http.enabled";
   public static final String HTTP_MAX_PROFILES = "drill.exec.http.max_profiles";
+  public static final String HTTP_PROFILES_PER_PAGE = "drill.exec.http.profiles_per_page";
   public static final String HTTP_PORT = "drill.exec.http.port";
   public static final String HTTP_PORT_HUNT = "drill.exec.http.porthunt";
   public static final String HTTP_JETTY_SERVER_ACCEPTORS = "drill.exec.http.jetty.server.acceptors";
diff --git a/exec/java-exec/src/main/java/org/apache/drill/exec/server/rest/profile/ProfileResources.java b/exec/java-exec/src/main/java/org/apache/drill/exec/server/rest/profile/ProfileResources.java
index af2b7905a..e88b57cb4 100644
--- a/exec/java-exec/src/main/java/org/apache/drill/exec/server/rest/profile/ProfileResources.java
+++ b/exec/java-exec/src/main/java/org/apache/drill/exec/server/rest/profile/ProfileResources.java
@@ -57,7 +57,7 @@ import org.apache.drill.exec.store.sys.PersistentStoreProvider;
 import org.apache.drill.exec.work.WorkManager;
 import org.apache.drill.exec.work.foreman.Foreman;
 import org.glassfish.jersey.server.mvc.Viewable;
-
+import org.apache.drill.shaded.guava.com.google.common.base.Joiner;
 import org.apache.drill.shaded.guava.com.google.common.collect.Lists;
 
 @Path("/")
@@ -219,6 +219,12 @@ public class ProfileResources {
       return work.getContext().getConfig().getInt(ExecConstants.HTTP_MAX_PROFILES);
     }
 
+    public String getQueriesPerPage() {
+      List<Integer> queriesPerPageOptions = work.getContext().getConfig().getIntList(ExecConstants.HTTP_PROFILES_PER_PAGE);
+      Collections.sort(queriesPerPageOptions);
+      return Joiner.on(",").join(queriesPerPageOptions);
+    }
+
     public List<String> getErrors() { return errors; }
   }
 
diff --git a/exec/java-exec/src/main/resources/drill-module.conf b/exec/java-exec/src/main/resources/drill-module.conf
index 018dc9161..6b9fe6fbf 100644
--- a/exec/java-exec/src/main/resources/drill-module.conf
+++ b/exec/java-exec/src/main/resources/drill-module.conf
@@ -142,6 +142,7 @@ drill.exec: {
       }
     }
     max_profiles: 100,
+    profiles_per_page: [10, 25, 50, 100],
     profile.warning: {
       progress.threshold: 300,
       time.skew: {
diff --git a/exec/java-exec/src/main/resources/rest/options.ftl b/exec/java-exec/src/main/resources/rest/options.ftl
index 1fce03ca5..e1c904d03 100644
--- a/exec/java-exec/src/main/resources/rest/options.ftl
+++ b/exec/java-exec/src/main/resources/rest/options.ftl
@@ -64,18 +64,7 @@
     <link href="/static/css/dataTables.colVis-1.1.0.min.css" rel="stylesheet">
     <link href="/static/css/dataTables.jqueryui.css" rel="stylesheet">
     <link href="/static/css/jquery-ui-1.10.3.min.css" rel="stylesheet">
-<style>
-/* DataTables Sorting: inherited via sortable class */
-table.sortable thead .sorting,.sorting_asc,.sorting_desc {
-  background-repeat: no-repeat;
-  background-position: center right;
-  cursor: pointer;
-}
-/* Sorting Symbols */
-table.sortable thead .sorting { background-image: url("/static/img/black-unsorted.gif"); }
-table.sortable thead .sorting_asc { background-image: url("/static/img/black-asc.gif"); }
-table.sortable thead .sorting_desc { background-image: url("/static/img/black-desc.gif"); }
-</style>
+    <link href="/static/css/drill-dataTables.sortable.css" rel="stylesheet">
 </#macro>
 
 <#macro page_body>
diff --git a/exec/java-exec/src/main/resources/rest/profile/list.ftl b/exec/java-exec/src/main/resources/rest/profile/list.ftl
index cc9b63ca9..1afeb7deb 100644
--- a/exec/java-exec/src/main/resources/rest/profile/list.ftl
+++ b/exec/java-exec/src/main/resources/rest/profile/list.ftl
@@ -21,16 +21,18 @@
 <#macro page_head>
 
 <script src="/static/js/jquery.dataTables-1.10.16.min.js"></script>
+<link href="/static/css/drill-dataTables.sortable.css" rel="stylesheet">
 <script>
     $(document).ready(function() {
       $.each(["running","completed"], function(i, key) {
         $("#profileList_"+key).DataTable( {
-          //Preserve order
-          "ordering": false,
+          //Permit sorting-by-column
+          "ordering": true,
+          "order": [[0, "desc"]],
           "searching": true,
           "paging": true,
           "pagingType": "full_numbers",
-          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "lengthMenu": [[${model.getQueriesPerPage()}, -1], [${model.getQueriesPerPage()}, "All"]],
           "lengthChange": true,
           "info": true,
           //Ref: https://legacy.datatables.net/ref#sDom
@@ -193,7 +195,7 @@
 
 <#macro list_queries queries stateList>
     <div class="table-responsive">
-        <table id="profileList_${stateList}" class="table table-hover dataTable" role="grid">
+        <table id="profileList_${stateList}" class="table table-hover sortable dataTable" role="grid">
             <thead>
             <tr role="row">
                 <#if stateList == "running" >
@@ -213,7 +215,7 @@
                 <#if stateList == "running" >
                 <td><input type="checkbox" name="cancelQ" value="${query.getQueryId()}"/></td>
                 </#if>
-                <td>${query.getTime()}</td>
+                <td data-order='${query.getStartTime()}'>${query.getTime()}</td>
                 <td>${query.getUser()}</td>
                 <td>
                     <a href="/profiles/${query.getQueryId()}">
@@ -221,7 +223,7 @@
                     </a>
                 </td>
                 <td>${query.getState()}</td>
-                <td>${query.getDuration()}</td>
+                <td data-order='${query.getEndTime() - query.getStartTime()}'>${query.getDuration()}</td>
                 <td>${query.getForeman()}</td>
             </tr>
             </#list>
diff --git a/exec/java-exec/src/main/resources/rest/profile/profile.ftl b/exec/java-exec/src/main/resources/rest/profile/profile.ftl
index e432e2080..6d5690a06 100644
--- a/exec/java-exec/src/main/resources/rest/profile/profile.ftl
+++ b/exec/java-exec/src/main/resources/rest/profile/profile.ftl
@@ -33,6 +33,7 @@
 <script src="/static/js/ace-code-editor/theme-sqlserver.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/ace-code-editor/snippets/sql.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/ace-code-editor/mode-snippets.js" type="text/javascript" charset="utf-8"></script>
+<link href="/static/css/drill-dataTables.sortable.css" rel="stylesheet">
 
 <script>
     var globalconfig = {
@@ -97,19 +98,6 @@
     };
 
 </script>
-<style>
-/* DataTables Sorting: inherited via sortable class */
-table.sortable thead .sorting,.sorting_asc,.sorting_desc {
-  background-repeat: no-repeat;
-  background-position: center right;
-  cursor: pointer;
-}
-/* Sorting Symbols */
-table.sortable thead .sorting { background-image: url("/static/img/black-unsorted.gif"); }
-table.sortable thead .sorting_asc { background-image: url("/static/img/black-asc.gif"); }
-table.sortable thead .sorting_desc { background-image: url("/static/img/black-desc.gif"); }
-</style>
-
 </#macro>
 
 <#macro page_body>
diff --git a/exec/java-exec/src/main/resources/rest/static/css/drill-dataTables.sortable.css b/exec/java-exec/src/main/resources/rest/static/css/drill-dataTables.sortable.css
new file mode 100644
index 000000000..47f426009
--- /dev/null
+++ b/exec/java-exec/src/main/resources/rest/static/css/drill-dataTables.sortable.css
@@ -0,0 +1,11 @@
+/* DataTables Sorting: inherited via sortable class */
+table.sortable thead .sorting,.sorting_asc,.sorting_desc {
+  background-repeat: no-repeat;
+  background-position: center right;
+  cursor: pointer;
+}
+/* Sorting Symbols */
+table.sortable thead .sorting { background-image: url("/static/img/black-unsorted.gif"); }
+table.sortable thead .sorting_asc { background-image: url("/static/img/black-asc.gif"); }
+table.sortable thead .sorting_desc { background-image: url("/static/img/black-desc.gif"); }
+