[www] support column sorting on /tables page

Sort the columns of "Table Name", "Create Time", "Last Alter Time".

Change-Id: Ibacccd7a98c8bb65cc6736dc7aed285fd8a96ef6
Reviewed-on: http://gerrit.cloudera.org:8080/14187
Tested-by: Kudu Jenkins
Reviewed-by: Alexey Serbin <[email protected]>
Reviewed-by: Adar Dembo <[email protected]>

www/kudu.js

@@ -66,3 +66,83 @@ function bytesSorter(left, right) {
   }
   return 0;
 }
+
+// Converts numeric strings to numbers and then compares them.
+function compareNumericStrings(left, right) {
+  left_num = parseInt(left, 10);
+  right_num = parseInt(right, 10);
+  if (left_num < right_num) {
+    return -1;
+  }
+  if (left_num > right_num) {
+    return 1;
+  }
+  return 0;
+}
+
+// A comparison function for human-readable time strings.
+//
+// The human-readable time format should look like this:
+//   "2019-09-06 19:56:46 CST"
+//
+// Note: the time zones will be ignored since the masters
+// should not be deployed across time zones. In addition,
+// we compare the time strings unit by unit since it's
+// really hard to convert them to timestamps.
+function timesSorter(left, right) {
+  // "2019-09-06 19:56:46".
+  var expect_min_length = 19;
+  if (left.length < expect_min_length && right.length < expect_min_length) {
+    return 0;
+  }
+  if (left.length < expect_min_length) {
+    return -1;
+  }
+  if (right.length < expect_min_length) {
+    return 1;
+  }
+
+  // Year.
+  var ret = compareNumericStrings(left.substr(0, 4), right.substr(0, 4));
+  if (ret != 0) {
+    return ret;
+  }
+  // Month.
+  ret = compareNumericStrings(left.substr(5, 2), right.substr(5, 2));
+  if (ret != 0) {
+    return ret;
+  }
+  // Day.
+  ret = compareNumericStrings(left.substr(8, 2), right.substr(8, 2));
+  if (ret != 0) {
+    return ret;
+  }
+  // Hour.
+  ret = compareNumericStrings(left.substr(11, 2), right.substr(11, 2));
+  if (ret != 0) {
+    return ret;
+  }
+  // Minute.
+  ret = compareNumericStrings(left.substr(14, 2), right.substr(14, 2));
+  if (ret != 0) {
+    return ret;
+  }
+  // Second.
+  ret = compareNumericStrings(left.substr(17, 2), right.substr(17, 2));
+  if (ret != 0) {
+    return ret;
+  }
+
+  return 0;
+}
+
+// A comparison function for strings.
+function stringsSorter(left, right) {
+  if (left < right) {
+    return -1;
+  }
+  if (left > right) {
+    return 1;
+  }
+  return 0;
+}

www/tables.mustache

@@ -28,19 +28,19 @@ under the License.
 {{/leader_redirect}}
 {{^error}}
 There are {{num_tables}} tables.
-<table class="table table-striped">
+<table data-toggle="table" class="table table-striped">
   <thead><tr>
-    <th>Table Name</th>
+    <th data-sorter="stringsSorter" data-sortable="true">Table Name</th>
     <th>Table Id</th>
     <th>State</th>
     <th>State Message</th>
-    <th>Create Time</th>
-    <th>Last Alter Time</th>
+    <th data-sorter="timesSorter" data-sortable="true">Create Time</th>
+    <th data-sorter="timesSorter" data-sortable="true">Last Alter Time</th>
   </tr></thead>
   <tbody>
    {{#tables}}
     <tr>
-      <th>{{name}}</th>
+      <td>{{name}}</td>
       <td><a href="/table?id={{id}}">{{id}}</a></td>
       <td>{{state}}</td>
       <td>{{message}}</td>