Merge pull request #258 from rashidkpc/master

Table optimization, tabs in editors

common/css/bootstrap.dark.min.css

@@ -3172,9 +3172,9 @@ table th[class*="span"],
   font-size: 20px;
   font-weight: bold;
   line-height: 21px;
-  color: #000000;
+  color: #FFF;
   text-shadow: 0 1px 0 #ffffff;
-  opacity: 0.2;
+  opacity: 0.3;
   filter: alpha(opacity=20);
 }
 

common/css/main.css

@@ -6,6 +6,13 @@
   color: #000;
 }
 
+.editor-title {
+  margin-right: 10px;
+  font-size: 1.7em;
+  font-weight: bold;
+  text-transform:capitalize;
+}
+
 .spy {
   position:absolute;
   right:0px;

js/controllers.js

@@ -13,6 +13,11 @@ angular.module('kibana.controllers', [])
     last: null
   };
 
+  // For
+  $scope.editor = {
+    index: 0
+  };
+
   $scope.init = function() {
 
     $scope.config = config;

js/filters.js

@@ -20,4 +20,10 @@ angular.module('kibana.filters', [])
     });
     return ret;
   };
+}).filter('slice', function() {
+  return function(arr, start, end) {
+    if(!_.isUndefined(arr)) {
+      return arr.slice(start, end);
+    }
+  };
 });

panels/table/module.html

@@ -34,7 +34,7 @@
         </th>
       
       </thead>
-      <tbody ng-repeat="row in data.slice(panel.offset,panel.offset+panel.size)" ng-class-odd="'odd'">
+      <tbody ng-repeat="row in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
         <tr ng-click="toggle_details(row)" class="pointer">
           <td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(row.highlight[field]||row._source[field]) | highlight"></td>
         </tr>

partials/dasheditor.html

@@ -1,18 +1,21 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-  <h3>{{dashboard.current.title}} <small> editor</small></h3>
-</div>
 <div class="modal-body">
-  <h4>Dashboard Control</h4>
-  <div class="row-fluid">
-    <div class="span8">
+  <div class="pull-right editor-title">Dashboard settings</div>
+
+  <div ng-model="editor.index" bs-tabs>
+    <div ng-repeat="tab in ['General','Index','Rows']" data-title="{{tab}}">
+    </div>
+  </div>
+
+
+  <div class="row-fluid" ng-show="editor.index == 0">
+    <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>
-  <div class="row-fluid">    
+  <div class="row-fluid" ng-show="editor.index == 1">    
     <h4>Index Settings</h4>
     <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid"> 
        <div class="span12">
@@ -46,9 +49,8 @@
       </div>
     </div>
   </div>
-  <hr/>
-  <h4>Rows</h4>
-  <div class="row-fluid">
+  <div class="row-fluid" ng-show="editor.index == 2">
+    <h4>Rows</h4>
     <form>
       <div class="span5">      
         <label class="small">Title</label>
@@ -68,7 +70,7 @@
       </div>
     </form>
   </div>
-  <div class="row-fluid">
+  <div class="row-fluid" ng-show="editor.index == 2">
     <div class="span12">
       <table class="table table-condensed table-striped">
         <thead>
@@ -87,5 +89,5 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();dashboard.refresh()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
 </div>

partials/paneleditor.html

@@ -1,18 +1,22 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-  <h3>{{panel.title}} Editor</h3>
-</div>
-<div class="modal-body">
-
-  <h4>General <small> panel settings</small></h4>
-  <div ng-include src="'partials/panelgeneral.html'"></div>
+<div class="modal-body" >
+  <div class="pull-right editor-title">{{panel.type}} settings</div>
 
+  <div ng-model="editor.index" bs-tabs>
+    <div ng-repeat="tab in ['General','Panel']" data-title="{{tab}}">
+    </div>
+  </div>
+  <div ng-show="editor.index == 0">
+    <h4>{{panel.title}} General <small> panel settings</small></h4>
+    <div ng-include src="'partials/panelgeneral.html'"></div>
+  </div>
   
+  <div ng-show="editor.index == 1">
   <h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings. <strong ng-show="!_.isUndefined(panel.status)">({{panel.status}})</strong></small></h4>
   <div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div>
-  
+  </div>
+
 </div>
 <div class="modal-footer">
   <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
-  <button type="button" class="btn btn-success" ng-click="close_edit();dismiss()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="editor.index=0;close_edit();dismiss()">Close</button>
 </div>

partials/querySelect.html

@@ -0,0 +1,14 @@
+  <style>
+    .querySelect .query {
+      margin-right: 5px;
+    }
+  </style>
+  <h4>Queries</h4>
+  <div class="span2" style="margin-left:0px">
+    <select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','selected']"></select>
+  </div>
+  <div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
+    <span ng-repeat="id in querySrv.ids" class="query badge">
+      <i ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" ng-class="{'icon-check': _.contains(panel.queries.ids,id),'icon-check-empty': !_.contains(panel.queries.ids,id)}"></i> <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i><span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
+    </span>
+  </div>

partials/roweditor.html

@@ -1,10 +1,12 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-  <h3>{{row.title}} <small>row editor</small></h3>
-</div>
 <div class="modal-body">
-  <h4>Row Control</h4>
-  <div class="row-fluid">
+  <div class="pull-right editor-title">Row settings</div>
+
+  <div ng-model="editor.index" bs-tabs>
+    <div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
+    </div>
+  </div>
+
+  <div class="row-fluid" ng-show="editor.index == 0">
     <div class="span4">
       <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
     </div>
@@ -18,7 +20,7 @@
       <label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" />
     </div>
   </div>
-  <div class="row-fluid">
+  <div class="row-fluid" ng-show="editor.index == 1">
     <h4>New Panel</h4>
     <form class="input-append">
     <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
@@ -30,7 +32,7 @@
       <div add-panel="{{panel.type}}"></div>
     </div>
   </div>
-  <div class="row-fluid">
+  <div class="row-fluid" ng-show="editor.index == 1">
     <div class="span12">
       <h4>Panels</h4>
       <table class="table table-condensed table-striped">