IMPALA-12977: add search and pagination to /hadoop-varz

Added search and pagination feature to /hadoop-varz

Change-Id: Ic8cac23b655fa58ce12d9857649705574614a5f0
Reviewed-on: http://gerrit.cloudera.org:8080/21329
Reviewed-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
Tested-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
(cherry picked from commit 7c98ebb7b1)

www/hadoop-varz.tmpl

@@ -18,17 +18,31 @@ under the License.
 -->
 {{> www/common-header.tmpl }}
 
-<table class='table table-hover table-bordered'>
-<tr>
-  <th>Config</th>
-  <th>Value</th>
-</tr>
-{{#configs}}
-<tr>
-  <td>{{key}}</td>
-  <td>{{value}}</td>
-</tr>
-{{/configs}}
+<table id="configs" class='table table-hover table-bordered'
+       style='table-layout:fixed; word-wrap: break-word'>
+  <thead>
+    <tr>
+      <th>Configuration</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#configs}}
+    <tr {{?value_changed}}class="active"{{/value_changed}}>
+      <td><samp>{{key}}</samp></td>
+      <td>{{value}}</td>
+    </tr>
+    {{/configs}}
+  </tbody>
 </table>
 
+<script>
+    $(document).ready(function() {
+        $('#configs').DataTable({
+            "aaSorting": [[ 0, "asc" ]],
+            "pageLength": 100
+        });
+    });
+</script>
+
 {{> www/common-footer.tmpl }}