From 8b8121ca1ca58f4752859d9bd7eeaf7f6dcdf207 Mon Sep 17 00:00:00 2001 From: Anthony Coyaud Date: Sat, 15 Aug 2026 14:29:09 +0200 Subject: [PATCH] =?UTF-8?q?refactor(front):=20centralise=20la=20r=C3=A8gle?= =?UTF-8?q?=20de=20statut=20et=20les=20colonnes=20dupliqu=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/components/common/MonitoringCard.jsx | 10 ++----- .../MonitoringDetail/MonitoringDetail.jsx | 10 ++----- .../ServiceMonitorings/ServiceMonitorings.jsx | 18 ++---------- DataSentinel/src/pages/VueConso/VueConso.jsx | 29 +++---------------- DataSentinel/src/utils/monitoringColumns.jsx | 24 +++++++++++++++ DataSentinel/src/utils/statutMonitoring.js | 16 ++++++++++ 6 files changed, 50 insertions(+), 57 deletions(-) create mode 100644 DataSentinel/src/utils/monitoringColumns.jsx create mode 100644 DataSentinel/src/utils/statutMonitoring.js diff --git a/DataSentinel/src/components/common/MonitoringCard.jsx b/DataSentinel/src/components/common/MonitoringCard.jsx index 2c43a36..d322a7f 100644 --- a/DataSentinel/src/components/common/MonitoringCard.jsx +++ b/DataSentinel/src/components/common/MonitoringCard.jsx @@ -2,20 +2,14 @@ import { useNavigate } from 'react-router-dom'; import Badge from './Badge'; +import { getStatutMonitoring } from '../../utils/statutMonitoring'; import styles from './MonitoringCard.module.css'; -/* Détermine le statut visuel selon le nombre d'erreurs */ -function getStatut(nbErreurs) { - if (nbErreurs === 0) return { label: 'OK', variant: 'ok', color: 'var(--color-ok)' }; - if (nbErreurs < 10) return { label: 'Attention', variant: 'warning', color: 'var(--color-warning)' }; - return { label: 'Critique', variant: 'critical', color: 'var(--color-primary)' }; -} - 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 = getStatut(nbErreurs); + const statut = getStatutMonitoring(nbErreurs); /* Calcul du pourcentage de la barre de progression (max 100%) */ const progressPct = Math.min((nbErreurs / 20) * 100, 100); diff --git a/DataSentinel/src/pages/MonitoringDetail/MonitoringDetail.jsx b/DataSentinel/src/pages/MonitoringDetail/MonitoringDetail.jsx index 7e66990..097f41e 100644 --- a/DataSentinel/src/pages/MonitoringDetail/MonitoringDetail.jsx +++ b/DataSentinel/src/pages/MonitoringDetail/MonitoringDetail.jsx @@ -9,15 +9,9 @@ import LoadingSpinner from '../../components/common/LoadingSpinner'; import ErrorMessage from '../../components/common/ErrorMessage'; import Badge from '../../components/common/Badge'; import Button from '../../components/common/Button'; +import { getStatutMonitoring } from '../../utils/statutMonitoring'; import styles from './MonitoringDetail.module.css'; -/* Détermine le statut selon le nombre d'erreurs */ -function getStatut(nbErreurs) { - if (nbErreurs === 0) return { label: 'OK', variant: 'ok' }; - if (nbErreurs < 10) return { label: 'Attention', variant: 'warning' }; - return { label: 'Critique', variant: 'critical' }; -} - export default function MonitoringDetail() { const { id } = useParams(); const navigate = useNavigate(); @@ -72,7 +66,7 @@ export default function MonitoringDetail() { if (loading) return ; if (erreur) return ; - const statut = getStatut(count); + const statut = getStatutMonitoring(count); return (
diff --git a/DataSentinel/src/pages/ServiceMonitorings/ServiceMonitorings.jsx b/DataSentinel/src/pages/ServiceMonitorings/ServiceMonitorings.jsx index 890a804..25030ae 100644 --- a/DataSentinel/src/pages/ServiceMonitorings/ServiceMonitorings.jsx +++ b/DataSentinel/src/pages/ServiceMonitorings/ServiceMonitorings.jsx @@ -7,6 +7,7 @@ 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 }) { @@ -34,22 +35,7 @@ export default function ServiceMonitorings({ serviceLabel, serviceName }) { if (loading) return ; if (erreur) return ; - const columns = [ - { key: 'nom', label: 'Monitoring' }, - { key: 'service', label: 'Service' }, - { key: 'categorie', label: 'Catégorie' }, - { key: 'bdd_source', label: 'Source' }, - { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 }, - { - key: 'actions', - label: 'Actions', - render: (val, row) => ( - - ) - } - ]; + const columns = buildMonitoringColumns(navigate); return (
diff --git a/DataSentinel/src/pages/VueConso/VueConso.jsx b/DataSentinel/src/pages/VueConso/VueConso.jsx index da8253b..2e28186 100644 --- a/DataSentinel/src/pages/VueConso/VueConso.jsx +++ b/DataSentinel/src/pages/VueConso/VueConso.jsx @@ -9,15 +9,10 @@ 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 { getStatutMonitoring } from '../../utils/statutMonitoring'; +import { buildMonitoringColumns } from '../../utils/monitoringColumns'; import styles from './VueConso.module.css'; -/* Détermine la couleur selon le statut */ -function getStatusColor(nbErreurs) { - if (nbErreurs === 0) return 'var(--color-ok)'; - if (nbErreurs < 10) return 'var(--color-warning)'; - return 'var(--color-primary)'; -} - export default function VueConso() { const navigate = useNavigate(); const [data, setData] = useState([]); @@ -47,26 +42,10 @@ export default function VueConso() { const chartData = data.map(item => ({ name: item.nom || item.nom_monito || item.libelle || 'Monitoring', erreurs: item.nb_erreurs ?? item.count ?? 0, - fill: getStatusColor(item.nb_erreurs ?? item.count ?? 0) + fill: getStatutMonitoring(item.nb_erreurs ?? item.count ?? 0).color })); - /* Colonnes du tableau */ - const columns = [ - { key: 'nom', label: 'Monitoring' }, - { key: 'service', label: 'Service' }, - { key: 'categorie', label: 'Catégorie' }, - { key: 'bdd_source', label: 'Source' }, - { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 }, - { - key: 'actions', - label: 'Actions', - render: (val, row) => ( - - ) - } - ]; + const columns = buildMonitoringColumns(navigate); return (
diff --git a/DataSentinel/src/utils/monitoringColumns.jsx b/DataSentinel/src/utils/monitoringColumns.jsx new file mode 100644 index 0000000..82984bb --- /dev/null +++ b/DataSentinel/src/utils/monitoringColumns.jsx @@ -0,0 +1,24 @@ +import Button from '../components/common/Button'; + +/* Colonnes du tableau de monitorings partagées par VueConso et + ServiceMonitorings (Contrat/Fournisseur) : même jeu de données + (GET /dashboard), même tableau. Centralisé pour qu'une évolution des + colonnes (ajout, renommage) ne soit faite qu'à un seul endroit. */ +export function buildMonitoringColumns(navigate) { + return [ + { key: 'nom', label: 'Monitoring' }, + { key: 'service', label: 'Service' }, + { key: 'categorie', label: 'Catégorie' }, + { key: 'bdd_source', label: 'Source' }, + { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 }, + { + key: 'actions', + label: 'Actions', + render: (val, row) => ( + + ) + } + ]; +} diff --git a/DataSentinel/src/utils/statutMonitoring.js b/DataSentinel/src/utils/statutMonitoring.js new file mode 100644 index 0000000..9c4de4c --- /dev/null +++ b/DataSentinel/src/utils/statutMonitoring.js @@ -0,0 +1,16 @@ +/* Règle de statut partagée : un monitoring est "OK" sans erreur, "Attention" + en-dessous du seuil, "Critique" au-delà. Centralisé ici pour que le seuil + ne soit corrigé qu'à un seul endroit (il était dupliqué dans MonitoringCard, + MonitoringDetail et VueConso, avec le risque que l'une des copies diverge). */ + +export const SEUIL_ATTENTION = 10; + +export function getStatutMonitoring(nbErreurs) { + if (nbErreurs === 0) { + return { label: 'OK', variant: 'ok', color: 'var(--color-ok)' }; + } + if (nbErreurs < SEUIL_ATTENTION) { + return { label: 'Attention', variant: 'warning', color: 'var(--color-warning)' }; + } + return { label: 'Critique', variant: 'critical', color: 'var(--color-primary)' }; +}