Implemented topN query type, refactored querySrv

src/app/panels/query/editors/topN.html

+  <fieldset>
+    <label class="small">Field</label><br>
+    <input ng-model="querySrv.list[id].field" type="text" bs-typeahead="fields.list" placeholder="Field">
+    <p>
+    <label class="small">Count</label><br>
+    <input ng-model="querySrv.list[id].size" type="number">
+    <p>
+    <label class="small">Union</label><br>
+      <select class="input-small" ng-model="querySrv.list[id].union">
+      <option ng-repeat="mode in ['none','AND','OR']">{{mode}}</option>
+    </select>
+  </fieldset>

src/app/panels/query/help/lucene.html

+The lucene query type uses <a target="_blank" href='http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax'>LUCENE query string syntax</a> to find matching documents or events within Elasticsearch.
+
+<h4>Examples</h4>
+<ul class="unstyled" type="disc">
+  <li class="listitem"><p class="simpara">
+  <code class="literal">status</code> field contains <code class="literal">active</code>
+  </p><pre class="literallayout">status:active</pre></li>
+  <li class="listitem"><p class="simpara">
+  <code class="literal">title</code> field contains <code class="literal">quick</code> or <code class="literal">brown</code>
+  </p><pre class="literallayout">title:(quick brown)</pre></li>
+  <li class="listitem"><p class="simpara">
+  <code class="literal">author</code> field contains the exact phrase <code class="literal">"john smith"</code>
+  </p><pre class="literallayout">author:"John Smith"</pre></li>
+</ul>
+
+<p>Wildcard searches can be run on individual terms, using <code class="literal">?</code> to replace
+a single character, and <code class="literal">*</code> to replace zero or more characters:</p>
+<pre class="literallayout">qu?ck bro*</pre>
+
+<ul class="unstyled" type="disc">
+  <li class="listitem"><p class="simpara">
+  Numbers 1..5
+  </p><pre class="literallayout">count:[1 TO 5]</pre></li>
+  <li class="listitem"><p class="simpara">
+  Tags between <code class="literal">alpha</code> and <code class="literal">omega</code>, excluding <code class="literal">alpha</code> and <code class="literal">omega</code>:
+  </p><pre class="literallayout">tag:{alpha TO omega}</pre></li>
+  <li class="listitem"><p class="simpara">
+  Numbers from 10 upwards
+  </p><pre class="literallayout">count:[10 TO *]</pre></li>
+</ul>

src/app/panels/query/help/regex.html

+The regex query allows you to use regular expressions to match terms in the <i>_all</i> field.
+
+A detailed overview of lucene's regex engine is available here: <a target="_blank" href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-regexp-query.html#regexp-syntax">Regular expressions in Elasticsearch</a>
+
+<h5>A note on anchoring</h5>
+Lucene’s patterns are always anchored. The pattern provided must match the entire string. For string "abcde":
+<p>
+<code>ab.*</code> will match<br>
+<code>abcd</code> will not match</br>
+

src/app/panels/query/help/topN.html

+The topN query uses an <a target="_blank" href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/search-facets-terms-facet.html">Elasticsearch terms facet</a> to find the most common terms in a field and build queries from the result. The topN query uses <a target="_blank" href='http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax'>LUCENE query string syntax</a>
+
+<h4>Parameters</h4>
+<ul>
+  <li>
+    <strong>Field</strong> / The field to facet on. Fields with a large number of unique terms will <a target="_blank" href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/search-facets-terms-facet.html#_memory_considerations_2">use more memory</a> to calculate.
+  </li>
+  <li>
+    <strong>Count</strong> / How many queries to generate. The resulting queries will use brightness variations on the original query's color for their own.
+  </li>
+  <li>
+    <strong>Union</strong> / The relation the generated queries have to the original. For example, if your field was set to 'extension', your original query was "user:B.Awesome" and your union was AND. Kibana might generate the following example query: <code>extension:"html" AND (user:B.Awesome)</code>
+  </li>
+</ul>
\ No newline at end of file

src/app/panels/query/helpModal.html

+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>About the {{help.type}} query</h3>
+</div>
+<div class="modal-body">
+
+  <div ng-include="queryHelpPath(help.type)"></div>
+
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button>
+</div>
\ No newline at end of file

src/app/panels/query/meta.html

-<div class="panel-query-meta row-fluid" style="width:220px">
+<div class="panel-query-meta row-fluid" style="width:260px">
 
 
   <style>
   <style>
-    .input-query-alias {
-      margin-bottom: 5px !important;
+    .panel-query-meta fieldset label {
+      margin-top: 3px;
     }
     }
-    .panel-query-meta .pin {
-      text-decoration: underline;
-    }
-
   </style>
   </style>
-  <form>
-    <input class="input-large input-query-alias" type="text" ng-model="querySrv.list[id].alias" placeholder='Alias...' />
+
+  <fieldset>
+    <select class="input-small" ng-model="querySrv.list[id].type" ng-change="typeChange(querySrv.list[id])">
+      <option ng-repeat="type in queryTypes|esVersion:'require'">{{type.name}}</option>
+    </select> &nbsp<a href="" class="small" ng-click="queryHelp(querySrv.list[id].type)"> About the {{querySrv.list[id].type}} query</a>
+
+    <hr class="small">
+
+    <label class="small">Legend value</label>
+    <input type="text" ng-model="querySrv.list[id].alias" placeholder="Alias...">
+  </fieldset>
+
+  <div ng-include src="queryConfig(querySrv.list[id].type)"></div>
+
+
+  <hr class="small">
   <div>
   <div>
     <i ng-repeat="color in querySrv.colors" class="pointer" ng-class="{'icon-circle-blank':querySrv.list[id].color == color,'icon-circle':querySrv.list[id].color != color}" ng-style="{color:color}" ng-click="querySrv.list[id].color = color;render();"> </i>
     <i ng-repeat="color in querySrv.colors" class="pointer" ng-class="{'icon-circle-blank':querySrv.list[id].color == color,'icon-circle':querySrv.list[id].color != color}" ng-style="{color:color}" ng-click="querySrv.list[id].color = color;render();"> </i>
   </div>
   </div>
-  </form>
-  <select class="input-small" ng-model="querySrv.list[id].type">
-    <option ng-repeat="type in queryTypes|esVersion:'require'">{{type.name}}</option>
-  </select>
+
 
 
   <div class="pull-right">
   <div class="pull-right">
-    <button class="btn" ng-class="{active:querySrv.list[id].pin}" ng-click="toggle_pin(id);dismiss();" class="pointer">Pin <i class="icon-pushpin"></i></button>
-    <button class="btn btn-success " ng-click="dashboard.refresh();dismiss();">Apply</button>
+
+    <a class="btn btn-mini" ng-class="{active:querySrv.list[id].pin}" ng-click="toggle_pin(id);dismiss();" class="pointer">Pin <i class="icon-pushpin"></i></a>
+    <input class="btn btn-mini" ng-click="dashboard.refresh();dismiss();" type="submit"/ value="Close">
   </div>
   </div>
 </div>
 </div>
\ No newline at end of file

src/app/panels/query/module.js

@@ -19,7 +19,7 @@ define([
   var module = angular.module('kibana.panels.query', []);
   var module = angular.module('kibana.panels.query', []);
   app.useModule(module);
   app.useModule(module);
 
 
-  module.controller('query', function($scope, querySrv, $rootScope, dashboard) {
+  module.controller('query', function($scope, querySrv, $rootScope, dashboard, $q, $modal) {
     $scope.panelMeta = {
     $scope.panelMeta = {
       status  : "Stable",
       status  : "Stable",
       description : "Manage all of the queries on the dashboard. You almost certainly need one of "+
       description : "Manage all of the queries on the dashboard. You almost certainly need one of "+
@@ -45,6 +45,13 @@ define([
       };
       };
     });
     });
 
 
+    var queryHelpModal = $modal({
+      template: './app/panels/query/helpModal.html',
+      persist: true,
+      show: false,
+      scope: $scope,
+    });
+
     $scope.init = function() {
     $scope.init = function() {
     };
     };
 
 
@@ -65,6 +72,34 @@ define([
       return querySrv.queryTypes[type].icon;
       return querySrv.queryTypes[type].icon;
     };
     };
 
 
+    $scope.queryConfig = function(type) {
+      return "./app/panels/query/editors/"+(type||'lucene')+".html";
+    };
+
+    $scope.queryHelpPath = function(type) {
+      return "./app/panels/query/help/"+(type||'lucene')+".html";
+    };
+
+    $scope.queryHelp = function(type) {
+      $scope.help = {
+        type: type
+      };
+      $q.when(queryHelpModal).then(function(modalEl) {
+        modalEl.modal('show');
+      });
+    };
+
+    $scope.typeChange = function(q) {
+      var _nq = {
+        id   : q.id,
+        type : q.type,
+        query: q.query,
+        alias: q.alias,
+        color: q.color
+      };
+      querySrv.list[_nq.id] = querySrv.defaults(_nq);
+    };
+
     var update_history = function(query) {
     var update_history = function(query) {
       if($scope.panel.remember > 0) {
       if($scope.panel.remember > 0) {
         $scope.panel.history = _.union(query.reverse(),$scope.panel.history);
         $scope.panel.history = _.union(query.reverse(),$scope.panel.history);
@@ -78,4 +113,15 @@ define([
     $scope.init();
     $scope.init();
 
 
   });
   });
+
+  module.directive('queryConfig', function() {
+    return {
+      restrict: 'A',
+      template: '<div></div>',
+      link: function(scope, elem) {
+        console.log(elem);
+      }
+    };
+  });
+
 });
 });
\ No newline at end of file

src/app/panels/query/query.css

@@ -2,6 +2,9 @@
   display:inline-block;
   display:inline-block;
   margin-right: 10px;
   margin-right: 10px;
 }
 }
+.short-query input.search-query {
+    width: 280px;
+}
 .begin-query {
 .begin-query {
   position:absolute;
   position:absolute;
   left:13px;
   left:13px;