Added loader animation, framework for adjustable interval time stamped indices

common/css/main.css

@@ -24,6 +24,11 @@
   z-index: 1000;
 }
 
+.panel-loading {
+  position:absolute;
+  z-index: 800;
+}
+
 .panel i.editlink {
   position: absolute;
   right: 5px;

config.js

@@ -13,7 +13,7 @@ If you need to configure the default dashboard, please see dashboard.js
 */
 var config = new Settings(
 {
-    elasticsearch:  'http://localhost:9200',
+    elasticsearch:  'http://demo.logstash.net:9200',
     timeformat:     'mm/dd HH:MM:ss',
     modules:        ['histogram','map','pie','table','stringquery','sort',
                     'timepicker','text','fields','hits','dashcontrol'], 

js/controllers.js

@@ -100,7 +100,7 @@ angular.module('kibana.controllers', [])
     row.collapse = row.collapse ? false : true;
     if (!row.collapse) {
       $timeout(function() {
-        $scope.$broadcast('render')
+        $scope.send_render();
       });
     }
   }
@@ -115,6 +115,8 @@ angular.module('kibana.controllers', [])
 
   $scope.reset_panel = function() {
     $scope.panel = {
+      loading: false,
+      error: false,
       span: 3,
       editable: true,
       group: ['default'],

js/directives.js

@@ -7,7 +7,7 @@ angular.module('kibana.directives', [])
   return {
     restrict: 'E',
     link: function(scope, elem, attrs) {
-      var template = '<i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"></i>'+
+      var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true"> <i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"></i>'+
                     '<h4>{{panel.title}}</h4>';
       elem.prepend($compile(angular.element(template))(scope));
     }

panels/fields/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="hits">    
+  <div class="row-fluid">    
     <div class="span3"><h6>Popup Position</h6> 
       <select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span>
     </div>

panels/fields/module.js

@@ -52,7 +52,6 @@ angular.module('kibana.fields', [])
       $scope.active = _.without($scope.active,field)
     else
       $scope.active.push(field)
-    
     eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active)
   }
 

panels/histogram/module.js

@@ -50,6 +50,7 @@ angular.module('kibana.histogram', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
+    $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices($scope.panel.index);
     
     // Build the question part of the query
@@ -78,6 +79,7 @@ angular.module('kibana.histogram', [])
 
     // Populate scope when we have results
     results.then(function(results) {
+      $scope.panel.loading = false;
       $scope.hits = results.hits.total;
       $scope.data = [];
       _.each(results.facets, function(v, k) {

panels/hits/module.js

@@ -24,6 +24,7 @@ angular.module('kibana.hits', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
+    $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     var results = request
@@ -39,6 +40,7 @@ angular.module('kibana.hits', [])
 
     // Populate scope when we have results
     results.then(function(results) {
+      $scope.panel.loading = false;
       if(_.isUndefined(results)) {
         $scope.panel.error = 'Your query was unsuccessful';
         return;

panels/map/module.js

@@ -27,6 +27,7 @@ angular.module('kibana.map', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
+    $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     // Then the insert into facet and make the request
@@ -46,6 +47,7 @@ angular.module('kibana.map', [])
 
     // Populate scope when we have results
     results.then(function(results) {
+      $scope.panel.loading = false;
       $scope.hits = results.hits.total;
       $scope.data = {};
       _.each(results.facets.map.terms, function(v) {

panels/pie/module.js

@@ -73,6 +73,7 @@ angular.module('kibana.pie', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
+    $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     // If we have an array, use query facet
@@ -101,6 +102,7 @@ angular.module('kibana.pie', [])
 
       // Populate scope when we have results
       results.then(function(results) {
+        $scope.panel.loading = false;
         $scope.hits = results.hits.total;
         $scope.data = [];
         _.each(results.facets, function(v, k) {
@@ -133,6 +135,7 @@ angular.module('kibana.pie', [])
 
       // Populate scope when we have results
       results.then(function(results) {
+        $scope.panel.loading = false;
         $scope.hits = results.hits.total;
         $scope.data = [];
         var k = 0;
@@ -159,6 +162,7 @@ angular.module('kibana.pie', [])
         .size(0)
         .doSearch();
       results.then(function(results) {
+        $scope.panel.loading = false;
         var complete  = results.hits.total;
         var remaining = $scope.panel.query.goal - complete;
         $scope.data = [

panels/table/module.js

@@ -76,7 +76,8 @@ angular.module('kibana.table', [])
     // Make sure we have everything for the request to complete
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
-
+    
+    $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     var results = request
@@ -94,6 +95,8 @@ angular.module('kibana.table', [])
 
     // Populate scope when we have results
     results.then(function(results) {
+      $scope.panel.loading = false;
+
       if(_.isUndefined(results)) {
         $scope.panel.error = 'Your query was unsuccessful';
         return;

panels/timepicker/module.js

@@ -34,6 +34,8 @@ angular.module('kibana.timepicker', [])
     timefield     : '@timestamp',
     index         : '"logstash-"yyyy.mm.dd',
     defaultindex  : "NOINDEX",
+    index_interval: "day",
+    timed_indices : true,
     group         : "default",
     refresh       : {
       enable  : false, 
@@ -178,11 +180,15 @@ angular.module('kibana.timepicker', [])
 
     // Get indices for the time period, then broadcast time range and index list
     // in a single object. Not sure if I like this.
-    indices($scope.time.from,$scope.time.to).then(function (p) {
-      $scope.time.index = p.join();
-      // Broadcast time
+    if($scope.panel.timed_indices) {
+      indices($scope.time.from,$scope.time.to).then(function (p) {
+        $scope.time.index = p.join();
+        eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
+      });
+    } else {
+      $scope.time.index = $scope.panel.index;
       eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
-    });
+    }
 
     // Update panel's string representation of the time object
     $scope.panel.time = { 
@@ -196,7 +202,7 @@ angular.module('kibana.timepicker', [])
   // pattern that exist in a given range
   function indices(from,to) {
     var possible = [];
-    _.each(date_range(from,to.add_days(1)),function(d){
+    _.each(expand_range(fake_utc(from),fake_utc(to),$scope.panel.index_interval),function(d){
       possible.push(d.format($scope.panel.index));
     });
 
@@ -226,6 +232,46 @@ angular.module('kibana.timepicker', [])
     });
   }
 
+  // this is stupid, but there is otherwise no good way to ensure that when
+  // I extract the date from an object that I'm get the UTC date. Stupid js.
+  // I die a little inside every time I call this function.
+  function fake_utc(date) {
+    return new Date(date.getTime() + date.getTimezoneOffset() * 60000);
+  }
+
+  // Create an array of date objects by a given interval
+  function expand_range(start, end, interval) {
+    if(_.contains(['hour','day','week','month','year'],interval)) {
+      var range;
+      start = start.clone();
+      range = [];
+      while (start.isBefore(end)) {
+        range.push(start.clone());
+        switch (interval) {
+        case 'hour':
+          start.addHours(1)
+          break
+        case 'day':
+          start.addDays(1)
+          break
+        case 'week':
+          start.addWeeks(1)
+          break
+        case 'month':
+          start.addMonths(1)
+          break
+        case 'year':
+          start.addYears(1)
+          break
+        }
+      }
+      range.push(end.clone());
+      return range;
+    } else {
+      return false;
+    }
+  }
+
   // Great, every function is ready, init.
   $scope.init();