Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Update API documentation and enhance PingSandbox component #41

Merged
eliott-b merged 3 commits into from
Dec 20, 2024
Merged

Update API documentation and enhance PingSandbox component #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e46bda2
🐞 fix: Mise à jour de la documentation API pour inclure le paramètre …
444chak Dec 20, 2024
1ba12f9
🐞 fix: Ajout d'un indicateur de chargement lors de l'exécution du pin…
444chak Dec 20, 2024
7808af4
🐞 fix: Ajout d'un indicateur de chargement et amélioration de l'affic…
444chak Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion api/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ L'applications dépend de la base de données pour fonctionner. Il faut donc lan

| Method | URL | Description | Need token | Roles |
| ------ | --------------- | ----------- | ---------- | ----- |
| GET | /ipv4/mask/{ip} | Get mask | True | User |
| GET | /ipv4/mask/{ip}/{mask} | Get mask | True | User |

#### Get VLSM

Expand Down
127 changes: 65 additions & 62 deletions front-js/src/app/modules/ping/cours.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,25 @@ import axios from "@/axiosConfig";
import Cookies from "js-cookie";
import { AxiosError } from "axios";
import Button from "@/components/Button";
import { Alert } from "@mui/material";
import { Alert, CircularProgress } from "@mui/material";
import Box from "@/components/Box";

const Cours: React.FC = () => {
const [pingTest, setPing] = useState("");
const [res, setRes] = useState("");
const [valid, setValid] = useState(false);
const [isLoading, setIsLoading] = useState(false);

const handlePing = async (e: { preventDefault: () => void }) => {
setIsLoading(true);
e.preventDefault();
try {
const ipAddress = pingTest.replace('ping ', '');
const response = await axios.get(
"/scapy/ping/" + ipAddress,
{
headers: {
Authorization: `Bearer ${Cookies.get("access_token")}`,
},
}
);
const ipAddress = pingTest.replace("ping ", "");
const response = await axios.get("/scapy/ping/" + ipAddress, {
headers: {
Authorization: `Bearer ${Cookies.get("access_token")}`,
},
});
const data = response.data;
if (response.status === 200) {
setRes(data.destination);
Expand All @@ -52,6 +51,7 @@ const Cours: React.FC = () => {
setRes("false");
}
}
setIsLoading(false);
};

return (
Expand All @@ -60,92 +60,92 @@ const Cours: React.FC = () => {
<Space space="1rem">
<Title level={2}>Introduction</Title>
<Text>
Le ping est un outil de diagnostic réseau utilisé pour tester la connectivité entre deux hôtes
sur un réseau IP. Il fonctionne en envoyant des paquets ICMP (Internet Control Message Protocol)
de type à un hôte cible et en attendant des réponses.
Le ping est couramment utilisé pour vérifier si un hôte est accessible, mesurer le temps de
latence entre deux hôtes, et diagnostiquer les problèmes de réseau.
Le ping est un outil de diagnostic réseau utilisé pour tester la
connectivité entre deux hôtes sur un réseau IP. Il fonctionne en
envoyant des paquets ICMP (Internet Control Message Protocol) de
type à un hôte cible et en attendant des réponses. Le ping est
couramment utilisé pour vérifier si un hôte est accessible, mesurer
le temps de latence entre deux hôtes, et diagnostiquer les problèmes
de réseau.
</Text>
<Title level={2} margin={{ top: "2rem" }}>
Structure paquet ICMP
</Title>
<Text>
Un paquet ICMP est encapsulé dans un paquet IP et contient plusieurs champs spécifiques.
La structure d'un paquet ICMP Requête/Réponse est la suivante :
Un paquet ICMP est encapsulé dans un paquet IP et contient plusieurs
champs spécifiques. La structure d&rsquo;un paquet ICMP
Requête/Réponse est la suivante :
</Text>
<Text>L&rsquo;entête est composée de :</Text>
<Text>
L'entête est composée de :
1. Type (1 octet) : Ce champ indique le type de message ICMP.
</Text>
<Text>
1. Type (1 octet) : Ce champ indique le type de message ICMP.
2. Code (1 octet) : Fournit des informations supplémentaires sur le
type.
</Text>
<Text>
2. Code (1 octet) : Fournit des informations supplémentaires sur le type.
</Text>
<Text>
3. Checksum (2 octets) : Ce champ contient une somme de contrôle utilisée pour vérifier l'intégrité du paquet ICMP.
3. Checksum (2 octets) : Ce champ contient une somme de contrôle
utilisée pour vérifier l&rsquo;intégrité du paquet ICMP.
</Text>
<Text>
4. Identifiant (2 octets) : Identifie de manière unique une requête/réponse.
4. Identifiant (2 octets) : Identifie de manière unique une
requête/réponse.
</Text>
<Text>
5. Numéro de séquence (2 octets) : Ce champ est utilisé pour numéroter les paquets dans une session de ping,
permettant de détecter les pertes de paquets.
5. Numéro de séquence (2 octets) : Ce champ est utilisé pour
numéroter les paquets dans une session de ping, permettant de
détecter les pertes de paquets.
</Text>
<Text>
Après l'entête, nous retrouvons toutes les données qui sont envoyés dans le paquet ICMP.
Après l&rsquo;entête, nous retrouvons toutes les données qui sont
envoyés dans le paquet ICMP.
</Text>
<Text>
Voici un exemple de commande que vous pourriez utiliser afin de réaliser un ping :
<Text>
Voici un exemple de commande que vous pourriez utiliser afin de
réaliser un ping :
<Spacer x={1} />
<Code
text="ping 8.8.8.8"
language="text"
theme={solarizedLight}
/>
<Code text="ping 8.8.8.8" language="text" theme={solarizedLight} />
</Text>
<Title level={2} margin={{ top: "2rem" }}>
Réponse d'une requête ping
Réponse d&rsquo;une requête ping
</Title>
<Text weight="bold">Envoi de l&rsquo;Echo Request :</Text>
<Text>
Envoi de l'Echo Request :
</Text>
<Text>
Lorsque vous envoyez un ping à un autre appareil, votre ordinateur crée un petit message appelé "Echo Request".
Ce message est envoyé à l'adresse IP de l'appareil cible.
</Text>
<Text>
Réception de l'Echo Request :
</Text>
<Text>
L'appareil cible reçoit le message "Echo Request".
Il vérifie que le message n'est pas corrompu en utilisant une somme de contrôle (checksum).
</Text>
<Text>
Création de l'Echo Reply :
</Text>
<Text>
Si le message est correct, l'appareil cible crée un nouveau message appelé "Echo Reply".
Ce message contient les mêmes informations que l'Echo Request, mais avec un type différent pour indiquer qu'il s'agit d'une réponse.
Lorsque vous envoyez un ping à un autre appareil, votre ordinateur
crée un petit message appelé &quot;Echo Request&quot;. Ce message
est envoyé à l&rsquo;adresse IP de l&rsquo;appareil cible.
</Text>
<Text weight="bold">Réception de l&rsquo;Echo Request :</Text>
<Text>
Envoi de l'Echo Reply :
L&rsquo;appareil cible reçoit le message &quot;Echo Request&quot;.
Il vérifie que le message n&rsquo;est pas corrompu en utilisant une
somme de contrôle (checksum).
</Text>
<Text weight="bold">Création de l&rsquo;Echo Reply :</Text>
<Text>
L'appareil cible envoie le message "Echo Reply" à votre ordinateur.
Votre ordinateur reçoit ce message et peut ainsi confirmer que l'appareil cible est accessible.
Si le message est correct, l&rsquo;appareil cible crée un nouveau
message appelé &quot;Echo Reply&quot;. Ce message contient les mêmes
informations que l&rsquo;Echo Request, mais avec un type différent
pour indiquer qu&rsquo;il s&rsquo;agit d&rsquo;une réponse.
</Text>
<Text weight="bold">Envoi de l&rsquo;Echo Reply :</Text>
<Text>
Mesure du Temps de Réponse :
L&rsquo;appareil cible envoie le message &quot;Echo Reply&quot; à
votre ordinateur. Votre ordinateur reçoit ce message et peut ainsi
confirmer que l&rsquo;appareil cible est accessible.
</Text>
<Text weight="bold">Mesure du Temps de Réponse :</Text>
<Text>
Votre ordinateur mesure le temps écoulé entre l'envoi de l'Echo Request et la réception de l'Echo Reply.
Ce temps est appelé "latence" et vous donne une idée de la rapidité de la connexion réseau.
Votre ordinateur mesure le temps écoulé entre l&rsquo;envoi de
l&rsquo;Echo Request et la réception de l&rsquo;Echo Reply. Ce temps
est appelé &quot;latence&quot; et vous donne une idée de la rapidité
de la connexion réseau.
</Text>
<Title level={2} margin={{ top: "2rem" }}>
Essayez ! <Emoji name="test-tube" width={32} />
</Title>
Tentez de ping le site de l'iut de Vélizy.
Tentez de ping le site de l&rsquo;iut de Vélizy.
<Code
text="https://www.iut-velizy-rambouillet.uvsq.fr/"
language="text"
Expand All @@ -164,7 +164,10 @@ const Cours: React.FC = () => {
<Button text="Vérifier" primary form="submit" type="input" />
</form>
<Box margin={{ top: "20px", bottom: "20px" }}>
{res &&
<Box align="center">{isLoading && <CircularProgress />}</Box>

{!isLoading &&
res &&
(valid ? (
<Alert
severity="success"
Expand Down
109 changes: 73 additions & 36 deletions front-js/src/app/modules/ping/pingSandbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,22 @@ import { useState } from "react";
import axios from "@/axiosConfig";
import Cookies from "js-cookie";
import { AxiosError } from "axios";
import { Alert } from "@mui/material";
import {
Alert,
CircularProgress,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
} from "@mui/material";
import Box from "@/components/Box";

const pingSandbox: React.FC = () => {
const PingSandbox: React.FC = () => {
const [command, setCommand] = useState<string>("");
const [simpleRes, setSimpleRes] = useState("");
const [isLoading, setIsLoading] = useState(false);

const [testPing, setTestPing] = useState<{
rtt_ms: number;
Expand All @@ -25,14 +35,21 @@ const pingSandbox: React.FC = () => {
const [error, setError] = useState<string>("");

const handleSimplify = async (e: { preventDefault: () => void }) => {
setIsLoading(true);
setError("");
setSimpleRes("");
e.preventDefault();
const parts = command.split(" ");
if (parts.length < 2 || parts.length > 2) {
setSimpleRes("Commande invalide");
setSimpleRes("");
setIsLoading(false);
setError("Commande invalide");
return;
}
if (parts[0] !== "ping") {
setSimpleRes("Commande invalide");
setSimpleRes("");
setIsLoading(false);
setError("Commande invalide");
return;
}
try {
Expand Down Expand Up @@ -69,11 +86,12 @@ const pingSandbox: React.FC = () => {
setError("Erreur lors de la tentative de ping");
}
}
setIsLoading(false);
};

return (
<Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
<>
<Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
<>
<form onSubmit={handleSimplify}>
<Title level={2}>Envoi de requête de ping</Title>

Expand All @@ -97,43 +115,62 @@ const pingSandbox: React.FC = () => {
handleSimplify(e);
}}
/>
{simpleRes && testPing ? (
{isLoading && (
<Box align="center" margin={{ top: "20px" }}>
<CircularProgress />
</Box>
)}
{!isLoading && simpleRes && testPing ? (
<Box margin={{ top: "20px", bottom: "20px" }}>
<Alert
severity="success"
variant="outlined"
style={{ borderRadius: "10px" }}
>
Résultat : {simpleRes}
<Space />
<table style={{ borderCollapse: "collapse", width: "100%" }}>
<tbody>
<tr style={{ borderBottom: "1px solid black" }}>
<th style={{ paddingRight: "1.5em" }}>Source</th>
<td>{testPing.source}</td>
</tr>
<tr style={{ borderBottom: "1px solid black" }}>
<th style={{ paddingRight: "1.5em" }}>Destination</th>
<td>{testPing.destination}</td>
</tr>
<tr style={{ borderBottom: "1px solid black" }}>
<th style={{ paddingRight: "1.5em" }}>TTL</th>
<td>{testPing.ttl}</td>
</tr>
<tr style={{ borderBottom: "1px solid black" }}>
<th style={{ paddingRight: "1.5em" }}>RTT (ms)</th>
<td>{testPing.rtt_ms}</td>
</tr>
<tr style={{ borderBottom: "1px solid black" }}>
<th style={{ paddingRight: "1.5em" }}>Taille du paquet</th>
<td>{testPing.packet_size}</td>
</tr>
</tbody>
</table>
</Alert>
<TableContainer
component={Paper}
sx={{ marginTop: "20px", backgroundColor: "#f6f6f666" }}
>
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
<TableBody>
<TableRow style={{ borderBottom: "1px solid black" }}>
<TableCell style={{ paddingRight: "1.5em" }}>
Source
</TableCell>
<TableCell>{testPing.source}</TableCell>
</TableRow>
<TableRow style={{ borderBottom: "1px solid black" }}>
<TableCell style={{ paddingRight: "1.5em" }}>
Destination
</TableCell>
<TableCell>{testPing.destination}</TableCell>
</TableRow>
<TableRow style={{ borderBottom: "1px solid black" }}>
<TableCell style={{ paddingRight: "1.5em" }}>
TTL
</TableCell>
<TableCell>{testPing.ttl}</TableCell>
</TableRow>
<TableRow style={{ borderBottom: "1px solid black" }}>
<TableCell style={{ paddingRight: "1.5em" }}>
RTT (ms)
</TableCell>
<TableCell>{testPing.rtt_ms}</TableCell>
</TableRow>
<TableRow style={{ borderBottom: "1px solid black" }}>
<TableCell style={{ paddingRight: "1.5em" }}>
Taille du paquet
</TableCell>
<TableCell>{testPing.packet_size}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Box>
) : null}
{error? (
{!isLoading && error ? (
<Box margin={{ top: "20px", bottom: "20px" }}>
<Alert
severity="error"
Expand All @@ -145,9 +182,9 @@ const pingSandbox: React.FC = () => {
</Box>
) : null}
</form>
</>
</Space>
</>
</Space>
);
};

export default pingSandbox;
export default PingSandbox;