bookmarklet

This post will be short and to the point. I use Splunk almost daily. One of the main pain points is that the search bar cannot be collapsed. I regularly have searches that are 50+ lines. The UI currently doesn’t handle this very well. You have to do a lot of scrolling to get down to the results and then more scrolling to get back to the top. It’s kind of a pain. I looked around and haven’t found anyone who has addressed this so I decided to. The below bookmarklet will create collapse buttons above and below the search bar that can be used to get back valuable screen real estate.

The buttons are pretty obvious. They expand and collapse the search bar. Also, if you click inside the search bar while it is collapsed it will automatically expand out again. There are a couple limitations. If you refresh the page you will need to click the bookmarklet again … there is nothing I can do about that. Also, as of now when you initiate a search the buttons will also go away as Splunk redraws that section of the page. I may or may not be able to do anything about that. I’ll keep looking into it. They do survive paging though the results of a search. I you find this helpful let me know.

Bookmarklet:
Splunk Search Collapser <- drag this to your bookmarks toolbar

Search Bar Expanded

Search Bar Collapsed

The code

Here is the code for the bookmarklet in case you are curious.

var collapser = {
	state: 'expanded',
	origHeight: 0,
	init: function(){
		var t = this;
		if($('.ace-collapser').length == 0) {
			var btn = '<div class="ace-collapser pull-left"><a class="btn-pill" href="#">Collapse</a></div>';
			$('div.pull-right.jobstatus-control-grouping').prepend(btn);
			$('div.document-controls.search-actions').prepend(btn);
			$('div.ace-collapser a.btn-pill').click(function(e){
				e.preventDefault();
				t.collapseExpand();
			});
			$('pre.ace_editor').click(function(){
				t.expand();
			});
		}
	},
	collapseExpand: function(){
		var t = this;

		if(t.state == 'expanded') {
			t.collapse();
		} else {
			t.expand();
		};
	},
	collapse: function(){
		var t = this;
		t.origHeight = $('pre.ace_editor').css('height');
		$('div.ace-collapser a.btn-pill').text('Expand');
		$('pre.ace_editor').css('height','20px');
		t.state = 'collapsed';
	},
	expand: function(){
		var t = this;
		$('div.ace-collapser a.btn-pill').text('Collapse');
		$('pre.ace_editor').css('height', t.origHeight);
		t.state = 'expanded';
	}
};

collapser.init();