Added header sorted, tweaked field chooser, started to add type icons

src/index.html

@@ -36,7 +36,7 @@
         config-object="opts"
         config-submit="saveOpts">
       </config>
-      <div class="application container-fluid" ng-view></div>
+      <div class="application" ng-view></div>
     </div>
     <div kbn-notifications list="notifList"></div>
   </body>

src/kibana/apps/discover/field_chooser.html

@@ -1,15 +1,8 @@
-<ul>
-  <li ng-repeat="field in fields">
-    <span ng-click="toggle(field.name)">
-      <i
-        class="fa"
-        ng-class="{
-          'fa-check-square': field.display,
-          'fa-square-o': !field.display
-        }">
-      </i>
-      {{field.name}}
-    </span>
+<ul class="nav nav-pills nav-stacked nav-condensed">
+  <li ng-repeat="field in fields track by $index" ng-class="{'active':field.display}">
+    <a ng-click="toggle(field.name)">
+      <i class="fa" ng-class="typeIcon(field.type)"></i> {{field.name}}
+    </a>
   </li>
+  <li><a ng-click="refresh()"><small>refresh field list</small></a></li>
 </ul>
-<small><a ng-click="refresh()">refresh field list</a></small>

src/kibana/apps/discover/field_chooser.js

@@ -10,7 +10,19 @@ define(function (require) {
         toggle: '=',
         refresh: '='
       },
-      template: html
+      template: html,
+      controller: function ($scope) {
+        $scope.typeIcon = function (fieldType) {
+          switch (fieldType)
+          {
+          case 'string':
+            return 'fa-sort-alpha-asc';
+          case 'number':
+            return 'fa-sort-numeric-asc';
+          default:
+          }
+        };
+      }
     };
   });
 });

src/kibana/apps/discover/index.html

@@ -5,13 +5,7 @@
       <input class="form-control" ng-model="index">
       <label class="control-label">Query</label>
       <input type="text" class="form-control" ng-model="query" placeholder="search">
-      <label class="control-label">Sort</label>
-      <select
-          class="form-control"
-          name="sort"
-          ng-model="sort"
-          ng-options="field.name for field in fields">
-          </select>
+
       <label class="control-label">Max Summary Length</label>
       <input type="number" name class="form-control" ng-model="opts.maxSummaryLength">
       <button type="submit" class="btn btn-default">
@@ -21,22 +15,22 @@
   </nav>
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-2">
-        <div class="panel panel-primary">
-          <div class="panel-heading">
-            <h2 class="panel-title">Fields</h3>
-          </div>
-          <div class="panel-body">
-            <disc-field-chooser
-              fields="fields"
-              toggle="toggleField"
-              refresh="refreshFieldList">
-              </disc-field-chooser>
-          </div>
-        </div>
+      <div class="col-md-2 discovery-field-container">
+        <disc-field-chooser
+          fields="fields"
+          toggle="toggleField"
+          refresh="refreshFieldList">
+        </disc-field-chooser>
       </div>
       <div class="col-md-10">
-        <kbn-table rows="rows" columns="columns" max-length="opts.maxSummaryLength"></kbn-table>
+        <kbn-table style="overflow-x:autp"
+          rows="rows"
+          columns="columns"
+          refresh="fetch"
+          max-length="opts.maxSummaryLength"
+          get-sort="getSort"
+          set-sort="setSort">
+        </kbn-table>
       </div>
     </div>
   </div>

src/kibana/apps/discover/index.js

@@ -4,6 +4,7 @@ define(function (require, module, exports) {
   require('directives/table');
   require('./field_chooser');
   require('services/saved_searches');
+  require('utils/mixins');
 
   var app = require('modules').get('app/discover');
 
@@ -59,6 +60,20 @@ define(function (require, module, exports) {
         $scope.rows = res.hits.hits;
       });
 
+    $scope.sort = ['_score', 'desc'];
+
+    $scope.getSort = function () {
+      return $scope.sort;
+    };
+
+    $scope.setSort = function (field, order) {
+      var sort = {};
+      sort[field] = order;
+      source.sort([sort]);
+      $scope.sort = [field, order];
+      $scope.fetch();
+    };
+
     $scope.fetch = function () {
       if (!$scope.fields) getFields();
       source
@@ -69,16 +84,10 @@ define(function (require, module, exports) {
           }
         });
 
-      if ($scope.sort) {
-        var sort = {};
-        sort[$scope.sort.name] = 'asc';
-        source.sort(sort);
-      }
-
       if ($scope.index !== source.get('index')) {
         // set the index on the data source
         source.index($scope.index);
-        // clear the columns and fields, then refetch when we so a search
+        // clear the columns and fields, then refetch when we do a search
         $scope.columns = $scope.fields = null;
       }
 
@@ -109,7 +118,7 @@ define(function (require, module, exports) {
           if (!fields) return;
 
           $scope.fields = [];
-          $scope.columns = [];
+          $scope.columns = $scope.columns || [];
 
           _(fields)
             .keys()
@@ -137,6 +146,12 @@ define(function (require, module, exports) {
       // toggle the display property
       field.display = !field.display;
 
+      if ($scope.columns.length === 1 && $scope.columns[0] === '_source') {
+        $scope.columns = [name];
+      } else {
+        $scope.columns = _.toggleInOut($scope.columns, name);
+      }
+
       refreshColumns();
     };
 
@@ -149,11 +164,15 @@ define(function (require, module, exports) {
     };
 
     function refreshColumns() {
-      // collect column names for displayed fields and sort
-      $scope.columns = _.transform($scope.fields, function (cols, field) {
-        if (field.display) cols.push(field.name);
-      }, []).sort();
+      // Get all displayed field names;
+      var fields = _.pluck(_.filter($scope.fields, function (field) {
+        return field.display;
+      }), 'name');
 
+      // Make sure there are no columns added that aren't in the displayed field list.
+      $scope.columns = _.intersection($scope.columns, fields);
+
+      // If no columns remain, use _source
       if (!$scope.columns.length) {
         $scope.columns.push('_source');
       }

src/kibana/apps/discover/styles/main.css

@@ -3,3 +3,7 @@ disc-field-chooser ul {
   padding: 0;
   list-style: none;
 }
+.discovery-field-container {
+  padding-top: 20px;
+  padding-left: 0 !important;
+}

src/kibana/apps/discover/styles/main.less

@@ -4,4 +4,9 @@ disc-field-chooser {
     padding: 0;
     list-style: none;
   }
+}
+
+.discovery-field-container {
+  padding-top: 20px;
+  padding-left: 0 !important;
 }

src/kibana/directives/table.js

@@ -9,6 +9,38 @@ define(function (require) {
 
   var module = require('modules').get('kibana/directives');
 
+  module.directive('kbnTableHeader', function () {
+    var headerHtml = require('text!partials/table_header.html');
+    return {
+      restrict: 'E',
+      scope: {
+        columns: '=',
+        getSort: '=',
+        setSort: '='
+      },
+      template: headerHtml,
+      controller: function ($scope) {
+
+        $scope.headerClass = function (column) {
+          //var sort = [0,0];
+          var sort = $scope.getSort();
+          if (column === sort[0]) {
+            return ['fa', sort[1] === 'asc' ? 'fa-chevron-up' : 'fa-chevron-down'];
+          } else {
+            return ['fa', ''];
+          }
+        };
+
+        $scope.set = function (column) {
+          var sort = $scope.getSort();
+          console.log('dir', sort);
+          $scope.setSort(column, sort[1] === 'asc' ? 'desc' : 'asc');
+        };
+
+      }
+    };
+  });
+
   /**
    * kbnTable directive
    *
@@ -36,6 +68,9 @@ define(function (require) {
       scope: {
         columns: '=',
         rows: '=',
+        refresh: '=',
+        getSort: '=',
+        setSort: '=',
         maxLength: '=?'
       },
       link: function ($scope, element, attrs) {

src/kibana/partials/table.html

@@ -1,7 +1,2 @@
-<table class="table">
-  <thead>
-    <th ng-repeat="name in columns">{{name}}</th>
-  </thead>
-  <tbody></tbody>
-</table>
+<kbn-table-header columns="columns" get-sort="getSort" set-sort="setSort"></kbn-table-header>
 <kbn-infinite-scroll more="addRows"></kbn-infinite-scroll>

src/kibana/partials/table_header.html

@@ -0,0 +1,6 @@
+<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>

src/kibana/styles/main.css

@@ -7065,3 +7065,11 @@ disc-field-chooser ul {
   padding: 0;
   list-style: none;
 }
+.discovery-field-container {
+  padding-top: 20px;
+  padding-left: 0 !important;
+}
+.nav-condensed > li > a {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}

src/kibana/styles/main.less

@@ -72,3 +72,10 @@ notifications {
 @import "./_table.less";
 @import "./_notify.less";
 @import "../apps/discover/styles/main.less";
+
+//== Nav tweaks
+//
+.nav-condensed > li > a {
+   padding-top: 2px;
+   padding-bottom: 2px;
+}

src/kibana/utils/mixins.js

@@ -11,6 +11,26 @@ define(function (require) {
           indexed[key] = obj;
         }
       }, {});
+    },
+    move: function (array, fromIndex, toIndex) {
+      array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
+      return array;
+    },
+    remove: function (array, index) {
+      array.splice(index, 1);
+      return array;
+    },
+    // If variable is value, then return alt. If variable is anything else, return value;
+    toggle: function (variable, value, alt) {
+      return variable === value ? alt : value;
+    },
+    toggleInOut: function (array, value) {
+      if (_.contains(array, value)) {
+        array = _.without(array, value);
+      } else {
+        array.push(value);
+      }
+      return array;
     }
   });