'Add panel' hinting in empty spaces

src/app/controllers/row.js

@@ -20,7 +20,6 @@ function (angular, app, _) {
 
       _.defaults($scope.row,_d);
 
-
       $scope.init = function() {
         $scope.querySrv = querySrv;
         $scope.reset_panel();
@@ -38,6 +37,12 @@ function (angular, app, _) {
         }
       };
 
+      $scope.rowSpan = function(row) {
+        return _.reduce(_.pluck(row.panels,'span'), function(p,v) {
+          return p+v;
+        },0);
+      };
+
       // This can be overridden by individual panels
       $scope.close_edit = function() {
         $scope.$broadcast('render');
@@ -48,9 +53,13 @@ function (angular, app, _) {
       };
 
       $scope.reset_panel = function(type) {
+        var
+          defaultSpan = 4,
+          _as = 12-$scope.rowSpan($scope.row);
+
         $scope.panel = {
           error   : false,
-          span    : 3,
+          span    : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
           editable: true,
           type    : type
         };

src/app/directives/kibanaPanel.js

@@ -28,8 +28,8 @@ function (angular) {
           '<span class="small strong">{{panel.type}}</span> ' +
         '</span>' +
 
-        '<h4 ng-show="panel.title">' +
-          '{{panel.title}}' +
+        '<h4 ng-show="panel.title" style="margin:0px;">' +
+          '{{panel.title}}&nbsp' +
           '<i class="icon-spinner smaller icon-spin icon-large"' +
             'ng-show="panelMeta.loading == true && panel.title"></i>' +
         '</h4>';

src/app/partials/dashboard.html

@@ -1,12 +1,32 @@
 <div class="row-fluid container" style="margin-top:10px">
+
+  <style>
+    .row-panel-filler {
+      opacity: 0;
+    }
+    .row-panel-filler:hover {
+      opacity: 0.3;
+    }
+    .row-name {
+    }
+  </style>
+
   <!-- 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="row-control">
-      <div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
-        <div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;">
-          <span ng-class='{pointer:row.collapsable}' ng-click="toggle_row(row)">{{row.title}}</span>
-          <i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
+      <div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
+
+        <div class="row-close" ng-show="row.collapse">
+          <span bs-tooltip="'Show row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="row-name label label-inverse" ng-click="toggle_row(row)">{{row.title || 'Row '+$index}}</span>
+          <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
+          <div class="clear"></div>
         </div>
+
+        <div class="row-open" ng-show="!row.collapse">
+          <i bs-tooltip="'Hide row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="icon-chevron-up" ng-click="toggle_row(row)"></i><br>
+          <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
+        </div>
+
       </div>
       <div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
         <!-- Panels -->
@@ -23,6 +43,12 @@
             <kibana-panel type="panel.type" ng-cloak></kibana-panel>
           </div>
         </div>
+        <div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints" ng-class="'span'+(12-rowSpan(row))" class="bordered row-panel-filler" style="height:{{row.height}}; position:relative; border: 1px dashed; border-radius: 10px;text-align:center;vertical-align:middle;">
+          <span class="pointer addLink" ng-click="editor.index=2" bs-modal="'app/partials/roweditor.html'">
+            Add a panel here<br>
+            <i style="font-size:20px" class="icon-plus-sign" ></i>
+          </span>
+        </div>
       </div>
     </div>
   </div>

src/app/partials/dasheditor.html

@@ -14,6 +14,9 @@
       <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>

src/app/partials/roweditor.html

@@ -27,7 +27,7 @@
         <thead>
           <th>Title</th>
           <th>Type</th>
-          <th>Span</th>
+          <th>Span <span class="small">({{rowSpan(row)}}/12)</span></th>
           <th>Delete</th>
           <th>Move</th>
           <th></th>
@@ -47,9 +47,12 @@
   </div>
   <div class="row-fluid" ng-show="editor.index == 2">
     <h4>Select Panel Type</h4>
-    <form class="input-append">
-    <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
-    <small ng-show="!panel.type">Select Type</small></form>
+    <form class="form-inline">
+      <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
+      <small ng-show="rowSpan(row) > 11">
+        Note: This row is full, new panels will wrap to a new line. You should add another row.
+      </small>
+    </form>
 
     <div ng-show="!(_.isUndefined(panel.type))">
       <div add-panel="{{panel.type}}"></div>

src/app/services/dashboard.js

@@ -23,6 +23,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
       style: "dark",
       editable: true,
       failover: false,
+      panel_hints: true,
       rows: [],
       services: {},
       loader: {

src/vendor/bootstrap/less/overrides.less

@@ -43,12 +43,12 @@
 
 .kibana-row {
   margin-left: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 
 .row-close {
   color: #bbb;
-  position: absolute;
+  margin-left: -35px;
   font-size: 9pt;
   font-weight: 200;
   padding-left: 35px;
@@ -58,19 +58,10 @@
 .row-open {
   text-align: right;
   color: #bbb;
-  margin-top:30px;
+  left:-30px;
   position: absolute;
   font-size: 13pt;
   font-weight: 200;
-  -moz-transform-origin: 40px;
-  -ms-transform-origin: 40px;
-  -o-transform-origin: 40px;
-  -webkit-transform-origin: 40px;
-  transform-origin: 40px;
-  transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
 }
 
 .row-open i {

src/vendor/bootstrap/less/variables.light.less

@@ -39,7 +39,7 @@
 // Links
 // -------------------------
 @linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
+@linkColorHover:        lighten(@linkColor, 15%);
 
 
 // Typography