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.
59 lines
2.1 KiB
React
59 lines
2.1 KiB
React
/* Carte affichée dans le dashboard pour chaque monitoring */
|
||
|
||
import { useNavigate } from 'react-router-dom';
|
||
import Badge from './Badge';
|
||
import { getStatutMonitoring } from '../../utils/statutMonitoring';
|
||
import styles from './MonitoringCard.module.css';
|
||
|
||
export default function MonitoringCard({ monitoring }) {
|
||
const navigate = useNavigate();
|
||
const nbErreurs = monitoring.nb_erreurs ?? monitoring.count ?? 0;
|
||
const monitoringId = monitoring.id ?? monitoring.id_monito;
|
||
const statut = getStatutMonitoring(nbErreurs);
|
||
|
||
/* Calcul du pourcentage de la barre de progression (max 100%) */
|
||
const progressPct = Math.min((nbErreurs / 20) * 100, 100);
|
||
|
||
return (
|
||
<div className={styles.card} style={{ borderTopColor: statut.color }}>
|
||
<div className={styles.header}>
|
||
<div className={styles.titleRow}>
|
||
<span className={styles.chevron}>›</span>
|
||
<h3 className={styles.title}>{monitoring.nom || monitoring.monito_intitule || monitoring.libelle || 'Monitoring'}</h3>
|
||
</div>
|
||
<div className={styles.badges}>
|
||
{monitoring.bdd_source && (
|
||
<Badge variant={monitoring.bdd_source.toLowerCase() === 'sage' ? 'sage' : 'crm'}>
|
||
{monitoring.bdd_source}
|
||
</Badge>
|
||
)}
|
||
{monitoring.categorie && <Badge variant="info">{monitoring.categorie}</Badge>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.erreurs}>
|
||
<span className={styles.nb} style={{ color: statut.color }}>{nbErreurs}</span>
|
||
<span className={styles.erreursLabel}>erreur{nbErreurs !== 1 ? 's' : ''}</span>
|
||
</div>
|
||
|
||
{/* Barre de progression colorée selon le statut */}
|
||
<div className={styles.progressBar}>
|
||
<div
|
||
className={styles.progressFill}
|
||
style={{ width: `${progressPct}%`, backgroundColor: statut.color }}
|
||
/>
|
||
</div>
|
||
|
||
<div className={styles.footer}>
|
||
<Badge variant={statut.variant}>{statut.label}</Badge>
|
||
<button
|
||
className={styles.detailBtn}
|
||
onClick={() => navigate(`/monitoring/${monitoringId}`)}
|
||
>
|
||
Voir le détail →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|