Skip to content
This repository was archived by the owner on Aug 6, 2024. It is now read-only.

Commit 7e108f4

Browse files
nickethiernickethier
committed
Merge pull request #10 from zyphlar/master
Localstorage caching and improved "match" hooks
2 parents 5be0f7f + b07ea2e commit 7e108f4

File tree

7 files changed

+198
-69
lines changed

7 files changed

+198
-69
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.bundle

‎.versions.conf‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
ruby=ruby-2.1.0
2+
ruby-gemset=grokdebug

‎public/sticky.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ html, body, .container, .container-fluid, .content {
22
height: 100%;
33
}
44

5+
label[for]:not([for=""]) {
6+
cursor: pointer;
7+
}
8+
59
.container, .container-fluid, .content {
610
position: relative;
711
}
@@ -17,10 +21,63 @@ html, body, .container, .container-fluid, .content {
1721
margin: 0 auto -50px; /* same as the footer */
1822
}
1923

24+
.text-right {
25+
text-align: right;
26+
}
27+
2028
.push {
2129
height: 50px; /* same as the footer */
2230
}
2331
.footer-wrapper {
2432
position: relative;
2533
height: 50px;
34+
}
35+
36+
/* Animated rotating icon */
37+
.icon-spin {
38+
display: inline-block;
39+
-moz-animation: spin 2s infinite linear;
40+
-o-animation: spin 2s infinite linear;
41+
-webkit-animation: spin 2s infinite linear;
42+
animation: spin 2s infinite linear;
43+
}
44+
@-moz-keyframes spin {
45+
0% {
46+
-moz-transform: rotate(0deg);
47+
}
48+
100% {
49+
-moz-transform: rotate(359deg);
50+
}
51+
}
52+
@-webkit-keyframes spin {
53+
0% {
54+
-webkit-transform: rotate(0deg);
55+
}
56+
100% {
57+
-webkit-transform: rotate(359deg);
58+
}
59+
}
60+
@-o-keyframes spin {
61+
0% {
62+
-o-transform: rotate(0deg);
63+
}
64+
100% {
65+
-o-transform: rotate(359deg);
66+
}
67+
}
68+
@-ms-keyframes spin {
69+
0% {
70+
-ms-transform: rotate(0deg);
71+
}
72+
100% {
73+
-ms-transform: rotate(359deg);
74+
}
75+
}
76+
@keyframes spin {
77+
0% {
78+
transform: rotate(0deg);
79+
}
80+
100% {
81+
transform: rotate(359deg);
82+
}
2683
}

‎views/discover.haml‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
.control-group
66
.controls
77
%form{ :action => "#", :class => "form-horizontal", :id => "grok-form"}
8-
%textarea{ :id => "input", :rows => "5", :action => "#", :class => "span9" }
9-
%button{ :type => "submit", :class => "btn btn-primary"}
10-
Discover
11-
%button{ :class => "btn btn-danger", :type => "button", :id => "resetall" }
12-
Reset
13-
.well-large
14-
%pre{ :class => "span9", :id => "grok"}
8+
%textarea{ :id => "input", :rows => "5", :action => "#", :class => "span12" }
9+
%br  
10+
.text-right
11+
%button{ :type => "submit", :class => "btn btn-primary"}
12+
Discover
13+
%button{ :class => "btn btn-danger", :type => "button", :id => "resetall" }
14+
Reset
15+
.well
16+
%pre{ :id => "grok"}
1517
.push
1618
.footer-wrapper
1719
%footer

‎views/index.haml‎

Lines changed: 126 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
.container
22
.content
33
.wrapper
4-
.proper-content
4+
.proper-content
55
%form{ :action => "#", :id => "grok-form" }
6-
%textarea{ :type => "text", :class => "span12", :placeholder => "Input", :id => "input" }
6+
%textarea{ :type => "text", :class => "span12", :placeholder => "Input", :id => "input", :rows => "5" }
77
.ui-widget
8-
%textarea{ :type => "text", :class => "span12", :placeholder => "Pattern", :id => "tags" }
9-
%label{ :class => "checkbox inline",}
8+
%textarea{ :type => "text", :class => "span12", :placeholder => "Pattern", :id => "tags", :rows => "5" }
9+
%label{ :for => "add_custom_patterns", :class => "checkbox inline",}
1010
%input{ :id => "add_custom_patterns", :type => "checkbox", :value= => "" }
1111
Add custom patterns
12-
%label{ :class => "checkbox inline",}
12+
%label{ :for => "keep_empty_captures", :class => "checkbox inline",}
1313
%input{ :id => "keep_empty_captures", :type => "checkbox", :value= => "" }
1414
Keep Empty Captures
15-
%label{ :class => "checkbox inline" }
15+
%label{ :for => "named_captures_only", :class => "checkbox inline" }
1616
%input{ :id => "named_captures_only", :type => "checkbox", :value => "" }
1717
Named Captures Only
18-
%label{ :class => "checkbox inline" }
18+
%label{ :for => "singles", :class => "checkbox inline" }
1919
%input{ :id => "singles", :type => "checkbox", :value => "" }
2020
Singles
21-
%label{ :class => "checkbox inline pull-right" }
22-
%input{ :id => "autocomplete", :type => "checkbox", :value => "" }
23-
Autocomplete
21+
%span{ :class => "pull-right" }
22+
%label{ :for => "autocomplete", :class => "checkbox inline" }
23+
%input{ :id => "autocomplete", :type => "checkbox", :value => "" }
24+
Autocomplete
25+
 
26+
%input{ :type => "submit", :class => "inline btn btn-primary", :value => "Go"}
2427
%div{:id => "custom_patterns_container", :style=>"display:none;"}
2528
%p
2629
One per line, the syntax for a grok pattern is <code>%{SYNTAX:SEMANTIC}</code>
27-
%textarea{ :class => "span12", :placeholder => "Custom patterns", :id => "custom_patterns", }
30+
%textarea{ :class => "span12", :placeholder => "Custom patterns", :id => "custom_patterns", :rows => "5" }
2831
%div{ :class => "well" }
2932
%pre{ :id => "grok" }
3033
.push
@@ -36,105 +39,169 @@
3639
%script{ :type => "text/javascript", :src => "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js" }
3740
%script{ :type => "text/javascript", :src => "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" }
3841
:javascript
42+
// function to load settings from localstorage
43+
var loadLocalstorage = function() {
44+
$('#input').val(localStorage.getItem('input'));
45+
$('#tags').val(localStorage.getItem('pattern'));
46+
$('#add_custom_patterns').prop('checked', parseInt(localStorage.getItem('add_custom_patterns')));
47+
$('#named_captures_only').prop('checked', parseInt(localStorage.getItem('named_captures_only')));
48+
$('#keep_empty_captures').prop('checked', parseInt(localStorage.getItem('keep_empty_captures')));
49+
$('#singles').prop('checked', parseInt(localStorage.getItem('singles')));
50+
$('#autocomplete').prop('checked', parseInt(localStorage.getItem('autocomplete')));
51+
52+
// show custom pattern window and fill valueif needed
53+
if ($('#add_custom_patterns').is(':checked')) {
54+
$('#custom_patterns').val(localStorage.getItem('custom_patterns'));
55+
$('#custom_patterns_container').show();
56+
}
57+
};
58+
// function to save settings to localstorage
59+
var saveLocalstorage = function(custom_patterns, input, pattern, add_custom_patterns, named_captures_only, keep_empty_captures, singles, autocomplete) {
60+
localStorage.setItem('custom_patterns', custom_patterns);
61+
localStorage.setItem('input', input);
62+
localStorage.setItem('pattern', pattern);
63+
localStorage.setItem('add_custom_patterns', (add_custom_patterns == true ? 1 : 0));
64+
localStorage.setItem('named_captures_only', (named_captures_only == true ? 1 : 0));
65+
localStorage.setItem('keep_empty_captures', (keep_empty_captures == true ? 1 : 0));
66+
localStorage.setItem('singles', (singles == true ? 1 : 0));
67+
localStorage.setItem('autocomplete', (autocomplete == true ? 1 : 0));
68+
};
69+
70+
// function to execute AJAX matching
3971
var match = function() {
40-
var custom_patterns = $('#custom_patterns').val();
72+
var custom_patterns = $('#custom_patterns').val();
4173
var input = $('#input').val();
4274
var pattern = $('#tags').val();
75+
var add_custom_patterns = $('#add_custom_patterns').is(':checked');
4376
var named_captures_only = $('#named_captures_only').is(':checked');
4477
var keep_empty_captures = $('#keep_empty_captures').is(':checked');
4578
var singles = $('#singles').is(':checked');
46-
79+
var autocomplete = $('#autocomplete').is(':checked');
80+
81+
// Save the user's settings to localstorage for next time
82+
saveLocalstorage(custom_patterns, input, pattern, add_custom_patterns, named_captures_only, keep_empty_captures, singles, autocomplete);
83+
84+
// Display a loading indicator
85+
$('#grok').parent().prepend("<i id='grokSpinner' class='icon icon-refresh icon-spin pull-right'></i>");
86+
87+
// Get the results from Grok
4788
$.post('/grok',
4889
{
49-
"custom_patterns":custom_patterns,
90+
"custom_patterns":custom_patterns,
5091
"input":input,
5192
"pattern":pattern,
5293
"named_captures_only":named_captures_only,
5394
"keep_empty_captures":keep_empty_captures,
5495
"singles":singles
5596
}, function(data){
56-
$('#grok').html(data);
57-
});
97+
// Display the results to the user
98+
$('#grok').html(data);
99+
100+
// Remove the loading indicator after a short time
101+
setTimeout(function(){$('#grokSpinner').remove();}, 500);
102+
}
103+
);
58104
};
105+
106+
// load settings from localstorage
107+
loadLocalstorage();
108+
109+
// go ahead and match just in case we have something already
110+
match();
111+
112+
// call match() if pattern, input, or custom patterns change
59113
var oldPat = $("#tags").val();
60114
var oldIn = $("#input").val();
115+
var oldCust = $("#custom_patterns").val();
61116
setInterval(function (){
62117
pat = $("#tags").val();
63118
inp = $("#input").val();
64-
if(inp == oldIn && pat == oldPat){
119+
cust = $("#custom_patterns").val();
120+
if(inp == oldIn && pat == oldPat && cust == oldCust){
65121
return;
66122
} else {
67123
oldPat = pat;
68124
oldIn = inp;
125+
oldCust = cust;
69126
match();
70127
}
71128
}, 1000);
72-
$("#add_custom_patterns").click(function(){
73-
$( "#custom_patterns_container" ).toggle(function() {
74-
$( "#custom_patterns" ).val("")
75-
})
76-
})
129+
130+
// also match if various buttons are clicked
77131
$("#named_captures_only").click(function(){
78-
match();
132+
match();
79133
})
80134
$("#keep_empty_captures").click(function(){
81-
match();
135+
match();
82136
})
83137
$("#singles").click(function(){
84138
match();
85139
})
140+
$("#grok-form").submit(function(){
141+
match();
142+
return false;
143+
});
144+
145+
// show/hide custom patterns container, and remove patterns
146+
$("#add_custom_patterns").click(function(){
147+
$( "#custom_patterns_container" ).toggle(function() {
148+
$( "#custom_patterns" ).val("")
149+
})
150+
})
151+
152+
153+
// autocomplete functionality
86154
$("#autocomplete").click(function(){
87155
var autocomplete = $('#autocomplete').is(':checked');
88156
$( "#tags" ).autocomplete({ disabled: !autocomplete });
89157
});
90-
$("#grok-form").submit(match);
91158

92159
var availableTags = #{@tags};
93160

94161
function split( val ) {
95-
return val.split( /}\s*/ );
162+
return val.split( /}\s*/ );
96163
}
97164
function extractLast( term ) {
98-
return split( term ).pop();
165+
return split( term ).pop();
99166
}
100167

101168
$( "#tags" )
102-
// don't navigate away from the field on tab when selecting an item
103-
.bind( "keydown", function( event ) {
104-
if ( event.keyCode === $.ui.keyCode.TAB &&
105-
$( this ).data( "autocomplete" ).menu.active ) {
106-
event.preventDefault();
107-
}
108-
})
109-
.autocomplete({
110-
minLength: 3,
111-
disabled: true,
112-
source: function( request, response ) {
113-
$.each($( "#custom_patterns" ).val().split('\n'), function(){
169+
// don't navigate away from the field on tab when selecting an item
170+
.bind( "keydown", function( event ) {
171+
if ( event.keyCode === $.ui.keyCode.TAB &&
172+
$( this ).data( "autocomplete" ).menu.active ) {
173+
event.preventDefault();
174+
}
175+
})
176+
.autocomplete({
177+
minLength: 3,
178+
disabled: true,
179+
source: function( request, response ) {
180+
$.each($( "#custom_patterns" ).val().split('\n'), function(){
114181
var line_splitted = this.replace(/^\s*/, "").split(/\s+/)
115182
var name = line_splitted[0]
116183
if ( $.inArray(name, availableTags) == -1 ) {
117184
availableTags.push("%{" + name)
118185
}
119186
});
120187

121-
// delegate back to autocomplete, but extract the last term
122-
response( $.ui.autocomplete.filter(
123-
availableTags, extractLast( request.term ) ) );
124-
},
125-
focus: function() {
126-
// prevent value inserted on focus
127-
return false;
128-
},
129-
select: function( event, ui ) {
130-
var terms = split( this.value );
131-
// remove the current input
132-
terms.pop();
133-
// add the selected item
134-
terms.push( ui.item.value );
135-
// add placeholder to get the comma-and-space at the end
136-
terms.push( "" );
137-
this.value = terms.join( "}" );
138-
return false;
139-
}
140-
})
188+
// delegate back to autocomplete, but extract the last term
189+
response( $.ui.autocomplete.filter(
190+
availableTags, extractLast( request.term ) ) );
191+
},
192+
focus: function() {
193+
// prevent value inserted on focus
194+
return false;
195+
},
196+
select: function( event, ui ) {
197+
var terms = split( this.value );
198+
// remove the current input
199+
terms.pop();
200+
// add the selected item
201+
terms.push( ui.item.value );
202+
// add placeholder to get the comma-and-space at the end
203+
terms.push( "" );
204+
this.value = terms.join( "}" );
205+
return false;
206+
}
207+
})

‎views/layout.haml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
%link{ :href => "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css", :rel => "stylesheet" }
1616
%link{ :href => "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css", :rel => "stylesheet" }
1717
%link{ :href => "sticky.css", :rel => "stylesheet"}
18-
/ Le fav and touch icons
18+
/ Le fav and touch icons
1919
%link{ rel: "apple-touch-icon", href: "/bootstrap/images/apple-touch-icon.png"}
2020
%link{ rel: "apple-touch-icon", sizes: "72x72", href: "/bootstrap/images/apple-touch-icon-72x72.png"}
2121
%link{ rel: "apple-touch-icon", sizes: "114x114", href: "/bootstrap/images/apple-touch-icon-114x114.png"}

‎views/navbar.haml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
%li{:class => ('active' if request.path_info == '/')}
1212
%a{:href => '/'}Debugger
1313
%li{:class => ('active' if request.path_info == '/discover')}
14-
%a{:href => '/discover?#'} Discover
14+
%a{:href => '/discover?#', :target => '_blank'} Discover
1515
%li{:class => ('active' if request.path_info == '/patterns')}
16-
%a{:href => '/patterns'} Patterns
16+
%a{:href => '/patterns', :target => '_blank'} Patterns
1717
%p.navbar-text.pull-right

0 commit comments

Comments
 (0)