- Move the search form to the top in all pages.

- Support clicking on the graph to zoom the search to that time period
- Remove 'AND' appending (we default to 'AND' now)

web/public/js/logstash.js

@@ -13,6 +13,12 @@
       $("#query").val(logstash.params.q);
     }, /* search */
 
+    appendquery: function(query) {
+      var newquery = $("#query").val();
+      newquery += " " + query;
+      logstash.search(newquery.trim());
+    }, /* appendquery */
+
     plot: function(data) {
       var target = $("#visual");
       var plot = $.plot(target,
@@ -29,18 +35,29 @@
         }
       );
 
-      //target.bind("plothover", function(e, pos, item) {
-        //console.log(item);
-      //})
       target.bind("plotclick", function(e, pos, item) {
         if (item) {
-          //console.log(item);
-          start = item.datapoint[0];
-          end = start + 3600000;
-          console.log(start, end);
+          start = logstash.ms_to_iso8601(item.datapoint[0]);
+          end = logstash.ms_to_iso8601(item.datapoint[0] + 3600000);
+
+          logstash.appendquery("@timestamp:[" + start + " TO " + end + "]");
         }
       });
     }, /* plot */
+
+    ms_to_iso8601: function(milliseconds) {
+      /* From: 
+       * https://developer.mozilla.org/en/JavaScript/Reference/global_objects/date#Example.3a_ISO_8601_formatted_dates
+       */
+      var d = new Date(milliseconds);
+      function pad(n){return n<10 ? '0'+n : n}
+      return d.getUTCFullYear()+'-'
+        + pad(d.getUTCMonth()+1)+'-'
+        + pad(d.getUTCDate())+'T'
+        + pad(d.getUTCHours())+':'
+        + pad(d.getUTCMinutes())+':'
+        + pad(d.getUTCSeconds())+'Z'
+    },
   }; /* logstash */
 
   window.logstash = logstash;
@@ -91,7 +108,7 @@
       var template = $.template("inspector",
         "<li>" +
           "<b>(${type}) ${field}</b>:" +
-          "<a href='/search?q=" + query + " AND ${escape(field)}:${$item.sanitize(value)}'" +
+          "<a href='/search?q=" + query + " ${escape(field)}:${$item.sanitize(value)}'" +
           "   data-field='${escape(field)}' data-value='${$item.sanitize(value)}'>" +
             "${value}" +
           "</a>" +
@@ -154,14 +171,11 @@
       var newcondition = unescape(field) + ":" + unescape(value);
 
       var newquery = query.val();
-      if (newquery.length != 0) {
-        newquery += " AND ";
-      }
       if (ev.shiftKey) {
         // Shift-click will make a "and not" condition
-        query.val(newquery + "-" + newcondition)
+        query.val(newquery + " -" + newcondition)
       } else {
-        query.val(newquery + newcondition)
+        query.val(newquery + " " + newcondition)
       }
       logstash.search(query.val())
       return false;

web/views/header.haml

@@ -1,4 +1,8 @@
 .logo
-  logstash
-
-
+  logstash.
+.search
+  %form.search{ :action => "/search" }
+    %label{ :for => "q" } Query:
+    %input.query{ :id => "query", :type => "text", :name => "q", :value => params[:q],
+                  :size => 60 }
+    %input{ :id => "searchbutton", :type => "submit" }

web/views/search/ajax.haml

@@ -1,4 +1,7 @@
 #results
+  - if (params[:q].strip.length > 0 rescue false)
+    %h1
+      Search results for '#{params[:q]}'
   - if @graphpoints
     #visual
     :javascript

web/views/search/results.haml

@@ -1,13 +1,3 @@
-#searchheader
-  %form.search{ :action => "/search" }
-    %label{ :for => "q" } Query: 
-    %input.query{ :id => "query", :type => "text", :name => "q", :value => params[:q],
-                  :size => 60 }
-    %input{ :id => "searchbutton", :type => "submit" }
-
-  You can click on any search result to see what kind of fields we know about
-  for that event.
-
 - if @error
   #error 
     %strong A search error occurred:
@@ -18,4 +8,9 @@
   append it to your search. If you shift+click, the field will be added to the
   search as an exclude rather than include.
   %ul
+
+%i
+  You can click on any search result to see what kind of fields we know about
+  for that event. You can also click on the graph to zoom to that time period.
+
 =haml :"search/ajax", :layout => false

web/views/style.sass

@@ -8,14 +8,18 @@ body
   border-bottom: 1px solid black
   background-color: lightgreen
   padding-left: 1em
-  width: 100%
 
+  .search
+    display: inline
   .logo
     font-size: 130%
     font-weight: bold
-
+    float: right
+    padding-right: 20px
 #content
-  margin: 2em
+  margin-left: 2em
+  margin-right: 2em
+  margin-top: 1em
 #content ul.results
   font-family: monospace
 #content li.event
@@ -42,3 +46,5 @@ body
 #results #visual
   width: 850px
   height: 200px
+#results h1
+  font-size: 100%