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",
"
" +
"(${type}) ${field}:" +
- "" +
"${value}" +
"" +
@@ -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%