- Use ajax calls to update search

- Make search interactive

web/server.rb

@@ -18,6 +18,7 @@ class LogStashWeb < Sinatra::Base
   register Sinatra::Async
   set :haml, :format => :html5
   set :logging, true
+  set :public, "./public"
 
   aget '/style.css' do
     headers "Content-Type" => "text/css; charset=utf8"
@@ -29,30 +30,50 @@ class LogStashWeb < Sinatra::Base
   end # '/'
 
   aget '/search' do
+    if params[:q] and params[:q] != ""
+      search :results
+    else
+      @hits = []
+      body haml :"search/results"
+    end
+  end
+
+  apost '/search/ajax' do
+    search :ajax
+  end
+
+  def search(type)
     http = EventMachine::HttpRequest.new("http://localhost:9200/_search")
+    params[:offset] ||= 0
+    params[:count] ||= 20
+
     esreq = {
       "sort" => [
-        { "received_timestamp" => "desc" }
+        { "timestamp" => "desc" }
       ],
       "query" => {
         "query_string" => { 
            "query" => params[:q]
         }
       },
+      "from" => params[:offset],
+      "size" => params[:count],
     }
     req = http.get :body => esreq.to_json
     req.callback do
-      headers req.response_header
+      #headers req.response_header
       data = JSON.parse(req.response)
-      p data
+      if req.response_header.status != 200
+        @error = data["error"]
+      end
       @hits = data["hits"]["hits"] rescue []
-      body haml :"search/results"
+      body haml :"search/#{type.to_s}", :layout => !request.xhr?
     end
     req.errback do 
-      body "Failed."
+      body "Failed. #{req.response}"
     end
-  end # '/search'
-end
+  end # def search
+end # class LogStashWeb
 
       #Sass::Plugin::Rack.new( \
 Rack::Handler::Thin.run(

web/views/layout.haml

@@ -3,9 +3,18 @@
   %head
     %title= @title || "Default title" 
     %link{ :rel => "stylesheet", :href => "/style.css", :type => "text/css" }
+    %link{ :rel => "stylesheet", :href => "/css/smoothness/jquery-ui-1.8.5.custom.css", :type => "text/css" }
+    %script{ :src => "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js", 
+             :type => "text/javascript" }
 %body
   #header
     =haml :header, :layout => false
   #content
     =yield
   #footer
+
+  %script{ :src => "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js", 
+           :type => "text/javascript" }
+  %script{ :src => "js/jquery.tmpl.min.js", :type => "text/javascript" }
+  %script{ :src => "js/jquery-hashchange-1.0.0.js", :type => "text/javascript" }
+  %script{ :src => "js/logstash.js", :type => "text/javascript" }

web/views/search/ajax.haml

@@ -0,0 +1,10 @@
+#results
+  %ul.results
+    - @hits.reverse.each do |hit|
+      %li.event{ :"data-full" => hit.to_json }
+        = hit["_source"]["message"]
+    - if @hits.length == 0 
+      - if !params[:q]
+        No query given. How about <a href="#*">this?</a>
+      - else
+        No results for query '#{params[:q]}' 

web/views/search/results.haml

@@ -1,3 +1,17 @@
-- @hits.each do |hit|
-  %pre
-    = hit["_source"].inspect
+#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" }
+
+- if @error
+  #error 
+    %strong A search error occurred:
+    =@error
+#ssquery{ :style => "display: none;", :"data-query" => params[:q] }
+#inspector{ :style => "display: none;" }
+  The following fields are known for the log you selected. Click on any link to
+  append it to your search.
+  %ul
+=haml :"search/ajax", :layout => false

web/views/style.sass

@@ -1,3 +1,5 @@
+$lightgrey = #d8d8d8
+$darkgrey = #adadad
 body
   margin: 0
   padding: 0
@@ -11,3 +13,28 @@ body
   .logo
     font-size: 130%
     font-weight: bold
+
+#content
+  margin: 2em
+#content ul.results
+  font-family: monospace
+#content li.event
+  padding-bottom: 3px
+#content li.selected
+  background-color: #FCE69D !important
+#content li.event:nth-child(2n)
+  background-color: #E3F6CE
+#content li.event:nth-child(2n+1)
+  background-color: #F5FBEF
+#content li.event:hover
+  background-color: lightgreen
+#error
+  background-color: pink
+  border: 1px solid red
+  padding: 3px
+#error h1
+  font-size: 130%
+  padding: 0
+  margin: 0
+#inspector
+  font-size: 70%