Fixing The Dropdown / Type-Ahead Menu In Amazon's Kibana / ELK Stack
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.
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:
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.
Want to use code from this post? Check out the license.
Reader Comments
Some browsers have the ability to run user scripts à la Greasemonkey/Tampermonkey et al.
@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.
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.
@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