Ping table to geolocations page

Plan/react/dashboard/src/components/cards/CardHeader.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import {Card} from "react-bootstrap-v5";
+import {useTranslation} from "react-i18next";
+
+const CardHeader = ({icon, color, label}) => {
+    const {t} = useTranslation();
+
+    return (
+        <Card.Header>
+            <h6 className="col-black">
+                <Fa icon={icon} className={"col-" + color}/> {t(label)}
+            </h6>
+        </Card.Header>
+    )
+};
+
+export default CardHeader

Plan/react/dashboard/src/components/cards/common/PingTableCard.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Card} from "react-bootstrap-v5";
+import CardHeader from "../CardHeader";
+import {faWifi} from "@fortawesome/free-solid-svg-icons";
+import PingTable from "../../table/PingTable";
+
+const PingTableCard = ({data}) => {
+    return (
+        <Card>
+            <CardHeader icon={faWifi} color="green" label={'html.label.connectionInfo'}/>
+            <PingTable countries={data?.table || []}/>
+        </Card>
+    )
+};
+
+export default PingTableCard

Plan/react/dashboard/src/components/table/PingTable.js

@@ -0,0 +1,42 @@
+import React from "react";
+import {useTheme} from "../../hooks/themeHook";
+import {useTranslation} from "react-i18next";
+
+const PingRow = ({country}) => {
+    return (
+        <tr>
+            <td>{country.country}</td>
+            <td>{country.avg_ping}</td>
+            <td>{country.min_ping}</td>
+            <td>{country.max_ping}</td>
+        </tr>
+    );
+}
+
+const PingTable = ({countries}) => {
+    const {t} = useTranslation();
+    const {nightModeEnabled} = useTheme();
+
+    return (
+        <table className={"table mb-0" + (nightModeEnabled ? " table-dark" : '')}>
+            <thead className="bg-amber">
+            <tr>
+                <th>{t('html.label.country')}</th>
+                <th>{t('html.label.averagePing')}</th>
+                <th>{t('html.label.bestPing')}</th>
+                <th>{t('html.label.worstPing')}</th>
+            </tr>
+            </thead>
+            <tbody>
+            {countries.length ? countries.map((country, i) => <PingRow key={i} country={country}/>) : <tr>
+                <td>{t('generic.noData')}</td>
+                <td>-</td>
+                <td>-</td>
+                <td>-</td>
+            </tr>}
+            </tbody>
+        </table>
+    )
+};
+
+export default PingTable;

Plan/react/dashboard/src/service/serverService.js

@@ -48,6 +48,12 @@ export const fetchPlayers = async (identifier) => {
     return doGetRequest(url);
 }
 
+export const fetchPingTable = async (identifier) => {
+    const timestamp = Date.now();
+    const url = identifier ? `/v1/pingTable?server=${identifier}&timestamp=${timestamp}` : `/v1/pingTable?timestamp=${timestamp}`;
+    return doGetRequest(url);
+}
+
 export const fetchPlayersOnlineGraph = async (identifier) => {
     const timestamp = Date.now();
     const url = `/v1/graph?type=playersOnline&server=${identifier}&timestamp=${timestamp}`;

Plan/react/dashboard/src/views/server/ServerGeolocations.js

@@ -1,25 +1,27 @@
 import React from 'react';
 import {useParams} from "react-router-dom";
 import {useDataRequest} from "../../hooks/dataFetchHook";
-import {fetchGeolocations} from "../../service/serverService";
+import {fetchGeolocations, fetchPingTable} from "../../service/serverService";
 import {Col, Row} from "react-bootstrap-v5";
-import ErrorView from "../ErrorView";
+import {ErrorViewCard} from "../ErrorView";
 import GeolocationsCard from "../../components/cards/common/GeolocationsCard";
 import LoadIn from "../../components/animation/LoadIn";
+import PingTableCard from "../../components/cards/common/PingTableCard";
 
 const ServerGeolocations = () => {
     const {identifier} = useParams();
 
     const {data, loadingError} = useDataRequest(fetchGeolocations, [identifier]);
-
-    if (loadingError) return <ErrorView error={loadingError}/>
+    const {pingData, pingLoadingError} = useDataRequest(fetchPingTable, [identifier]);
 
     return (
         <LoadIn>
             <section className="server_geolocations">
                 <Row>
                     <Col md={12}>
-                        <GeolocationsCard data={data}/>
+                        {loadingError ? <ErrorViewCard error={loadingError}/> : <GeolocationsCard data={data}/>}
+                        {pingLoadingError ? <ErrorViewCard error={pingLoadingError}/> :
+                            <PingTableCard data={pingData}/>}
                     </Col>
                 </Row>
             </section>