Tweaked sorting, added moment-timezone and simple date picker

bower.json

@@ -37,7 +37,8 @@
     "require-css": "~0.1.2",
     "angular-bootstrap": "~0.10.0",
     "stacktrace.js": "https://github.com/stacktracejs/stacktrace.js.git#~0.6.0",
-    "jsonpath": "*"
+    "jsonpath": "*",
+    "moment-timezone": "~0.0.3"
   },
   "devDependencies": {}
 }

src/kibana/apps/discover/index.html

@@ -2,6 +2,7 @@
   <nav class="navbar navbar-default navbar-static-top subnav">
     <ul class="nav navbar-nav navbar-right">
       <li><a class="navbar-link" ng-click="toggleConfig()"><i class="fa fa-gear"></i></a></li>
+      <li><a class="navbar-link" ng-click="toggleTimepicker()"><i class="fa fa-clock-o"></i></a></li>
     </ul>
     <form class="navbar-form" ng-submit="fetch()">
       <div class="form-group" style="display:inline;">
@@ -24,7 +25,7 @@
       </div>
       <div class="col-md-10">
         <discover-timechart></discover-timechart>
-        <kbn-table style="overflow-x:auto"
+        <kbn-table style="overflow-x:auto" class="table table-condensed"
           rows="rows"
           columns="columns"
           refresh="fetch"

src/kibana/apps/discover/index.js

@@ -1,7 +1,10 @@
 define(function (require, module, exports) {
   var _ = require('lodash');
+  var moment = require('moment');
 
   require('directives/table');
+  require('directives/timepicker');
+
   require('./field_chooser');
   require('services/saved_searches');
   require('utils/mixins');
@@ -34,9 +37,15 @@ define(function (require, module, exports) {
       maxSummaryLength: 100,
       // Index to match
       index: '_all',
-      timefield: '@timestamp'
+      timefield: '@timestamp',
+      time: {
+        from: moment(),
+        to: moment()
+      }
     };
 
+    $scope.time =
+
     // stores the complete list of fields
     $scope.fields = null;
 
@@ -103,6 +112,10 @@ define(function (require, module, exports) {
       */
     };
 
+    $scope.toggleTimepicker = function () {
+      setConfigTemplate('<kbn-timepicker from="opts.time.from" to="opts.time.to"></kbn-timepicker>');
+    };
+
 
     $scope.fetch = function () {
       if (!$scope.fields) getFields();

src/kibana/directives/table.js

@@ -13,7 +13,7 @@ define(function (require) {
   module.directive('kbnTableHeader', function () {
     var headerHtml = require('text!partials/table_header.html');
     return {
-      restrict: 'E',
+      restrict: 'A',
       scope: {
         columns: '=',
         getSort: '=',
@@ -26,13 +26,13 @@ define(function (require) {
           //var sort = [0,0];
           var sort = $scope.getSort();
           if (column === sort[0]) {
-            return ['fa', sort[1] === 'asc' ? 'fa-chevron-up' : 'fa-chevron-down'];
+            return ['fa', sort[1] === 'asc' ? 'fa-sort-up' : 'fa-sort-down'];
           } else {
-            return ['fa', ''];
+            return ['fa', 'fa-sort'];
           }
         };
 
-        $scope.set = function (column) {
+        $scope.sort = function (column) {
           var sort = $scope.getSort();
           console.log('dir', sort);
           $scope.setSort(column, sort[1] === 'asc' ? 'desc' : 'asc');
@@ -244,7 +244,7 @@ define(function (require) {
           // table that will hold details about the row
           var table = document.createElement('table');
           containerTd.appendChild(table);
-          table.className = 'table';
+          table.className = 'table table-condensed';
 
           // body of the table
           var tbody = document.createElement('tbody');

src/kibana/directives/timepicker.js

@@ -0,0 +1,16 @@
+define(function (require) {
+  var html = require('text!partials/timepicker.html');
+  var module = require('modules').get('kibana/directives');
+
+  module.directive('kbnTimepicker', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        from: '=',
+        to: '='
+      },
+      template: html
+    };
+  });
+
+});

src/kibana/partials/table.html

@@ -1,2 +1,5 @@
-<kbn-table-header columns="columns" get-sort="getSort" set-sort="setSort"></kbn-table-header>
+<table class="table">
+  <thead kbn-table-header columns="columns" get-sort="getSort" set-sort="setSort"></thead>
+  <tbody></tbody>
+</table>
 <kbn-infinite-scroll more="addRows"></kbn-infinite-scroll>

src/kibana/partials/table_header.html

@@ -1,6 +1 @@
-<table class="table">
-  <thead>
-    <th ng-repeat="name in columns" ng-click="set(name)">{{name}} <i ng-class="headerClass(name)"></i></th>
-  </thead>
-  <tbody></tbody>
-</table>
+<th ng-repeat="name in columns">{{name}} <i ng-click="sort(name)" ng-class="headerClass(name)"></i></th>

src/kibana/partials/timepicker.html

@@ -0,0 +1,30 @@
+<div class="kbn-timepicker container-fluid">
+
+  <style>
+    .kbn-timepicker [kbn-time-input] {
+      text-align: center;
+    }
+  </style>
+
+  <div class="row">
+    <form name="input">
+
+      <div class="timepicker-from col-xs-6 col-md-3">
+        <center>
+          <div ng-model="from">
+            <datepicker max="to" show-weeks="false"></datepicker>
+          </div>
+          <br>
+        </center>
+      </div>
+
+      <div class="timepicker-from col-xs-6 col-md-3">
+        <center>
+          <div ng-model="to">
+            <datepicker min="from" show-weeks="false"></datepicker>
+          </div>
+        </center>
+      </div>
+
+    </form>
+</div>

src/kibana/styles/main.css

@@ -7067,3 +7067,51 @@ disc-field-chooser ul {
   padding-top: 2px;
   padding-bottom: 2px;
 }
+.kbn-timepicker .btn-default {
+  background: transparent;
+  border: 0px;
+  box-shadow: none;
+  text-shadow: none;
+}
+.kbn-timepicker .btn-info {
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+  text-shadow: none;
+}
+.kbn-timepicker .btn-info:hover,
+.kbn-timepicker .btn-info:focus,
+.kbn-timepicker .btn-info:active,
+.kbn-timepicker .btn-info.active,
+.open .dropdown-toggle.kbn-timepicker .btn-info {
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
+}
+.kbn-timepicker .btn-info:active,
+.kbn-timepicker .btn-info.active,
+.open .dropdown-toggle.kbn-timepicker .btn-info {
+  background-image: none;
+}
+.kbn-timepicker .btn-info.disabled,
+.kbn-timepicker .btn-info[disabled],
+fieldset[disabled] .kbn-timepicker .btn-info,
+.kbn-timepicker .btn-info.disabled:hover,
+.kbn-timepicker .btn-info[disabled]:hover,
+fieldset[disabled] .kbn-timepicker .btn-info:hover,
+.kbn-timepicker .btn-info.disabled:focus,
+.kbn-timepicker .btn-info[disabled]:focus,
+fieldset[disabled] .kbn-timepicker .btn-info:focus,
+.kbn-timepicker .btn-info.disabled:active,
+.kbn-timepicker .btn-info[disabled]:active,
+fieldset[disabled] .kbn-timepicker .btn-info:active,
+.kbn-timepicker .btn-info.disabled.active,
+.kbn-timepicker .btn-info[disabled].active,
+fieldset[disabled] .kbn-timepicker .btn-info.active {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.kbn-timepicker .btn-info .badge {
+  color: #5bc0de;
+  background-color: #ffffff;
+}

src/kibana/styles/main.less

@@ -79,3 +79,16 @@ notifications {
    padding-top: 2px;
    padding-bottom: 2px;
 }
+
+// Date/time picker
+.kbn-timepicker .btn-default {
+  background: transparent;
+  border: 0px;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.kbn-timepicker .btn-info {
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+  text-shadow: none;
+}