Changer la couleur de la topbar d'Ambari

Changer la couleur de la topbar d'Ambari

BEREZOWSKI César

By BEREZOWSKI César

9 juil. 2017

Catégories
Big Data
Hack
Tags
Ambari
Front-end
Vous appréciez notre travail......nous recrutons !

Ne ratez pas nos articles sur l'open source, le big data et les systèmes distribués, fréquence faible d’un email tous les deux mois.

J’étais récemment chez un client qui a plusieurs environnements (Prod, Integration, Recette, …) sur HDP avec chacun son instance Ambari.

L’une des questions soulevée par le client est la suivante :

Nous avons besoin de pouvoir différencier visuellement les environnements lors de l’utilisation d’Ambari et le nom du cluster n’est pas suffisant, comment peut-on changer la couleur de la bar en haut en rouge ?

Il n’y a pas de solution toute faite, mais voilà un petit hack : le CSS de la vue web est défini dans le fichier /usr/lib/ambari-server/web/stylesheets/vendor.css du serveur Ambari et le sélecteur CSS pour le fond de la bar est #top-nav .navbar.navbar-static-top .navbar-inner.

On peut donc par exemple ajouter la ligne suivante en haut du fichier vendor.css :

#top-nav .navbar.navbar-static-top .navbar-inner { 
  background-image: linear-gradient(to bottom, #aa0000, #ff0000) !important; 
}

et obtenir ce résultat, certes moche, mais fonctionnel :

ambari red bar

Impossible de rater ce rouge !

Il ne vous reste plus qu’à faire plus joli !

NB : étant donné que c’est un hack manuel, le code sera supprimé à la mise à jour d’Ambari !

Partagez cet article

Canada - Maroc - France

Nous sommes une équipe passionnée par l'Open Source, le Big Data et les technologies associées telles que le Cloud, le Data Engineering, la Data Science le DevOps…

Nous fournissons à nos clients un savoir faire reconnu sur la manière d'utiliser les technologies pour convertir leurs cas d'usage en projets exploités en production, sur la façon de réduire les coûts et d'accélérer les livraisons de nouvelles fonctionnalités.

Si vous appréciez la qualité de nos publications, nous vous invitons à nous contacter en vue de coopérer ensemble.

Support Ukrain