kibana-sinatra 0.0.5 → 0.0.6

data/lib/kibana/assets/app/directives/kibanaSimplePanel.js

@@ -32,10 +32,10 @@ function (angular, _) {
           function loadController(name) {
             elem.addClass("ng-cloak");
             // load the panels module file, then render it in the dom.
-
+            var nameAsPath = name.replace(".", "/");
             $scope.require([
               'jquery',
-              'text!panels/'+name+'/module.html'
+              'text!panels/'+nameAsPath+'/module.html'
             ], function ($, moduleTemplate) {
               var $module = $(moduleTemplate);
               // top level controllers
@@ -46,7 +46,7 @@ function (angular, _) {
               if ($controllers.length) {
                 $controllers.first().prepend(panelLoading);
                 $scope.require([
-                  'panels/'+name+'/module'
+                  'panels/'+nameAsPath+'/module'
                 ], function() {
                   loadModule($module);
                 });

data/lib/kibana/assets/app/panels/bettermap/module.js

@@ -1,13 +1,21 @@
-/*
-
-  ## Better maps
-
-  ### Parameters
-  * size :: How many results to show, more results = slower
-  * field :: field containing a 2 element array in the format [lon,lat]
-  * tooltip :: field to extract the tool tip value from
-  * spyable :: Show the 'eye' icon that reveals the last ES query
-*/
+/** @scratch /panels/5
+ * include::panels/bettermap.asciidoc[]
+ */
+
+/** @scratch /panels/bettermap/0
+ * == Bettermap
+ * Status: *Experimental*
+ *
+ * Bettermap is called bettermap for lack of a better name. Bettermap uses geographic coordinates to
+ * create clusters of markers on map and shade them orange, yellow and green depending on the
+ * density of the cluster.
+ *
+ * To drill down, click on a cluster. The map will be zoomed and the cluster broken into smaller cluster.
+ * When it no longer makes visual sense to cluster, individual markers will be displayed. Hover over
+ * a marker to see the tooltip value/
+ *
+ * IMPORTANT: bettermap requires an internet connection to download its map panels.
+ */
 define([
   'angular',
   'app',
@@ -51,21 +59,43 @@ function (angular, app, _, L, localRequire) {
 
     // Set and populate defaults
     var _d = {
+      /** @scratch /panels/bettermap/3
+       * === Parameters
+       *
+       * field:: The field that contains the coordinates, in geojson format. GeoJSON is
+       * +[longitude,latitude]+ in an array. This is different from most implementations, which use
+       * latitude, longitude.
+       */
+      field   : null,
+      /** @scratch /panels/bettermap/5
+       * size:: The number of documents to use when drawing the map
+       */
+      size    : 1000,
+      /** @scratch /panels/bettermap/5
+       * spyable:: Should the `inspect` icon be shown?
+       */
+      spyable : true,
+      /** @scratch /panels/bettermap/5
+       * tooltip:: Which field to use for the tooltip when hovering over a marker
+       */
+      tooltip : "_id",
+      /** @scratch /panels/bettermap/5
+       * ==== Queries
+       * queries object:: This object describes the queries to use on this panel.
+       * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
+       * queries.ids::: In +selected+ mode, which query ids are selected.
+       */
       queries     : {
         mode        : 'all',
         ids         : []
       },
-      size    : 1000,
-      spyable : true,
-      tooltip : "_id",
-      field   : null
     };
 
     _.defaults($scope.panel,_d);
-    $scope.requireContext = localRequire;
 
     // inorder to use relative paths in require calls, require needs a context to run. Without
     // setting this property the paths would be relative to the app not this context/file.
+    $scope.requireContext = localRequire;
 
     $scope.init = function() {
       $scope.$on('refresh',function(){
@@ -204,6 +234,7 @@ function (angular, app, _, L, localRequire) {
                 zoom: 10
               });
 
+              // This could be made configurable?
               L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/22677/256/{z}/{x}/{y}.png', {
                 maxZoom: 18,
                 minZoom: 2
@@ -213,14 +244,18 @@ function (angular, app, _, L, localRequire) {
               layerGroup.clearLayers();
             }
 
+            var markerList = [];
+
             _.each(scope.data, function(p) {
               if(!_.isUndefined(p.tooltip) && p.tooltip !== '') {
-                layerGroup.addLayer(L.marker(p.coordinates).bindLabel(p.tooltip));
+                markerList.push(L.marker(p.coordinates).bindLabel(p.tooltip));
               } else {
-                layerGroup.addLayer(L.marker(p.coordinates));
+                markerList.push(L.marker(p.coordinates));
               }
             });
 
+            layerGroup.addLayers(markerList);
+
             layerGroup.addTo(map);
 
             map.fitBounds(_.pluck(scope.data,'coordinates'));

data/lib/kibana/assets/app/panels/column/module.js

@@ -1,11 +1,16 @@
-/*
-
-  ## Column
-
-  ### Parameters
-  * panels :: an array of panel objects. All of their spans should be set to 12
-
-*/
+/** @scratch /panels/5
+ * include::panels/column.asciidoc[]
+ */
+
+/** @scratch /panels/column/0
+ * == Column
+ * Status: *Stable*
+ *
+ * A pseudo panel that lets you add other panels to be arranged in a column with defined heights.
+ * While the column panel is stable, it does have many limitations, including the inability to drag
+ * and drop panels within its borders. It may be removed in a future release.
+ *
+ */
 define([
   'angular',
   'app',
@@ -28,6 +33,11 @@ function (angular, app, _, config) {
 
     // Set and populate defaults
     var _d = {
+      /** @scratch /panels/column/3
+       * === Parameters
+       *
+       * panel:: An array of panel objects
+       */
       panels : []
     };
     _.defaults($scope.panel,_d);

data/lib/kibana/assets/app/panels/histogram/editor.html

@@ -16,6 +16,9 @@
       <label class="small">Scale</label>
         <input type="text" class="input-mini" ng-model="panel.scale">
     </div>
+    <div class="editor-option">
+      <label class="small">Seconds <tip>Normalize intervals to per-second</tip></label><input type="checkbox" ng-model="panel.scaleSeconds" ng-checked="panel.scaleSeconds">
+    </div>
     <div class="editor-option">
       <label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)">
     </div>

data/lib/kibana/assets/app/panels/histogram/module.html

@@ -51,7 +51,7 @@
         <span ng-show="panel.legend_counts"> ({{series.hits}})</span>
       </span>
     </span>
-    <span ng-show="panel.legend" class="small"><span ng-show="panel.derivative">change in </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
+    <span ng-show="panel.legend" class="small"><span ng-show="panel.derivative">change in </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong ng-hide="panel.scaleSeconds">{{panel.interval}}</strong><strong ng-show="panel.scaleSeconds">1s</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>
   <form class="form-inline bordered histogram-options" ng-show="options">
     <span>

data/lib/kibana/assets/app/panels/histogram/module.js

@@ -1,32 +1,16 @@
-/*
-
-  ## Histogram
-
-  ### Parameters
-  * auto_int :: Auto calculate data point interval?
-  * resolution ::  If auto_int is enables, shoot for this many data points, rounding to
-                    sane intervals
-  * interval :: Datapoint interval in elasticsearch date math format (eg 1d, 1w, 1y, 5y)
-  * fill :: Only applies to line charts. Level of area shading from 0-10
-  * linewidth ::  Only applies to line charts. How thick the line should be in pixels
-                  While the editor only exposes 0-10, this can be any numeric value.
-                  Set to 0 and you'll get something like a scatter plot
-  * timezone :: This isn't totally functional yet. Currently only supports browser and utc.
-                browser will adjust the x-axis labels to match the timezone of the user's
-                browser
-  * spyable ::  Dislay the 'eye' icon that show the last elasticsearch query
-  * zoomlinks :: Show the zoom links?
-  * bars :: Show bars in the chart
-  * stack :: Stack multiple queries. This generally a crappy way to represent things.
-             You probably should just use a line chart without stacking
-  * points :: Should circles at the data points on the chart
-  * lines :: Line chart? Sweet.
-  * legend :: Show the legend?
-  * x-axis :: Show x-axis labels and grid lines
-  * y-axis :: Show y-axis labels and grid lines
-  * interactive :: Allow drag to select time range
-
-*/
+/** @scratch /panels/5
+ * include::panels/histogram.asciidoc[]
+ */
+
+/** @scratch /panels/histogram/0
+ * == Histogram
+ * Status: *Stable*
+ *
+ * The histogram panel allow for the display of time charts. It includes several modes and tranformations
+ * to display event counts, mean, min, max and total of numeric fields, and derivatives of counter
+ * fields.
+ *
+ */
 define([
   'angular',
   'app',
@@ -35,11 +19,11 @@ define([
   'kbn',
   'moment',
   './timeSeries',
-
   'jquery.flot',
   'jquery.flot.events',
   'jquery.flot.selection',
   'jquery.flot.time',
+  'jquery.flot.byte',
   'jquery.flot.stack',
   'jquery.flot.stackpercent'
 ],
@@ -78,12 +62,66 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
     // Set and populate defaults
     var _d = {
+      /** @scratch /panels/histogram/3
+       * === Parameters
+       * ==== Axis options
+       * mode:: Value to use for the y-axis. For all modes other than count, +value_field+ must be
+       * defined. Possible values: count, mean, max, min, total.
+       */
       mode          : 'count',
+      /** @scratch /panels/histogram/3
+       * time_field:: x-axis field. This must be defined as a date type in Elasticsearch.
+       */
       time_field    : '@timestamp',
-      queries       : {
-        mode          : 'all',
-        ids           : []
+      /** @scratch /panels/histogram/3
+       * value_field:: y-axis field if +mode+ is set to mean, max, min or total. Must be numeric.
+       */
+      value_field   : null,
+      /** @scratch /panels/histogram/3
+       * x-axis:: Show the x-axis
+       */
+      'x-axis'      : true,
+      /** @scratch /panels/histogram/3
+       * y-axis:: Show the y-axis
+       */
+      'y-axis'      : true,
+      /** @scratch /panels/histogram/3
+       * scale:: Scale the y-axis by this factor
+       */
+      scale         : 1,
+      /** @scratch /panels/histogram/3
+       * y_format:: 'none','bytes','short '
+       */
+      y_format    : 'none',
+      /** @scratch /panels/histogram/5
+       * grid object:: Min and max y-axis values
+       * grid.min::: Minimum y-axis value
+       * grid.max::: Maximum y-axis value
+       */
+      grid          : {
+        max: null,
+        min: 0
+      },
+      /** @scratch /panels/histogram/5
+       * ==== Queries
+       * queries object:: This object describes the queries to use on this panel.
+       * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
+       * queries.ids::: In +selected+ mode, which query ids are selected.
+       */
+      queries     : {
+        mode        : 'all',
+        ids         : []
       },
+      /** @scratch /panels/histogram/3
+       * ==== Annotations
+       * annotate object:: A query can be specified, the results of which will be displayed as markers on
+       * the chart. For example, for noting code deploys.
+       * annotate.enable::: Should annotations, aka markers, be shown?
+       * annotate.query::: Lucene query_string syntax query to use for markers.
+       * annotate.size::: Max number of markers to show
+       * annotate.field::: Field from documents to show
+       * annotate.sort::: Sort array in format [field,order], For example [`@timestamp',`desc']
+       */
       annotate      : {
         enable      : false,
         query       : "*",
@@ -91,39 +129,106 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         field       : '_type',
         sort        : ['_score','desc']
       },
-      value_field   : null,
+      /** @scratch /panels/histogram/3
+       * ==== Interval options
+       * auto_int:: Automatically scale intervals?
+       */
       auto_int      : true,
+      /** @scratch /panels/histogram/3
+       * resolution:: If auto_int is true, shoot for this many bars.
+       */
       resolution    : 100,
+      /** @scratch /panels/histogram/3
+       * interval:: If auto_int is set to false, use this as the interval.
+       */
       interval      : '5m',
+      /** @scratch /panels/histogram/3
+       * interval:: Array of possible intervals in the *View* selector. Example [`auto',`1s',`5m',`3h']
+       */
       intervals     : ['auto','1s','1m','5m','10m','30m','1h','3h','12h','1d','1w','1y'],
+      /** @scratch /panels/histogram/3
+       * ==== Drawing options
+       * lines:: Show line chart
+       */
+      lines         : false,
+      /** @scratch /panels/histogram/3
+       * fill:: Area fill factor for line charts, 1-10
+       */
       fill          : 0,
+      /** @scratch /panels/histogram/3
+       * linewidth:: Weight of lines in pixels
+       */
       linewidth     : 3,
+      /** @scratch /panels/histogram/3
+       * points:: Show points on chart
+       */
+      points        : false,
+      /** @scratch /panels/histogram/3
+       * pointradius:: Size of points in pixels
+       */
       pointradius   : 5,
-      timezone      : 'browser', // browser, utc or a standard timezone
-      spyable       : true,
-      zoomlinks     : true,
+      /** @scratch /panels/histogram/3
+       * bars:: Show bars on chart
+       */
       bars          : true,
+      /** @scratch /panels/histogram/3
+       * stack:: Stack multiple series
+       */
       stack         : true,
-      points        : false,
-      lines         : false,
+      /** @scratch /panels/histogram/3
+       * spyable:: Show inspect icon
+       */
+      spyable       : true,
+      /** @scratch /panels/histogram/3
+       * zoomlinks:: Show `Zoom Out' link
+       */
+      zoomlinks     : true,
+      /** @scratch /panels/histogram/3
+       * options:: Show quick view options section
+       */
+      options       : true,
+      /** @scratch /panels/histogram/3
+       * legend:: Display the legond
+       */
       legend        : true,
+      /** @scratch /panels/histogram/3
+       * show_query:: If no alias is set, should the query be displayed?
+       */
       show_query    : true,
+      /** @scratch /panels/histogram/3
+       * interactive:: Enable click-and-drag to zoom functionality
+       */
+      interactive   : true,
+      /** @scratch /panels/histogram/3
+       * legend_counts:: Show counts in legend
+       */
       legend_counts : true,
-      'x-axis'      : true,
-      'y-axis'      : true,
+      /** @scratch /panels/histogram/3
+       * ==== Transformations
+       * timezone:: Correct for browser timezone?. Valid values: browser, utc
+       */
+      timezone      : 'browser', // browser or utc
+      /** @scratch /panels/histogram/3
+       * percentage:: Show the y-axis as a percentage of the axis total. Only makes sense for multiple
+       * queries
+       */
       percentage    : false,
+      /** @scratch /panels/histogram/3
+       * zerofill:: Improves the accuracy of line charts at a small performance cost.
+       */
       zerofill      : true,
-      interactive   : true,
-      options       : true,
+      /** @scratch /panels/histogram/3
+       * derivative:: Show each point on the x-axis as the change from the previous point
+       */
       derivative    : false,
-      scale         : 1,
+      /** @scratch /panels/histogram/3
+       * tooltip object::
+       * tooltip.value_type::: Individual or cumulative controls how tooltips are display on stacked charts
+       * tooltip.query_as_alias::: If no alias is set, should the query be displayed?
+       */
       tooltip       : {
         value_type: 'cumulative',
         query_as_alias: true
-      },
-      grid          : {
-        max: null,
-        min: 0
       }
     };
 
@@ -439,6 +544,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           });
         };
 
+        var scaleSeconds = function(series,interval) {
+          return _.map(series,function(p) {
+            return [p[0],p[1]/kbn.interval_to_seconds(interval)];
+          });
+        };
+
         var derivative = function(series) {
           return _.map(series, function(p,i) {
             var _v;
@@ -501,7 +612,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               yaxis: {
                 show: scope.panel['y-axis'],
                 min: scope.panel.grid.min,
-                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max,
+                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
               },
               xaxis: {
                 timezone: scope.panel.timezone,
@@ -521,6 +632,16 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               }
             };
 
+            if(scope.panel.y_format === 'bytes') {
+              options.yaxis.mode = "byte";
+            }
+
+            if(scope.panel.y_format === 'short') {
+              options.yaxis.tickFormatter = function(val) {
+                return kbn.shortFormat(val,0);
+              };
+            }
+
             if(scope.panel.annotate.enable) {
               options.events = {
                 levels: 1,
@@ -566,6 +687,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               if(scope.panel.scale !== 1) {
                 _d = scale(_d,scope.panel.scale);
               }
+              if(scope.panel.scaleSeconds) {
+                _d = scaleSeconds(_d,scope.panel.interval);
+              }
               scope.data[i].data = _d;
             }
 
@@ -606,6 +730,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
             value = (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') ?
               item.datapoint[1] - item.datapoint[2] :
               item.datapoint[1];
+            if(scope.panel.y_format === 'bytes') {
+              value = kbn.byteFormat(value,2);
+            }
+            if(scope.panel.y_format === 'short') {
+              value = kbn.shortFormat(value,2);
+            }
             timestamp = scope.panel.timezone === 'browser' ?
               moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
               moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss');