Add a top banner to Hue!

We have already seen in this post how you can configure Hue in your cluster. But did you know that there’s a property that can make a top banner appear in your Hue installation? This is quite useful if you want for instance to show a disclaimer to your users, or to clearly mark a testing or production environment, or if you want to display some dynamic information there. Depending on if you are using Cloudera Manager or not, you should either add a safety valve or edit a .ini file to use this feature. For details on how to change the configuration, read here. In the desktop/custom section of the ini file you can find the banner_top_html property:

[desktop]
[[custom]]
# Top banner HTML code
banner_top_html=

Then it’s just a matter of writing some HTML/CSS and even Javascript code to customized it as you prefer. Keep in mind that you have a limited height to do that (30px). For instance, to write a white message on an orange background like the image at the beginning of this post, you can write this:

[desktop]
[[custom]]
# Top banner HTML code
banner_top_html='</pre>
<div><i class="&quot;fa"></i> This is the test environment for Acme, Inc. - For any problem <a href="&quot;mailto:roadrunner@acme.com&quot;">roadrunner@acme.com</a></div>
<pre>'

Or we could even use a very old HTML tag to display a running ticker!

[desktop]
[[custom]]
# Top banner HTML code
banner_top_html='Welcome to the test environment.'

And what about displaying some real time information on top of Hue? As an example, we are going to update the banner with the latest ISS position at every page change thanks to Open Notify.

[desktop]
[[custom]]
# Top banner HTML code
banner_top_html='<script>// <![CDATA[
$(document).ready(function(){ $.getJSON(&quot;http://api.open-notify.org/iss-now.json?callback=?&quot;, function(data){ $(&quot;#isspos&quot;).html(&quot;LAT: &quot;+data.iss_position.latitude+&quot;, LNG: &quot;+data.iss_position.longitude); }); })
// ]]></script></pre>
<div>The current ISS position is <span id="&quot;isspos&quot;"></span></div>
<pre>' 

Pretty cool, uh? Now it’s your turn to create something useful with it! As usual feel free to comment on the hue-user list or @gethue!