Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2012 (Minneapolis, MN) with: James Husum
Ben Nadel at cf.Objective() 2012 (Minneapolis, MN) with: James Husum

Fixing The Dropdown / Type-Ahead Menu In Amazon's Kibana / ELK Stack

By Ben Nadel on

At InVision, we currently use Kibana to search our logs. For the most part, Kibana has been pretty good (despite the pains of having many teams dump all of their logs with conflicting keys and data-types). A couple of weeks ago, however, something changed; suddenly, the dropdown / type-ahead menu for the search input started overlapping with the input itself such that you couldn't even see what you were typing:

NOTE: I've colored the dopdown menu gold to showcase the problem more clearly.


 
 
 

 
 Kibana search menu fail. 
 
 
 

This has been a huge pain in the butt!

After digging into the HTML and CSS a bit, it appears that while the dropdown menu is positioned absolutely, it's never actually given an explicit location to render. Luckily, Kibana loads jQuery which means that I can easily inject an additional Style tag, giving the dropdown menu its much-needed "top" coordinate:

  • jQuery( "head" ).append( "<style style='text/css'> .typeahead .typeahead-items { top: 33px ; } </style>" );

Of course, I don't want to have to open the Console of each Kibana browser window and type this in; so, I turned it into a clickable bookmarklet:

  • javascript:jQuery( "head" ).append( "<style style%3D'text%2Fcss'> .typeahead .typeahead-items %7B top%3A 33px %3B %7D <%2Fstyle>" )%3B;void(0);

Now, I can once again type into the search box unobstructed:


 
 
 

 
 Kibana search menu fail and fix with jQuery bookmarklet. 
 
 
 

It's still fairly annoying; but, at least peace is just a quick click away. I suppose I could install a Chrome extension to run this script automatically anytime I hit a Kibana-related URL. But, I try to minimize the number of extensions I have active at any time so that I don't get unexpected extension behavior while I'm working.



Reader Comments

@Kristopher,

Oh man, I remember Greasemonkey from waaaaaay back in the day. I think that was actually the first every browser extension that I installed (or maybe second to Firebug).

I do have a Chrome extension that can do it; but, I tend to leave most of my extensions disabled since I'm always a little bit paranoid that they can access any / all of my web pages. I'm not sure what kind of security / auditing goes into these extensions.

Reply to this Comment

Any idea what changed to cause this problem? We're just starting to use ELK for ingesting logs ourselves, so I'd be curious to know.

Reply to this Comment

@Sam,

I have no idea :) It changed about a month ago and others on my team confirm it is happening for them as well - so it's not that I have some old broken browser.

Now, I'm not on the "platform" team, so I don't fully understand how this all gets run and hosted. From what I understand, its provided as a service by Amazon and we can't necessarily upgrade to a different version. But again, this really isn't my area of management, so I could be misinforming you :D

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.