More efficient loading of setting panels and improved layuout

src/app/directives/all.js

@@ -8,5 +8,6 @@ define([
   './ngModelOnBlur',
   './tip',
   './confirmClick',
-  './esVersion'
+  './esVersion',
+  './configModal'
 ], function () {});

src/app/directives/configModal.js

@@ -0,0 +1,34 @@
+define([
+  'angular',
+  'app',
+],
+function (angular) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('configModal', function($modal,$q) {
+      return {
+        restrict: 'A',
+        link: function(scope, elem) {
+          // create a new modal. Can't reuse one modal unforunately as the directive will not
+          // re-render on show.
+          elem.bind('click',function(){
+            var panelModal = $modal({
+              template: './app/partials/paneleditor.html',
+              persist: true,
+              show: false,
+              scope: scope,
+              keyboard: false
+            });
+
+            // and show it
+            $q.when(panelModal).then(function(modalEl) {
+              modalEl.modal('show');
+            });
+            scope.$apply();
+          });
+        }
+      };
+    });
+});

src/app/directives/kibanaPanel.js

@@ -36,7 +36,7 @@ function (angular) {
           '</span>' +
 
           '<span class="row-button extra" ng-show="panel.editable != false">' +
-            '<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+
+            '<span config-modal class="pointer">'+
             '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
           '</span>' +
 

src/app/panels/bettermap/editor.html

@@ -1,17 +1,17 @@
-  <div class="row-fluid">
-    <div class="span4">
+  <div class="editor-row">
+    <div class="editor-option">
       <form>
         <h6>Coordinate Field <tip>geoJSON array! Long,Lat NOT Lat,Long</tip></h6>
         <input  bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field">
       </form>
     </div>
-    <div class="span4">
+    <div class="editor-option">
       <form>
         <h6>Tooltip Field</h6>
         <input  bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.tooltip">
       </form>
     </div>
-    <div class="span2"><h6>Max Points</h6>
+    <div class="editor-option"><h6>Max Points</h6>
       <input type="number" class="input-small" ng-model="panel.size">
     </div>
   </div>

src/app/panels/histogram/editor.html

@@ -7,7 +7,7 @@
     </div>
     <div class="editor-option" ng-show="panel.mode != 'count'">
       <label class="small">Value Field <tip>This field must contain a numeric value</tip></label>
-        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-large" ng-model="panel.value_field">
+        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-medium" ng-model="panel.value_field">
     </div>
   </div>
   <div class="section">
@@ -23,26 +23,26 @@
       <label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)">
     </div>
   </div>
-</div>
-<h5>Time Options</h5>
-<div class="editor-row">
-  <div class="editor-option">
-    <label class="small">Time Field</label>
-      <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
-  </div>
-  <div class="editor-option">
-    <label class="small">Time correction</label>
-    <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
-  </div>
-  <div class="editor-option">
-    <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
-  </div>
-  <div class="editor-option" ng-show='panel.auto_int'>
-    <label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
-    <input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
-  </div>
-  <div class="editor-option" ng-hide='panel.auto_int'>
-    <label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
-    <input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
+  <div class="section">
+  <h5>Time Options</h5>
+    <div class="editor-option">
+      <label class="small">Time Field</label>
+        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
+    </div>
+    <div class="editor-option">
+      <label class="small">Time correction</label>
+      <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
+    </div>
+    <div class="editor-option">
+      <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
+    </div>
+    <div class="editor-option" ng-show='panel.auto_int'>
+      <label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
+      <input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
+    </div>
+    <div class="editor-option" ng-hide='panel.auto_int'>
+      <label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
+      <input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
+    </div>
   </div>
 </div>

src/app/panels/hits/editor.html

@@ -1,28 +1,28 @@
-<div>
-  <div class="row-fluid">
-    <div class="span3">
+<div class="editor-row">
+  <div class="section">
+    <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','list','total']"></select></span>
     </div>
-    <div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'">
+    <div class="editor-option" ng-show="panel.chart == 'total' || panel.chart == 'list'">
       <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="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
+    <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="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
+    <div class="editor-option" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
       <label class="small" >List Format</label>
       <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
     </div>
-    <div class="span1" ng-show="panel.chart == 'pie'">
+    <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="span1" ng-show="panel.chart == 'pie'">
+    <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="span1" ng-show="panel.chart == 'pie'">
+    <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>

src/app/panels/map/editor.html

@@ -1,15 +1,15 @@
-  <div class="row-fluid">
-    <div class="span3">
+  <div class="editor-row">
+    <div class="editor-option">
       <form>
         <h6>Field <tip>2 letter country or state code</tip></h6>
         <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field" ng-change="set_refresh(true)">
       </form>
     </div>
-    <div class="span2">
+    <div class="editor-option">
       <h6>Max <tip>Maximum countries to plot</tip></h6>
       <input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
     </div>
-    <div class="span1"><h6>Map</h6>
+    <div class="editor-option"><h6>Map</h6>
       <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
     </div>
   </div>

src/app/panels/pie/editor.html

@@ -1,49 +1,54 @@
-  <div class="row-fluid" ng-switch="panel.mode">
-    <div class="row-fluid">
-      <div class="span2">
-        <label class="small">Mode</label> 
+  <div class="editor-row" ng-switch="panel.mode">
+
+    <div class="section">
+      <h5>Mode</h5>
+      <div class="editor-option">
+        <label class="small">Mode</label>
         <select class="input-small" ng-change="set_mode(panel.mode);set_refresh(true)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
-      </div> 
-    </div>
-    <div ng-switch-when="terms">
-      <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.query.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="span6">
-          <label class="small">Exclude Terms(s) (comma seperated)</label>
-          <input array-join type="text" ng-model='panel.exclude'></input>
-        </div>
-      </div>  
-    </div>
-    <div ng-switch-when="goal">
-      <div class="row-fluid">
-        <div class="span2">
-          <form style="margin-bottom: 0px">
-            <label class="small">Goal</label>
-            <input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
-          </form>
-        </div>
       </div>
     </div>
-  </div>
-  <div class="row-fluid">    
-    <div class="span1">
-      <label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
-    </div>
-    <div class="span1">
-      <label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
+
+    <div class="section" ng-switch-when="terms">
+      <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.query.field" ng-change="set_refresh(true)">
+      </div>
+      <div class="editor-option">
+        <label class="small">Length</label>
+        <input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
+      </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 class="span1">
-      <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
+
+    <div class="section" ng-switch-when="goal">
+      <h5>Parameters</h5>
+      <div class="editor-option">
+        <form style="margin-bottom: 0px">
+          <label class="small">Goal</label>
+          <input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
+        </form>
+      </div>
     </div>
-    <div class="span3"> 
-      <label class="small">Legend</label> 
-      <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
+
+    <div class="section">
+      <h5>View Options</h5>
+      <div class="editor-option">
+        <label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
+      </div>
+      <div class="editor-option">
+        <label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
+      </div>
+      <div class="editor-option">
+        <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
+      </div>
+      <div class="editor-option">
+        <label class="small">Legend</label>
+        <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
+      </div>
     </div>
+
   </div>

src/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>
+

src/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>

src/app/partials/dasheditor.html

@@ -9,155 +9,161 @@
   </div>
 
   <div ng-if="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 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-if="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 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>
-      <div class="span2">
-        <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 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-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-if="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-if="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 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>

src/app/partials/paneladd.html

@@ -1,6 +1,6 @@
   <div ng-include="'app/partials/panelgeneral.html'"></div>
   <div ng-include="edit_path(panel.type)"></div>
   <div ng-repeat="tab in panelMeta.editorTabs">
-    <h4>{{tab.title}}</h4>
+    <h5>{{tab.title}}</h5>
     <div ng-include="tab.src"></div>
   </div>

src/app/partials/panelgeneral.html

@@ -1,22 +1,24 @@
-  <div class="row-fluid">
-    <div class="span12">
+  <div class="editor-row">
+    <div class="section">
       <strong>{{panelMeta.status}}</strong> // <span ng-bind-html="panelMeta.description"></span>
     </div>
   </div>
-  <div class="row-fluid">
-    <div class="span4">
-      <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
-    </div>
-    <div class="span2" ng-hide="panel.sizeable == false">
-      <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
-    </div>
-    <div class="span2">
-      <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
-    </div>
-    <div class="span2" ng-show="!_.isUndefined(panel.spyable)">
-      <label class="small">
-        Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
-      </label>
-      <input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+  <div class="editor-row">
+    <div class="section">
+      <div class="editor-option">
+        <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
+      </div>
+      <div class="editor-option" ng-hide="panel.sizeable == false">
+        <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
+      </div>
+      <div class="editor-option">
+        <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
+      </div>
+      <div class="editor-option" ng-show="!_.isUndefined(panel.spyable)">
+        <label class="small">
+          Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
+        </label>
+        <input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+      </div>
     </div>
   </div>

src/vendor/bootstrap/less/modals.less

@@ -22,17 +22,10 @@
 
 // Base modal
 .modal {
-  position: fixed;
-  top: 10%;
-  left: 50%;
+  position: absolute;
   z-index: @zindexModal;
-  width: 560px;
-  margin-left: -280px;
+  width: 100%;
   background-color: @white;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.3);
-  *border: 1px solid #999; /* IE6-7 */
-  .border-radius(6px);
   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   .background-clip(padding-box);
   // Remove focus outline from opened modal
@@ -60,7 +53,7 @@
 .modal-body {
   position: relative;
   overflow-y: auto;
-  max-height: 400px;
+  max-height: 700px;
   padding: 15px;
 }
 // Remove bottom margin if need be
@@ -75,7 +68,6 @@
   text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
-  .border-radius(0 0 6px 6px);
   .box-shadow(inset 0 1px 0 @white);
   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 

src/vendor/bootstrap/less/overrides.less

@@ -210,9 +210,8 @@ form input.ng-invalid {
 }
 
 .modal {
-  width: 770px;
-  margin-left: -385px;
-  top: 10px !important;
+  width: 100%;
+  top: 0px !important;
 }
 
 .tiny {