Afficher les graphiques de munin plus rapidement
Par Dju » 05 décembre 2011 (20:20) - Serveur
Aujourd'hui un petit truc & astuce pour Munin, consistant à optimiser un peu l'affichage des graphs grâce à Jquery..
Le but: simplement de ne charger que le graph que l'on souhaite regarder, et pas tous les autres, de manière à ne pas attendre, particulièrement si on veut consulter un graph se trouvant en fin de page
Qund on affiche la page d'une machine, on peut avoir beaucoup de graphs affichés.
Et si vous souhaitez regarder celui qui est toouuut en bas de la page, faut attendre un peu le temps que tous les autres se chargent..
Je vous propose ici une petite astuce pour remédier à cela, grâce à Jquery.
Cela permettra de ne charger et afficher que ce qui est à l'écran, et non ce qui en dessous/dessus.
On commence donc par se rendre dans le dossier munin, y crééer un dossier js, dans lequel nous allons enregistrer 2 scripts
1/ Jquery
cd /var/www/munin
mkdir js
cd js
wget http://code.jquery.com/jquery-1.7.js (ou http://code.jquery.com/jquery-1.7.1.min.js pour la version minified)
wget http://www.appelsiini.net/projects/lazyload/img/grey.gif
Puis on va avoir besoin de http://www.appelsiini.net/projects/lazyload, librairie écrite avec Jquery
wget https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js (ou https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js pour la minified)
on accorde au dossier js le meme que les autres fichiers/dossier dans munin
chown -R munin:munin /var/www/munin/js
Enfin, on va éditer le template de munin pour activer tout ca :
On édite le fichier /etc/munin/templates/partial/head.tmpl
Juste avant /head on rajoute
<script src="/munin/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="/munin/js/jquery.lazyload.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect : "fadeIn" }); }); </script>
La premiere ligne appelle la librairie Jquery, tandis que la 2è appelle la fonction LazyLoad, permettant de charger les images au fur et à mesure que la page défilera, et affichera des images pas encore chargées.
Les suivantes déclenchent l'évènement avec un petit effet fadeIn des plus sympas
Enfin, on modifie le fichier /etc/munin/templates/munin-nodeview.tmpl qui est celui de la page affichant tous les graphes pour un noeud donné :
cd /etc/munin/templates
sed -i -e 's!src="!src="/munin/img/grey.gif" data-original="!g' munin-nodeview.tmpl
ici le template est modifié de manière à afficher par défaut une simple image de 1 pixel de largeur nommé grey.gif.
Et c'est seulement lorsque la page aura été défilée que LazyLoad intervient en remplacant la source de l'image par celle spécifiée dans l'attribut data-original, avec l'effet fadeIn.
A partir de maintenant, on attend 5 minutes au max pour que munin génère à nouveau les fichiers HTML et on admire
Soyez le premier à commenter ce billet
URL de rétrolien : https://blog.crifo.org/trackback/89