Merge pull request #270 from rashidkpc/master

Added query to selector to every panel where it makes sense

js/controllers.js

@@ -23,7 +23,6 @@ angular.module('kibana.controllers', [])
     $scope.config = config;
     // Make underscore.js available to views
     $scope._ = _;
-
     $scope.dashboard = dashboard;
 
     // Provide a global list of all see fields
@@ -89,7 +88,7 @@ angular.module('kibana.controllers', [])
   $scope.init();
 
 })
-.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource) {
+.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, querySrv) {
 
   var _d = {
     title: "Row",
@@ -104,6 +103,7 @@ angular.module('kibana.controllers', [])
 
 
   $scope.init = function() {
+    $scope.querySrv = querySrv;
     $scope.reset_panel();
   };
 

js/services.js

@@ -289,6 +289,20 @@ angular.module('kibana.services', [])
     return _.findWhere(self.list,{query:queryString});
   };
 
+  this.idsByMode = function(config) {
+    switch(config.mode) 
+    {
+    case 'all':
+      return self.ids;
+    case 'pinned':
+      return _.pluck(_.where(self.list,{pin:true}),'id');
+    case 'selected':
+      return _.intersection(self.ids,config.ids);
+    default:
+      return self.ids;
+    }
+  };
+
   var nextId = function() {
     if(_q.idQueue.length > 0) {
       return _q.idQueue.shift();

js/shared.js

@@ -343,3 +343,15 @@ _.mixin({
     return array;
   } 
 });
+
+_.mixin({
+  toggleInOut: function(array,value) {
+    'use strict';
+    if(_.contains(array,value)) {
+      array = _.without(array,value);
+    } else {
+      array.push(value);
+    }
+    return array;
+  }
+});

panels/bettermap/editor.html

@@ -22,6 +22,7 @@
       <input type="number" class="input-small" ng-model="panel.size">
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/bettermap/module.js

@@ -6,11 +6,10 @@
   ## Better maps
 
   So the cavaet for this panel is that, for better or worse, it does NOT use the terms facet and it
-  DOES query sequentially. This however means that
+  DOES query sequentially. This however means that it transfer more data and is generally heavier
+  to computer, while showing less actual data
 
   ### Parameters
-  * query ::  A single query string, not and array. This panel can only handle one
-              query at a time. 
   * 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
@@ -25,7 +24,10 @@ angular.module('kibana.bettermap', [])
   // Set and populate defaults
   var _d = {
     status  : "Experimental",
-    query   : "*",
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     size    : 1000,
     spyable : true,
     tooltip : "_id",
@@ -66,9 +68,11 @@ angular.module('kibana.bettermap', [])
 
     var _segment = _.isUndefined(segment) ? 0 : segment;
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
+    // This could probably be changed to a BoolFilter 
     var boolQuery = $scope.ejs.BoolQuery();
-    _.each(querySrv.list,function(q) {
-      boolQuery = boolQuery.should(querySrv.toEjsObj(q));
+    _.each($scope.panel.queries.ids,function(id) {
+      boolQuery = boolQuery.should(querySrv.getEjsObj(id));
     });
 
     var request = $scope.ejs.Request().indices(dashboard.indices[_segment])

panels/column/panelgeneral.html

@@ -2,9 +2,6 @@
     <div class="span4">
       <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
     </div>
-    <div class="span4">
-      <label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
-    </div>
     <div class="span2">
       <label class="small">Height</label> <input type="text" class="input-mini" ng-model='panel.height'></input>
     </div>

panels/filtering/module.html

@@ -8,16 +8,22 @@
       vertical-align: top;
       margin-left: 10px;
       width: 200px;
-      padding: 5px;
+      padding: 5px 5px 0px 5px;
       border: #555 1px solid;
       margin: 0px 5px 5px 0px;
     }
+    .filter-panel-filter ul {
+      margin-bottom: 3px;
+    }
     .filter-must {
       border-bottom: #7EB26D 3px solid;
     }
     .filter-mustNot {
       border-bottom: #E24D42 3px solid;
     }
+    .filter-deselected {
+      opacity: 0.5;
+    }
     .filter-either {
       border-bottom: #EF843C 3px solid;
     }
@@ -34,8 +40,8 @@
   </style>
 
   <div class='filtering-container'>
-    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
-      <div class="filter-{{filterSrv.list[id].mandate}}">
+    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter" ng-class="{'filter-deselected': !filterSrv.list[id].active}">
+      <div class="filter-{{filterSrv.list[id].mandate}}" >
         <strong>{{filterSrv.list[id].type}}</strong> 
         <span ng-show="!filterSrv.list[id].editing" class="filter-mandate" ng-click="filterSrv.list[id].editing = true">{{filterSrv.list[id].mandate}}</span>
 

panels/filtering/module.js

@@ -6,8 +6,6 @@
 
   An experimental for interacting with the filter service
 
-  ### Parameters
-
 */
 
 'use strict';
@@ -17,7 +15,7 @@ angular.module('kibana.filtering', [])
 
   // Set and populate defaults
   var _d = {
-    status  : "Experimental"
+    status  : "Beta"
   };
   _.defaults($scope.panel,_d);
 

panels/histogram/editor.html

 <div>
   <div class="row-fluid">
-    <div class="span3">
+    <div class="span2">
       <label class="small">Mode</label> 
       <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
     </div>
     <div class="span2">
       <label class="small">Time Field</label>
-      <form>
         <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
-      </form>
     </div>
     <div class="span2" ng-show="panel.mode != 'count'">
       <label class="small">Value Field</label>
-      <form>
         <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.value_field">
-      </form>
     </div>
     <div class="span3" ng-show="panel.mode != 'count'">
       <label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type</small>
     </div>
   </div>
-  <h5>Chart Options</h5>
   <div class="row-fluid" style="margin-bottom:10px;">
+    <h5>Chart Settings</h5>
     <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
     <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
     <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
@@ -64,6 +60,7 @@
       <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/histogram/module.js

@@ -10,9 +10,6 @@
   yeah, you should know that it uses facetting. It should be pretty safe.
 
   ### Parameters
-  * query ::  an array of objects as such: {query: 'somequery', label 'legent text'}.
-              this is usually populated by a stringquery panel wher the query and label
-              parameter are the same
   * auto_int :: Auto calculate data point interval?
   * resolution ::  If auto_int is enables, shoot for this many data points, rounding to
                     sane intervals
@@ -46,10 +43,12 @@ angular.module('kibana.histogram', [])
   // Set and populate defaults
   var _d = {
     status      : "Stable",
-    group       : "default",
     mode        : 'count',
     time_field  : '@timestamp',
-    queries     : [],
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     value_field : null,
     auto_int    : true,
     resolution  : 100, 
@@ -69,12 +68,10 @@ angular.module('kibana.histogram', [])
     percentage  : false,
     interactive : true,
   };
+
   _.defaults($scope.panel,_d);
 
   $scope.init = function() {
-
-    $scope.querySrv = querySrv;
-
     $scope.$on('refresh',function(){
       $scope.get_data();
     });
@@ -91,6 +88,7 @@ angular.module('kibana.histogram', [])
       return;
     }
 
+
     var _range = $scope.range = filterSrv.timeRange('min');
     
     if ($scope.panel.auto_int) {
@@ -102,8 +100,9 @@ angular.module('kibana.histogram', [])
     var _segment = _.isUndefined(segment) ? 0 : segment;
     var request = $scope.ejs.Request().indices(dashboard.indices[_segment]);
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
     // Build the query
-    _.each(querySrv.ids, function(id) {
+    _.each($scope.panel.queries.ids, function(id) {
       var query = $scope.ejs.FilteredQuery(
         querySrv.getEjsObj(id),
         filterSrv.getBoolFilter(filterSrv.ids)
@@ -132,7 +131,6 @@ angular.module('kibana.histogram', [])
 
     // Populate scope when we have results
     results.then(function(results) {
-
       $scope.panel.loading = false;
       if(_segment === 0) {
         $scope.hits = 0;
@@ -151,13 +149,13 @@ angular.module('kibana.histogram', [])
 
       // Make sure we're still on the same query/queries
       if($scope.query_id === query_id && 
-        _.intersection(facetIds,querySrv.ids).length === querySrv.ids.length
+        _.intersection(facetIds,$scope.panel.queries.ids).length === $scope.panel.queries.ids.length
         ) {
 
         var i = 0;
         var data, hits;
 
-        _.each(querySrv.ids, function(id) {
+        _.each($scope.panel.queries.ids, function(id) {
           var v = results.facets[id];
 
           // Null values at each end of the time range ensure we see entire range
@@ -343,21 +341,15 @@ angular.module('kibana.histogram', [])
                 borderColor: '#eee',
                 color: "#eee",
                 hoverable: true,
-              },
-              colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
+              }
             };
 
             if(scope.panel.interactive) {
-              options.selection = { mode: "x", color: '#aaa' };
+              options.selection = { mode: "x", color: '#666' };
             }
 
             scope.plot = $.plot(elem, scope.data, options);
 
-            // Work around for missing legend at initialization.
-            if(!scope.$$phase) {
-              scope.$apply();
-            }
-
           } catch(e) {
             elem.text(e);
           }

panels/hits/editor.html

@@ -26,4 +26,5 @@
       <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
 </div>

panels/hits/module.js

@@ -8,8 +8,6 @@
   A variety of representations of the hits a query matches
 
   ### Parameters
-  * query ::  An array of queries. No labels here, just an array of strings. Maybe
-              there should be labels. Probably. 
   * style :: A hash of css styles
   * arrangement :: How should I arrange the query results? 'horizontal' or 'vertical'
   * chart :: Show a chart? 'none', 'bar', 'pie'
@@ -27,8 +25,10 @@ angular.module('kibana.hits', [])
   // Set and populate defaults
   var _d = {
     status  : "Beta",
-    query   : ["*"],
-    group   : "default",
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     style   : { "font-size": '10pt'},
     arrangement : 'horizontal',
     chart       : 'bar',
@@ -61,8 +61,9 @@ angular.module('kibana.hits', [])
     var _segment = _.isUndefined(segment) ? 0 : segment;
     var request = $scope.ejs.Request().indices(dashboard.indices[_segment]);
     
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
     // Build the question part of the query
-    _.each(querySrv.ids, function(id) {
+    _.each($scope.panel.queries.ids, function(id) {
       var _q = $scope.ejs.FilteredQuery(
         querySrv.getEjsObj(id),
         filterSrv.getBoolFilter(filterSrv.ids));
@@ -99,10 +100,10 @@ angular.module('kibana.hits', [])
 
       // Make sure we're still on the same query/queries
       if($scope.query_id === query_id && 
-        _.intersection(facetIds,querySrv.ids).length === querySrv.ids.length
+        _.intersection(facetIds,$scope.panel.queries.ids).length === $scope.panel.queries.ids.length
         ) {
         var i = 0;
-        _.each(querySrv.ids, function(id) {
+        _.each($scope.panel.queries.ids, function(id) {
           var v = results.facets[id];
           var hits = _.isUndefined($scope.data[i]) || _segment === 0 ? 
             v.count : $scope.data[i].hits+v.count;
@@ -231,11 +232,6 @@ angular.module('kibana.hits', [])
               });
             }
 
-            // Work around for missing legend at initialization
-            if(!scope.$$phase) {
-              scope.$apply();
-            }
-
           } catch(e) {
             elem.text(e);
           }

panels/map/editor.html

@@ -15,6 +15,7 @@
       <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/map/module.js

@@ -12,8 +12,6 @@
   There's no way to query sequentially here, so I'm going to hit them all at once!
 
   ### Parameters
-  * query ::  A single query string, not and array. This panel can only handle one
-              query at a time. 
   * map :: 'world', 'us' or 'europe'
   * colors :: an array of colors to use for the regions of the map. If this is a 2 
               element array, jquerymap will generate shades between these colors 
@@ -33,13 +31,15 @@ angular.module('kibana.map', [])
   // Set and populate defaults
   var _d = {
     status  : "Beta",
-    query   : "*",
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     map     : "world",
     colors  : ['#A0E2E2', '#265656'],
     size    : 100,
     exclude : [],
     spyable : true,
-    group   : "default",
     index_limit : 0
   };
   _.defaults($scope.panel,_d);
@@ -61,9 +61,11 @@ angular.module('kibana.map', [])
     var request;
     request = $scope.ejs.Request().indices(dashboard.indices);
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
+    // This could probably be changed to a BoolFilter 
     var boolQuery = $scope.ejs.BoolQuery();
-    _.each(querySrv.list,function(q) {
-      boolQuery = boolQuery.should($scope.ejs.QueryStringQuery(q.query || '*'));
+    _.each($scope.panel.queries.ids,function(id) {
+      boolQuery = boolQuery.should(querySrv.getEjsObj(id));
     });
 
     // Then the insert into facet and make the request

panels/pie/editor.html

@@ -48,6 +48,7 @@
       <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/pie/module.html

@@ -3,14 +3,14 @@
       <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
 
-  <div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+  <div ng-show="panel.legend == 'above'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div><br>
   <div style="clear:both"></div>
 
   <div pie params="{{panel}}" style="position:relative"></div>
 
-  <div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+  <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div>
 </kibana-panel>         
\ No newline at end of file

panels/pie/module.js

@@ -11,9 +11,8 @@
     represents
 
   ### Parameters
-  * query :: An object with 3 possible parameters depends on the mode:
+  * query :: An object with 2 possible parameters depends on the mode:
   ** field: Fields to run a terms facet on. Only does anything in terms mode
-  ** query: A string of the query to run
   ** goal: How many to shoot for, only does anything in goal mode
   * exclude :: In terms mode, ignore these terms
   * donut :: Drill a big hole in the pie
@@ -35,6 +34,10 @@ angular.module('kibana.pie', [])
   var _d = {
     status  : "Deprecating Soon",
     query   : { field:"_type", goal: 100}, 
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     size    : 10,
     exclude : [],
     donut   : false,
@@ -84,15 +87,18 @@ angular.module('kibana.pie', [])
       return;
     } 
 
+
     $scope.panel.loading = true;
     var request = $scope.ejs.Request().indices(dashboard.indices);
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
     // This could probably be changed to a BoolFilter 
     var boolQuery = $scope.ejs.BoolQuery();
-    _.each(querySrv.list,function(q) {
-      boolQuery = boolQuery.should(querySrv.toEjsObj(q));
+    _.each($scope.panel.queries.ids,function(id) {
+      boolQuery = boolQuery.should(querySrv.getEjsObj(id));
     });
 
+
     var results;
 
     // Terms mode
@@ -246,6 +252,10 @@ angular.module('kibana.pie', [])
         if(elem.is(":visible")){
           scripts.wait(function(){
             scope.plot = $.plot(elem, scope.data, pie);
+            scope.legend = scope.plot.getData();
+            if(!scope.$$phase) {
+              scope.$apply();
+            }
           });
         }
 

panels/query/module.html

@@ -41,13 +41,13 @@
   }
 </style>
   <label class="small">{{panel.label}}</label>
-  <div ng-repeat="id in querySrv.ids|pinnedQuery:false" ng-class="{'short-query': querySrv.ids.length>1}">
+  <div ng-repeat="id in (unPinnedQueries = (querySrv.ids|pinnedQuery:false))" ng-class="{'short-query': unPinnedQueries.length>1}">
     <form class="form-search" style="position:relative;margin-bottom:5px;" ng-submit="refresh()">
       <span class="begin-query">
         <i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" ng-style="{color: querySrv.list[id].color}"></i>
-        <i class="icon-remove-sign pointer remove-query" ng-show="querySrv.ids.length>1" ng-click="querySrv.remove(id);refresh()"></i>
+        <i class="icon-remove-sign pointer remove-query" ng-show="unPinnedQueries.length>1" ng-click="querySrv.remove(id);refresh()"></i>
       </span>
-      <input class="search-query panel-query" ng-class="{'input-block-level': querySrv.ids.length==1,'last-query': $last,'has-remove': querySrv.ids.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="querySrv.list[id].query"/>
+      <input class="search-query panel-query" ng-class="{'input-block-level': unPinnedQueries.length==1,'last-query': $last,'has-remove': unPinnedQueries.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="querySrv.list[id].query"/>
       <span class="end-query">
         <i class="icon-search pointer" ng-click="refresh()" ng-show="$last"></i>
         <i class="icon-plus pointer" ng-click="querySrv.set({})" ng-show="$last"></i>

panels/query/module.js

@@ -20,7 +20,7 @@ angular.module('kibana.query', [])
 
   // Set and populate defaults
   var _d = {
-    status  : "Experimental",
+    status  : "Beta",
     label   : "Search",
     query   : "*",
     pinned  : true,

panels/table/editor.html

@@ -68,6 +68,7 @@
       <select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/table/module.js

@@ -7,7 +7,6 @@
   A paginated table of events matching a query
 
   ### Parameters
-  * query ::  A string representing then current query
   * size :: Number of events per page to show
   * pages :: Number of pages to show. size * pages = number of cached events. 
              Bigger = more memory usage byh the browser
@@ -35,7 +34,10 @@ angular.module('kibana.table', [])
   // Set and populate defaults
   var _d = {
     status  : "Stable",
-    query   : "*",
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     size    : 100, // Per page
     pages   : 5,   // Pages available
     offset  : 0,
@@ -53,7 +55,6 @@ angular.module('kibana.table', [])
   _.defaults($scope.panel,_d);
 
   $scope.init = function () {
-
     $scope.set_listeners($scope.panel.group);
 
     $scope.get_data();
@@ -133,14 +134,16 @@ angular.module('kibana.table', [])
     
     $scope.panel.loading = true;
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
+
     var _segment = _.isUndefined(segment) ? 0 : segment;
     $scope.segment = _segment;
 
     var request = $scope.ejs.Request().indices(dashboard.indices[_segment]);
 
     var boolQuery = $scope.ejs.BoolQuery();
-    _.each(querySrv.list,function(q) {
-      boolQuery = boolQuery.should(querySrv.toEjsObj(q));
+    _.each($scope.panel.queries.ids,function(id) {
+      boolQuery = boolQuery.should(querySrv.getEjsObj(id));
     });
 
     request = request.query(

panels/text/module.js

@@ -53,7 +53,9 @@ angular.module('kibana.text', [])
           element.html(htmlText);
           // For whatever reason, this fixes chrome. I don't like it, I think
           // it makes things slow?
+          if(!scope.$$phase) {
             scope.$apply();
+          }
         });
       }
 

panels/trends/editor.html

@@ -26,4 +26,5 @@
       <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
     </div>
   </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
 </div>

panels/trends/module.js

@@ -10,12 +10,6 @@
   * style :: A hash of css styles
   * arrangement :: How should I arrange the query results? 'horizontal' or 'vertical'
   * ago :: Date math formatted time to look back
-  ### Group Events
-  #### Sends
-  * get_time :: On panel initialization get time range to query
-  #### 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
 
 */
 
@@ -27,7 +21,10 @@ angular.module('kibana.trends', [])
   // Set and populate defaults
   var _d = {
     status  : "Beta",
-    query   : ["*"],
+    queries     : {
+      mode        : 'all',
+      ids         : []
+    },
     group   : "default",
     style   : { "font-size": '14pt'},
     ago     : '1d',
@@ -54,6 +51,8 @@ angular.module('kibana.trends', [])
       $scope.index = segment > 0 ? $scope.index : dashboard.indices;
     }
 
+    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
+
     // Determine a time field
     var timeField = _.uniq(_.pluck(filterSrv.getByType('time'),'field'));
     if(timeField.length > 1) {
@@ -78,7 +77,7 @@ angular.module('kibana.trends', [])
 
 
     // Build the question part of the query
-    _.each(querySrv.ids, function(id) {
+    _.each($scope.panel.queries.ids, function(id) {
       var q = $scope.ejs.FilteredQuery(
         querySrv.getEjsObj(id),
         filterSrv.getBoolFilter(_ids_without_time).must(
@@ -95,7 +94,7 @@ angular.module('kibana.trends', [])
 
 
     // And again for the old time period
-    _.each(querySrv.ids, function(id) {
+    _.each($scope.panel.queries.ids, function(id) {
       var q = $scope.ejs.FilteredQuery(
         querySrv.getEjsObj(id),
         filterSrv.getBoolFilter(_ids_without_time).must(
@@ -152,10 +151,10 @@ angular.module('kibana.trends', [])
 
       // Make sure we're still on the same query/queries
       if($scope.query_id === query_id && 
-        _.intersection(facetIds,querySrv.ids).length === querySrv.ids.length
+        _.intersection(facetIds,$scope.panel.queries.ids).length === $scope.panel.queries.ids.length
         ) {
         var i = 0;
-        _.each(querySrv.ids, function(id) {
+        _.each($scope.panel.queries.ids, function(id) {
           var v = results.facets[id];
           var n = results.facets[id].count;
           var o = results.facets['old_'+id].count;

partials/querySelect.html

@@ -2,13 +2,20 @@
     .querySelect .query {
       margin-right: 5px;
     }
+    .querySelect .selected {
+      border: 3px solid;
+    }
+    .querySelect .unselected {
+      border: 0px solid;
+    }
   </style>
   <h4>Queries</h4>
   <div class="span2" style="margin-left:0px">
     <select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','selected']"></select>
   </div>
   <div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
-    <span ng-repeat="id in querySrv.ids" class="query badge">
-      <i ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" ng-class="{'icon-check': _.contains(panel.queries.ids,id),'icon-check-empty': !_.contains(panel.queries.ids,id)}"></i> <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i><span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
+    <span ng-style="{'border-color': querySrv.list[id].color}" ng-class="{selected:_.contains(panel.queries.ids,id),unselected:!_.contains(panel.queries.ids,id)}" ng-repeat="id in querySrv.ids" ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" class="query pointer badge">
+      <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i>
+      <span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
     </span>
   </div>