From d3843d19efa02e9cda92e0ab09c74fbae724cbba Mon Sep 17 00:00:00 2001
From: Jordan Sissel <jls@semicomplete.com>
Date: Sun, 14 Nov 2010 11:24:28 +0000
Subject: [PATCH] - 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     | 40 +++++++++++++++++++++++------------
 web/views/header.haml         | 10 ++++++---
 web/views/search/ajax.haml    |  3 +++
 web/views/search/results.haml | 15 +++++--------
 web/views/style.sass          | 12 ++++++++---
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/web/public/js/logstash.js b/web/public/js/logstash.js
index 5a78d9252..eabba8548 100644
--- a/web/public/js/logstash.js
+++ b/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;
diff --git a/web/views/header.haml b/web/views/header.haml
index c86310fba..48c9e04ec 100644
--- a/web/views/header.haml
+++ b/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" }
diff --git a/web/views/search/ajax.haml b/web/views/search/ajax.haml
index 411242878..f40c373cd 100644
--- a/web/views/search/ajax.haml
+++ b/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
diff --git a/web/views/search/results.haml b/web/views/search/results.haml
index 3bb22415d..f01cae398 100644
--- a/web/views/search/results.haml
+++ b/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
diff --git a/web/views/style.sass b/web/views/style.sass
index 26114fac4..aed6906bb 100644
--- a/web/views/style.sass
+++ b/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%