Moved map js files, added exporting and saving of dashboard, added timer service…

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

common/lib/filesaver.js

+var saveAs=saveAs||(function(h){"use strict";var r=h.document,l=function(){return h.URL||h.webkitURL||h},e=h.URL||h.webkitURL||h,n=r.createElementNS("http://www.w3.org/1999/xhtml","a"),g="download" in n,j=function(t){var s=r.createEvent("MouseEvents");s.initMouseEvent("click",true,false,h,0,0,0,0,0,false,false,false,false,0,null);return t.dispatchEvent(s)},o=h.webkitRequestFileSystem,p=h.requestFileSystem||o||h.mozRequestFileSystem,m=function(s){(h.setImmediate||h.setTimeout)(function(){throw s},0)},c="application/octet-stream",k=0,b=[],i=function(){var t=b.length;while(t--){var s=b[t];if(typeof s==="string"){e.revokeObjectURL(s)}else{s.remove()}}b.length=0},q=function(t,s,w){s=[].concat(s);var v=s.length;while(v--){var x=t["on"+s[v]];if(typeof x==="function"){try{x.call(t,w||t)}catch(u){m(u)}}}},f=function(t,u){var v=this,B=t.type,E=false,x,w,s=function(){var F=l().createObjectURL(t);b.push(F);return F},A=function(){q(v,"writestart progress write writeend".split(" "))},D=function(){if(E||!x){x=s(t)}w.location.href=x;v.readyState=v.DONE;A()},z=function(F){return function(){if(v.readyState!==v.DONE){return F.apply(this,arguments)}}},y={create:true,exclusive:false},C;v.readyState=v.INIT;if(!u){u="download"}if(g){x=s(t);n.href=x;n.download=u;if(j(n)){v.readyState=v.DONE;A();return}}if(h.chrome&&B&&B!==c){C=t.slice||t.webkitSlice;t=C.call(t,0,t.size,c);E=true}if(o&&u!=="download"){u+=".download"}if(B===c||o){w=h}else{w=h.open()}if(!p){D();return}k+=t.size;p(h.TEMPORARY,k,z(function(F){F.root.getDirectory("saved",y,z(function(G){var H=function(){G.getFile(u,y,z(function(I){I.createWriter(z(function(J){J.onwriteend=function(K){w.location.href=I.toURL();b.push(I);v.readyState=v.DONE;q(v,"writeend",K)};J.onerror=function(){var K=J.error;if(K.code!==K.ABORT_ERR){D()}};"writestart progress write abort".split(" ").forEach(function(K){J["on"+K]=v["on"+K]});J.write(t);v.abort=function(){J.abort();v.readyState=v.DONE};v.readyState=v.WRITING}),D)}),D)};G.getFile(u,{create:false},z(function(I){I.remove();H()}),z(function(I){if(I.code===I.NOT_FOUND_ERR){H()}else{D()}}))}),D)}),D)},d=f.prototype,a=function(s,t){return new f(s,t)};d.abort=function(){var s=this;s.readyState=s.DONE;q(s,"abort")};d.readyState=d.INIT=0;d.WRITING=1;d.DONE=2;d.error=d.onwritestart=d.onprogress=d.onwrite=d.onabort=d.onerror=d.onwriteend=null;h.addEventListener("unload",i,false);return a}(self));
\ No newline at end of file

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

-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

 <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

-<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>
\ No newline at end of file