Moved map js files, added exporting and saving of dashboard, added timer service to manage global timer cancelling, switched to font awesome

index.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="common/css/normalize.min.css">
   <link rel="stylesheet" href="common/css/bootstrap.min.css">
   <link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
+  <link rel="stylesheet" href="common/css/font-awesome.min.css">
   <link rel="stylesheet" href="common/css/main.css">
   <link rel="stylesheet" href="common/css/elasticjs.css">
   <link rel="stylesheet" href="common/css/timepicker.css">
@@ -31,9 +32,12 @@
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container-fluid">
-        <span class="brand">{{dashboards.title}}</span>
         <span class="brand"><small><small>Kibana Preview</small></small></span>
+        <span class="brand">{{dashboards.title}}</span>
+        <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='pull-right' style="padding-top: 5px; padding-left: 10px"><input type="file" id="upload" upload /></div>
+        
       </div>
     </div>
   </div>

js/app.js

@@ -30,6 +30,7 @@ var labjs = $LAB
   .script("common/lib/date.js")
   .script("common/lib/datepicker.js")
   .script("common/lib/shared.js")
+  .script("common/lib/filesaver.js")
   .script("dashboards.js")
   .script("js/services.js")
   .script("js/controllers.js")

js/controllers.js

@@ -3,10 +3,16 @@
 'use strict';
 
 angular.module('kibana.controllers', [])
-.controller('DashCtrl', function($scope, $rootScope, ejsResource) {
+.controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
 
   $scope.config = config;
-  $scope.dashboards = dashboards
+
+
+  if (Modernizr.localstorage && !(_.isUndefined(localStorage['dashboard']))) {
+    $scope.dashboards = JSON.parse(localStorage['dashboard']);
+  } else {
+    $scope.dashboards = dashboards;
+  }
 
   var ejs = $scope.ejs = ejsResource(config.elasticsearch);  
 
@@ -15,6 +21,20 @@ angular.module('kibana.controllers', [])
     row.collapse = row.collapse ? false : true;
   }
 
+  $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());
+  }
+
+  $scope.default = function() {
+    if (Modernizr.localstorage) {
+      localStorage['dashboard'] = angular.toJson($scope.dashboards);
+      alert($scope.dashboards.title + " has been set as your default dashboard")
+    } else {
+      alert("Sorry, your browser is too old for this functionality");
+    }  
+  }
+
 });
 
 

js/directives.js

@@ -45,7 +45,7 @@ angular.module('kibana.directives', [])
     }
   };
 })
-.directive('upload', function(){
+.directive('upload', function(timer){
   return {
     restrict: 'A',
     link: function(scope, elem, attrs) {
@@ -60,6 +60,7 @@ angular.module('kibana.directives', [])
             return function(e) {
               // Render thumbnail.
               scope.dashboards = JSON.parse(e.target.result)
+              timer.cancel_all();
               scope.$apply();
             };
           })(f);

js/panels.js

@@ -2,73 +2,4 @@
 /*global angular:true */
 'use strict';
 
-/* NOTE:  This is very much a preview, many things will change. In fact, this
-          file will probably go away
-*/
-
-/* 
-  METAPARAMETERS 
-
-  If you're implementing a panel, these are used by default. You need not handle
-  them in your directive.
-
-  span:   The grid is made up of N rows, however there are only 12 columns. Span
-          is a number, 1-12
-  type:   This is the name of your directive.  
-*/
-
-/*
-  Histogram
-
-  Draw a histogram of a single query
-
-  NOTE: This will likely be renamed or get a setting that allows for non-time
-  based keys. It may also be updated to allow multiple stacked or unstacked
-  queries. 
-
-  query:    query to execute
-  interval: Bucket size in the standard Nunit (eg 1d, 5m, 30s) Attempts to auto
-            scale itself based on timespan
-  color:    line/bar color.
-  show:     array of what to show, (eg ['bars','lines','points']) 
-*/
-
-/* 
-  Piequery  
-
-  Use a query facets to compare counts of for different queries, then show them
-  on a pie chart
-
-  queries:    An array of queries
-  donut:      Make a hole in the middle? 
-  tilt:       Tilt the pie in a 3dish way
-  legend:     Show it or not?
-  colors:     An array of colors to use for slices. These map 1-to-1 with the #
-              of queries in your queries array
-*/
-
-/* Pieterms
-
-  Use a terms facet to calculate the most popular terms for a field
-
-  query:    Query to perform the facet on
-  size:     Limit to this many terms
-  exclude:  An array of terms to exclude from the results
-  donut:      Make a hole in the middle? 
-  tilt:       Tilt the pie in a 3dish way
-  legend:     Show it or not?
-*/
-
-/* Stackedquery
-
-  Use date histograms to assemble stacked bar or line charts representing 
-  multple queries over time
-
-  queries:    An array of queries
-  interval:   Bucket size in the standard Nunit (eg 1d, 5m, 30s) Attempts to auto
-              scale itself based on timespan
-  colors:     An array of colors to use for slices. These map 1-to-1 with the #
-              of queries in your queries array
-  show:       array of what to show, (eg ['bars','lines','points']) 
-*/
 angular.module('kibana.panels', [])

js/services.js

@@ -36,4 +36,28 @@ angular.module('kibana.services', [])
     });
   }
 
+})
+.service('timer', function($timeout) {
+  // This service really just tracks a list of $timeout promises to give us a
+  // method for cancelling them all when we need to
+
+  var timers = [];
+
+  this.register = function(promise) {
+    timers.push(promise);
+    return promise;
+  }
+
+  this.cancel = function(promise) {
+    timers = _.without(timers,promise)
+    $timeout.cancel(promise)
+  }
+
+  this.cancel_all = function() {
+    _.each(timers, function(t){
+      $timeout.cancel(t);
+    });
+    timers = new Array();
+  }
+
 });

panels/map/module.js

@@ -85,8 +85,8 @@ angular.module('kibana.map', [])
 
       function render_panel(scope,elem,attrs) {
         // Using LABjs, wait until all scripts are loaded before rendering panel
-        var scripts = $LAB.script("common/lib/panels/jquery.jvectormap.min.js")
-          .script("common/lib/panels/map."+scope.panel.map+".js")
+        var scripts = $LAB.script("panels/map/lib/jquery.jvectormap.min.js")
+          .script("panels/map/lib/map."+scope.panel.map+".js")
                     
         // Populate element. Note that jvectormap appends, does not replace.
         scripts.wait(function(){

panels/pie/module.js

@@ -1,6 +1,3 @@
-labjs = labjs.script("common/lib/panels/jquery.flot.js")
-  .script("common/lib/panels/jquery.flot.pie.js")
-
 angular.module('kibana.pie', [])
 .controller('pie', function($scope, eventBus) {
 
@@ -163,6 +160,10 @@ angular.module('kibana.pie', [])
 
       // Function for rendering panel
       function render_panel(scope,elem,attrs) {
+
+        var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
+                        .script("common/lib/panels/jquery.flot.pie.js")
+
         var pie = {
           series: {
             pie: {
@@ -192,7 +193,9 @@ angular.module('kibana.pie', [])
 
         // Populate element
         if(elem.is(":visible")){
-          $.plot(elem, scope.data, pie);
+          scripts.wait(function(){
+            $.plot(elem, scope.data, pie);
+          });
         }
         
         function piett(x, y, contents) {

panels/stringquery/module.html

@@ -1,5 +1,5 @@
 <kibana-panel ng-controller='stringquery'>
-  <form class="input-append" style="margin-bottom:0px; white-space:nowrap;">
+  <form class="input-append" style="margin-bottom:0px; width:100%; white-space:nowrap;">
     <label><small>{{panel.label}}</small></label>
     <input type="text" ng-model="panel.query" style="width:90%">
     <button type="submit" class="btn" ng-click="send_query(panel.query)"><i class="icon-search"></i></button>

panels/timepicker/module.html

@@ -18,7 +18,7 @@
       <div class="span1">
         <form class="nomargin">
           <label><small><br></small></label>
-          <button class="btn" ng-click="time_apply()" ><i class="icon-check"></i></button>
+          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
         </form>
       </div>
     </div>
@@ -33,7 +33,7 @@
       <div class="span1" style="margin-left:10px">
         <form class="nomargin">
           <label><small><br></small></label>
-          <button class="btn" ng-click="time_apply()" ><i class="icon-check"></i></button>
+          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
         </form>
       </div>
     </div>

panels/timepicker/module.js

@@ -24,7 +24,7 @@ a pattern
 
 */
 angular.module('kibana.timepicker', [])
-.controller('timepicker', function($scope, eventBus, $timeout, $http) {
+.controller('timepicker', function($scope, eventBus, $timeout, timer, $http) {
 
   var _id = _.uniqueId();
 
@@ -88,13 +88,13 @@ angular.module('kibana.timepicker', [])
         if(_.isNumber($scope.panel.refresh.interval)) {
           if($scope.panel.refresh.interval < $scope.panel.refresh.min) {
             $scope.panel.refresh.interval = $scope.panel.refresh.min        
-            $timeout.cancel($scope.panel.refresh.timer)
+            timer.cancel($scope.refresh_timer)
             return;
           }
-          $timeout.cancel($scope.panel.refresh.timer)
+          timer.cancel($scope.refresh_timer)
           $scope.refresh()
         } else {
-          $timeout.cancel($scope.panel.refresh.timer)
+          timer.cancel($scope.refresh_timer)
         }
       });
     });
@@ -103,12 +103,13 @@ angular.module('kibana.timepicker', [])
   $scope.refresh = function() {
     if ($scope.panel.refresh.enable) {
       $scope.time_apply();
-      $scope.panel.refresh.timer = $timeout(
+      timer.cancel($scope.refresh_timer)
+      $scope.refresh_timer = timer.register($timeout(
         $scope.refresh,
         $scope.panel.refresh.interval*1000
-      );
+      ));
     } else {
-      $timeout.cancel($scope.panel.refresh.timer)
+      timer.cancel($scope.refresh_timer)
     }
   }
 

panels/timepicker/refreshctrl.html

@@ -1,5 +1,5 @@
-<form name="refreshPopover" class='form-inline' style="margin:0px">
-    <label><small>Interval (seconds)</small></label>
-    <input type="number" class="input-mini" ng-model="refresh_interval"> 
-    <button type="button" class="btn" ng-click="panel.refresh.interval=refresh_interval;dismiss()"><i class="icon-check"></i></button>
+<form name="refreshPopover" class='form-inline input-append' style="margin:0px">
+    <label><small>Interval (seconds)</small></label><br>
+    <input type="number" class="input-mini" ng-model="refresh_interval">
+    <button type="button" class="btn" ng-click="panel.refresh.interval=refresh_interval;dismiss()"><i class="icon-ok"></i></button>
 </form>