You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@drill.apache.org by pa...@apache.org on 2017/11/22 22:52:06 UTC

[04/12] drill git commit: DRILL-5867: List profiles in pages rather than a long verbose listing

DRILL-5867: List profiles in pages rather than a long verbose listing

Leverage existing DataTables libraries to paginate a long pre-fetched list of profiles for listing.
Added benefit of querying through that list (search field) is also available for a user
Minor change made to the display text for prefetching of profiles (DRILL-5259) so that it is not confused with what this commit adds to the UI.

This closes #1029


Project: http://git-wip-us.apache.org/repos/asf/drill/repo
Commit: http://git-wip-us.apache.org/repos/asf/drill/commit/b1f0739f
Tree: http://git-wip-us.apache.org/repos/asf/drill/tree/b1f0739f
Diff: http://git-wip-us.apache.org/repos/asf/drill/diff/b1f0739f

Branch: refs/heads/master
Commit: b1f0739fdee5fc1d2b1c43fa052d1fc92fd33af0
Parents: 1285c80
Author: Kunal Khatua <kk...@maprtech.com>
Authored: Tue Nov 14 14:15:28 2017 -0800
Committer: Parth Chandra <pa...@apache.org>
Committed: Wed Nov 22 10:31:22 2017 -0800

----------------------------------------------------------------------
 .../server/rest/profile/ProfileResources.java   | 39 +++++++++--
 .../src/main/resources/rest/profile/list.ftl    | 69 ++++++++++++++++++--
 2 files changed, 99 insertions(+), 9 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/drill/blob/b1f0739f/exec/java-exec/src/main/java/org/apache/drill/exec/server/rest/profile/ProfileResources.java
----------------------------------------------------------------------
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 14056b0..fdd391e 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
@@ -71,6 +71,9 @@ public class ProfileResources {
   @Inject SecurityContext sc;
 
   public static class ProfileInfo implements Comparable<ProfileInfo> {
+    private static final int QUERY_SNIPPET_MAX_CHAR = 150;
+    private static final int QUERY_SNIPPET_MAX_LINES = 8;
+
     public static final SimpleDateFormat format = new SimpleDateFormat("MM/dd/yyyy HH:mm:ss");
 
     private final String queryId;
@@ -93,7 +96,7 @@ public class ProfileResources {
       this.time = new Date(startTime);
       this.foreman = foreman;
       this.link = generateLink(drillConfig, foreman, queryId);
-      this.query = query.substring(0,  Math.min(query.length(), 150));
+      this.query = extractQuerySnippet(query);
       this.state = state;
       this.user = user;
       this.totalCost = totalCost;
@@ -127,6 +130,10 @@ public class ProfileResources {
 
     public String getForeman() { return foreman; }
 
+    public double getTotalCost() { return totalCost; }
+
+    public String getQueueName() { return queueName; }
+
     /**
      * Generates link which will return query profile in json representation.
      *
@@ -151,9 +158,33 @@ public class ProfileResources {
       return sb.toString();
     }
 
-    public double getTotalCost() { return totalCost; }
-
-    public String getQueueName() { return queueName; }
+    /**
+     * Extract only the first 150 characters of the query.
+     * If this spans more than 8 lines, we truncate excess lines for sake of readability
+     * @param queryText
+     * @return truncated text
+     */
+    private String extractQuerySnippet(String queryText) {
+      //Extract upto max char limit as snippet
+      String sizeCappedQuerySnippet = queryText.substring(0,  Math.min(queryText.length(), QUERY_SNIPPET_MAX_CHAR));
+      String[] queryParts = sizeCappedQuerySnippet.split(System.lineSeparator());
+      //Trimming down based on line-count
+      if (QUERY_SNIPPET_MAX_LINES < queryParts.length) {
+        int linesConstructed = 0;
+        StringBuilder lineCappedQuerySnippet = new StringBuilder();
+        for (String qPart : queryParts) {
+          lineCappedQuerySnippet.append(qPart);
+          if (++linesConstructed < QUERY_SNIPPET_MAX_LINES) {
+            lineCappedQuerySnippet.append(System.lineSeparator());
+          } else {
+            lineCappedQuerySnippet.append(" ... ");
+            break;
+          }
+        }
+        return lineCappedQuerySnippet.toString();
+      }
+      return sizeCappedQuerySnippet;
+    }
   }
 
   protected PersistentStoreProvider getProvider() {

http://git-wip-us.apache.org/repos/asf/drill/blob/b1f0739f/exec/java-exec/src/main/resources/rest/profile/list.ftl
----------------------------------------------------------------------
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 8eb78fd..e83e093 100644
--- a/exec/java-exec/src/main/resources/rest/profile/list.ftl
+++ b/exec/java-exec/src/main/resources/rest/profile/list.ftl
@@ -11,6 +11,64 @@
 
 <#include "*/generic.ftl">
 <#macro page_head>
+
+<script src="/static/js/jquery.dataTables-1.10.16.min.js"></script>
+<script>
+    $(document).ready(function() {
+      $("#profileList").DataTable( {
+        //Preserve order
+        "ordering": false,
+        "searching": true,
+        "paging": true,
+        "pagingType": "first_last_numbers",
+        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "lengthChange": true,
+        "info": true,
+        //Ref: https://legacy.datatables.net/ref#sDom
+        "sDom": '<"top"lftip><"bottom"><"clear">',
+        //Customized info labels
+        "language": {
+            "lengthMenu": "Display _MENU_ profiles per page",
+            "zeroRecords": "No matching profiles found!",
+            "info": "Showing page _PAGE_ of _PAGES_ ",
+            "infoEmpty": "No profiles available",
+            "infoFiltered": "(filtered _TOTAL_ from _MAX_)",
+            "search": "Search Profiles  "
+        }
+      } );
+    } );
+</script>
+
+<!-- CSS to control DataTable Elements -->
+<style type="text/css" class="init">
+  /* Control Padding for length and filter as a pair */
+  div.dataTables_length {
+    float: right;
+  }
+  div.dataTables_filter {
+    float: left;
+  }
+  div.dataTables_info {
+    padding-right: 2em;
+    float: right;
+  }
+
+  /* Add spaces between pagination links */
+  #profileList_paginate * {
+    padding-right: 0.55em;
+    float:left
+  }
+  /* Normal wt for search text */
+  #profileList_filter input {
+    font-weight: normal;
+    padding-left: 0.45em;
+  }
+  #profileList_length * {
+    font-weight: normal;
+  }
+
+</style>
+
 </#macro>
 
 <#macro page_body>
@@ -54,9 +112,9 @@
     <tr>
       <td><h3>Completed Queries</h3></td>
       <td align="right">
-        <form name="profileFetch" action="/profiles" onsubmit="return checkMaxFetch();" method="get"><span title="Max number of profiles to list">Showing <b>${model.getFinishedQueries()?size}</b> profiles. Max: </span>
-        <input id="fetchMax" type="text" size="7" name="max" value="">
-        <input type="submit" value="Refresh">
+        <form name="profileFetch" action="/profiles" onsubmit="return checkMaxFetch();" method="get"><span title="Max number of profiles to load">Loaded <b>${model.getFinishedQueries()?size}</b> profiles </span>
+        <input id="fetchMax" type="text" size="5" name="max" value="" style="text-align: right" />
+        <input type="submit" value="Reload"/>
       </form></td>
     </tr></table>
     <!-- Placed after textbox to allow for DOM to contain "fetchMax" element -->
@@ -78,9 +136,9 @@
 
 <#macro list_queries queries>
     <div class="table-responsive">
-        <table class="table table-hover">
+        <table id="profileList" class="table table-hover dataTable" role="grid">
             <thead>
-            <tr>
+            <tr role="row">
                 <th>Time</th>
                 <th>User</th>
                 <th>Query</th>
@@ -107,6 +165,7 @@
             </tbody>
         </table>
     </div>
+    <div style="padding-bottom: 2em;"/>
 </#macro>
 
 <@page_html/>
\ No newline at end of file