Tuto: Pour ajouter un menu perso dans la page ...

[Boby07]

Bonjour les gens,

pour ceux que ça interresse, voici comment rajouter un menu sur la droite de statusmap ... Le code est loin d'être optimisé, mais c'est un test. On peut faire ça avec des feuilles de style ...
Le code fonctionne sous IE toute version ou bien sur Mozilla (Version 3 testé et ça fonctionne)
configuration:Oreon 1.4 - Nagios 2.0 - StatusMap 1.1 - SUSE 10.1

Voici ci-dessous un aperçu:

http://florian.muller2.free.fr/nagios/test.jpg

Alors quand vous cliquez sur un lien (il s'agit ici de liens qui pointent vers l'extérieur), une nouvelle page de votre navigateur s'ouvre. Si vous passez la souris sur les liens, le fond de la cellule pointée change de couleur grace à OnMouseover (ici par défaut j'ai mis du rouge, mais vous pouvez changer comme vous le voulez) et pour terminer la police du lien change de taille là encore avec OnMouseOver (un zoom en gros, que la aussi vous pouvez changer à votre guise).

Si vous copiez/coller le code ci-dessous, dans le fichier qui va bien, alors vous optiendrez exatcement ce que vous avez en capture d'écran (pas la carte, faut pas déconner ^^).
Voici le code ... à placer dans le répertoire /usr/local/oreon/www/modules/statusmap
il s'agit de la page statusmap.ihtml


<script type="text/javascript" src="modules/statusmap/javascript/common.js"></script>
<script type="text/javascript" src="modules/statusmap/javascript/overlib_mini.js"><!-- overLIB (c) Erik Bosrup --></script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>


<form {$form.attributes}>
<table id="ListTable">
<tr class="ListHeader"><td class="ListColHeaderCenter" colspan="2" >{$STATUSMAP_TITLE} du <font color="white"> Conseil General de l'Ardeche</font><span id='oreonstatusmap_timestamp'></span></td></tr>
<tr >
<td><map id='statusmap' name='statusmap'></map>
<div align=center><img id='oreonstatusmapimg' usemap="#statusmap" src='{$STATUSMAP_URL}'></div></td>
<td>
<div style="color:blue">
<p onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">
<font size="2"><img src="./img/enabled.gif"> Manipulations sur carte:</font></div>
<br>
<br>
<table>
<tr class="ListColLvl1_name">
<td class="FormRowField">{$form.layout_method.label}</td>
<td class="FormRowValue">{$form.layout_method.html}</td>
</tr>

<tr class="ListColLvl2_name">
<td class="FormRowField">{$form.layermode.label}</td>
<td class="FormRowValue">{$form.layermode.html}</td>
</tr>
<tr class="ListColLvl1_name">
<td class="FormRowField">{$form.layer.label}</td>
<td class="FormRowValue">{$form.layer.html}</td>
</tr>
<!--<tr class="ListColLvl2_name">
<td class="FormRowField">{$form.scaling_factor.label}</td>
<td class="FormRowValue">{$form.scaling_factor.html}</td>
</tr> -->
<tr class="ListColLvl2_name">
<td class="FormRowField">{$form.popup.label}</td>
<td class="FormRowValue">{$form.popup.html}</td>
</tr>
<tr class="ListColLvl1_name" align="center">
<td class="FormRowField" colspan="2"><p class="oreonbutton">{$form.update.html}</p></td>
</tr>

</table>
<br>
<br>
<div style="color:blue">
<p onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">

<font size="2"><img src="./img/enabled.gif"> Acces direct aux Onduleurs:</font>
</div>
<br>
<br>
<div align="center">

<table border="2" width="190px">



<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> GTSE Le Teil.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"> <img src="./img/status2.gif"> UTSE Le Teil.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>0" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> GTN Annonay.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"> <img src="./img/status2.gif"> UTN Annonay.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> Pole Astier Froment.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> GTC St Peray.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> UTSO Aubenas.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> UTSO2 Aubenas.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> GTSO Aubenas.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> CMS Tournon.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> BDP Veyras.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> UTC Guilherand.</td>
</tr>

<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> TRAM Subdi Privas.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> Vanel.</td>
</tr>
<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src="./img/status2.gif"> Hotel du departement.</td>
</tr>


</table>
</div>
<br>
<br>
<div style="color:blue">
<p onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">
<font size="2"><img src="./img/enabled.gif"> Prise de main a distance:</font>
</div>
<br>
<br>
<div align="center">
<table border="2" width="200">

<tr>
<td height="20px" onmouseover="this.style.fontSize='13px'; this.style.backgroundColor='red'";" onmouseout="this.style.fontSize='10px'; this.style.backgroundColor='transparent';"><a href="<adresse_à_pointer>" target="Accès à l'onduleur !" target="blanck" style="color:black"><img src=./img/command.png> KVM-IP Hotel Dept.</td>
</tr>

</table>
</div>
</td>
</tr>
</table>




{$form.hidden}
</form>

{$initJS}



Voila un maigre contribution , a++
PS: Dans le code, s'est pas target="Accès à l'onduleur !" , s'est title="Accès à l'onduleur !" , je corigerai de mon coté ;)

[DonKiShoot]

Merci beaucoup au nom du peuple libre :D

[Boby07]

Bien évidemment, le code est en dur dans la page, donc si vous voulez rajouter un lien il faudra rajouter du code ...
Cette solution peut être améliorée dans la base de donnée Nagios des champs spécialement pour ce tableau.
On peut imaginer une boxe dans laquel on demande de renseigner le nom de l'host, dans un autre son adresse IP et soumettre le lien, qui ets enregistré et qui saffiche automatiquement grace a des requêtes SQL en boucles.
Pour le moment je n'ai pa fais car la page est en .ihtml, alors qu'il faudrait du .php au minimum ... alors ok on peut changer l'extension pour utiliser les balise <? php ?> mais j'ai peur qu'il y ai des dépendances dans d'autres fichiers, et qui ne connaissent que le statusmap.ihtml et non pas statusmap.php ...
Bref si quelqu'un a une idée lumineuse ?

Bien évidemment, tout le monde n'aura pas besoin d'utiliser un tableau en plus, mais s'est pour montrer que s'est faisable, et que ça peut bien dépanner (dans mon cas à moi, à 150% !)
POUR INFO: les logos utilisés près des liens, sont avec la distribution, a savoir dans /usr/local/nagios/share/images
Il vous faut fair eun copier/coller dans le répertoire /usr/local/oreon/www/img et le tour est joué !

[DonKiShoot]

si ta statusmap.ihtml appellait tout simplement une page php ???

[Boby07]

oui, mais pour faire du traitement de requête avec variables dans la page statusmpa.ihtml
exe: < ? echo $Login ?> il faut que celle-ci soit en php ... car s'est dans la page .ihtml que je veux que ça s'affiche?

Biensure je peux appeller une page en php, mais après il faut bien que j'affiche les résultats dans statusmap.ihtml ...
De plus , une page statusmap.php existe déjà .. ça va poser soucis ^^
Je testerai ... si tu as de bons conseils, je suis preneur !

[DonKiShoot]

Inclure dans la page ihtml une area php :idea:

CSS :
object {width:400px; height:200px}

HTML :
<object data="mabidouille.php?var1=val1&var2=val2" type="text/html" />

[Boby07]

j'ai testé quelques bidouilles, s'est assez tendu ^^
Si tu veux t'amuser toi aussi, tu peux essayer de tenter la chose et tu me dis ce qu'il en est ?
Il faut des fous comme nous, pour faire de petits trucs ... lol

Si tu as le temps de faire des tests, et a arriver a des résultats je suis preneur de toutes idées :)