Customize the Hue Web UI

This topic describes which browsers to use to get the best experience with the Hue Web UI and how you can customize the UI in the following sections:

Supported Browsers

Hue works with the two most recent LTS (long term support) or ESR (extended support release) browsers. Cookies and JavaScript must be on. Hue can display in older, and other, browsers, but you might not have access to all of its features.

Customizing the Hue Web UI

To customize the Hue Web UI, you can add configuration properties in Cloudera Manager. You can customize the following Hue Web UI objects:

Banner

You can add a custom banner to the Hue Web UI by applying HTML directly to the property, banner_top_html. For example:
banner_top_html=<H4>My company's custom Hue Web UI banner</H4>
        
To configure a custom banner:
  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box, type top banner to locate the Top Banner Custom HTML banner_top_html configuration parameter.
  3. Add your custom HTML to the text box for the configuration parameter.
  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server:



  6. In the Hue configuration page of Cloudera Manager, select Web UI > Hue Load Balanced to load Hue and view your custom banner.

Page Logo

You can also replace the Hue logo with a customized logo that is created with SVG code. You can add any type of logo you want, but your custom logo should be designed to fit into a 160 x 40 pixel space.

For example, here is the Hue logo shown below:



You can change this Hue logo by adding the appropriate SVG code to the logo_svg property under [desktop] [[custom]] in the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter in Cloudera Manager as follows:

To replace the Hue logo with a custom logo:

  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box type hue_safety_valve.ini to locate the configuration parameter:



  3. Add the following parameters with your custom logo SVG code to the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter:

    [desktop]
    [[custom]]
    logo_svg='<custom_svg_code_for_logo>'
                

    For example, the following SVG code replaces the Hue logo with a red heart:

    [desktop]
    [[custom]]
    logo_svg='<g><path stroke="null" id="svg_1" d="m44.41215,11.43463c-4.05017,-10.71473
    -17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253 -14.497,-9.95663
    -18.411,0.5643c-4.35797,11.71793 16.891,22.23443 18.41163,23.95773c1.5181,-1.36927 22.7696,-12.43803
    18.4129,-23.96533z" fill="#ffffff"/> <path stroke="null" id="svg_2"
    d="m98.41246,10.43463c-4.05016,-10.71473 -17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253
    -14.497,-9.95663 -18.411,0.5643c-4.35796,11.71793 16.891,22.23443 18.41164,23.95773c1.5181,-1.36927
    22.76959,-12.43803 18.41289,-23.96533z" fill="#FF5A79"/> <path stroke="null" id="svg_3"
    d="m154.41215,11.43463c-4.05016,-10.71473 -17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253
    -14.497,-9.95663 -18.411,0.5643c-4.35796,11.71793 16.891,22.23443 18.41164,23.95773c1.5181,-1.36927 22.76959,-12.43803 18.41289,-23.96533z" fill="#ffffff"/> </g>'
                
  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server.

  6. In the Hue configuration page of Cloudera Manager, select Web UI > Hue Load Balanced to load Hue and view your custom logo.

    If you added the sample SVG code that defines a red heart as the logo, your Hue web UI looks like this:



Splash Screen

You can customize a splash screen on the login page by specifying HTML for the login_splash_html property under [desktop] [[custom]] in the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter in Cloudera Manager. For example, you could add the following warning message to the splash screen by specifying the following for this property:
[desktop]
[[custom]]
login_splash_html=WARNING: You are required to have authorization before you proceed.
        

The above configuration adds the following message to the Hue login screen:



To configure a splash screen in Cloudera Manager:

  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box, type hue_safety_valve.ini to locate the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter.
  3. Add the following parameters with your custom splash screen message to the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter:

    [desktop]
    [[custom]]
    login_splash_html=<custom_message>
                
  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server.
  6. In the Hue configuration page of Cloudera Manager, select Web UI > Hue Load Balanced to load Hue and view your custom splash screen message.

Cache Timeout

Enable Hue UI caching by setting a timeout in milliseconds. The default is 86400000 milliseconds or one day. Set the timeout to 0 to disable caching.

You can set the cache timeout using the cacheable_ttl property under [desktop][[custom]] in the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration property in Cloudera Manager as follows.

To set the cache timeout value:

  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box, type hue_safety_valve.ini to locate the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter.
  3. Add the following parameters with the cache timeout value to the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter:

    [desktop]
    [[custom]]
    cacheable_ttl=<value_in_milliseconds>
              

    For example, the following configuration sets the cache timeout to the default value of 86400000 milliseconds:

    [desktop]
    [[custom]]
    cacheable_ttl=86400000
              
  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server and the new cache timeout limit takes effect.

Anonymous Usage Data Collection

Hue tracks anonymized pages and application versions to gather information about application usage levels. The data collected does not include hostnames or IDs.

You can restrict or enable data collection by setting the collect_usage parameter to false or true under the [desktop] configuration section in the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration property in Cloudera Manager.

To enable or disable anonymous usage data collection:

  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box, type hue_safety_valve.ini to locate the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter.
  3. Add the following parameter to the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter:

    [desktop]
    ...
    # Help improve Hue with anonymous usage analytics. 
    # Use Google Analytics to see how many times an application or specific section of an application is used, nothing more.  
    ## collect_usage=<false | true>
    

    Where false disables data collection and true enables it.

  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server and the new data collection setting takes effect.