Tweaked layout, moved configs off into config drop down

src/kibana/apps/discover/field_chooser.js

@@ -1,6 +1,6 @@
 define(function (require) {
   var app = require('modules').get('app/discover');
-  var html = require('text!./field_chooser.html');
+  var html = require('text!./partials/field_chooser.html');
 
   app.directive('discFieldChooser', function () {
     return {
@@ -13,9 +13,10 @@ define(function (require) {
       template: html,
       controller: function ($scope) {
         $scope.typeIcon = function (fieldType) {
-          console.log(fieldType);
           switch (fieldType)
           {
+          case 'source':
+            return 'fa-file-text-o';
           case 'string':
             return 'fa-sort-alpha-asc';
           case 'number':

src/kibana/apps/discover/index.html

@@ -1,18 +1,18 @@
 <div ng-controller="discover">
   <nav class="navbar navbar-default navbar-static-top subnav">
-    <form class="navbar-form navbar-left form-inline" role="search" ng-submit="fetch()">
-      <label class="control-label">Index</label>
-      <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">Max Summary Length</label>
-      <input type="number" name class="form-control" ng-model="opts.maxSummaryLength">
-      <button type="submit" class="btn btn-default">
-        <i class="fa fa-search"></i>
-      </button>
+    <ul class="nav navbar-nav navbar-right">
+      <li><a class="navbar-link" ng-click="toggleConfig()"><i class="fa fa-gear"></i></a></li>
+    </ul>
+    <form class="navbar-form" ng-submit="fetch()">
+      <div class="form-group" style="display:inline;">
+        <div class="input-group">
+          <span class="input-group-addon"><span class="fa fa-search"></span></span>
+          <input placeholder="Search..." type="text" class="form-control" ng-model="query">
+        </div>
+      </div>
     </form>
   </nav>
+  <config config-template="configTemplate" config-object="opts" config-close="configClose" config-submit="fetch"></config>
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-2 discovery-field-container">
@@ -23,7 +23,8 @@
         </disc-field-chooser>
       </div>
       <div class="col-md-10">
-        <kbn-table style="overflow-x:autp"
+        <discover-timechart></discover-timechart>
+        <kbn-table style="overflow-x:auto"
           rows="rows"
           columns="columns"
           refresh="fetch"

src/kibana/apps/discover/index.js

@@ -6,6 +6,8 @@ define(function (require, module, exports) {
   require('services/saved_searches');
   require('utils/mixins');
 
+  require('./timechart');
+
   var app = require('modules').get('app/discover');
 
   var intervals = [
@@ -29,7 +31,10 @@ define(function (require, module, exports) {
       // number of records to fetch, then paginate through
       sampleSize: 500,
       // max length for summaries in the table
-      maxSummaryLength: 100
+      maxSummaryLength: 100,
+      // Index to match
+      index: '_all',
+      timefield: '@timestamp'
     };
 
     // stores the complete list of fields
@@ -45,8 +50,8 @@ define(function (require, module, exports) {
     // the index to use when they don't specify one
     config.$watch('discover.defaultIndex', function (val) {
       if (!val) return config.set('discover.defaultIndex', '_all');
-      if (!$scope.index) {
-        $scope.index = val;
+      if (!$scope.opts.index) {
+        $scope.opts.index = val;
         $scope.fetch();
       }
     });
@@ -60,6 +65,11 @@ define(function (require, module, exports) {
         $scope.rows = res.hits.hits;
       });
 
+
+    var init = function () {
+      $scope.fetch();
+    };
+
     $scope.sort = ['_score', 'desc'];
 
     $scope.getSort = function () {
@@ -74,6 +84,26 @@ define(function (require, module, exports) {
       $scope.fetch();
     };
 
+    var setConfigTemplate = function (template) {
+      // Close if already open
+      if ($scope.configTemplate === template) {
+        delete $scope.configTemplate;
+        return;
+      } else {
+        $scope.configTemplate = template;
+      }
+    };
+
+    $scope.toggleConfig = function () {
+      setConfigTemplate(require('text!./partials/settings.html'));
+      /*
+      $scope.configSubmit = function () {
+        $scope.save($scope.dashboard.title);
+      };
+      */
+    };
+
+
     $scope.fetch = function () {
       if (!$scope.fields) getFields();
       source
@@ -84,9 +114,9 @@ define(function (require, module, exports) {
           }
         });
 
-      if ($scope.index !== source.get('index')) {
+      if ($scope.opts.index !== source.get('index')) {
         // set the index on the data source
-        source.index($scope.index);
+        source.index($scope.opts.index);
         // clear the columns and fields, then refetch when we do a search
         $scope.columns = $scope.fields = null;
       }
@@ -120,6 +150,9 @@ define(function (require, module, exports) {
           $scope.fields = [];
           $scope.columns = $scope.columns || [];
 
+          // Inject source into list;
+          $scope.fields.push({name: '_source', type: 'source', display: false});
+
           _(fields)
             .keys()
             .sort()
@@ -131,6 +164,7 @@ define(function (require, module, exports) {
               $scope.fields.push(field);
             });
 
+
           refreshColumns();
           defer.resolve();
         }, defer.reject);
@@ -147,7 +181,10 @@ define(function (require, module, exports) {
       field.display = !field.display;
 
       if ($scope.columns.length === 1 && $scope.columns[0] === '_source') {
-        $scope.columns = [name];
+        $scope.columns = _.toggleInOut($scope.columns, name);
+        $scope.columns = _.toggleInOut($scope.columns, '_source');
+        _.find($scope.fields, {name: '_source'}).display = false;
+
       } else {
         $scope.columns = _.toggleInOut($scope.columns, name);
       }
@@ -174,10 +211,12 @@ define(function (require, module, exports) {
 
       // If no columns remain, use _source
       if (!$scope.columns.length) {
-        $scope.columns.push('_source');
+        $scope.toggleField('_source');
       }
     }
 
+    init();
+
     $scope.$emit('application.load');
   });
 });

src/kibana/apps/discover/partials/settings.html

@@ -0,0 +1,7 @@
+<label class="control-label">Index</label>
+<input class="form-control" ng-model="opts.index">
+
+<!--
+<label class="control-label">Max Summary Length</label>
+<input type="number" name class="form-control" ng-model="opts.maxSummaryLength">
+-->

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

@@ -7,3 +7,10 @@ disc-field-chooser ul {
   padding-top: 20px;
   padding-left: 0 !important;
 }
+.discovery-field-container li {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+.discovery-field-container li a {
+  border-radius: 0 !important;
+}

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

@@ -9,4 +9,13 @@ disc-field-chooser {
 .discovery-field-container {
   padding-top: 20px;
   padding-left: 0 !important;
-}
+}
+
+.discovery-field-container li {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+.discovery-field-container li a {
+  border-radius: 0 !important;
+}

src/kibana/apps/discover/timechart.js

@@ -0,0 +1,35 @@
+define(function (require) {
+  var _ = require('lodash');
+  var $ = require('jquery');
+  var k4 = require('K4D3');
+
+  var app = require('modules').get('app/discover');
+
+  app.directive('discoverTimechart', function ($compile) {
+    return {
+      restrict: 'E',
+      scope : {
+        data: '='
+      },
+      link: function ($scope, elem) {
+
+        var init = function () {
+          /*
+          // This elem should already have a height/width
+          var myChart = new k4.Chart(elem, {type: 'timechart', doSomething: true, draggable: false});
+
+          myChart.on('hover', function (elem, event) {
+          })
+          */
+
+
+          //myChart.render($scope.data);
+        };
+
+        // Start the directive
+        init();
+      }
+    };
+  });
+
+});