Added dashboard editor, row adding/moving/removing

common/css/main.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.pointer:hover {
+  color: #0088CC;
+}
+
 .panel:hover i.editlink {
   display: block;
   opacity: 0.3;
@@ -36,18 +40,19 @@
   opacity: 1;
 }
 
+/*
 .row-header i.editlink {
-  display: none;
+  opacity: 0;
 }
 
 .row-header:hover i.editlink {
-  display: inline-block;
   opacity: 0.3;
 }
 
 .row-header i.editlink:hover {
   opacity: 1;
 }
+*/
 
 .pointer {
   cursor: pointer;

index.html

@@ -34,6 +34,7 @@
       <div class="container-fluid">
         <span class="brand"><small>Kibana Preview</small></span>
         <span class="brand">{{dashboards.title}}</span>
+        <div class="brand"><i class='icon-edit pointer' bs-modal="'partials/dasheditor.html'" bs-tooltip="'Edit Dashboard'" data-placement="bottom"></i></div>
         <div class="brand"><i class='icon-download pointer' ng-click="export()" bs-tooltip="'Export this dashboard'" data-placement="bottom"></i></div>
         <div class="brand"><i class='icon-bookmark pointer' ng-click="default()" bs-tooltip="'Set as default dashboard'" data-placement="bottom"></i></div>
         <div class="brand"><i class='icon-ban-circle pointer' ng-click="purge()" bs-tooltip="'Clear default dashboard settings'" data-placement="bottom"></i></div>

js/controllers.js

@@ -5,22 +5,25 @@
 angular.module('kibana.controllers', [])
 .controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
 
-  $scope.config = config;
-  $scope._ = _;
 
+  $scope.init = function() {
+    $scope.config = config;
+    $scope._ = _;
+    $scope.reset_row();
 
-  // The global dashboards object should be moved to an $http request for json
-  if (Modernizr.localstorage && 
-    !(_.isUndefined(localStorage['dashboard'])) &&
-    localStorage['dashboard'] !== ''
-  ) {
-    $scope.dashboards = JSON.parse(localStorage['dashboard']);
-  } else {
-    $scope.dashboards = dashboards;
+    // The global dashboards object should be moved to an $http request for json
+    if (Modernizr.localstorage && 
+      !(_.isUndefined(localStorage['dashboard'])) &&
+      localStorage['dashboard'] !== ''
+    ) {
+      $scope.dashboards = JSON.parse(localStorage['dashboard']);
+    } else {
+      $scope.dashboards = dashboards;
+    }
+
+    var ejs = $scope.ejs = ejsResource(config.elasticsearch);  
   }
 
-  var ejs = $scope.ejs = ejsResource(config.elasticsearch);  
-
   $scope.export = function() {
     var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"});
     saveAs(blob, $scope.dashboards.title+"-"+new Date().getTime());
@@ -44,9 +47,34 @@ angular.module('kibana.controllers', [])
     }  
   }
 
+  $scope.add_row = function(dashboards,row) {
+    $scope.dashboards.rows.push(row);
+  }
+
+  $scope.reset_row = function() {
+    $scope.row = {
+      title: '',
+      height: '150px',
+      editable: true,
+    };
+  };
+
+  $scope.init();
+
+
 })
 .controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
 
+  var _d = {
+    title: "Row",
+    height: "150px",
+    collapse: false,
+    editable: true,
+    panels: [],
+  }
+  _.defaults($scope.row,_d)
+
+
   $scope.init = function(){
     $scope.reset_panel();
   }

panels/sort/module.html

@@ -1,5 +1,5 @@
 <kibana-panel ng-controller='sort' style="white-space: nowrap;">
   <label><small>{{panel.label}}</small></label>
   <select style="width:85%" ng-model="panel.sort[0]" ng-change="set_sort()" ng-options="f for f in fields"></select>
-  <i ng-click="toggle_sort()" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
+  <i ng-click="toggle_sort()" class="pointer" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
 </kibana-panel>

partials/dashboard.html

@@ -5,9 +5,8 @@
     <div class="span12">
       <div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
         <div class="span12" style="min-height:5px;vertical-align:bottom">
-          <i class="pointer" ng-class="{'icon-minus': !row.collapse,'icon-plus': row.collapse}" ng-click="toggle_row(row)"></i>
-          <span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span> 
-          <i class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
+          <i ng-show="row.editable" class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
+          <span ng-click="toggle_row(row)" class="pointer"><i class="pointer" ng-class="{'icon-caret-down': !row.collapse,'icon-caret-right': row.collapse}"></i> <small>{{row.title}}</small></span> 
         </div>
       </div>
       <div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">

partials/dasheditor.html

@@ -0,0 +1,53 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>{{dashboards.title}} <small> editor</small></h3>
+</div>
+<div class="modal-body">
+  <h4>Dashboard Control</h4>
+  <div class="row-fluid">
+    <div class="span8">
+      <label class="small">Title</label><input type="text" class="input-large" ng-model='dashboards.title'></input>
+    </div>
+    <div class="span1"> 
+      <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="dashboards.editable" />
+    </div>
+  </div>
+  <div class="row-fluid">
+    <div class="span12">
+      <h4>Panels</h4>
+      <table class="table table-condensed table-striped">
+        <thead>
+          <th>Title</th>
+          <th>Delete</th>
+          <th>Move</th>
+        </thead>
+        <tr ng-repeat="row in dashboards.rows">
+          <td>{{row.title}}</td>
+          <td><i ng-click="dashboards.rows = _.without(dashboards.rows,row)" class="pointer icon-remove"></i></td>
+          <td><i ng-click="_.move(dashboards.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
+          <td><i ng-click="_.move(dashboards.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <h4>New row</h4>
+    <div class="row-fluid">
+      <div class="span8">      
+        <label class="small">Title</label>
+        <input type="text" class="input-large" ng-model='row.title'></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>
+    </div>
+    <button ng-click="add_row(dashboards,row); reset_row();" class="btn btn-primary">Create Row</button><br>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();">Close</button>
+</div>

partials/roweditor.html

@@ -12,7 +12,7 @@
       <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="panel.editable" ng-checked="row.editable" />
+      <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
     </div>
   </div>
   <div class="row-fluid">
@@ -28,9 +28,9 @@
         <tr ng-repeat="panel in row.panels">
           <td>{{panel.title}}</td>
           <td>{{panel.type}}</td>
-          <td><i ng-click="row.panels = _.without(row.panels,panel)" class="icon-remove"></i></td>
-          <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="icon-arrow-up"></i></td>
-          <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="icon-arrow-down"></i></td>
+          <td><i ng-click="row.panels = _.without(row.panels,panel)" class="pointer icon-remove"></i></td>
+          <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
+          <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
         </tr>
       </table>
     </div>