Diagrammes équipements réseau + ping

Bonjour à tous,

Je cherche à faire une sorte d'organigramme représentant l'architecture de routeurs/switchs avec icônes en png. Mon but est d'avoir cette représentation dont le background de chaque élément change lorsque l'on arrive plus à pinger ce dernier.

Est-ce possible de faire cela avec uniquement du HTML/CSS/JS ? Ne pouvant pas me servir d'un serveur, je ne peux donc pas utiliser PHP, mais je pense que javascript peut faire des ping en ajax et ainsi modifier le code HTML. De plus, pensez-vous qu'une base de données type sqlite peut être utilisée pour créer l'architecture de base (nom de l’élément, adresse ip, dépend de l'élément xx, chemin du PNG, etc...).

Pour les graphs j'ai pensé à ceci (avec une préférence pour le premier):
http://www.jointjs.com/demos/org
https://github.com/wesnolte/jOrgChart

J'ai cherché un peu partout pour les PING, mais rien de concluant donc je me tourne vers vous.

En vous remerciant par avance.

maxredphenix
Modifié par maxredphenix (31 Dec 2013 - 12:08)

Bonsoir,

Tu ne pourras pas faire d'ajax ou d'appel à une base de donnée sqlite sans language côté serveur.

Quelques librairie javascript pour visualiser des données :
https://github.com/mbostock/d3/wiki/Gallery
http://philogb.github.io/jit/demos.html
https://developers.google.com/chart/interactive/docs/gallery/orgchart

Bonjour,

Tout d'abord merci pour la réponse.

En effet, pas de possibilité de faire de l'Ajax, mais j'ai pensé à la création d'un fichier JSON contenant toutes les infos, c'est assez simple à gérer, rapide et pas besoin de serveur...

Suite à la création de ce post j'ai continué à parcourir le net pour chercher d'autre scripts pour créer l'architecture je suis tombé sur ceci:
http://joeloughton.com/blog/web-applications/force-directed-emails-visualisation-using-arbor-js/
et http://alkemis.com/etsy/ (avec un mot comme "hello")

Du coup je me dis que, faire une représentation visuelle du réseau comme Nagios en "étoile" c'est pas mal du tout et cela reste visible. De plus, si un jour quelqu'un veut utiliser ce que j'ai fait il pourra plus facilement gérer un réseau un peu plus gros (le mien est d'une 20aine de machines)

Du coup, si je créer un fichier JSON, la manipulation de ce dernier couplé au plugin ArborJS devrait se faire et pas besoin de serveur, juste du HTML+CSS+JS (JQUERY + PLUGIN)

Sinon, pour la vérification des équipements par ping, il y a ceci qui pourrait être repris :
http://jsfiddle.net/GSSCD/203/

Qu'en dis-tu?

Encore merci

En effet le format json est le mieux adapté. Celui-ci est en général utilisé par les librairies JavaScript de visualisation de donnée. Tu pourras facilement le mettre à jour via ton éditeur de texte.

Nagios utilise la librairie d3, mentionné plus haut, pour ses graphes.
Tu pourras voir, après un petit tour dans la doc, toutes ses possibilités.

Je ne suis pas sur que arbor.js soit très adapté. (pas vu de démo)

Encore merci.

Pour ce qui est d'Arbor j'ai pensé copier ce qu'il y avait dans les liens que je t'ai donné, car en effet il n'y a rien sur le site, bizarre

J'ai fait un tour du côté de la librairie D3. Je pense que Nagios doit utiliser le principe de celui-ci:
http://bl.ocks.org/mbostock/4063550

Il faut donc que je trouve comment faire pour remplacer ces cercles par des icônes sectionnées parmi une liste donc le lien se trouverait ensuite dans le Json. Puis ensuite relier ce graph au script "ping" . Il va falloir que j'apprenne un peu mieux le javascript...

Il faudrait aussi que je copie le principe de mise en avant d'un lien lors d'un survol comme ci-dessous:
http://thepowerrank.com/visual/NCAA_Tournament_Predictions

Mais je pense que ce graph là peut m'aider à faire ces 2 choses:
http://ramblings.mcpher.com/Home/excelquirks/gassites/d3nodefocus
Modifié par maxredphenix (03 Jan 2014 - 16:13)