kibana-sinatra 0.0.6 → 0.0.7

data/lib/kibana/assets/app/panels/table/module.html

@@ -10,15 +10,21 @@
   <div class="row-fluid">
     <div bindonce ng-class="{'span3':panel.field_list}" ng-if="panel.field_list">
       <div class="sidebar-nav">
-        <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'" ng-show="panel.field_list"></i></strong><p>
+        <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'"></i></strong><p>
         <div class="small">
-          <span class="link" ng-click="panel.all_fields = true;" ng-class="{strong:panel.all_fields}">
-            All ({{fields.list.length}})</span><br>
-          <span class="link" ng-click="panel.all_fields = false;" ng-class="{strong:!panel.all_fields}">
+          <span class="link small" ng-click="panel.all_fields = true;" ng-if="fields.list.length" ng-class="{strong:panel.all_fields}">
+            All ({{fields.list.length}})</span> /
+          <span class="link small" ng-click="panel.all_fields = false;" ng-class="{strong:!panel.all_fields}">
             Current ({{current_fields.length || 0}})</span>
 
         </div>
         <div><input type="text" class="input-medium" placeholder="Type to filter..." ng-model="fieldFilter"></div>
+        <div ng-show="panel.all_fields" class="small muted" style="margin-bottom:10px">
+          <strong>Note</strong> These fields have been<br>
+          extracted from your mapping.<br>
+          Not all fields may be available<br>
+          in your source document.
+        </div>
 
         <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="panel.all_fields">
           <li ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
@@ -69,7 +75,10 @@
         <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
           <tr ng-click="toggle_details(event)" class="pointer">
             <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
-            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
+            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
+              <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></span>
+              <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event"></span>
+            </td>
           </tr>
           <tr ng-if="event.kibana.details">
             <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">

data/lib/kibana/assets/app/panels/table/module.js

@@ -109,6 +109,14 @@ function (angular, app, _, kbn, moment) {
        * still available in the expanded view of the event.
        */
       trimFactor: 300,
+      /** @scratch /panels/table/5
+       * localTime:: Set to true to adjust the timeField to the browser's local time
+       */
+      localTime: false,
+      /** @scratch /panels/table/5
+       * timeField:: If localTime is set to true, this field will be adjusted to the browsers local time
+       */
+      timeField: '@timestamp',
       /** @scratch /panels/table/5
        * spyable:: Set to false to disable the inspect icon
        */
@@ -258,7 +266,8 @@ function (angular, app, _, kbn, moment) {
         _segment,
         request,
         boolQuery,
-        results;
+        queries,
+        sort;
 
       $scope.panel.error =  false;
 
@@ -267,6 +276,12 @@ function (angular, app, _, kbn, moment) {
         return;
       }
 
+      sort = [$scope.ejs.Sort($scope.panel.sort[0]).order($scope.panel.sort[1])];
+      if($scope.panel.localTime) {
+        sort.push($scope.ejs.Sort($scope.panel.timeField).order($scope.panel.sort[1]));
+      }
+
+
       $scope.panelMeta.loading = true;
 
       _segment = _.isUndefined(segment) ? 0 : segment;
@@ -275,7 +290,8 @@ function (angular, app, _, kbn, moment) {
       request = $scope.ejs.Request().indices(dashboard.indices[_segment]);
 
       $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
-      var queries = querySrv.getQueryObjs($scope.panel.queries.ids);
+
+      queries = querySrv.getQueryObjs($scope.panel.queries.ids);
 
       boolQuery = $scope.ejs.BoolQuery();
       _.each(queries,function(q) {
@@ -294,14 +310,12 @@ function (angular, app, _, kbn, moment) {
           .postTags('@end-highlight@')
         )
         .size($scope.panel.size*$scope.panel.pages)
-        .sort($scope.panel.sort[0],$scope.panel.sort[1]);
+        .sort(sort);
 
       $scope.populate_modal(request);
 
-      results = request.doSearch();
-
       // Populate scope when we have results
-      results.then(function(results) {
+      request.doSearch().then(function(results) {
         $scope.panelMeta.loading = false;
 
         if(_segment === 0) {
@@ -470,19 +484,9 @@ function (angular, app, _, kbn, moment) {
   });
 
   // WIP
-  module.filter('tableFieldFormat', function(fields){
-    return function(text,field,event,scope) {
-      var type;
-      if(
-        !_.isUndefined(fields.mapping[event._index]) &&
-        !_.isUndefined(fields.mapping[event._index][event._type])
-      ) {
-        type = fields.mapping[event._index][event._type][field]['type'];
-        if(type === 'date' && scope.panel.normTimes) {
-          return moment(text).format('YYYY-MM-DD HH:mm:ss');
-        }
-      }
-      return text;
+  module.filter('tableLocalTime', function(){
+    return function(text,event) {
+      return moment(event.sort[1]).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
     };
   });
 

data/lib/kibana/assets/app/panels/table/pagination.html

@@ -1,27 +1,32 @@
-  <div class="row-fluid">
-    <div class="span3"> 
-      <h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
+  <div class="editor-row">
+    <div class="section">
+      <div class="editor-option">
+        <h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
+      </div>
+      <div class="editor-option">
+        <h6>Overflow</h6>
+        <select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
+      </div>
     </div>
-    <div class="span2">
-      <h6>Overflow</h6>
-      <select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
-    </div>
-  </div>
-  <div class="row-fluid">
-    <div class="span2">
-      <h6>Per Page</h6>
-      <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
-    </div>
-    <div class="span1">
-      <h6>&nbsp;</h6>
-      <center><i class='icon-remove'></i><center>
-    </div>
-    <div class="span2">
-      <h6>Page limit</h6>
-      <input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
-    </div>
-    <div class="span2 large">
-      <h6>Pageable</h6>
-      <strong class="large">= {{panel.size * panel.pages}}</strong>
+
+    <div class="section">
+      <div class="editor-option">
+        <h6>Per Page</h6>
+        <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
+      </div>
+      <div class="editor-option">
+        <h6>&nbsp;</h6>
+        <center><i class='icon-remove'></i><center>
+      </div>
+      <div class="editor-option">
+        <h6>Page limit</h6>
+        <input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
+      </div>
+      <div class="editor-option large">
+        <h6>Pageable</h6>
+        <strong class="large">= {{panel.size * panel.pages}}</strong>
+      </div>
     </div>
+
   </div>
+

data/lib/kibana/assets/app/panels/terms/editor.html

@@ -1,51 +1,57 @@
-  <div class="row-fluid">
-    <div class="span2">
-      <label class="small">Field</label>
-      <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
-    </div>
-    <div class="span2">
-      <label class="small">Length</label>
-      <input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
-    </div>
-    <div class="span3">
-      <label class="small">Order</label>
-      <select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span>
-    </div>
-    <div class="span4">
-      <label class="small">Exclude Terms(s) (comma seperated)</label>
-      <input array-join type="text" ng-model='panel.exclude'></input>
+  <div class="editor-row">
+    <div class="section">
+      <h5>Parameters</h5>
+      <div class="editor-option">
+        <label class="small">Field</label>
+        <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
+      </div>
+      <div class="editor-option">
+        <label class="small">Length</label>
+        <input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
+      </div>
+      <div class="editor-option">
+        <label class="small">Order</label>
+        <select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span>
+      </div>
+      <div class="editor-option">
+        <label class="small">Exclude Terms(s) (comma seperated)</label>
+        <input array-join type="text" ng-model='panel.exclude'></input>
+      </div>
     </div>
   </div>
-  <div class="row-fluid">
-    <div class="span2">
-      <label class="small">Style</label>
-      <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
-    </div>
-    <div class="span2" ng-show="panel.chart == 'table'">
-      <label class="small">Font Size</label>
-      <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
-    </div>
-    <div class="span2" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
-      <label class="small">Legend</label>
-      <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
-    </div>
-    <div class="span3" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
-      <label class="small" >Legend Format</label>
-      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
-    </div>
-    <div class="span1">
-      <label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
-    </div>
-    <div class="span1">
-      <label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
-    </div>
-    <div class="span1" ng-show="panel.chart == 'pie'">
-      <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
-    </div>
-    <div class="span1" ng-show="panel.chart == 'pie'">
-      <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
-    </div>
-    <div class="span1" ng-show="panel.chart == 'pie'">
-      <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
+  <div class="editor-row">
+    <div class="section">
+      <h5>View Options</h5>
+      <div class="editor-option">
+        <label class="small">Style</label>
+        <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
+      </div>
+      <div class="editor-option" ng-show="panel.chart == 'table'">
+        <label class="small">Font Size</label>
+        <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
+      </div>
+      <div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
+        <label class="small">Legend</label>
+        <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
+      </div>
+      <div class="editor-option" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
+        <label class="small" >Legend Format</label>
+        <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
+      </div>
+      <div class="editor-option">
+        <label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
+      </div>
+      <div class="editor-option">
+        <label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
+      </div>
+      <div class="editor-option" ng-show="panel.chart == 'pie'">
+        <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
+      </div>
+      <div class="editor-option" ng-show="panel.chart == 'pie'">
+        <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
+      </div>
+      <div class="editor-option" ng-show="panel.chart == 'pie'">
+        <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
+      </div>
     </div>
   </div>

data/lib/kibana/assets/app/panels/terms/module.js

@@ -22,7 +22,7 @@ function (angular, app, _, $, kbn) {
   var module = angular.module('kibana.panels.terms', []);
   app.useModule(module);
 
-  module.controller('terms', function($scope, querySrv, dashboard, filterSrv) {
+  module.controller('terms', function($scope, querySrv, dashboard, filterSrv, fields) {
     $scope.panelMeta = {
       modals : [
         {
@@ -134,6 +134,9 @@ function (angular, app, _, $, kbn) {
         boolQuery,
         queries;
 
+      $scope.field = _.contains(fields.list,$scope.panel.field+'.raw') ?
+        $scope.panel.field+'.raw' : $scope.panel.field;
+
       request = $scope.ejs.Request().indices(dashboard.indices);
 
       $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
@@ -145,11 +148,10 @@ function (angular, app, _, $, kbn) {
         boolQuery = boolQuery.should(querySrv.toEjsObj(q));
       });
 
-
       // Terms mode
       request = request
         .facet($scope.ejs.TermsFacet('terms')
-          .field($scope.panel.field)
+          .field($scope.field)
           .size($scope.panel.size)
           .order($scope.panel.order)
           .exclude($scope.panel.exclude)
@@ -187,10 +189,10 @@ function (angular, app, _, $, kbn) {
 
     $scope.build_search = function(term,negate) {
       if(_.isUndefined(term.meta)) {
-        filterSrv.set({type:'terms',field:$scope.panel.field,value:term.label,
+        filterSrv.set({type:'terms',field:$scope.field,value:term.label,
           mandate:(negate ? 'mustNot':'must')});
       } else if(term.meta === 'missing') {
-        filterSrv.set({type:'exists',field:$scope.panel.field,
+        filterSrv.set({type:'exists',field:$scope.field,
           mandate:(negate ? 'must':'mustNot')});
       } else {
         return;

data/lib/kibana/assets/app/panels/timepicker/module.html

@@ -15,7 +15,7 @@
     <ul class="nav nav-pills timepicker-dropdown">
       <li class="dropdown">
 
-        <a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="(time.from.date | date:'yyyy-MM-dd HH:mm:ss.sss') + ' <br>to<br>' +(time.to.date | date:'yyyy-MM-dd HH:mm:ss.sss')" data-placement="bottom" ng-click="dismiss();">
+        <a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="time.from.date ? (time.from.date | date:'yyyy-MM-dd HH:mm:ss.sss') + ' <br>to<br>' +(time.to.date | date:'yyyy-MM-dd HH:mm:ss.sss') : 'Click to set a time filter'" data-placement="bottom" ng-click="dismiss();">
 
           <span ng-show="filterSrv.idsByType('time').length">
             <span class="pointer" ng-hide="panel.now">{{time.from.date | date:'MMM d, y HH:mm:ss'}}</span>
@@ -24,7 +24,7 @@
             <span class="pointer" ng-hide="panel.now" >{{time.to.date | date:'MMM d, y HH:mm:ss'}}</span>
             <span class="pointer" ng-show="panel.now">{{time.to.date | moment:'ago'}}</span>
           </span>
-          <span ng-hide="filterSrv.idsByType('time').length">Set a time filter</span>
+          <span ng-hide="filterSrv.idsByType('time').length">Time filter</span>
           <span ng-show="dashboard.current.refresh" class="text-warning">refreshed every {{dashboard.current.refresh}} </span>
           <i class="icon-caret-down"></i>
         </a>

data/lib/kibana/assets/app/partials/dashLoader.html

@@ -14,15 +14,15 @@
 
 
   <ul class="dropdown-menu" style="padding:10px">
-    <li ng-show='dashboard.current.loader.load_elasticsearch'>
+    <li ng-if='dashboard.current.loader.load_elasticsearch'>
       <form class="nomargin">
         <input type="text" ng-model="elasticsearch.query" ng-change="elasticsearch_dblist('title:'+elasticsearch.query+'*')" placeholder="Type to filter"/>
       </form>
       <h6 ng-hide="elasticsearch.dashboards.length">No dashboards matching your query found</h6>
       <table class="table table-condensed table-striped">
-        <tr ng-repeat="row in elasticsearch.dashboards | orderBy:['_id']">
+        <tr bindonce ng-repeat="row in elasticsearch.dashboards | orderBy:['_id']">
           <td><a ng-click="elasticsearch_delete(row._id)"><i class="icon-remove"></i></a></td>
-          <td><a href="#/dashboard/elasticsearch/{{row._id}}">{{row._id}}</a></td>
+          <td><a href="#/dashboard/elasticsearch/{{row._id}}" bo-text="row._id"></a></td>
           <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/panels/dashcontrol/share.html'"></i></a></td>
         </tr>
       </table>
@@ -40,7 +40,7 @@
         <li ng-show='dashboard.current.loader.load_gist'>
           <h5>Gist <tip>Enter a gist number or url</tip></h5>
           <form>
-            <input type="text" ng-model="gist.url"/ placeholder="Gist number or URL"><br>
+            <input type="text" ng-model="gist.url" placeholder="Gist number or URL"><br>
             <button class="btn" ng-click="gist_dblist(dashboard.gist_id(gist.url))" ng-show="dashboard.is_gist(gist.url)"><i class="icon-github-alt"></i> Get gist:{{gist.url | gistid}}</button>
             <h6 ng-show="gist.files.length">Dashboards in gist:{{gist.url | gistid}} <small>click to load</small></h6>
             <h6 ng-hide="gist.files.length || !gist.url.length">No gist dashboards found</h6>
@@ -78,10 +78,10 @@
       <ul class="dropdown-menu">
 
         <li ng-show="dashboard.current.loader.save_default">
-          <a class="link" ng-click="set_default()">Set as my home</a>
+          <a class="link" ng-click="set_default()">Save as Home</a>
         </li>
         <li ng-show="dashboard.current.loader.save_default">
-          <a class="link" ng-click="purge_default()">Clear my home</a>
+          <a class="link" ng-click="purge_default()">Reset Home</a>
         </li>
         <li ng-show="dashboard.current.loader.save_local">
           <a class="link" ng-click="dashboard.to_file()">Export schema</a>

data/lib/kibana/assets/app/partials/dasheditor.html

@@ -8,152 +8,162 @@
     </div>
   </div>
 
-  <div ng-show="editor.index == 0">
-    <div class="row-fluid">
-      <div class="span4">
-        <label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.current.title'></input>
-      </div>
-      <div class="span1">
-        <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
-      </div>
-      <div class="span1">
-        <label class="small"> Hints <tip>Show 'Add panel' hints in empty spaces</tip></label><input type="checkbox" ng-model="dashboard.current.panel_hints" ng-checked="dashboard.current.panel_hints" />
-      </div>
-      <div class="span3">
-        <label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select>
+  <div ng-if="editor.index == 0">
+    <div class="editor-row">
+      <div class="section">
+        <div class="editor-option">
+          <label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.current.title'></input>
+        </div>
+        <div class="editor-option">
+          <label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select>
+        </div>
+        <div class="editor-option">
+          <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
+        </div>
+        <div class="editor-option">
+          <label class="small"> Hints <tip>Show 'Add panel' hints in empty spaces</tip></label><input type="checkbox" ng-model="dashboard.current.panel_hints" ng-checked="dashboard.current.panel_hints" />
+        </div>
       </div>
     </div>
   </div>
-  <div ng-show="editor.index == 1">
-    <div class="row-fluid">
-      <h4>Index Settings</h4>
-      <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
-         <div class="span12">
-          <p class="small">
-            Time stamped indices use your selected time range to create a list of
-            indices that match a specified timestamp pattern. This can be very
-            efficient for some data sets (eg, logs) For example, to match the
-            default logstash index pattern you might use
-            <code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
-            important as they instruct Kibana not to treat those letters as a
-            pattern.
-            Please also note that indices should rollover at midnight <strong>UTC</strong>.
-          </p>
-          <p class="small">
-            See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
-            for documentation on date formatting.
-          </p>
+  <div ng-if="editor.index == 1">
+    <div class="editor-row">
+      <div class="section">
+        <h5>Index Settings</h5>
+        <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
+           <div class="editor-option">
+            <p class="small">
+              Time stamped indices use your selected time range to create a list of
+              indices that match a specified timestamp pattern. This can be very
+              efficient for some data sets (eg, logs) For example, to match the
+              default logstash index pattern you might use
+              <code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
+              important as they instruct Kibana not to treat those letters as a
+              pattern.
+              Please also note that indices should rollover at midnight <strong>UTC</strong>.
+            </p>
+            <p class="small">
+              See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
+              for documentation on date formatting.
+            </p>
+           </div>
          </div>
       </div>
     </div>
-    <div class="row-fluid">
-      <div class="span2">
-        <h6>Timestamping</h6><select class="input-small" ng-model="dashboard.current.index.interval" ng-options="f for f in ['none','hour','day','week','month','year']"></select>
-      </div>
-      <div class="span4" ng-show="dashboard.current.index.interval != 'none'">
-        <h6>Index pattern <small>Absolutes in []</small></h6>
-        <input type="text" class="input-medium" ng-model="dashboard.current.index.pattern">
-      </div>
-      <div class="span2" ng-show="dashboard.current.index.interval != 'none'">
-        <h6>Failover <i class="icon-question-sign" bs-tooltip="'If no indices match the pattern, failover to default index *NOT RECOMMENDED*'"></i></h6>
-        <input type="checkbox" ng-model="dashboard.current.failover" ng-checked="dashboard.current.failover" />
-      </div>
-      <div class="span4" ng-show="dashboard.current.failover || dashboard.current.index.interval == 'none'">
-        <h6>Default Index <small ng-show="dashboard.current.index.interval != 'none'">If index not found</small></h6>
-        <input type="text" class="input-medium" ng-model="dashboard.current.index.default">
+    <div class="editor-row">
+      <div class="section">
+        <div class="editor-option">
+          <h6>Timestamping</h6><select class="input-small" ng-model="dashboard.current.index.interval" ng-options="f for f in ['none','hour','day','week','month','year']"></select>
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.index.interval != 'none'">
+          <h6>Index pattern <small>Absolutes in []</small></h6>
+          <input type="text" class="input-large" ng-model="dashboard.current.index.pattern">
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.index.interval != 'none'">
+          <h6>Failover <i class="icon-question-sign" bs-tooltip="'If no indices match the pattern, failover to default index *NOT RECOMMENDED*'"></i></h6>
+          <input type="checkbox" ng-model="dashboard.current.failover" ng-checked="dashboard.current.failover" />
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.failover || dashboard.current.index.interval == 'none'">
+          <h6>Default Index <small ng-show="dashboard.current.index.interval != 'none'">If index not found</small></h6>
+          <input type="text" class="input-medium" ng-model="dashboard.current.index.default">
+        </div>
+        <div class="editor-option">
+          <h6>Preload Fields <i class="icon-question-sign" bs-tooltip="'Preload available fields for the purpose of autocomplete. Turn this off if you have many fields'"></i></h6>
+          <input type="checkbox" ng-model="dashboard.current.index.warm_fields" ng-checked="dashboard.current.index.warm_fields" />
+        </div>
       </div>
     </div>
   </div>
 
-  <div ng-show="editor.index == 2">
+  <div ng-if="editor.index == 2">
     <div class="row-fluid">
-      <div class="span12">
-        <table class="table table-condensed table-striped">
+      <div class="span8">
+        <h4>Rows</h4>
+        <table class="table table-condensed table-bordered">
           <thead>
-            <th>Title</th>
-            <th>Delete</th>
-            <th>Move</th>
+            <th width="1%"></th>
+            <th width="1%"></th>
+            <th width="1%"></th>
+            <th width="97%">Title</th>
           </thead>
           <tr ng-repeat="row in dashboard.current.rows">
-            <td>{{row.title}}</td>
-            <td><i ng-click="dashboard.current.rows = _.without(dashboard.current.rows,row)" class="pointer icon-remove"></i></td>
             <td><i ng-click="_.move(dashboard.current.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
             <td><i ng-click="_.move(dashboard.current.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
+            <td><i ng-click="dashboard.current.rows = _.without(dashboard.current.rows,row)" class="pointer icon-remove"></i></td>
+            <td>{{row.title}}</td>
           </tr>
         </table>
       </div>
+      <div class="span4">
+        <h4>Add Row</h4>
+        <label class="small">Title</label>
+        <input type="text" class="input-medium" ng-model='row.title' placeholder="New row"></input>
+        <label class="small">Height</label>
+        <input type="text" class="input-mini" ng-model='row.height'></input>
+      </div>
     </div>
     <div class="row-fluid">
-      <form>
-        <div class="span5">
-          <label class="small">Title</label>
-          <input type="text" class="input-large" ng-model='row.title' placeholder="New row"></input>
-        </div>
-        <div class="span2">
-          <label class="small">Height</label>
-          <input type="text" class="input-mini" ng-model='row.height'></input>
-        </div>
-        <div class="span1">
-          <label class="small"> Editable </label>
-          <input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
-        </div>
-      </form>
-    </div>
-  </div>
 
-  <div ng-show="editor.index == 3">
-    <h5>Pulldowns</h5>
-    <div class="row-fluid">
-      <div class="span2" ng-repeat="pulldown in dashboard.current.pulldowns">
-        <label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
-      </div>
-      <div class="span2" ng-repeat="pulldown in dashboard.current.nav">
-        <label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
-      </div>
     </div>
   </div>
 
-  <div ng-show="editor.index == 3" ng-controller="dashLoader">
-    <h5>Save to</h5>
-    <div class="row-fluid">
-      <div class="span2">
-        <label class="small">Export</label><input type="checkbox" ng-model="dashboard.current.loader.save_local" ng-checked="dashboard.current.loader.save_local">
-      </div>
-      <div class="span2">
-        <label class="small">Browser</label><input type="checkbox" ng-model="dashboard.current.loader.save_default" ng-checked="dashboard.current.loader.save_default">
-      </div>
-      <div class="span2">
-        <label class="small">Gist <tip>Requires your domain to be OAUTH registered with Github<tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_gist" ng-checked="dashboard.current.loader.save_gist">
-      </div>
-      <div class="span2">
-        <label class="small">Elasticsearch</label><input type="checkbox" ng-model="dashboard.current.loader.save_elasticsearch" ng-checked="dashboard.current.loader.save_elasticsearch">
-      </div>
-    </div>
-    <h5>Load from</h5>
-    <div class="row-fluid">
-      <div class="span2">
-        <label class="small">Local file</label><input type="checkbox" ng-model="dashboard.current.loader.load_local" ng-checked="dashboard.current.loader.load_local">
-      </div>
-      <div class="span2">
-        <label class="small">Gist</label><input type="checkbox" ng-model="dashboard.current.loader.load_gist" ng-checked="dashboard.current.loader.load_gist">
+  <div ng-if="editor.index == 3" ng-controller="dashLoader">
+    <div class="editor-row">
+      <div class="section">
+        <h5>Save to</h5>
+        <div class="editor-option">
+          <label class="small">Export</label><input type="checkbox" ng-model="dashboard.current.loader.save_local" ng-checked="dashboard.current.loader.save_local">
+        </div>
+        <div class="editor-option">
+          <label class="small">Browser</label><input type="checkbox" ng-model="dashboard.current.loader.save_default" ng-checked="dashboard.current.loader.save_default">
+        </div>
+        <div class="editor-option">
+          <label class="small">Gist <tip>Requires your domain to be OAUTH registered with Github<tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_gist" ng-checked="dashboard.current.loader.save_gist">
+        </div>
+        <div class="editor-option">
+          <label class="small">Elasticsearch</label><input type="checkbox" ng-model="dashboard.current.loader.save_elasticsearch" ng-checked="dashboard.current.loader.save_elasticsearch">
+        </div>
       </div>
-      <div class="span2">
-        <label class="small">Elasticsearch</label><input type="checkbox" ng-model="dashboard.current.loader.load_elasticsearch" ng-checked="dashboard.current.loader.load_elasticsearch">
+      <div class="section">
+        <h5>Load from</h5>
+        <div class="editor-option">
+          <label class="small">Local file</label><input type="checkbox" ng-model="dashboard.current.loader.load_local" ng-checked="dashboard.current.loader.load_local">
+        </div>
+        <div class="editor-option">
+          <label class="small">Gist</label><input type="checkbox" ng-model="dashboard.current.loader.load_gist" ng-checked="dashboard.current.loader.load_gist">
+        </div>
+        <div class="editor-option">
+          <label class="small">Elasticsearch</label><input type="checkbox" ng-model="dashboard.current.loader.load_elasticsearch" ng-checked="dashboard.current.loader.load_elasticsearch">
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.loader.load.elasticsearch">
+          <label class="small">ES list size</label><input class="input-mini" type="number" ng-model="dashboard.current.loader.load_elasticsearch_size">
+        </div>
       </div>
-      <div class="span3" ng-show="dashboard.current.loader.load.elasticsearch">
-        <label class="small">ES list size</label><input class="input-mini" type="number" ng-model="dashboard.current.loader.load_elasticsearch_size">
+      <div class="section">
+      <h5>Sharing</h5>
+        <div class="editor-option" >
+          <label class="small">Allow Sharing <tip>Allow generating adhoc links to dashboards</tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_temp" ng-checked="dashboard.current.loader.save_temp">
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.loader.save_temp">
+          <label class="small">TTL <tip>Expire temp urls</tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_temp_ttl_enable">
+        </div>
+        <div class="editor-option" ng-show="dashboard.current.loader.save_temp &amp;&amp; dashboard.current.loader.save_temp_ttl_enable">
+          <label class="small">TTL Duration <tip>Elasticsearch date math, eg: 1m,1d,1w,30d  </tip></label><input class="input-small" type="text" ng-model="dashboard.current.loader.save_temp_ttl">
+        </div>
       </div>
     </div>
-    <h5>Sharing</h5>
-    <div class="row-fluid">
-      <div class="span2" >
-        <label class="small">Allow Sharing <tip>Allow generating adhoc links to dashboards</tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_temp" ng-checked="dashboard.current.loader.save_temp">
-      </div>
-      <div class="span2" ng-show="dashboard.current.loader.save_temp">
-        <label class="small">TTL <tip>Expire temp urls</tip></label><input type="checkbox" ng-model="dashboard.current.loader.save_temp_ttl_enable">
-      </div>
-      <div class="span5" ng-show="dashboard.current.loader.save_temp &amp;&amp; dashboard.current.loader.save_temp_ttl_enable">
-        <label class="small">TTL Duration <tip>Elasticsearch date math, eg: 1m,1d,1w,30d  </tip></label><input class="input-small" type="text" ng-model="dashboard.current.loader.save_temp_ttl">
+  </div>
+
+  <div ng-if="editor.index == 3">
+    <div class="editor-row">
+      <div class="section">
+        <h5>Pulldowns</h5>
+        <div class="editor-option" ng-repeat="pulldown in dashboard.current.pulldowns">
+          <label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+        </div>
+        <div class="editor-option" ng-repeat="pulldown in dashboard.current.nav">
+          <label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+        </div>
       </div>
     </div>
   </div>