Updated default dashboard, added filtering panel

common/lib/shared.js

@@ -284,7 +284,7 @@ function flatten_json(object,root,array) {
         } else if(obj.length === 1 && _.isNumber(obj[0])) {
           array[rootname] = parseFloat(obj[0]);
         } else {
-          array[rootname] = typeof obj === 'undefined' ? null : obj.join(',');
+          array[rootname] = typeof obj === 'undefined' ? null : obj;
         }
       } else {
         flatten_json(obj,rootname,array)

config.js

@@ -20,7 +20,7 @@ var config = new Settings(
   elasticsearch:    "http://"+window.location.hostname+":9200",   
   // elasticsearch: 'http://localhost:9200',
   kibana_index:     "kibana-int", 
-  modules:          ['histogram','map','pie','table',
+  modules:          ['histogram','map','pie','table','filtering',
                     'timepicker','text','fields','hits','dashcontrol',
                     'column','derivequeries','trends','bettermap','query'],
   }

dashboards/default → dashboards/default.json

@@ -1,6 +1,38 @@
 {
   "title": "Logstash Search",
-  "services": {},
+  "services": {
+    "query": {
+      "idQueue": [],
+      "list": {
+        "0": {
+          "query": "*",
+          "alias": "",
+          "color": "#7EB26D",
+          "id": 0
+        }
+      },
+      "ids": [
+        0
+      ]
+    },
+    "filter": {
+      "idQueue": [],
+      "list": {
+        "0": {
+          "from": "2013-07-15T03:54:27.219Z",
+          "to": "2013-07-15T04:09:27.219Z",
+          "field": "@timestamp",
+          "type": "time",
+          "mandate": "must",
+          "alias": "",
+          "id": 0
+        }
+      },
+      "ids": [
+        0
+      ]
+    }
+  },
   "rows": [
     {
       "title": "Options",
@@ -11,13 +43,14 @@
       "panels": [
         {
           "loading": false,
-          "error": false,
+          "error": "",
           "span": 5,
           "editable": true,
           "group": [
             "default"
           ],
           "type": "timepicker",
+          "status": "Stable",
           "mode": "relative",
           "time_options": [
             "5m",
@@ -27,18 +60,18 @@
             "12h",
             "24h",
             "2d",
-            "5d"
+            "7d",
+            "30d"
           ],
-          "timespan": "6h",
+          "timespan": "15m",
           "timefield": "@timestamp",
-          "index": "[logstash-]YYYY.MM.DD",
-          "defaultindex": "NOINDEX",
-          "index_interval": "day",
+          "timeformat": "",
           "refresh": {
             "enable": false,
             "interval": 30,
             "min": 3
-          }
+          },
+          "filter_id": 0
         },
         {
           "loading": false,
@@ -49,6 +82,7 @@
             "default"
           ],
           "type": "dashcontrol",
+          "status": "Stable",
           "save": {
             "gist": false,
             "elasticsearch": true,
@@ -62,7 +96,6 @@
           },
           "hide_control": false,
           "elasticsearch_size": 20,
-          "elasticsearch_saveto": "kibana-int",
           "temp": true,
           "temp_ttl": "30d"
         }
@@ -83,16 +116,12 @@
           "group": [
             "default"
           ],
-          "type": "stringquery",
+          "type": "query",
+          "status": "Experimental",
           "label": "Search",
           "query": "*",
-          "size": 100,
-          "sort": [
-            "_score",
-            "desc"
-          ],
-          "multi": false,
-          "multi_arrange": "horizontal"
+          "history": [],
+          "remember": 10
         }
       ]
     },
@@ -105,61 +134,77 @@
       "panels": [
         {
           "loading": false,
-          "span": 12,
+          "span": 9,
           "editable": true,
           "group": [
             "default"
           ],
           "type": "histogram",
+          "status": "Stable",
           "query": [
             {
               "query": "*",
-              "label": "*"
+              "label": "Query"
             }
           ],
-          "interval": "5m",
-          "show": [
-            "points",
-            "lines",
-            "legend",
-            "x-axis",
-            "y-axis"
-          ],
+          "mode": "count",
+          "time_field": "@timestamp",
+          "value_field": null,
+          "auto_int": true,
+          "resolution": 100,
+          "interval": "10s",
+          "fill": 3,
+          "linewidth": 3,
           "timezone": "browser",
           "spyable": true,
           "zoomlinks": true,
-          "fill": 0,
-          "linewidth": 2,
           "bars": true,
           "stack": true,
           "points": false,
           "lines": false,
           "legend": true,
           "x-axis": true,
-          "y-axis": true
+          "y-axis": true,
+          "percentage": false,
+          "interactive": true
         },
         {
           "loading": false,
-          "span": 0,
+          "error": false,
+          "span": 3,
           "editable": true,
           "group": [
             "default"
           ],
-          "type": "hits",
+          "type": "filtering",
+          "status": "Stable",
           "query": [
             {
               "query": "*",
-              "label": "*"
+              "label": "Query"
             }
           ],
-          "style": {
-            "font-size": "9pt"
-          },
-          "aggregate": false,
-          "arrangement": "horizontal",
-          "chart": true,
-          "counters": true,
-          "count_pos": "above"
+          "mode": "count",
+          "time_field": "@timestamp",
+          "value_field": null,
+          "auto_int": true,
+          "resolution": 100,
+          "interval": "5m",
+          "fill": 3,
+          "linewidth": 3,
+          "timezone": "browser",
+          "spyable": true,
+          "zoomlinks": true,
+          "bars": true,
+          "stack": true,
+          "points": false,
+          "lines": false,
+          "legend": true,
+          "x-axis": true,
+          "y-axis": true,
+          "percentage": false,
+          "interactive": true,
+          "title": "Filters"
         }
       ]
     },
@@ -179,6 +224,7 @@
             "default"
           ],
           "type": "fields",
+          "status": "Beta",
           "style": {},
           "arrange": "vertical",
           "micropanel_position": "right",
@@ -197,21 +243,10 @@
             "default"
           ],
           "type": "table",
+          "status": "Stable",
           "query": "*",
-          "interval": "1y",
-          "show": [
-            "bars",
-            "y-axis",
-            "x-axis",
-            "legend"
-          ],
-          "fill": 3,
-          "overflow": "min-height",
-          "timezone": "browser",
-          "spyable": true,
-          "zoomlinks": true,
-          "size": 50,
-          "pages": 10,
+          "size": 100,
+          "pages": 5,
           "offset": 0,
           "sort": [
             "@timestamp",
@@ -220,14 +255,24 @@
           "style": {
             "font-size": "9pt"
           },
+          "overflow": "min-height",
           "fields": [
             "@timestamp",
             "@message"
           ],
-          "sortable": true
+          "highlight": [],
+          "sortable": true,
+          "header": true,
+          "paging": true,
+          "spyable": true
         }
       ]
     }
   ],
-  "editable": true
-}
+  "editable": true,
+  "index": {
+    "interval": "day",
+    "pattern": "[logstash-]YYYY.MM.DD",
+    "default": "MISSING_INDEX"
+  }
+}

index.html

@@ -37,7 +37,7 @@
     <div class="navbar navbar-static-top">
       <div class="navbar-inner">
         <div class="container-fluid">
-          <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 2</small></small></p>
+          <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone pre-3</small></small></p>
           <span class="brand">{{dashboard.current.title}}</span>
           <div class="brand"><i class='icon-cog pointer' ng-show='dashboard.current.editable' bs-modal="'partials/dasheditor.html'"></i></div>
         </div>

js/services.js

@@ -361,7 +361,6 @@ angular.module('kibana.services', [])
         .to(filter.to)
       break;
     case 'querystring':
-      console.log(filter.query)
       return ejs.QueryFilter(ejs.QueryStringQuery(filter.query))
       break;
     case 'terms':
@@ -499,7 +498,7 @@ angular.module('kibana.services', [])
         self.dash_load(dashboard)
       // No? Ok, grab default.json, its all we have now
       } else {
-        self.file_load('default')
+        self.file_load('default.json')
       } 
     }
   }
@@ -524,6 +523,7 @@ angular.module('kibana.services', [])
         // This is not optimal, we should be getting the entire index list here, or at least every
         // index that possibly matches the pattern
         self.indices = [self.current.index.default]
+        $rootScope.$broadcast('refresh')
       }
     } else {
       self.indices = [self.current.index.pattern]
@@ -700,6 +700,7 @@ angular.module('kibana.services', [])
   }
 
   this.dash_load = function(dashboard) {
+    timer.cancel_all();
 
     if(dashboard.index.interval === 'none') {
       self.indices = [dashboard.index.pattern]
@@ -707,8 +708,6 @@ angular.module('kibana.services', [])
 
     self.current = dashboard;
 
-    timer.cancel_all();
-
     // Ok, now that we've setup the current dashboard, we can inject our services
     query = $injector.get('query');
     filterSrv = $injector.get('filterSrv')

panels/fields/micropanel.html

@@ -1,8 +1,8 @@
 <a class="close" ng-click="dismiss()" href="">×</a>
 <h4>
   Micro Analysis of {{micropanel.field}} 
-  <i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'exists');dismiss();"></i>
-  <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'missing');dismiss();"></i>
+  <i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();"></i>
+  <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();"></i>
   <br><small>{{micropanel.count}} events in the table set</small>
 </h4>
 <table style="width:480px" class='table table-bordered table-striped table-condensed'>
@@ -15,8 +15,8 @@
     <tr ng-repeat='field in micropanel.values'>
       <td>{{{true: "__blank__",false:field[0]}[field[0] == ""]}}</td>
       <td>
-        <i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i>
-        <i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],true);dismiss();"></i>
+        <i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0],'must');dismiss();"></i>
+        <i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],'mustNot');dismiss();"></i>
       </td>
       <td>{{field[1]}}</td>
     </tr>

panels/fields/module.js

@@ -79,14 +79,15 @@ angular.module('kibana.fields', [])
     eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active)
   }
 
-  $scope.build_search = function(field,value,negate) {
-    var query = (negate ? '-':'+')+field+":\""+value+"\""
-    filterSrv.set({type:'querystring',query:query})
+  $scope.build_search = function(field,value,mandate) {
+    var query = field+":"+angular.toJson(value)
+    
+    filterSrv.set({type:'querystring',query:query,mandate:mandate})
     dashboard.refresh();
   }
 
-  $scope.fieldExists = function(field,mode) {
-    filterSrv.set({type:mode,field:field})
+  $scope.fieldExists = function(field,mandate) {
+    filterSrv.set({type:'exists',field:field,mandate:mandate})
     dashboard.refresh();
   }
 

panels/filtering/editor.html

@@ -0,0 +1,7 @@
+<div>
+  <div class="row-fluid">    
+    <div class="span12">
+      No options here
+    </div>
+  </div>
+</div>

panels/filtering/meta.html

@@ -0,0 +1,15 @@
+<div>
+  <style>
+    .input-query-alias {
+      margin-bottom: 5px !important;
+    }
+  </style>
+  <a class="close" ng-click="render();dismiss();" href="">×</a>
+  <h6>Query Alias</h6>
+  <form>
+    <input class="input-medium input-query-alias" type="text" ng-model="queries.list[id].alias" placeholder='Alias...' />
+    <div>
+      <i ng-repeat="color in queries.colors" class="pointer" ng-class="{'icon-circle-blank':queries.list[id].color == color,'icon-circle':queries.list[id].color != color}" style="color:{{color}}" ng-click="queries.list[id].color = color;render();"> </i>
+    </div>
+  </form>
+</div>

panels/filtering/module.html

@@ -0,0 +1,36 @@
+<kibana-panel ng-controller='filtering' ng-init="init()">
+  <style>
+    .filter-panel-filter {
+      display:inline-block;
+      margin-left: 10px;
+      width: 200px;
+      padding: 5px;
+      border: #555 1px solid;
+      margin: 0px 5px 5px 0px;
+    }
+    .filter-must {
+      border-bottom: #7EB26D 3px solid;
+    }
+    .filter-mustNot {
+      border-bottom: #E24D42 3px solid;
+    }
+    .filter-should {
+      border-bottom: #EF843C 3px solid;
+    }
+    .filter-remove {
+      float:right;
+      margin-bottom: 0px !important;
+    }
+
+  </style>
+
+  <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
+    <div class="filter-{{filterSrv.list[id].mandate}}">
+      {{filterSrv.list[id].type}} ({{filterSrv.list[id].mandate}}) 
+      <i class="filter-remove pointer icon-remove" ng-click="remove(id)"></i>
+    </div>
+    <ul class="unstyled">
+      <li ng-repeat="(key,value) in stripped(filterSrv.list[id])"><strong>{{key}}</strong> : {{value}}</li>
+    </ul>
+  </div>
+</kibana-panel>

panels/filtering/module.js

@@ -0,0 +1,42 @@
+/*
+
+  ## filtering
+
+  An experimental for interacting with the filter service
+
+  ### Parameters
+
+*/
+
+angular.module('kibana.filtering', [])
+.controller('filtering', function($scope, filterSrv, $rootScope, dashboard) {
+
+  // Set and populate defaults
+  var _d = {
+    status  : "Experimental"
+  }
+  _.defaults($scope.panel,_d);
+
+  $scope.init = function() {
+    $scope.filterSrv = filterSrv
+  }
+
+  $scope.remove = function(id) {
+    filterSrv.remove(id);
+    dashboard.refresh();
+  }
+
+  $scope.refresh = function(query) {
+    $rootScope.$broadcast('refresh')
+  }
+
+  $scope.render = function(query) {
+    $rootScope.$broadcast('render')
+  }
+
+  $scope.stripped = function(filter) {
+    var filter = _.omit(filter,'type','id','alias','mandate')
+    return filter
+  }
+
+});

panels/histogram/module.js

@@ -32,12 +32,6 @@
   * 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
-  ### Group Events
-  #### Receives
-  * time :: An object containing the time range to use and the index(es) to query
-  * query :: An Array of queries, even if its only one
-  #### Sends
-  * get_time :: On panel initialization get time range to query
 
 */
 
@@ -80,6 +74,8 @@ angular.module('kibana.histogram', [])
       $scope.get_data();
     })
 
+    $scope.get_data()
+
   }
 
   $scope.get_data = function(segment,query_id) {
@@ -157,7 +153,10 @@ angular.module('kibana.histogram', [])
 
           // Null values at each end of the time range ensure we see entire range
           if(_.isUndefined($scope.data[i]) || _segment == 0) {
-            var data = [[_range.from.getTime(), null],[_range.to.getTime(), null]];
+            var data = []
+            if(filterSrv.idsByType('time').length > 0) {
+              data = [[_range.from.getTime(), null],[_range.to.getTime(), null]];
+            }
             var hits = 0;
           } else {
             var data = $scope.data[i].data
@@ -236,7 +235,7 @@ angular.module('kibana.histogram', [])
     $scope.modal = {
       title: "Inspector",
       body : "<h5>Last Elasticsearch Query</h5><pre>"+
-          'curl -XGET '+config.elasticsearch+'/'+$scope.index+"/_search?pretty -d'\n"+
+          'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
           angular.toJson(JSON.parse(request.toString()),true)+
         "'</pre>", 
     } 

panels/query/module.html

@@ -45,7 +45,7 @@
       <span class="end-query">
         <i class="icon-search pointer" ng-click="refresh()" ng-show="$last"></i>
         <i class="icon-plus pointer" ng-click="queries.set({})" ng-show="$last"></i>
-      </span
+      </span>
     </form>
   </div>
 </kibana-panel>

panels/table/module.js

@@ -55,8 +55,7 @@ angular.module('kibana.table', [])
 
     $scope.set_listeners($scope.panel.group)
 
-    // Now that we're all setup, request the time from our group
-    eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
+    $scope.get_data();
   }
 
   $scope.set_listeners = function(group) {
@@ -108,8 +107,8 @@ angular.module('kibana.table', [])
   }
 
   $scope.build_search = function(field,value,negate) {
-    var query = (negate ? '-':'+')+field+":\""+value+"\""
-    filterSrv.set({type:'querystring',query:query})
+    var query = field+":"+angular.toJson(value)
+    filterSrv.set({type:'querystring',query:query,mandate:(negate ? 'mustNot':'must')})
     $scope.panel.offset = 0;
     dashboard.refresh();
   }