mirror of
https://github.com/elastic/logstash.git
synced 2025-04-23 22:27:21 -04:00
- Add a title to the graph showing the range (time period)
- Add a vertical dash on the graph indicating the current time - Make / (index) show a better view of the search form
This commit is contained in:
Jordan Sissel
parent
5e955a47ba
commit
58dc837a14
5 changed files with 140 additions and 29 deletions
|
|
@ -28,6 +28,28 @@ class Search < Application
|
|||
options[:query] = q
|
||||
|
||||
search = LogStash::Net::Clients::ElasticSearch.new("/opt/logstash/etc/logstashd.yaml")
|
||||
params[:graphperiod] ||= 60 * 60 * 24
|
||||
params[:graphstep] ||= 60 * 60
|
||||
params[:graphstep] = params[:graphstep].to_i
|
||||
params[:graphperiod] = params[:graphperiod].to_i
|
||||
|
||||
if params[:graphperiod] > 60 * 60 * 24 * 7 * 2
|
||||
@readable_timeperiod = params[:graphperiod] / (60 * 60 * 24 * 7)
|
||||
@readable_timeunit = "week"
|
||||
elsif params[:graphperiod] >= 60 * 60 * 24 * 3
|
||||
@readable_timeperiod = params[:graphperiod] / (60 * 60 * 24)
|
||||
@readable_timeunit = "day"
|
||||
elsif params[:graphperiod] > 60 * 60 * 3
|
||||
@readable_timeperiod = params[:graphperiod] / (60 * 60)
|
||||
@readable_timeunit = "hour"
|
||||
else
|
||||
@readable_timeperiod = params[:graphperiod] / (60)
|
||||
@readable_timeunit = "minute"
|
||||
end
|
||||
|
||||
if @readable_timeperiod != 1
|
||||
@readable_timeunit = "#{@readable_timeunit}s"
|
||||
end
|
||||
|
||||
Timeout.timeout(10) do
|
||||
results = search.query(options)
|
||||
|
|
@ -42,18 +64,18 @@ class Search < Application
|
|||
#provides :json
|
||||
orig_query = query[:q]
|
||||
|
||||
day = 60 * 60 * 24
|
||||
hour = 60 * 60
|
||||
graph_period = params[:graphperiod].to_i
|
||||
increment = params[:graphstep].to_i
|
||||
start_mod = 60 * 60
|
||||
|
||||
starttime = (Time.now - day).to_i # + Time.now.gmt_offset
|
||||
starttime = starttime - (starttime % hour)
|
||||
increment = (params[:graphstep] or 60 * 60).to_i
|
||||
starttime = (Time.now - graph_period).to_i # + Time.now.gmt_offset
|
||||
starttime = starttime - (starttime % start_mod)
|
||||
curtime = starttime
|
||||
@points = []
|
||||
# correct for timezone date offset
|
||||
Timeout.timeout(20) do
|
||||
queries = []
|
||||
while starttime + day + 3600 > curtime
|
||||
while starttime + graph_period + 3600 > curtime
|
||||
endtime = curtime + increment - 1
|
||||
querygen = [query.clone]
|
||||
querygen << {
|
||||
|
|
@ -73,7 +95,8 @@ class Search < Application
|
|||
count = search.count(genquery)
|
||||
puts count
|
||||
p genquery
|
||||
@data[genquery[:bool][:must][1][:range]["@DATE"][:from].to_i * 1000] = count
|
||||
time = genquery[:bool][:must][1][:range]["@DATE"][:from].to_i + Time.now.gmtoff
|
||||
@data[time * 1000] = count
|
||||
end
|
||||
@data = @data.to_a
|
||||
end
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="stylesheet" href="/stylesheets/master.css" type="text/css" media="screen" charset="utf-8" />
|
||||
<script src="/javascripts/flot/jquery.js"></script>
|
||||
<script src="/javascripts/flot/jquery.flot.js"></script>
|
||||
<script src="/javascripts/js/jquery-ui-1.8.1.custom.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<%#= message[:notice] %>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
<%= form :action => url(:controller => "search", :action => "query"),
|
||||
:method => :get do %>
|
||||
<%= text_field :name => "q", :label => "Query", :value => escape_html(params[:q]), :size => 100 %>
|
||||
<br/>
|
||||
<%= text_field :name => "log_type", :label => "log type", :value => params[:log_type] %>
|
||||
<br>
|
||||
<%= submit "Search" %>
|
||||
<% end =%>
|
||||
<div id="portal">
|
||||
<center>
|
||||
<div class="searchBar">
|
||||
<div>
|
||||
logstash.
|
||||
</div>
|
||||
|
||||
<span>
|
||||
<%= form :action => url(:controller => "search", :action => "query"),
|
||||
:method => :get do %>
|
||||
<%= text_field :name => "q", :label => "Query: ", :value => escape_html(params[:q]), :size => 100 %>
|
||||
<%= submit "Search" %>
|
||||
<% end =%>
|
||||
</span>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
<%= form :action => url(:controller => "search", :action => "query"),
|
||||
:method => :get do %>
|
||||
<%= text_field :name => "q", :label => "Query", :value => escape_html(params[:q]), :size => 100 %>
|
||||
<br/>
|
||||
<%= text_field :name => "log_type", :label => "log type", :value => escape_html(params[:log_type]) %>
|
||||
<br>
|
||||
<%= submit "Search" %>
|
||||
<% end =%>
|
||||
<hr>
|
||||
<%= partial :searchform %>
|
||||
|
||||
<div id="content">
|
||||
<h4>Result counts over the past <%= @readable_timeperiod %> <%= @readable_timeunit %> for '<%=h params[:q] %>'</h4>
|
||||
<div id="visual" style="width:850px;height:200px;"></div>
|
||||
|
||||
<hr style="margin: 2em; width: 70%">
|
||||
|
||||
<h4>Results <%= params[:offset] %> - <%= [@hits,params[:offset] + params[:limit]].min %> of <%= @hits %> for <%=h params[:q] %></h4>
|
||||
<% if params[:offset] > 0 %>
|
||||
<%= link_to "first", url(:controller => "search", :action => "query",
|
||||
|
|
@ -23,7 +19,7 @@
|
|||
:limit => params[:limit],
|
||||
:log_type => params[:log_type]) %>
|
||||
<% end %>
|
||||
|
|
||||
<%= "|" if @hits > params[:limit] %>
|
||||
<% if params[:offset] + params[:limit] < @hits %>
|
||||
<%= link_to "next", url(:controller => "search", :action => "query",
|
||||
:q => params[:q],
|
||||
|
|
@ -40,7 +36,7 @@
|
|||
|
||||
<pre>
|
||||
<% @results.each do |result| -%>
|
||||
<%=h Time.at(result["_source"]["@DATE"]) %> | <%=h result["_source"]["@LINE"] %>
|
||||
(<span class="datestamp"><%=h Time.at(result["_source"]["@DATE"]).strftime("%Y/%m/%d %H:%M:%S") %></span>) <%=h result["_source"]["@LINE"] %>
|
||||
<% end -%>
|
||||
</pre>
|
||||
|
||||
|
|
@ -48,7 +44,7 @@
|
|||
$(function () {
|
||||
var graphdata = <%= @graphdata.to_json %>;
|
||||
|
||||
$.plot($("#visual"),
|
||||
var plot = $.plot($("#visual"),
|
||||
[
|
||||
{ data: graphdata,
|
||||
bars: {
|
||||
|
|
@ -59,5 +55,32 @@ $(function () {
|
|||
],
|
||||
{ xaxis: { mode: "time" } }
|
||||
);
|
||||
});
|
||||
|
||||
var nowpoint = plot.pointOffset( { x: <%= (Time.now.to_i + Time.now.gmtoff) * 1000 %>, y: 1 } );
|
||||
var note = $("<div>").css("position", "absolute")
|
||||
.css("left", nowpoint.left)
|
||||
.css("top", "10px")
|
||||
.css("height", "170px")
|
||||
.css("border-left", "1px dashed grey")
|
||||
//.css("border-bottom", "1px solid grey")
|
||||
//.css("border-top", "1px solid grey")
|
||||
//.css("text-align", "center")
|
||||
//.css("margin-left", ".5em")
|
||||
//.css("font-weight", "bold")
|
||||
//.css("text-align", "top")
|
||||
//.css("white-space", "nowrap")
|
||||
//.css("-webkit-transform", "rotate(90deg)")
|
||||
//.css("-webkit-transform-origin", "0 0")
|
||||
//.css("-moz-transform", "rotate(90deg)")
|
||||
//.css("-moz-transform-origin", "0 0")
|
||||
//.html("<%= Time.now.strftime("%b, %d %Y %H:%M:%S") %>");
|
||||
$("#visual").append(note)
|
||||
//var ctx = plot.getCanvas().getContext("2d");
|
||||
//ctx.moveTo(nowpoint.left, 0);
|
||||
//console.log(plot)
|
||||
//ctx.lineTo(nowpoint.left, nowpoint.top);
|
||||
//ctx.strokeStyle = "#88FF00";
|
||||
//ctx.stroke();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ body {
|
|||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: #fff;
|
||||
margin: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
* {
|
||||
margin: 0px;
|
||||
|
|
@ -118,3 +118,58 @@ a:hover {
|
|||
#main-container ul {
|
||||
margin-left: 3.0em;
|
||||
}
|
||||
|
||||
.searchBar {
|
||||
border-top: 2px solid black;
|
||||
border-bottom: 1px solid grey;
|
||||
background-color: #CCE8CF;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.searchBar label {
|
||||
font-weight: bold;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.searchBar form {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.logstash-logo {
|
||||
float:right;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
#portal .searchBar {
|
||||
border: 2px solid black;
|
||||
width: 50%;
|
||||
margin-top: 5em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#portal .searchBar input[type="text"] {
|
||||
top: 0px;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
#portal .logstash-logo {
|
||||
float: none;
|
||||
position: relative;
|
||||
top: -2em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre .datestamp {
|
||||
color: grey;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue