{"id":20579,"date":"2021-08-25T15:02:44","date_gmt":"2021-08-25T15:02:44","guid":{"rendered":"https:\/\/www.centreon.com\/optimisation-de-centreon-web-les-secrets-de-fabrication\/"},"modified":"2021-08-25T15:05:00","modified_gmt":"2021-08-25T15:05:00","slug":"optimisation-de-centreon-web-les-secrets-de-fabrication","status":"publish","type":"post","link":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/","title":{"rendered":"Optimisation de Centreon Web : les secrets de fabrication"},"content":{"rendered":"

<\/p>\n

Depuis la version 18.10 de Centreon, nous avons int\u00e9gr\u00e9 la biblioth\u00e8que JavaScript React afin d\u2019offrir une interface graphique plus dynamique et plus intuitive. Nous avons tout d’abord adapt\u00e9 les Top Counters en haut de l\u2019application ainsi que la page Extension Manager dans laquelle vous pouvez g\u00e9rer vos modules ainsi que vos Widgets. Depuis, nous avons impl\u00e9ment\u00e9 d\u2019autres pages en React comme les pages pour les Activit\u00e9s M\u00e9tier et les Vues M\u00e9tier, puis les pages du module d\u2019Auto D\u00e9couverte. Depuis la version 20.04, les pages des d\u00e9tails des h\u00f4tes et des d\u00e9tails des services ont \u00e9t\u00e9 regroup\u00e9es en une seule page Statut des Ressources.\u00a0<\/span><\/p>\n

Chers utilisateurs, avec cet article, nous souhaitons vous\u00a0 partager notre exp\u00e9rience de d\u00e9veloppement et d\u2019optimisation front end en vous expliquant en d\u00e9tail le travail que nous avons men\u00e9 sur Centreon Web et les raisons qui ont motiv\u00e9es nos choix technologiques.<\/span><\/p>\n

Pourquoi React ?\u00a0<\/span><\/h2>\n

Parce que cette biblioth\u00e8que JavaScript permet de d\u00e9velopper des Single Page Application (SPA) afin de disposer d\u2019un rendu dynamique des pages lors des interactions de l\u2019utilisateur. De plus, avec React, chaque partie de votre page est un composant qui peut afficher un ou plusieurs \u00e9l\u00e9ments et dans lequel on peut int\u00e9grer une logique m\u00e9tier afin de modifier son affichage. Les composants sont organis\u00e9s de fa\u00e7on hi\u00e9rarchique, de sorte que chaque composant puisse avoir un ou plusieurs composants enfants. React est facile \u00e0 utiliser et \u00e0 apprendre, il est flexible et dispose d\u2019une \u00e9norme communaut\u00e9 ainsi que d\u2019un \u00e9cosyst\u00e8me d\u00e9velopp\u00e9.<\/span><\/p>\n

Ce qui a motiv\u00e9 l\u2019optimisation\u00a0<\/span><\/h2>\n

Au fur et \u00e0 mesure que nous d\u00e9veloppons Centreon Web, nous ajoutons de nouvelles fonctionnalit\u00e9s et en am\u00e9liorons certaines. Ce fut tout particuli\u00e8rement le cas pour les pages de Statut des Ressources et de D\u00e9couverte d\u2019h\u00f4tes dans nos derni\u00e8res versions. Nous avons ajout\u00e9 de nombreuses fonctionnalit\u00e9s et nous en avons am\u00e9lior\u00e9es gr\u00e2ce \u00e0 vos retours.<\/span><\/p>\n

Cependant, ajouter des fonctionnalit\u00e9s \u00e0 Centreon Web peut rendre l\u2019application plus gourmande en termes de consommation m\u00e9moire jusqu\u2019\u00e0 la ralentir, d\u2019o\u00f9 le r\u00f4le essentiel de l\u2019optimisation. Il est \u00e9galement important pour une application web de garder une certaine fluidit\u00e9 et d\u2019avoir un retour rapide de l\u2019affichage afin de capter l\u2019attention de l\u2019utilisateur. Selon la loi du <\/span>seuil de Doherty<\/span><\/a>, il faut fournir \u00e0 l\u2019utilisateur un retour d\u2019affichage d\u2019au maximum quatre cents millisecondes apr\u00e8s que ce dernier a interagi.<\/span><\/p>\n

Le but de notre optimisation \u00e9tait donc de rendre l\u2019utilisation plus fluide et l\u2019actualisation de nos composants React la plus rapide possible, que ce soit au moment o\u00f9 un utilisateur interagit avec l\u2019application ou quand l\u2019application web re\u00e7oit des donn\u00e9es de l\u2019API.<\/span><\/p>\n

Pour cela, nous avons list\u00e9 les pages optimis\u00e9es, \u00e0 savoir les pages Statut des Ressources, D\u00e9couverte d\u2019h\u00f4tes, Activit\u00e9s M\u00e9tier et Vues M\u00e9tier.<\/span><\/p>\n

Nous avons attribu\u00e9 des sc\u00e9narios d\u2019utilisation simple pour chaque page et pouvant impacter les performances dans l\u2019application web.<\/span><\/p>\n\n\n\n\n\n\n\n
Page<\/b><\/td>\nScenarii<\/b><\/td>\n<\/tr>\n
Statut des Ressources<\/span><\/td>\n\n
    \n
  • Rafra\u00eechir la liste des ressources en cliquant sur le bouton \u201cRafra\u00eechir\u201d<\/span><\/li>\n
  • S\u00e9lectionner un groupe d\u2019h\u00f4tes au niveau des filtres<\/span><\/li>\n
  • Rafra\u00eechir les graphes de service (10 graphes)\u00a0<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
D\u00e9couverte d\u2019h\u00f4tes<\/span><\/td>\n\n
    \n
  • Filtrer les t\u00e2ches par statut<\/span><\/li>\n
  • Charger le panneau d\u2019\u00e9dition d\u2019une t\u00e2che<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
Activit\u00e9s M\u00e9tier<\/span><\/td>\n\n
    \n
  • D\u00e9sactiver une Activit\u00e9 M\u00e9tier dans la liste<\/span><\/li>\n
  • Ajouter un indicateur cl\u00e9 de performance \u00e0 un Activit\u00e9 M\u00e9tier<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
Vues M\u00e9tier<\/span><\/td>\n\n
    \n
  • D\u00e9sactiver une Vue M\u00e9tier dans la liste<\/span><\/li>\n
  • Ajouter une Activit\u00e9 M\u00e9tier \u00e0 une Vue M\u00e9tier<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    Enfin, nous avons \u00e9valu\u00e9 les composants qui \u201cconsomment le plus\u201d lors de l\u2019actualisation.\u00a0 Pour cela, nous avons utilis\u00e9 le React Devtools, une extension disponible sur Chrome et Firefox qui indique si l\u2019application est d\u00e9velopp\u00e9e avec React et qui ajoute deux onglets dans la console du navigateur.<\/span><\/p>\n

    \"\"<\/p>\n

    Onglets du React Devtools<\/span><\/i><\/p>\n

    Le premier onglet Components (Composants en fran\u00e7ais) pr\u00e9sente une arborescence des composants React actuellement affich\u00e9s dans Centreon Web. Le second onglet Profiler (Profileur en Fran\u00e7ais) permet de voir dans votre application web les composants les plus \u201cgourmands\u201d pour r\u00e9pertorier les composants \u00e0 optimiser, tout comme l\u2019onglet Performance. Le r\u00e9sultat de cette analyse est un graphique de flamme qui repr\u00e9sente les composants concern\u00e9s.<\/span><\/p>\n

    \"\"<\/p>\n

    Exemple de graphique de flamme du Profileur lorsqu\u2019on rafra\u00eechit la liste des ressources<\/span><\/i><\/p>\n

    Comment lire ce graphique ? Chaque bloc repr\u00e9sente un composant React et tous les composants sont hi\u00e9rarchis\u00e9s. La couleur grise veut dire que le composant n\u2019a pas \u00e9t\u00e9 actualis\u00e9, alors que les composants de couleur ont \u00e9t\u00e9 actualis\u00e9s. Plus la couleur tend vers l\u2019orange, plus le composant met du temps \u00e0 s\u2019actualiser. Le profileur nous indique \u00e9galement la dur\u00e9e d\u2019actualisation de chaque composant, ainsi que celle des composants enfants rattach\u00e9s.<\/span><\/p>\n

    Important :<\/b>\u00a0avec React, si un composant s\u2019actualise, il actualise \u00e9galement ses composants enfants de fa\u00e7on r\u00e9cursive. L\u2019inconv\u00e9nient de ce principe est que des composants peuvent \u00eatre actualis\u00e9s alors qu\u2019ils n\u2019ont pas subi de modifications graphiques. Par cons\u00e9quent, il est pr\u00e9f\u00e9rable de ne pas les actualiser afin de s’\u00e9pargner des mises \u00e0 jour inutiles et co\u00fbteuses en temps.<\/span><\/p>\n

    La gestion des \u00e9tats \u00e0 l\u2019origine de l\u2019actualisation des composants<\/span><\/h2>\n

    En React, il existe deux types de gestions des \u00e9tats (ou states en anglais). Le premier consiste \u00e0 g\u00e9rer les \u00e9tats \u00e0 l\u2019int\u00e9rieur des composants. Pour cela, on peut utiliser le hook <\/span>useState <\/span>fourni par l\u2019API de React. Ce hook va nous permettre d\u2019afficher un \u00e9tat et de modifier l\u2019affichage d\u2019un composant ou le comportement de l\u2019application.<\/span><\/p>\n

    \"\"<\/p>\n

    Exemple d\u2019utilisation du hook React <\/span><\/i>useState<\/span><\/i><\/p>\n

    Par ailleurs, un \u00e9tat peut \u00eatre de diff\u00e9rents types : nombre, cha\u00eene de caract\u00e8res, bool\u00e9enne, un objet ou m\u00eame un tableau.<\/span><\/p>\n

    Il est \u00e9galement possible de passer des \u00e9tats d\u2019un composant vers ses composants enfants via des propri\u00e9t\u00e9s.<\/span><\/p>\n

    \"\"<\/p>\n

    Exemple d\u2019utilisation du passage de propri\u00e9t\u00e9s<\/span><\/i><\/p>\n

    Le second type de gestion d\u2019\u00e9tats consiste \u00e0 les g\u00e9rer de fa\u00e7on globale. Cela est plut\u00f4t pratique quand on a une architecture de composants relativement complexe et quand on souhaite manipuler un \u00e9tat dans plusieurs composants. Cela \u00e9vite de cr\u00e9er un passage de propri\u00e9t\u00e9s \u00e0 travers diff\u00e9rents composants qui peut d\u00e9grader la lisibilit\u00e9 du code.<\/span>
    <\/span>Il existe beaucoup de biblioth\u00e8ques permettant de faire de la gestion d\u2019\u00e9tats (state management) globale, notamment Redux mais nous utilisons le Context API de React qui est beaucoup plus facile \u00e0 mettre en place (le Context permet de faire passer des donn\u00e9es \u00e0 travers la hi\u00e9rarchie des composants).<\/span><\/p>\n

    En effet, il suffit de trois \u00e9tapes pour cr\u00e9er et d’utiliser un React Context. Dans un premier temps, il faut cr\u00e9er le React Context :<\/span><\/p>\n

    \"\"<\/p>\n

    Cr\u00e9ation d\u2019un Context<\/span><\/i><\/p>\n

    Puis l\u2019int\u00e9grer dans un composant, de pr\u00e9f\u00e9rence le plus haut dans la hi\u00e9rarchie.<\/span><\/p>\n

    \"\"<\/p>\n

    Composant impl\u00e9mentant un Context<\/span><\/i><\/p>\n

    Et enfin, il faut utiliser le Context pour manipuler les \u00e9tats dans les composants enfants.<\/span><\/p>\n

    \"\"<\/p>\n

    Composant utilisant un Context<\/span><\/i><\/p>\n

    Depuis l\u2019arriv\u00e9e de la page Statut des Ressources, le Context est utilis\u00e9 dans chacune des pages React afin de manipuler les filtres, stocker la liste des Ressources pour la page Statut des Ressources, stocker les param\u00e8tres de l\u2019utilisateur, d\u00e9clencher une requ\u00eate vers l\u2019API pour mettre \u00e0 jour la liste des ressources, etc. Cela a permis de gagner en lisibilit\u00e9 dans le code.<\/span><\/p>\n

    Malheureusement, lorsqu\u2019une donn\u00e9e du Context est modifi\u00e9e, tous les composants utilisant ce Context sont mis \u00e0 jour m\u00eame si certains de ces composants n\u2019utilisent pas cette donn\u00e9e en question. Ce qui implique des actualisations inutiles de composants et par cons\u00e9quent, une plus grande lenteur de l\u2019application pour r\u00e9pondre aux interactions des utilisateurs.<\/span><\/p>\n

    La solution ? La m\u00e9mo\u00efsation !<\/span><\/h2>\n

    Pour surmonter cette situation, nous avons introduit la m\u00e9mo\u00efsation. C\u2019est une technique d\u2019optimisation qui stocke le r\u00e9sultat d\u2019une fonction co\u00fbteuse en cache et utilise ce r\u00e9sultat stock\u00e9 quand les entr\u00e9es n\u2019ont pas \u00e9t\u00e9 mises \u00e0 jour.<\/span><\/p>\n

    Avec React, nous pouvons appliquer la m\u00e9mo\u00efsation sur le r\u00e9sultat d\u2019une fonction mais, plus important encore, nous pouvons m\u00e9mo\u00efser des composants en fonction de leurs propri\u00e9t\u00e9s. Pour m\u00e9mo\u00efser facilement un composant, il suffit d\u2019utiliser la fonction <\/span>memo<\/span> fournie par l\u2019API React.<\/span><\/p>\n

    \"\"<\/p>\n

    M\u00e9mo\u00efsation du composant <\/span><\/i>DisplayNumber<\/span><\/i><\/p>\n

    Dans l\u2019exemple, ci-dessus, nous avons m\u00e9mo\u00efs\u00e9 le composant <\/span>DisplayNumber<\/span> de fa\u00e7on \u00e0 ce qu\u2019il soit actualis\u00e9 uniquement si la propri\u00e9t\u00e9 <\/span>number<\/span> est actualis\u00e9e.<\/span><\/p>\n

    Dans ce cas, nous avons voulu industrialiser la m\u00e9mo\u00efsation afin de l\u2019appliquer facilement \u00e0 nos composants. Pour cela, nous avons cr\u00e9\u00e9 un hook customis\u00e9 que l\u2019on appelle <\/span>useMemoComponent<\/span> qui va utiliser deux informations. La premi\u00e8re est le composant \u00e0 m\u00e9mo\u00efser et la seconde, les propri\u00e9t\u00e9s qui vont servir \u00e0 la m\u00e9mo\u00efsation.<\/span><\/p>\n

    \"\"<\/p>\n

    Hook custom permettant \u00e0 un composant d\u2019\u00eatre m\u00e9mo\u00efs\u00e9<\/span><\/i><\/p>\n

    Ici, nous utilisons le hook <\/span>useMemo<\/span>, fourni par React, qui permet de m\u00e9moriser le r\u00e9sultat d\u2019une fonction \u201cconsommatrice\u201d. Dans le cas pr\u00e9sent, nous cr\u00e9ons une fonction qui retourne un composant. Enfin, nous avons impl\u00e9ment\u00e9 un hook customis\u00e9 <\/span>useDeepCompare<\/span>, afin de comparer l\u2019int\u00e9gralit\u00e9 des propri\u00e9t\u00e9s au cours de la m\u00e9mo\u00efsation. Tout comme la fonction <\/span>memo<\/span>, si une seule des propri\u00e9t\u00e9s pass\u00e9es en param\u00e8tre a chang\u00e9, l\u2019affichage du composant est actualis\u00e9. Dans le cas contraire, le r\u00e9sultat stock\u00e9 en cache est utilis\u00e9.<\/span><\/p>\n

    Prenons un exemple dans la page de Statut des Ressources, nous souhaitons m\u00e9mo\u00efser le composant qui permet de rafra\u00eechir la liste des ressources et d\u2019activer ou non l\u2019auto rafra\u00eechissement.\u00a0<\/span><\/p>\n

    En effet, nous souhaitons que ce composant ne soit pas actualis\u00e9 sans raison mais uniquement si l\u2019une des 3 propri\u00e9t\u00e9s de <\/span>memoProps<\/span> est modifi\u00e9e :<\/span><\/p>\n

      \n
    • sending <\/b>: la requ\u00eate de rafra\u00eechissement de la liste des ressources a \u00e9t\u00e9 envoy\u00e9e ou non,\u00a0<\/span><\/li>\n
    • enabledAutorefresh <\/b>: si l\u2019auto-rafra\u00eechissement est activ\u00e9 ou non,<\/span><\/li>\n
    • selectedResourceId <\/b>: si la ressource s\u00e9lectionn\u00e9e a \u00e9t\u00e9 modifi\u00e9e afin de rafra\u00eechir \u00e9galement les d\u00e9tails de cette derni\u00e8re.\u00a0<\/span><\/li>\n<\/ul>\n

      \"\"<\/p>\n

      \"\"<\/p>\n

      Composant utilisant la m\u00e9mo\u00efsation<\/span><\/i><\/p>\n

      Ici, le composant <\/span>RefreshActionsContent<\/span> affiche nos deux boutons et <\/span>memoProps<\/span> est un tableau de valeurs qui sert \u00e0 m\u00e9mo\u00efser le composant. Si une des valeurs du tableau est modifi\u00e9e, le composant est actualis\u00e9.<\/span><\/p>\n

      A savoir qu\u2019il est relativement important de m\u00e9mo\u00efser au maximum les composants utilisant un Context afin d\u2019\u00e9viter les actualisations inutiles. Cela est pertinent dans notre cas, puisque les donn\u00e9es de notre exemple proviennent du Context.<\/span><\/p>\n

      Si le profileur de React Devtools est relanc\u00e9, vous pourrez constater que, quand la liste des ressources est mise \u00e0 jour, le composant <\/span>RefreshActionsContent<\/span> n\u2019a pas \u00e9t\u00e9 actualis\u00e9 et une petite annotation indique que le composant est m\u00e9mo\u00efs\u00e9.\u00a0<\/span><\/p>\n

      \"\"<\/p>\n

      Exemple d\u2019un composant m\u00e9mo\u00efs\u00e9<\/span><\/i><\/p>\n

      Nous avons donc m\u00e9mo\u00efs\u00e9 les composants utilisant le Context et les composants consommateurs de ressources lors de l\u2019actualisation, comme les graphes. Voici le r\u00e9sultat avant \/ apr\u00e8s.<\/span><\/p>\n

      \"\"<\/p>\n

      Sans m\u00e9mo\u00efsation<\/span><\/i><\/p>\n

      \"\"<\/p>\n

      Avec m\u00e9mo\u00efsation<\/span><\/i><\/p>\n

      Comme vous pouvez le constater, il y a beaucoup moins de composants actualis\u00e9s pour la m\u00eame action. Seuls les composants qui ont besoin d\u2019\u00eatre actualis\u00e9s le sont.<\/span><\/p>\n

      Dans le m\u00eame temps, il y a un autre b\u00e9n\u00e9fice : la dur\u00e9e de l’actualisation effectu\u00e9e est consid\u00e9rablement diminu\u00e9e. Sans la m\u00e9mo\u00efsation, la dur\u00e9e est de 68,7 millisecondes alors qu\u2019avec la m\u00e9mo\u00efsation, elle passe\u00a0 \u00e0 24 millisecondes.<\/span><\/p>\n\n\n\n\n\n\n
      Page<\/b><\/td>\nPourcentage de rendu gagn\u00e9 sur l\u2019ensemble des scenari<\/b><\/td>\n<\/tr>\n
      Statut des Ressources<\/span><\/td>\n35%<\/span><\/td>\n<\/tr>\n
      D\u00e9couverte d\u2019h\u00f4tes<\/span><\/td>\n25%<\/span><\/td>\n<\/tr>\n
      Activit\u00e9s M\u00e9tier, Vues M\u00e9tier<\/span><\/td>\n60%<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      Cela signifie que notre application est plus efficiente dans son actualisation lorsque l\u2019utilisateur interagit avec l\u2019application.<\/span><\/p>\n

      Pour conclure<\/span><\/h2>\n

      Il existe plusieurs mani\u00e8res d\u2019optimiser une application web comme la refactorisation, la r\u00e9duction de la taille et\/ou l\u2019optimisation du bundle avec Webpack ou d\u2019autres outils de paquetage.\u00a0<\/span><\/p>\n

      Malgr\u00e9 une mise en place plus complexe, <\/span>nous avons fait le choix d\u2019utiliser la m\u00e9mo\u00efsation car<\/span> c\u2019est un outil qui nous a sembl\u00e9 essentiel dans le cadre de l\u2019optimisation d\u2019une application web aussi \u00e9volu\u00e9e et riche fonctionnellement que Centreon. Cette am\u00e9lioration des temps d\u2019actualisation est disponible dans la version 21.04 de Centreon avec bien d\u2019autres fonctionnalit\u00e9s.<\/span><\/p>\n

      Bien entendu, n’h\u00e9sitez pas \u00e0 utiliser ces outils pour optimiser vos propres applications web !<\/span><\/p>\n

      \n
      \u00a0<\/pre>\n
      <\/p>\n
      Titulaire d\u2019une licence en d\u00e9veloppement et qualit\u00e9 des logiciels, Tom a toujours \u00e9volu\u00e9 dans le monde de la supervision IT open source. Fin 2019, il rejoint Centreon en tant que front-end engineer pour se consacrer \u00e0 l\u2019interface graphique de la plateforme. Dans ce contexte, il d\u00e9veloppe de nouvelles interfaces (resources status, auto-discovery, etc.) et s\u2019assure que la plateforme Centreon soit la plus performante afin de supporter la meilleure exp\u00e9rience utilisateur possible.<\/span><\/p>\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      Depuis la version 18.10 de Centreon, nous avons int\u00e9gr\u00e9 la biblioth\u00e8que JavaScript React afin d\u2019offrir une interface graphique plus dynamique et plus intuitive. Nous avons tout d’abord adapt\u00e9 les Top Counters en haut de l\u2019application …<\/p>\n","protected":false},"author":1,"featured_media":5889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"post-type":[108],"theme":[1021],"class_list":["post-20579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","post-type-communaute","theme-communaute-fr"],"acf":[],"yoast_head":"\nOptimisation de Centreon Web : les secrets de fabrication - Centreon<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimisation de Centreon Web : les secrets de fabrication - Centreon\" \/>\n<meta property=\"og:description\" content=\"Depuis la version 18.10 de Centreon, nous avons int\u00e9gr\u00e9 la biblioth\u00e8que JavaScript React afin d\u2019offrir une interface graphique plus dynamique et plus intuitive. Nous avons tout d’abord adapt\u00e9 les Top Counters en haut de l\u2019application ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\" \/>\n<meta property=\"og:site_name\" content=\"Centreon\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CentreonMonitoring\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-25T15:02:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T15:05:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.centreon.com\/wp-content\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CentreonFR\" \/>\n<meta name=\"twitter:site\" content=\"@CentreonFR\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\"},\"author\":{\"name\":\"Thomas\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419\"},\"headline\":\"Optimisation de Centreon Web : les secrets de fabrication\",\"datePublished\":\"2021-08-25T15:02:44+00:00\",\"dateModified\":\"2021-08-25T15:05:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\"},\"wordCount\":2395,\"publisher\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\",\"url\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\",\"name\":\"Optimisation de Centreon Web : les secrets de fabrication - Centreon\",\"isPartOf\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg\",\"datePublished\":\"2021-08-25T15:02:44+00:00\",\"dateModified\":\"2021-08-25T15:05:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage\",\"url\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg\",\"contentUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg\",\"width\":1600,\"height\":836},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.centreon.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimisation de Centreon Web : les secrets de fabrication\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#website\",\"url\":\"https:\/\/www.centreon.com\/fr\/\",\"name\":\"Centreon\",\"description\":\"Just another WordPress site\",\"publisher\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.centreon.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\",\"name\":\"Centreon\",\"url\":\"https:\/\/www.centreon.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png\",\"contentUrl\":\"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png\",\"width\":180,\"height\":42,\"caption\":\"Centreon\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/CentreonMonitoring\/\",\"https:\/\/x.com\/CentreonFR\",\"https:\/\/www.linkedin.com\/company\/centreonsoftware\/\",\"https:\/\/www.youtube.com\/channel\/UCIKJKvZ8acLmEg2fCdDzsvA\",\"https:\/\/fr.wikipedia.org\/wiki\/Centreon\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419\",\"name\":\"Thomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g\",\"caption\":\"Thomas\"},\"sameAs\":[\"http:\/\/centreon.stagewink.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimisation de Centreon Web : les secrets de fabrication - Centreon","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/","og_locale":"fr_FR","og_type":"article","og_title":"Optimisation de Centreon Web : les secrets de fabrication - Centreon","og_description":"Depuis la version 18.10 de Centreon, nous avons int\u00e9gr\u00e9 la biblioth\u00e8que JavaScript React afin d\u2019offrir une interface graphique plus dynamique et plus intuitive. Nous avons tout d’abord adapt\u00e9 les Top Counters en haut de l\u2019application ...","og_url":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/","og_site_name":"Centreon","article_publisher":"https:\/\/www.facebook.com\/CentreonMonitoring\/","article_published_time":"2021-08-25T15:02:44+00:00","article_modified_time":"2021-08-25T15:05:00+00:00","og_image":[{"width":1600,"height":836,"url":"https:\/\/www.centreon.com\/wp-content\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg","type":"image\/jpeg"}],"author":"Thomas","twitter_card":"summary_large_image","twitter_creator":"@CentreonFR","twitter_site":"@CentreonFR","twitter_misc":{"\u00c9crit par":"Thomas","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#article","isPartOf":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/"},"author":{"name":"Thomas","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419"},"headline":"Optimisation de Centreon Web : les secrets de fabrication","datePublished":"2021-08-25T15:02:44+00:00","dateModified":"2021-08-25T15:05:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/"},"wordCount":2395,"publisher":{"@id":"https:\/\/www.centreon.com\/fr\/#organization"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage"},"thumbnailUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/","url":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/","name":"Optimisation de Centreon Web : les secrets de fabrication - Centreon","isPartOf":{"@id":"https:\/\/www.centreon.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage"},"thumbnailUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg","datePublished":"2021-08-25T15:02:44+00:00","dateModified":"2021-08-25T15:05:00+00:00","breadcrumb":{"@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#primaryimage","url":"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg","contentUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/CentreonWebOptimization_FR-1.jpg","width":1600,"height":836},{"@type":"BreadcrumbList","@id":"https:\/\/www.centreon.com\/fr\/optimisation-de-centreon-web-les-secrets-de-fabrication\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.centreon.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Optimisation de Centreon Web : les secrets de fabrication"}]},{"@type":"WebSite","@id":"https:\/\/www.centreon.com\/fr\/#website","url":"https:\/\/www.centreon.com\/fr\/","name":"Centreon","description":"Just another WordPress site","publisher":{"@id":"https:\/\/www.centreon.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.centreon.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.centreon.com\/fr\/#organization","name":"Centreon","url":"https:\/\/www.centreon.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png","contentUrl":"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png","width":180,"height":42,"caption":"Centreon"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CentreonMonitoring\/","https:\/\/x.com\/CentreonFR","https:\/\/www.linkedin.com\/company\/centreonsoftware\/","https:\/\/www.youtube.com\/channel\/UCIKJKvZ8acLmEg2fCdDzsvA","https:\/\/fr.wikipedia.org\/wiki\/Centreon"]},{"@type":"Person","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419","name":"Thomas","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g","caption":"Thomas"},"sameAs":["http:\/\/centreon.stagewink.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts\/20579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/comments?post=20579"}],"version-history":[{"count":0,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts\/20579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/media\/5889"}],"wp:attachment":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/media?parent=20579"}],"wp:term":[{"taxonomy":"post-type","embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/post-type?post=20579"},{"taxonomy":"theme","embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/theme?post=20579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}