kibana-sinatra 0.0.7 → 0.0.8

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

@@ -14,12 +14,14 @@
 </span>
 <table style="width:100%;table-layout:fixed" class='table table-striped table-unpadded'>
   <thead>
+    <th style="width:10px"></th>
     <th style="width:260px">{{micropanel.field}}</th>
     <th style="width:40px">Action</th>
     <th style="width:100px;text-align:right">Count / {{micropanel.count}} events</th>
   </thead>
   <tbody>
     <tr ng-repeat='field in micropanel.values'>
+      <td>{{$index+1}}.</td>
       <td style="word-wrap:break-word">{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</td>
       <td>
         <i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i>
@@ -38,7 +40,7 @@
   </tbody>
 </table>
 <div class="progress nomargin" ng-show="micropanel.grouped">
-  <div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
+  <div ng-repeat='field in micropanel.values' bs-tooltip="$index+1+'. ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
 </div>
 <div>
   <span ng-repeat="field in micropanel.related|orderBy:'count':true|limitTo:micropanel.limit track by $index"><a ng-click="toggle_field(field.name)" bs-tooltip="'Toggle {{field.name}} column'">{{field.name}}</a> ({{Math.round((field.count / micropanel.count) * 100)}}%), </span>

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

@@ -13,7 +13,7 @@
 define([
   'angular',
   'app',
-  'underscore',
+  'lodash',
   'kbn',
   'moment',
 ],
@@ -185,6 +185,8 @@ function (angular, app, _, kbn, moment) {
       });
     };
 
+
+
     $scope.toggle_micropanel = function(field,groups) {
       var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
       var topFieldValues = kbn.top_field_values(docs,field,10,groups);
@@ -406,6 +408,10 @@ function (angular, app, _, kbn, moment) {
       if($scope.refresh) {
         $scope.get_data();
       }
+      $scope.columns = [];
+      _.each($scope.panel.fields,function(field) {
+        $scope.columns[field] = true;
+      });
       $scope.refresh =  false;
     };
 

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

@@ -1,20 +1,33 @@
   <div class="editor-row">
     <div class="section">
       <h5>Parameters</h5>
+      <div class="editor-option">
+        <label class="small">Terms mode</label>
+        <select class="input-medium" ng-model="panel.tmode" ng-options="f for f in ['terms','terms_stats']" ng-change="set_refresh(true)"></select>
+      </div>
+      <div class="editor-option" ng-show="panel.tmode == 'terms_stats'">
+        <label class="small">Stats type</label>
+        <select class="input-medium" ng-model="panel.tstat" ng-options="f for f in ['count', 'total_count', 'min', 'max', 'total', 'mean']"></select>
+      </div>
       <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" ng-show="panel.tmode == 'terms_stats'">
+        <label class="small">Value field</label>
+        <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.valuefield" 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>
+        <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)"  ng-show="panel.tmode == 'terms'"></select>
+        <select class="input-medium" ng-model="panel.order" ng-options="f for f in ['term', 'reverse_term', 'count', 'reverse_count', 'total', 'reverse_total', 'min', 'reverse_min', 'max', 'reverse_max', 'mean', 'reverse_mean']" ng-change="set_refresh(true)"  ng-show="panel.tmode == 'terms_stats'"></select>
       </div>
-      <div class="editor-option">
-        <label class="small">Exclude Terms(s) (comma seperated)</label>
+      <div class="editor-option" ng-show="panel.tmode == 'terms'">
+        <label class="small">Exclude Terms(s) (comma separated)</label>
         <input array-join type="text" ng-model='panel.exclude'></input>
       </div>
     </div>

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

@@ -2,6 +2,7 @@
   <style>
     .pieLabel { pointer-events: none }
   </style>
+
   <!-- START Pie or bar chart -->
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend above -->
@@ -12,9 +13,13 @@
     </table>
 
     <!-- horizontal legend above -->
-    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
      <span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{term.data[0][1]}}) </span>
-    </div><br>
+    </span>
+
+    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
+      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
+    </span>
 
   </div>
 
@@ -32,16 +37,20 @@
     </table>
 
     <!-- horizontal legend below -->
-    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
      <span><i class="icon-circle" ng-style="{color:term.color}"></i></span> {{term.label}} ({{term.data[0][1]}}) </span>
-    </div><br>
+    </span>
+
+    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
+      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
+    </span>
 
   </div>
   <!-- END Pie or Bar chart -->
 
   <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
     <thead>
-      <th>Term</th> <th>Count</th> <th>Action</th>
+      <th>Term</th> <th>{{ panel.tmode == 'terms_stats' ? panel.tstat : 'Count' }}</th> <th>Action</th>
     </thead>
     <tr ng-repeat="term in data" ng-show="showMeta(term)">
       <td>{{term.label}}</td>

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

@@ -12,7 +12,7 @@
 define([
   'angular',
   'app',
-  'underscore',
+  'lodash',
   'jquery',
   'kbn'
 ],
@@ -67,7 +67,9 @@ function (angular, app, _, $, kbn) {
        */
       size    : 10,
       /** @scratch /panels/terms/5
-       * order:: count, term, reverse_count or reverse_term
+       * order:: In terms mode: count, term, reverse_count or reverse_term,
+       * in terms_stats mode: term, reverse_term, count, reverse_count,
+       * total, reverse_total, min, reverse_min, max, reverse_max, mean or reverse_mean
        */
       order   : 'count',
       style   : { "font-size": '10pt'},
@@ -109,7 +111,20 @@ function (angular, app, _, $, kbn) {
         mode        : 'all',
         ids         : []
       },
+      /** @scratch /panels/terms/5
+       * tmode:: Facet mode: terms or terms_stats
+       */
+      tmode       : 'terms',
+      /** @scratch /panels/terms/5
+       * tstat:: Terms_stats facet stats field
+       */
+      tstat       : 'total',
+      /** @scratch /panels/terms/5
+       * valuefield:: Terms_stats facet value field
+       */
+      valuefield  : ''
     };
+
     _.defaults($scope.panel,_d);
 
     $scope.init = function () {
@@ -149,8 +164,9 @@ function (angular, app, _, $, kbn) {
       });
 
       // Terms mode
-      request = request
-        .facet($scope.ejs.TermsFacet('terms')
+      if($scope.panel.tmode === 'terms') {
+        request = request
+          .facet($scope.ejs.TermsFacet('terms')
           .field($scope.field)
           .size($scope.panel.size)
           .order($scope.panel.order)
@@ -159,7 +175,21 @@ function (angular, app, _, $, kbn) {
             $scope.ejs.FilteredQuery(
               boolQuery,
               filterSrv.getBoolFilter(filterSrv.ids)
-              )))).size(0);
+            )))).size(0);
+      }
+      if($scope.panel.tmode === 'terms_stats') {
+        request = request
+          .facet($scope.ejs.TermStatsFacet('terms')
+          .valueField($scope.panel.valuefield)
+          .keyField($scope.field)
+          .size($scope.panel.size)
+          .order($scope.panel.order)
+          .facetFilter($scope.ejs.QueryFilter(
+            $scope.ejs.FilteredQuery(
+              boolQuery,
+              filterSrv.getBoolFilter(filterSrv.ids)
+            )))).size(0);
+      }
 
       // Populate the inspector panel
       $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
@@ -168,20 +198,12 @@ function (angular, app, _, $, kbn) {
 
       // Populate scope when we have results
       results.then(function(results) {
-        var k = 0;
         $scope.panelMeta.loading = false;
-        $scope.hits = results.hits.total;
-        $scope.data = [];
-        _.each(results.facets.terms.terms, function(v) {
-          var slice = { label : v.term, data : [[k,v.count]], actions: true};
-          $scope.data.push(slice);
-          k = k + 1;
-        });
+        if($scope.panel.tmode === 'terms') {
+          $scope.hits = results.hits.total;
+        }
 
-        $scope.data.push({label:'Missing field',
-          data:[[k,results.facets.terms.missing]],meta:"missing",color:'#aaa',opacity:0});
-        $scope.data.push({label:'Other values',
-          data:[[k+1,results.facets.terms.other]],meta:"other",color:'#444'});
+        $scope.results = results;
 
         $scope.$emit('render');
       });
@@ -241,10 +263,36 @@ function (angular, app, _, $, kbn) {
           render_panel();
         });
 
+        function build_results() {
+          var k = 0;
+          scope.data = [];
+          _.each(scope.results.facets.terms.terms, function(v) {
+            var slice;
+            if(scope.panel.tmode === 'terms') {
+              slice = { label : v.term, data : [[k,v.count]], actions: true};
+            }
+            if(scope.panel.tmode === 'terms_stats') {
+              slice = { label : v.term, data : [[k,v[scope.panel.tstat]]], actions: true};
+            }
+            scope.data.push(slice);
+            k = k + 1;
+          });
+
+          scope.data.push({label:'Missing field',
+            data:[[k,scope.results.facets.terms.missing]],meta:"missing",color:'#aaa',opacity:0});
+
+          if(scope.panel.tmode === 'terms') {
+            scope.data.push({label:'Other values',
+              data:[[k+1,scope.results.facets.terms.other]],meta:"other",color:'#444'});
+          }
+        }
+
         // Function for rendering panel
         function render_panel() {
           var plot, chartData;
 
+          build_results();
+
           // IE doesn't work without this
           elem.css({height:scope.panel.height||scope.row.height});
 
@@ -357,4 +405,4 @@ function (angular, app, _, $, kbn) {
     };
   });
 
-});
+});

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

@@ -13,7 +13,7 @@
 define([
   'angular',
   'app',
-  'underscore',
+  'lodash',
   'require'
 ],
 function (angular, app, _, require) {

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

@@ -1,14 +1,16 @@
-  <div class="row-fluid">
-    <div class="span4">
-      <label class="small">Relative time options <small>comma seperated</small></label>
-      <input type="text" array-join class="input-large" ng-model="panel.time_options">
-    </div>
-    <div class="span4">
-      <label class="small">Auto-refresh options <small>comma seperated</small></label>
-      <input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
-    </div>
-    <div class="span2">
-      <label class="small">Time Field</label>
-      <input type="text" class="input-small" ng-model="panel.timefield">
+  <div class="editor-row">
+    <div class="section">
+      <div class="editor-option">
+        <label class="small">Relative time options <small>comma separated</small></label>
+        <input type="text" array-join class="input-large" ng-model="panel.time_options">
+      </div>
+      <div class="editor-option">
+        <label class="small">Auto-refresh options <small>comma separated</small></label>
+        <input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
+      </div>
+      <div class="editor-option">
+        <label class="small">Time Field</label>
+        <input type="text" class="input-small" ng-model="panel.timefield">
+      </div>
     </div>
   </div>

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

@@ -3,11 +3,6 @@
     .timepicker-timestring {
       font-weight: normal;
     }
-
-    .timepicker-dropdown {
-      margin: 0px !important;
-      border: 0px !important;
-    }
   </style>
   <!--  This is a complete hack. The form actually exists in the modal, but due to transclusion
         $scope.input isn't available on the controller unless the form element is in this file -->
@@ -37,7 +32,7 @@
 
           <!-- Auto refresh submenu -->
           <li class="dropdown-submenu">
-            <a href="#">Auto-Refresh</a>
+            <a>Auto-Refresh</a>
             <ul class="dropdown-menu">
               <li><a ng-click="dashboard.set_interval(false)">Off</a></li>
               <li ng-repeat="interval in panel.refresh_intervals track by $index"><a ng-click="dashboard.set_interval(interval)">Every {{interval}}</a></li>
@@ -47,8 +42,8 @@
         </ul>
 
       </li>
-      <li ng-show="!dashboard.current.refresh">
-        <a class="icon-refresh" ng-click="dashboard.refresh()"></a>
+      <li>
+        <a ng-click="dashboard.refresh()"><i class="icon-refresh"></i></a>
       </li>
     </ul>
 

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

@@ -15,7 +15,7 @@
 define([
   'angular',
   'app',
-  'underscore',
+  'lodash',
   'moment',
   'kbn'
 ],

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

@@ -14,7 +14,7 @@
 define([
   'angular',
   'app',
-  'underscore',
+  'lodash',
   'kbn'
 ],
 function (angular, app, _, kbn) {

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

@@ -14,16 +14,16 @@
 
 
   <ul class="dropdown-menu" style="padding:10px">
-    <li ng-if='dashboard.current.loader.load_elasticsearch'>
+    <li ng-if='dashboard.current.loader.load_elasticsearch != false'>
       <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 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 confirm-click="elasticsearch_delete(row._id)" confirmation="Are you sure you want to delete the {{row._id}} dashboard"><i class="icon-remove"></i></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>
+          <td><a><i class="icon-share" ng-click="share = dashboard.share_link(row._id,'elasticsearch',row._id)" bs-modal="'app/partials/dashLoaderShare.html'"></i></a></td>
         </tr>
       </table>
     </li>
@@ -66,24 +66,24 @@
 
   <ul class="dropdown-menu" style="padding:10px">
 
-    <li ng-show="dashboard.current.loader.save_elasticsearch">
+    <li ng-show="dashboard.current.loader.save_elasticsearch != false">
       <form class="input-prepend nomargin">
-        <button style="margin-top:-1px" class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
+        <button class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
         <input class='input-medium' ng-model="dashboard.current.title" type="text" ng-model="elasticsearch.title"/>
       </form>
     </li>
 
-    <li class="dropdown-submenu noarrow" ng-show="dashboard.current.loader.save_local || dashboard.current.loader.save_gist || dashboard.current.loader.save_default">
+    <li class="dropdown-submenu noarrow" ng-show="dashboard.current.loader.save_local != false || dashboard.current.loader.save_gist != false || dashboard.current.loader.save_default != false">
       <a tabindex="-1" class="small" style="padding:0"><i class="icon-caret-left"></i> Advanced</a>
       <ul class="dropdown-menu">
 
-        <li ng-show="dashboard.current.loader.save_default">
+        <li ng-show="dashboard.current.loader.save_default != false">
           <a class="link" ng-click="set_default()">Save as Home</a>
         </li>
-        <li ng-show="dashboard.current.loader.save_default">
+        <li ng-show="dashboard.current.loader.save_default != false">
           <a class="link" ng-click="purge_default()">Reset Home</a>
         </li>
-        <li ng-show="dashboard.current.loader.save_local">
+        <li ng-show="dashboard.current.loader.save_local != false">
           <a class="link" ng-click="dashboard.to_file()">Export schema</a>
         </li>
 
@@ -103,5 +103,5 @@
 </li>
 <li ng-show="showDropdown('share')"><a bs-tooltip="'Share'" data-placement="bottom" ng-click="elasticsearch_save('temp',dashboard.current.loader.save_temp_ttl)" bs-modal="'app/partials/dashLoaderShare.html'"><i class='icon-share'></i></a></li>
 
-<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a href='#' bs-modal="'app/partials/dasheditor.html'"><i class='icon-cog pointer'></i></a></li>
+<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html" kbn-model="dashboard"><i class='icon-cog'></i></a></li>
 

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

@@ -1,87 +1,78 @@
 <!-- is there a better way to repeat without actually affecting the page? -->
 <nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+  <div class="top-row-close pointer pull-left" ng-class="pulldownTabStyle($index)" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
+    <span class="small">{{pulldown.type}}</span>
+    <i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-right':!pulldown.collapse}"></i>
+    <i class="small icon-star" ng-show="row.notice && pulldown.collapse"></i>
+  </div>
+  <div class="clearfix bgNav" ng-hide="pulldown.collapse"></div>
   <div class="top-row-open" ng-hide="pulldown.collapse">
     <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
   </div>
-  <div class="top-row-close pointer" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
-    <span class="small row-text">{{pulldown.type}}</span>
-    <i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-up':!pulldown.collapse}"></i>
-    <i class="small icon-star text-warning" ng-show="row.notice && pulldown.collapse"></i>
-  </div>
 </nil>
-
+<div class="clearfix bgNav" ></div>
 <div class="container-fluid main">
-  <div class="row-fluid">
-    <div class="row-fluid container" style="margin-top:10px; width:98%">
+  <div>
+    <div class="kibana-container container">
       <!-- Rows -->
-      <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
+      <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
         <div class="row-control">
-          <div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
+          <div class="" style="padding:0px;margin:0px;position:relative;">
 
-            <div class="row-close span12" ng-show="row.collapse" data-placement="bottom" >
-              <span class="row-button" bs-modal="'app/partials/roweditor.html'" class="pointer">
+            <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
+              <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" kbn-model="row" class="pointer">
                 <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
               </span>
-              <span class="row-button" ng-click="toggle_row(row)" ng-show="row.collapsable">
-                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-right pointer" ></i>
+              <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
+                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.collapsable" class="icon-caret-left pointer" ></i>
               </span>
               <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
             </div>
 
             <div style="text-align:center" class="row-open" ng-show="!row.collapse">
-              <span ng-show="row.collapsable">
-                <i bs-tooltip="'Hide row'" data-placement="right"  class="icon-caret-up" ng-click="toggle_row(row)"></i>
+              <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
+                <i bs-tooltip="'Collapse row'" data-placement="right"  class="icon-caret-right" ></i>
                 <br>
-              </span>
-              <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable">
+              </div>
+              <div config-modal="app/partials/roweditor.html" kbn-model="row" class='row-tab bgWarning' ng-show="row.editable">
                 <i bs-tooltip="'Configure row'" data-placement="right"  class="icon-cog pointer"></i>
                 <br>
-              </span>
-              <span ng-show="rowSpan(row) == 12 && row.editable">
-                <i bs-tooltip="'Row full. Create a new row to add more panels'" data-placement="right" class="icon-columns"></i>
-                <br>
-              </span>
-              <span ng-show="rowSpan(row) > 12">
-                <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign text-warning"></i>
+              </div>
+              <div class="bgSuccess row-tab" ng-click="editor.index = 2" config-modal="app/partials/roweditor.html" kbn-model="row" ng-show="row.editable">
+                <i class="icon-plus-sign" bs-tooltip="'Add Panel'" data-placement="right"></i>
                 <br>
-              </span>
+              </div>
+
             </div>
 
           </div>
-          <div class="row-fluid" style="padding-top:0px" ng-if="!row.collapse">
+          <div style="padding-top:0px" ng-if="!row.collapse">
 
             <!-- Panels -->
-            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.span == 0 || panel.hide" class="span{{panel.span}} panel nospace" style="min-height:{{row.height}}; position:relative" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}">
-              <!-- Error Panel -->
-              <div class="row-fluid">
-                <div class="span12 alert-error panel-error" ng-hide="!panel.error">
-                  <a class="close" ng-click="panel.error=false">&times;</a>
-                  <i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
-                </div>
-              </div>
+            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
 
               <!-- Content Panel -->
-              <div class="row-fluid" style="position:relative" ng-class="{'dragInProgress':dashboard.panelDragging}" >
+              <div style="position:relative">
                 <kibana-panel type="panel.type" ng-cloak></kibana-panel>
               </div>
             </div>
 
-            <div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints" class="panel span{{(12-rowSpan(row))}}" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
-
-              <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable && !dashboard.panelDragging">
-                <i ng-hide="rowSpan(row) == 0" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
-                <span ng-click="editor.index = 2" style="margin-top: 8px; margin-left: 3px" ng-show="rowSpan(row) == 0" class="btn btn-mini">Add panel to empty row</btn>
-              </span>
 
+            <div ng-show="dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
             </div>
 
+            <span config-modal="app/partials/roweditor.html" kbn-model="row" ng-show="row.editable && !dashboard.panelDragging">
+              <span ng-click="editor.index = 2" style="margin-top: 3px; margin-left: 5px" ng-show="row.panels.length==0" class="btn btn-mini">Add panel to empty row</span>
+            </span>
+
+          <div class="clearfix"></div>
           </div>
         </div>
       </div>
 
       <div class="row-fluid" ng-show='dashboard.current.editable'>
         <div class="span12" style="text-align:right;">
-          <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
+          <span class="pointer btn btn-mini row-add-button" config-modal="app/partials/dasheditor.html" kbn-model="dashboard">
             <span ng-click="editor.index = 2"><i class="icon-plus-sign"></i> ADD A ROW</span>
           </span>
         </div>
@@ -90,4 +81,4 @@
 
     </div>
   </div>
-</div>
+</div>