Stage Erasme: Visualisation de Réseaux

Chapitre 6

Côté client

La partie cliente doit principalement s'attacher au problème de représentation de la base, c'est le point le plus important à considérer. Le responsable de stage a défini ce qu'il désirait comme interface, ce qu'il désirait obtenir comme visualisation la plus compréhensible possible et interprétable.

6.1 Description de l'interface

6.1.1 Visualisation des sous-réseaux

L'affichage principal est un tableau de sous-réseaux. Le premier sous-réseau, par exemple 172.17.0.0/22, celui dont on cherche à avoir un découpage est affiché sur la première ligne. Puis, ce sous réseau est découpé en deux parties, 172.17.0.0/23 et 172.17.2.0/23 qui sont ajoutés sur la deuxième ligne, on réitère en découpant les deux sous réseaux en deux et on place les quatre sous réseaux ainsi obtenus (172.17.0.0/24, 172.17.1.0/24, 172.17.2.0/24 et 172.17.3.0/24) sur la troisième ligne. On peut choisir le nombre de lignes que l'on cherche à obtenir, en entrant en fait la plage de départ et en ajoutant un '/' et le nombre de lignes, ce qui donne dans notre exemple : 172.17.0.0/22/5. Cette manière d'entrer les informations a été préférée, notamment par M Blanc, utilisateur final de l'outil, car il est beaucoup plus rapide de taper une seule fois de cette manière plutôt que de cliquer sur une case, entrer la plage, cliquer sur une boite de sélection pour le masque, cliquer sur une autre boite de sélection pour le nombre de niveaux et enfin cliquer sur un bouton de validation. La figure 6.1.1 page 31 représente un schéma de ce qui est représenté à l'écran.

De plus, lors de la requête, les cases sont de couleur grisâtres (comme un bouton que l'on ne pourrait pas cliquer), ce qui indique que pour le moment, il n'y a pas d'informations disponibles pour la case considérée. Puis lorsque des informations parviennent, les cases changent de couleur pour indiquer que, maintenant, des informations sont disponibles (voir capture 6.1.1 page 31).

Si aucune plage n'est trouvée dans ce réseau, une boite de dialogue s'ouvre

CHAPITRE 6. COTÉ CLIENT 31
FIG. 6.1 - Capture d'écran de la représentation de sous réseaux

FIG. 6.2 - Arrivée des informations

pour demander à l'utilisateur s'il désire remonter dans l'arborescence pour trouver la première plage parente. Cette fonctionnalité est très utile, notamment lorsque l'on cherche à qui appartient une plage ou de quelle catégorie («Mairies», «Écoles», «Collèges») elle fait partie.

Un clic droit sur une case donnée affichera un menu permettant de zoomer sur la plage sélectionnée, d'afficher les informations détaillées sur cette plage ou d'ouvrir une page Web permettant d'accéder à des informations encore plus détaillées sur cette plage. Cependant, il faut noter que cette dernière possibilité n'est envisageable que pour les plages contenues dans la base de données MySQL. En effet, cette page s'ouvre vers un logiciel écrit précédemment, qui n'affiche les informations disponibles que pour les sous réseaux contenus dans la base de données.

6.1.2 Affichage des informations d'une plage

La plage, son adresse au format CIDR, est affichée directement dans la case prévue à cet effet. D'autres informations sont importantes comme à qui appartient la plage («Mairie de Saint-Clément-les-Places» ou «École de Sainte-Foyl'Argentière» ), le groupe qui l'a enregistrée (ERASME) et une description. Cependant, la place manquait vite dans les cases et il a fallu trouver autre chose. L'idée, très simple, est de déporter l'affichage en bas de l'écran, dans un onglet, et qu'à chaque fois que la souris passe sur une case les informations sont affichées touj ours au même endroit. L'affichage est déporté en bas, dans un onglet, et non sur la gauche ou la droite car le problème de place se posait essentiellement à l'horizontal et non à la vertical.

6.1.3 Recherche de plages libres

La recherche est dans un onglet, comme l'affichage des informations. Cette table à onglets permet de gagner de la place et est légitime car il ne sera pas nécessaire de vérifier les informations sur une plage donnée en même temps que l'on recherche une liste des plage libres.

La recherche s'effectue par l'entrée d'une valeur dans une case de texte puis par pression de la touche <ENTRÉE> ou par un clic sur le bouton prévu à cet effet. On peut choisir d'afficher la liste des plages depuis le début ou depuis la fin. Le paramètre devant avoir la forme suivante:

X.X.X.X/MASQUE/MASQUE_RECHERCHE. Les quatre X séparés par un point identifie une adresse IP, MASQUE complétant cette adresse pour obtenir une plage sous la forme d'une notation CIDR dans laquelle rechercher les plages libres. Enfin MASQUE_RECHERCHE spécifie la taille des plages recherchées. Par exemple on veut trouver la liste des plages de taille /27 disponibles dans le réseau

172.17.0.0/22, il suffit d'entrer : 172.17.0.0/22/27 et de presser la touche <ENTRÉE>. Il est à noter que si une plage libre est de taille /26, alors le serveur la découpe en deux plages de tailles /27 consécutives. Toutes les plages obtenues s'affichent dans un tableau et il suffit de cliquer sur une des plages pour que l'affichage

principal «zoome» sur cette plage.

Il faut noter que la recherche de plages libres n'a aucun sens dans le cas de requêtes whois. Elle n'est utilisée que pour rechercher des plages du réseau géré par ERASME pour allouer des plages à de nouvelles écoles ou mairies.

6.1.4 Recherche de plages selon un filtre

Cette recherche est aussi située dans un onglet. Pour effectuer la recherche, on entre de la même manière une plage au format CIDR, on choisit la catégorie: soit le propriétaire, soit le registrar (organisme ayant enregistré la plage). Ensuite on entre le filtre de recherche et on appuie sur la touche <ENTRÉE> ou on clique sur le bouton prévu à cet effet. Le filtre accepte les «jokers» du langage SQL, c'est à dire des caractères symbolisant n'importe quel caractère ou groupe de caractères. Par exemple, le filtre «e%e» affichera toutes les plages commençant par la lettre 'e' et se terminant par cette même lettre. La recherche n'est pas sensible à la casse, ainsi «ERASME», «ErAsMe», «erasme» donnera exactement le même résultat.

De même, les plages s'ajoutent dans un tableau et la sélection d'une de ses plages la fera s'afficher dans la partie visualisation.

6.1.5 Navigation dans la partie visualisation

Après avoir entré une plage et l'avoir visualisée, on peut, grâce à un panneau de navigation, remonter, aller à la plage suivante, aller à la plage précédente, descendre. Lorsque l'on remonte, on va en fait à la plage immédiatement supérieure de la plage actuelle. Par exemple, après avoir entré : 172.17.6.0/23/6 et la pression sur le bouton permettant le remonté sélectionnera la plage 172.17.4.0/22/6. Lorsque l'utilisateur cliquera ensuite sur le bouton permettant d'aller à la plage précédente, la navigation le dirigera vers la plage 172.17.0.0/22/6 alors que la navigation l'aurait emmené vers la plage 172.17.10.0/22/6 s'il avait voulu obtenir la plage suivante. Pour aller vers le bas, en fait augmenter le masque d'une unité, le choix se pose. En effet, le découpage d'une plage /26 donne deux plages /27. Par défaut, l'utilisateur sera dirigé vers la première plage à partir de la gauche.

6.1.6 Historique

Une autre fonctionnalité intéressante est l'historique. Il y a trois boutons en haut à gauche permettant de naviguer comme dans les butineurs Web : page précédente, page suivante et aller directement à une page par sélection sur un menu surgissant (popup menu).