Antho
8b8121ca1c
Le seuil de 10 erreurs qui fait basculer un monitoring en « Critique » était réécrit dans trois fichiers (MonitoringCard, MonitoringDetail, VueConso), la version de VueConso ne renvoyant qu'une couleur. Faire évoluer ce seuil imposait de corriger trois endroits sans en oublier. Il vit maintenant dans utils/statutMonitoring.js, avec la constante SEUIL_ATTENTION nommée. Les colonnes du tableau de monitorings étaient également identiques entre VueConso et ServiceMonitorings : extraites dans utils/monitoringColumns.jsx.
62 lines
2.2 KiB
React
62 lines
2.2 KiB
React
// Page réutilisable pour afficher les monitorings d'un service spécifique
|
|
import { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Download } from 'lucide-react';
|
|
import { getDashboard, exportToCSV } from '../../services/api';
|
|
import DataTable from '../../components/common/DataTable';
|
|
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
|
import ErrorMessage from '../../components/common/ErrorMessage';
|
|
import Button from '../../components/common/Button';
|
|
import { buildMonitoringColumns } from '../../utils/monitoringColumns';
|
|
import styles from './ServiceMonitorings.module.css';
|
|
|
|
export default function ServiceMonitorings({ serviceLabel, serviceName }) {
|
|
const navigate = useNavigate();
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [erreur, setErreur] = useState('');
|
|
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
setLoading(true);
|
|
setErreur('');
|
|
try {
|
|
const result = await getDashboard(serviceName);
|
|
setData(Array.isArray(result) ? result : []);
|
|
} catch (e) {
|
|
setErreur(e.message || `Erreur lors du chargement des monitorings ${serviceLabel.toLowerCase()}.`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
loadData();
|
|
}, [serviceLabel, serviceName]);
|
|
|
|
if (loading) return <LoadingSpinner message={`Chargement des monitorings ${serviceLabel.toLowerCase()}...`} />;
|
|
if (erreur) return <ErrorMessage message={erreur} />;
|
|
|
|
const columns = buildMonitoringColumns(navigate);
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<div className={styles.header}>
|
|
<div>
|
|
<h1 className={styles.title}>{serviceLabel}</h1>
|
|
<p className={styles.subtitle}>Monitorings avec le service "{serviceLabel}".</p>
|
|
</div>
|
|
<Button variant="secondary" onClick={() => exportToCSV(data, `${serviceLabel.toLowerCase()}_monitorings_${new Date().toISOString().split('T')[0]}.csv`)}>
|
|
<Download size={14} />
|
|
Exporter tout ({data.length})
|
|
</Button>
|
|
</div>
|
|
|
|
<DataTable
|
|
columns={columns}
|
|
data={data}
|
|
pageSize={50}
|
|
emptyMessage={`Aucun monitoring ${serviceLabel.toLowerCase()} trouvé.`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|