@centreon/js-config 23.10.46 → 23.10.47

package/cypress/component/commands.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { mount } from 'cypress/react18';
 import { equals, isNil } from 'ramda';
 
-import { Box, CssBaseline } from '@mui/material';
+import { Box } from '@mui/material';
 
 import { ThemeProvider } from '@centreon/ui';
 
@@ -24,7 +24,7 @@ export enum Method {
   PUT = 'PUT'
 }
 
-Cypress.Commands.add('mount', ({ Component, options = {} }) => {
+Cypress.Commands.add('mount', ({ Component, options }) => {
   const wrapped = (
     <ThemeProvider>
       <Box
@@ -36,10 +36,11 @@ Cypress.Commands.add('mount', ({ Component, options = {} }) => {
       >
         {Component}
       </Box>
-      <CssBaseline />
     </ThemeProvider>
   );
 
+  document.getElementsByTagName('body')[0].setAttribute('style', 'margin:0px');
+
   return mount(wrapped, options);
 });
 
@@ -127,11 +128,6 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('makeSnapshot', (title?: string) => {
-  cy.viewport(1280, 590);
-  cy.matchImageSnapshot(title);
-});
-
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -139,9 +135,8 @@ declare global {
         props: InterceptAPIRequestProps<T>
       ) => Cypress.Chainable;
       interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
-      makeSnapshot: (title?: string) => void;
-      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
-      moveSortableElement: ({ element, direction }) => void;
+      mount: ({ Component, options = {} }: MountProps) => Cypress.Chainable;
+      moveSortableElement: ({ ariaLabel, direction }) => void;
       moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
       waitForRequest: (alias) => Cypress.Chainable;
     }

package/cypress/component/configuration.js

@@ -4,30 +4,28 @@ const {
   addMatchImageSnapshotPlugin
 } = require('@simonsmith/cypress-image-snapshot/plugin');
 
-module.exports = ({
-  webpackConfig,
-  cypressFolder,
-  specPattern,
-  env,
-  useVite = false,
-  excludeSpecPattern
-}) => {
+module.exports = ({ webpackConfig, cypressFolder, specPattern, env }) => {
   const mainCypressFolder = cypressFolder || 'cypress';
 
   return defineConfig({
     component: {
       devServer: {
-        bundler: useVite ? 'vite' : 'webpack',
+        bundler: 'webpack',
         framework: 'react',
         webpackConfig
       },
-      excludeSpecPattern,
       setupNodeEvents: (on, config) => {
         addMatchImageSnapshotPlugin(on, config);
 
         on('before:browser:launch', (browser, launchOptions) => {
           if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args.push('--headless=new');
+            launchOptions.args = launchOptions.args.map((arg) => {
+              if (arg === '--headless') {
+                return '--headless=new';
+              }
+
+              return arg;
+            });
           }
 
           return launchOptions;

package/cypress/component/enableVisualTesting.ts

@@ -13,7 +13,7 @@ const enableVisualTesting = (cypressFolder = 'cypress'): void => {
     capture: 'viewport',
     customDiffConfig: { threshold: 0.01 },
     customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
-    failureThreshold: 0.07,
+    failureThreshold: 0.06,
     failureThresholdType: 'percent'
   });
 };

package/cypress/e2e/commands.ts

@@ -1,11 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 
 import './commands/configuration';
-import './commands/monitoring';
-
-import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector';
-
-installLogsCollector();
 
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
@@ -28,7 +23,7 @@ Cypress.Commands.add('getWebVersion', (): Cypress.Chainable => {
 
 Cypress.Commands.add('getIframeBody', (): Cypress.Chainable => {
   return cy
-    .get('iframe#main-content', { timeout: 10000 })
+    .get('iframe#main-content')
     .its('0.contentDocument.body')
     .should('not.be.empty')
     .then(cy.wrap);
@@ -44,13 +39,6 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add(
-  'clickSubRootMenuItem',
-  (page: string): Cypress.Chainable => {
-    return cy.get('div[data-cy="collapse"]').eq(1).contains(page).click();
-  }
-);
-
 interface NavigateToProps {
   page: string;
   rootItemNumber: number;
@@ -63,13 +51,8 @@ Cypress.Commands.add(
     if (subMenu) {
       cy.hoverRootMenuItem(rootItemNumber)
         .contains(subMenu)
-        .trigger('mouseover')
-        .get('.MuiCollapse-wrapper')
-        .find('div[data-cy="collapse"]')
-        .should('be.visible')
-        .and('contain', page);
-
-      cy.clickSubRootMenuItem(page);
+        .trigger('mouseover', { force: true });
+      cy.contains(page).click({ force: true });
 
       return;
     }
@@ -102,41 +85,29 @@ Cypress.Commands.add(
 
 interface CopyFromContainerProps {
   destination: string;
-  name?: string;
   source: string;
 }
 
 Cypress.Commands.add(
   'copyFromContainer',
-  (
-    {
-      name = Cypress.env('dockerName'),
-      source,
-      destination
-    }: CopyFromContainerProps,
-    options?: Partial<Cypress.ExecOptions>
-  ) => {
-    return cy.exec(`docker cp ${name}:${source} "${destination}"`, options);
+  ({ source, destination }: CopyFromContainerProps) => {
+    return cy.exec(
+      `docker cp ${Cypress.env('dockerName')}:${source} "${destination}"`
+    );
   }
 );
 
 interface CopyToContainerProps {
   destination: string;
-  name?: string;
   source: string;
 }
 
 Cypress.Commands.add(
   'copyToContainer',
-  (
-    {
-      name = Cypress.env('dockerName'),
-      source,
-      destination
-    }: CopyToContainerProps,
-    options?: Partial<Cypress.ExecOptions>
-  ) => {
-    return cy.exec(`docker cp ${source} ${name}:${destination}`, options);
+  ({ source, destination }: CopyToContainerProps) => {
+    return cy.exec(
+      `docker cp ${source} ${Cypress.env('dockerName')}:${destination}`
+    );
   }
 );
 
@@ -147,7 +118,7 @@ interface LoginByTypeOfUserProps {
 
 Cypress.Commands.add(
   'loginByTypeOfUser',
-  ({ jsonName = 'admin', loginViaApi = false }): Cypress.Chainable => {
+  ({ jsonName, loginViaApi }): Cypress.Chainable => {
     if (loginViaApi) {
       return cy
         .fixture(`users/${jsonName}.json`)
@@ -164,15 +135,12 @@ Cypress.Commands.add(
         .visit(`${Cypress.config().baseUrl}`)
         .wait('@getNavigationList');
     }
-
     cy.visit(`${Cypress.config().baseUrl}`)
       .fixture(`users/${jsonName}.json`)
       .then((credential) => {
-        cy.getByLabel({ label: 'Alias', tag: 'input' }).type(
-          `{selectAll}{backspace}${credential.login}`
-        );
+        cy.getByLabel({ label: 'Alias', tag: 'input' }).type(credential.login);
         cy.getByLabel({ label: 'Password', tag: 'input' }).type(
-          `{selectAll}{backspace}${credential.password}`
+          credential.password
         );
       })
       .getByLabel({ label: 'Connect', tag: 'button' })
@@ -242,18 +210,9 @@ interface StartContainerProps {
 Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
-    return cy.task(
-      'startContainer',
-      { image, name, portBindings },
-      { timeout: 600000 } // 10 minutes because docker pull can be very slow
-    );
-  }
-);
-
-Cypress.Commands.add(
-  'createDirectory',
-  (directoryPath: string): Cypress.Chainable => {
-    return cy.task('createDirectory', directoryPath);
+    return cy
+      .exec(`docker image inspect ${image} || docker pull ${image}`)
+      .task('startContainer', { image, name, portBindings });
   }
 );
 
@@ -268,7 +227,7 @@ Cypress.Commands.add(
   'startWebContainer',
   ({
     name = Cypress.env('dockerName'),
-    os = Cypress.env('WEB_IMAGE_OS'),
+    os = 'alma9',
     useSlim = true,
     version = Cypress.env('WEB_IMAGE_VERSION')
   }: StartWebContainerProps = {}): Cypress.Chainable => {
@@ -283,13 +242,12 @@ Cypress.Commands.add(
         portBindings: [{ destination: 4000, source: 80 }]
       })
       .then(() => {
-        const baseUrl = 'http://127.0.0.1:4000';
+        const baseUrl = 'http://0.0.0.0:4000';
 
         Cypress.config('baseUrl', baseUrl);
 
-        return cy.task(
-          'waitOn',
-          `${baseUrl}/centreon/api/latest/platform/installation/status`
+        return cy.exec(
+          `npx wait-on ${baseUrl}/centreon/api/latest/platform/installation/status`
         );
       })
       .visit('/') // this is necessary to refresh browser cause baseUrl has changed (flash appears in video)
@@ -316,41 +274,25 @@ Cypress.Commands.add(
 
     return cy
       .visitEmptyPage()
-      .createDirectory(logDirectory)
+      .exec(`mkdir -p "${logDirectory}"`)
       .copyFromContainer({
         destination: `${logDirectory}/broker`,
-        name,
         source: '/var/log/centreon-broker'
       })
       .copyFromContainer({
         destination: `${logDirectory}/engine`,
-        name,
         source: '/var/log/centreon-engine'
       })
+      .execInContainer({
+        command: `bash -e <<EOF
+        chmod 777 /var/log/centreon/centreon-web.log > /dev/null 2>&1 || :
+EOF`,
+        name
+      })
       .copyFromContainer({
         destination: `${logDirectory}/centreon`,
-        name,
         source: '/var/log/centreon'
       })
-      .then(() => {
-        if (Cypress.env('WEB_IMAGE_OS').includes('alma')) {
-          return cy.copyFromContainer({
-            destination: `${logDirectory}/php`,
-            name,
-            source: '/var/log/php-fpm'
-          });
-        }
-
-        return cy.copyFromContainer(
-          {
-            destination: `${logDirectory}/php8.1-fpm-centreon-error.log`,
-            name,
-            source: '/var/log/php8.1-fpm-centreon-error.log'
-          },
-          { failOnNonZeroExit: false }
-        );
-      })
-      .exec(`chmod -R 755 "${logDirectory}"`)
       .stopContainer({ name });
   }
 );
@@ -379,128 +321,21 @@ Cypress.Commands.add(
   }
 );
 
-interface Dashboard {
-  description?: string;
-  name: string;
-}
-
-Cypress.Commands.add(
-  'insertDashboardList',
-  (fixtureFile: string): Cypress.Chainable => {
-    return cy.fixture(fixtureFile).then((dashboardList) => {
-      cy.wrap(
-        Promise.all(
-          dashboardList.map((dashboardBody: Dashboard) =>
-            cy.insertDashboard({ ...dashboardBody })
-          )
-        )
-      );
-    });
-  }
-);
-
-Cypress.Commands.add(
-  'insertDashboard',
-  (dashboardBody: Dashboard): Cypress.Chainable => {
-    return cy.request({
-      body: {
-        ...dashboardBody
-      },
-      method: 'POST',
-      url: '/centreon/api/latest/configuration/dashboards'
-    });
-  }
-);
-
-interface ShareDashboardToUserProps {
-  dashboardName: string;
-  role: string;
-  userName: string;
-}
-
-interface ListingRequestResult {
-  body: {
-    result: Array<{
-      id: number;
-    }>;
-  };
-}
-
-Cypress.Commands.add(
-  'shareDashboardToUser',
-  ({ dashboardName, userName, role }: ShareDashboardToUserProps): void => {
-    Promise.all([
-      cy.request({
-        method: 'GET',
-        url: `/centreon/api/latest/configuration/users?search={"name":"${userName}"}`
-      }),
-      cy.request({
-        method: 'GET',
-        url: `/centreon/api/latest/configuration/dashboards?search={"name":"${dashboardName}"}`
-      })
-    ]).then(
-      ([retrievedUser, retrievedDashboard]: [
-        ListingRequestResult,
-        ListingRequestResult
-      ]) => {
-        const userId = retrievedUser.body.result[0].id;
-        const dashboardId = retrievedDashboard.body.result[0].id;
-
-        cy.request({
-          body: {
-            id: userId,
-            role: `${role}`
-          },
-          method: 'POST',
-          url: `/centreon/api/latest/configuration/dashboards/${dashboardId}/access_rights/contacts`
-        });
-      }
-    );
-  }
-);
-
-Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
-  return cy
-    .get('header div[data-cy="clock"]', { timeout: 10000 })
-    .should('be.visible')
-    .then(($time) => {
-      const headerTime = $time.children()[1].textContent;
-      if (headerTime?.match(/\d+:\d+/)) {
-        cy.log(`header time is : ${headerTime}`);
-
-        return cy.wrap(headerTime);
-      }
-
-      throw new Error(`header time is not displayed`);
-    });
-});
-
 declare global {
   namespace Cypress {
     interface Chainable {
-      clickSubRootMenuItem: (page: string) => Cypress.Chainable;
-      copyFromContainer: (
-        props: CopyFromContainerProps,
-        options?: Partial<Cypress.ExecOptions>
-      ) => Cypress.Chainable;
-      copyToContainer: (
-        props: CopyToContainerProps,
-        options?: Partial<Cypress.ExecOptions>
-      ) => Cypress.Chainable;
-      createDirectory: (directoryPath: string) => Cypress.Chainable;
+      copyFromContainer: (props: CopyFromContainerProps) => Cypress.Chainable;
+      copyToContainer: (props: CopyToContainerProps) => Cypress.Chainable;
       execInContainer: ({
         command,
         name
       }: ExecInContainerProps) => Cypress.Chainable;
       getIframeBody: () => Cypress.Chainable;
-      getTimeFromHeader: () => Cypress.Chainable;
       getWebVersion: () => Cypress.Chainable;
       hoverRootMenuItem: (rootItemNumber: number) => Cypress.Chainable;
-      insertDashboard: (dashboard: Dashboard) => Cypress.Chainable;
-      insertDashboardList: (fixtureFile: string) => Cypress.Chainable;
       loginByTypeOfUser: ({
-        jsonName,
-        loginViaApi
+        jsonName = 'admin',
+        loginViaApi = false
       }: LoginByTypeOfUserProps) => Cypress.Chainable;
       moveSortableElement: (direction: string) => Cypress.Chainable;
       navigateTo: ({
@@ -508,11 +343,6 @@ declare global {
         rootItemNumber,
         subMenu
       }: NavigateToProps) => Cypress.Chainable;
-      shareDashboardToUser: ({
-        dashboardName,
-        userName,
-        role
-      }: ShareDashboardToUserProps) => Cypress.Chainable;
       startContainer: ({
         name,
         image

package/cypress/e2e/configuration.ts

@@ -4,11 +4,8 @@
 import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
-import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
 
-import esbuildPreprocessor from './esbuild-preprocessor';
-import plugins from './plugins';
-import tasks from './tasks';
+import setupNodeEvents from './plugins';
 
 interface ConfigurationOptions {
   cypressFolder?: string;
@@ -25,7 +22,9 @@ export default ({
   dockerName,
   env
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || '.'}/results`;
+  const resultsFolder = `${cypressFolder || 'cypress'}/results${
+    isDevelopment ? '/dev' : ''
+  }`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -36,20 +35,8 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
-      fixturesFolder: 'fixtures',
-      reporter: require.resolve('cypress-multi-reporters'),
-      reporterOptions: {
-        configFile: `${__dirname}/reporter-config.js`
-      },
-      setupNodeEvents: async (on, config) => {
-        installLogsPrinter(on);
-        await esbuildPreprocessor(on, config);
-        tasks(on);
-
-        return plugins(on, config);
-      },
-      specPattern,
-      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
+      setupNodeEvents,
+      specPattern
     },
     env: {
       ...env,
@@ -58,12 +45,34 @@ export default ({
       WEB_IMAGE_VERSION: webImageVersion,
       dockerName: dockerName || 'centreon-dev'
     },
-    execTimeout: 60000,
+    execTimeout: 120000,
+    reporter: 'mochawesome',
+    reporterOptions: {
+      html: false,
+      json: true,
+      overwrite: true,
+      reportDir: `${resultsFolder}/reports`,
+      reportFilename: '[name]-report.json'
+    },
     requestTimeout: 10000,
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
+    setupNodeEvents: (on, config) => {
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args = launchOptions.args.map((arg) => {
+            if (arg === '--headless') {
+              return '--headless=new';
+            }
+
+            return arg;
+          });
+        }
+
+        return launchOptions;
+      });
+    },
     video: true,
-    videoCompression: 0,
     videosFolder: `${resultsFolder}/videos`
   });
 };

package/cypress/e2e/plugins.ts

@@ -3,34 +3,132 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-param-reassign */
 
-export default (
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-): Cypress.PluginConfigOptions => {
-  on('before:browser:launch', (browser, launchOptions) => {
-    const width = 1920;
-    const height = 1080;
-
-    if (browser.name === 'chrome') {
-      if (browser.isHeadless) {
-        launchOptions.args.push('--headless=new');
-      }
+import Docker from 'dockerode';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import webpackPreprocessor from '@cypress/webpack-preprocessor';
 
-      // flags description : https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md
-      launchOptions.args.push('--disable-gpu');
-      launchOptions.args.push('--auto-open-devtools-for-tabs');
-      launchOptions.args.push('--disable-extensions');
-      launchOptions.args.push('--hide-scrollbars');
-      launchOptions.args.push('--mute-audio');
+const docker = new Docker();
+
+const getWebpackOptions = (config): object => {
+  return {
+    module: {
+      rules: [
+        {
+          exclude: [/node_modules/],
+          test: /\.ts?$/,
+          use: [
+            {
+              loader: 'swc-loader'
+            }
+          ]
+        },
+        {
+          test: /\.feature$/,
+          use: [
+            {
+              loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+              options: config
+            }
+          ]
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.ts', '.js']
+    }
+  };
+};
+
+export default async (on, config): Promise<void> => {
+  await addCucumberPreprocessorPlugin(on, config);
 
-      launchOptions.args.push(`--window-size=${width},${height}`);
+  const webpackOptions = await getWebpackOptions(config);
+  const options = {
+    webpackOptions
+  };
 
-      // force screen to be non-retina and just use our given resolution
-      launchOptions.args.push('--force-device-scale-factor=1');
+  on('file:preprocessor', webpackPreprocessor(options));
+
+  on('before:browser:launch', (browser = {}, launchOptions) => {
+    if ((browser as { name }).name === 'chrome') {
+      launchOptions.args.push('--disable-gpu');
+      launchOptions.args = launchOptions.args.filter(
+        (element) => element !== '--disable-dev-shm-usage'
+      );
     }
 
     return launchOptions;
   });
 
+  interface PortBinding {
+    destination: number;
+    source: number;
+  }
+
+  interface StartContainerProps {
+    image: string;
+    name: string;
+    portBindings: Array<PortBinding>;
+  }
+
+  interface StopContainerProps {
+    name: string;
+  }
+
+  on('task', {
+    startContainer: async ({
+      image,
+      name,
+      portBindings = []
+    }: StartContainerProps) => {
+      const webContainers = await docker.listContainers({
+        all: true,
+        filters: { name: [name] }
+      });
+      if (webContainers.length) {
+        return webContainers[0];
+      }
+
+      const container = await docker.createContainer({
+        AttachStderr: true,
+        AttachStdin: false,
+        AttachStdout: true,
+        ExposedPorts: portBindings.reduce((accumulator, currentValue) => {
+          accumulator[`${currentValue.source}/tcp`] = {};
+
+          return accumulator;
+        }, {}),
+        HostConfig: {
+          PortBindings: portBindings.reduce((accumulator, currentValue) => {
+            accumulator[`${currentValue.source}/tcp`] = [
+              {
+                HostIP: '0.0.0.0',
+                HostPort: `${currentValue.destination}`
+              }
+            ];
+
+            return accumulator;
+          }, {})
+        },
+        Image: image,
+        OpenStdin: false,
+        StdinOnce: false,
+        Tty: true,
+        name
+      });
+
+      await container.start();
+
+      return container;
+    },
+    stopContainer: async ({ name }: StopContainerProps) => {
+      const container = await docker.getContainer(name);
+      await container.kill();
+      await container.remove();
+
+      return null;
+    }
+  });
+
   return config;
 };

package/eslint/base.typescript.eslintrc.js

@@ -21,15 +21,11 @@ module.exports = {
           }
         ],
         '@typescript-eslint/camelcase': 'off',
-        '@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
-        '@typescript-eslint/explicit-function-return-type': [
+        '@typescript-eslint/consistent-type-definitions': [
           'error',
-          {
-            allowExpressions: true,
-            allowHigherOrderFunctions: true,
-            allowTypedFunctionExpressions: true
-          }
+          'interface'
         ],
+        '@typescript-eslint/explicit-function-return-type': ['error'],
         '@typescript-eslint/explicit-member-accessibility': [
           'error',
           {
@@ -80,21 +76,13 @@ module.exports = {
           }
         ],
         camelcase: 'off',
-        'import/no-cycle': 'off',
-        'import/no-named-as-default': 'warn',
         'no-shadow': 'off',
         'no-unused-expressions': 'off'
       },
       settings: {
-        'import/parsers': {
-          '@typescript-eslint/parser': ['.ts', '.tsx']
-        },
         'import/resolver': {
           alias: {
             extensions: ['.ts', '.tsx', '.js', '.jsx']
-          },
-          typescript: {
-            alwaysTryTypes: true
           }
         }
       }

package/jest/index.js

@@ -1,16 +1,12 @@
 module.exports = {
   moduleNameMapper: {
     '\\.(s?css|png|svg|jpg)$': 'identity-obj-proxy',
-    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
     '^react($|/.+)': '<rootDir>/node_modules/react$1'
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['/node_modules/', '!*.cypress.spec.tsx'],
+  testPathIgnorePatterns: ['/node_modules/'],
   transform: {
-    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
     '^.+\\.[jt]sx?$': [
       '@swc/jest',
       {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@centreon/js-config",
   "description": "Centreon Frontend shared build configuration",
-  "version": "23.10.46",
+  "version": "23.10.47",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,12 +16,13 @@
     "url": "https://github.com/centreon/centreon-frontend/issues"
   },
   "devDependencies": {
-    "@tsconfig/node16": "^16.1.1",
+    "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
+    "@types/dockerode": "^3.3.16",
+    "dockerode": "^3.3.5",
     "eslint": "^8.17.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-hooks": "^0.4.3",
     "eslint-plugin-import": "^2.26.0",
@@ -42,18 +43,5 @@
     "tsconfig",
     "webpack",
     "cypress"
-  ],
-  "dependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@types/cypress-cucumber-preprocessor": "^4.0.2",
-    "@types/dockerode": "^3.3.19",
-    "cypress-multi-reporters": "^1.6.3",
-    "cypress-terminal-report": "^5.3.6",
-    "dockerode": "^3.3.5",
-    "esbuild": "^0.19.3",
-    "mochawesome": "^7.1.3"
-  }
+  ]
 }

package/tsconfig/index.json

@@ -1,14 +1,13 @@
 {
   "compilerOptions": {
-    "downlevelIteration": true,
-    "module": "ESNext",
     "moduleResolution": "node",
-    "target": "es2018",
+    "downlevelIteration": true,
+    "module": "es6",
+    "target": "es6",
     "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true
+    "esModuleInterop": true
   }
 }

package/webpack/base/index.js

@@ -3,22 +3,68 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { ModuleFederationPlugin } = require('webpack').container;
 
-const {
-  getModuleConfiguration,
-  optimization,
-  output,
-  cache
-} = require('./globalConfig');
+const excludeNodeModulesExceptCentreonUi =
+  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon))/;
 
 const getBaseConfiguration = ({
   moduleName,
   moduleFederationConfig,
   jscTransformConfiguration
 }) => ({
-  cache,
-  module: getModuleConfiguration(jscTransformConfiguration),
-  optimization,
-  output,
+  cache: false,
+  module: {
+    rules: [
+      {
+        parser: { system: false },
+        test: /\.[cm]?(j|t)sx?$/
+      },
+      {
+        exclude: excludeNodeModulesExceptCentreonUi,
+        test: /\.[jt]sx?$/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true
+              },
+              transform: jscTransformConfiguration
+            }
+          }
+        }
+      },
+      {
+        test: /\.icon.svg$/,
+        use: ['@svgr/webpack']
+      },
+      {
+        exclude: excludeNodeModulesExceptCentreonUi,
+        test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: '[name].[hash:8].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      maxSize: 400 * 1024
+    }
+  },
+  output: {
+    chunkFilename: '[name].[chunkhash:8].chunk.js',
+    filename: '[name].[chunkhash:8].js',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
   plugins: [
     new CleanWebpackPlugin(),
     moduleName &&
@@ -75,10 +121,7 @@ const getBaseConfiguration = ({
   ].filter(Boolean),
   resolve: {
     alias: {
-      react: path.resolve('./node_modules/react'),
-      '@centreon/ui/fonts': path.resolve(
-        './node_modules/@centreon/ui/public/fonts'
-      )
+      react: path.resolve('./node_modules/react')
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   }

package/cypress/e2e/commands/monitoring.ts

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-
-const apiBase = '/centreon/api';
-const apiActionV1 = `${apiBase}/index.php`;
-
-const getStatusNumberFromString = (status: string): number => {
-  const statuses = {
-    critical: '2',
-    down: '1',
-    ok: '0',
-    unknown: '3',
-    unreachable: '2',
-    up: '0',
-    warning: '1'
-  };
-
-  if (status in statuses) {
-    return statuses[status];
-  }
-
-  throw new Error(`Status ${status} does not exist`);
-};
-
-interface SubmitResult {
-  host: string;
-  output: string;
-  perfdata?: string | null;
-  service?: string | null;
-  status: string;
-}
-
-Cypress.Commands.add(
-  'submitResults',
-  (results: Array<SubmitResult>): Cypress.Chainable => {
-    results.forEach(
-      ({ host, output, perfdata = '', service = null, status }) => {
-        const timestampNow = Math.floor(Date.now() / 1000) - 15;
-        const updatetime = timestampNow.toString();
-
-        const result = {
-          host,
-          output,
-          perfdata,
-          service,
-          status: getStatusNumberFromString(status),
-          updatetime
-        };
-
-        cy.request({
-          body: {
-            results: [result]
-          },
-          headers: {
-            'Content-Type': 'application/json',
-            'centreon-auth-token': window.localStorage.getItem('userTokenApiV1')
-          },
-          method: 'POST',
-          url: `${apiActionV1}?action=submit&object=centreon_submit_results`
-        });
-      }
-    );
-
-    return cy.wrap(null);
-  }
-);
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      submitResults: (props: Array<SubmitResult>) => Cypress.Chainable;
-    }
-  }
-}
-
-export {};

package/cypress/e2e/esbuild-preprocessor.ts

@@ -1,26 +0,0 @@
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
-import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
-import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
-import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
-import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild';
-
-export default async (
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-): Promise<void> => {
-  await addCucumberPreprocessorPlugin(on, config);
-
-  on(
-    'file:preprocessor',
-    createBundler({
-      plugins: [
-        createEsbuildPlugin(config),
-        NodeModulesPolyfillPlugin(),
-        NodeGlobalsPolyfillPlugin({
-          buffer: true,
-          process: true
-        })
-      ]
-    })
-  );
-};

package/cypress/e2e/reporter-config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  mochawesomeReporterOptions: {
-    consoleReporter: 'none',
-    html: false,
-    json: true,
-    overwrite: true,
-    reportDir: 'results/reports',
-    reportFilename: '[name]-report.json'
-  },
-  reporterEnabled: `mochawesome,${require.resolve(
-    '@badeball/cypress-cucumber-preprocessor/pretty-reporter'
-  )}`
-};

package/cypress/e2e/tasks.ts

@@ -1,105 +0,0 @@
-import { execSync } from 'child_process';
-import { existsSync, mkdirSync } from 'fs';
-
-import Docker from 'dockerode';
-
-export default (on: Cypress.PluginEvents): void => {
-  const docker = new Docker();
-
-  interface PortBinding {
-    destination: number;
-    source: number;
-  }
-
-  interface StartContainerProps {
-    image: string;
-    name: string;
-    portBindings: Array<PortBinding>;
-  }
-
-  interface StopContainerProps {
-    name: string;
-  }
-
-  on('task', {
-    createDirectory: async (directoryPath: string) => {
-      if (!existsSync(directoryPath)) {
-        mkdirSync(directoryPath, { recursive: true });
-      }
-
-      return null;
-    },
-    startContainer: async ({
-      image,
-      name,
-      portBindings = []
-    }: StartContainerProps) => {
-      const imageList = execSync(
-        'docker image list --format "{{.Repository}}:{{.Tag}}"'
-      ).toString('utf8');
-
-      if (
-        !imageList.match(
-          new RegExp(
-            `^${image.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')}`,
-            'm'
-          )
-        )
-      ) {
-        execSync(`docker pull ${image}`);
-      }
-
-      const webContainers = await docker.listContainers({
-        all: true,
-        filters: { name: [name] }
-      });
-      if (webContainers.length) {
-        return webContainers[0];
-      }
-
-      const container = await docker.createContainer({
-        AttachStderr: true,
-        AttachStdin: false,
-        AttachStdout: true,
-        ExposedPorts: portBindings.reduce((accumulator, currentValue) => {
-          accumulator[`${currentValue.source}/tcp`] = {};
-
-          return accumulator;
-        }, {}),
-        HostConfig: {
-          PortBindings: portBindings.reduce((accumulator, currentValue) => {
-            accumulator[`${currentValue.source}/tcp`] = [
-              {
-                HostIP: '127.0.0.1',
-                HostPort: `${currentValue.destination}`
-              }
-            ];
-
-            return accumulator;
-          }, {})
-        },
-        Image: image,
-        OpenStdin: false,
-        StdinOnce: false,
-        Tty: true,
-        name
-      });
-
-      await container.start();
-
-      return container;
-    },
-    stopContainer: async ({ name }: StopContainerProps) => {
-      const container = await docker.getContainer(name);
-      await container.kill();
-      await container.remove();
-
-      return null;
-    },
-    waitOn: async (url: string) => {
-      execSync(`npx wait-on ${url}`);
-
-      return null;
-    }
-  });
-};

package/eslint/lambda/typescript.eslintrc.js

@@ -1,48 +0,0 @@
-module.exports = {
-    extends: [ '../node/typescript.eslintrc.js'],
-    overrides: [
-      {
-        files: ["*.spec.js", "*.test.ts", "*.tests.ts"],
-        rules: {
-          "import/first": 0,
-          "import/order": 0,
-          "@typescript-eslint/ban-ts-comment": 0,
-          "@typescript-eslint/no-explicit-any": 0
-        }
-      }
-    ],
-    rules: {
-      "import/extensions": ["off"],
-      "no-console": "off",
-      "no-underscore-dangle": "off",
-      "class-methods-use-this": "off",
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          format: ["camelCase", "PascalCase", "UPPER_CASE"],
-          selector: "variable"
-        },
-        {
-          filter: {
-            match: false,
-            regex: "(__esModule|.+-.+)"
-          },
-          format: ["snake_case", "camelCase", "PascalCase", "UPPER_CASE"],
-          selector: "property",
-          leadingUnderscore: "allow"
-        },
-        {
-          filter: {
-            match: false,
-            regex: "^_$"
-          },
-          format: ["snake_case", "camelCase", "PascalCase"],
-          selector: "parameter"
-        }
-      ],
-      "@typescript-eslint/require-array-sort-compare": "error"
-    },
-    parserOptions: {
-      project: ["./tsconfig.json"]
-    }
-  }

package/jest/lambda/typescript.js

@@ -1,49 +0,0 @@
-/*
- * Copyright 2023 Centreon Team
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// For a detailed explanation regarding each configuration property, visit:
-// https://jestjs.io/docs/en/configuration.html
-const path = require('path');
-
-const rootPath = path.join(__dirname);
-
-
-
-module.exports = {
-    rootDir: rootPath,
-    // Automatically clear mock calls and instances between every test
-    clearMocks: true,
-    // The directory where Jest should output its coverage files
-    coverageDirectory: '<rootDir>/coverage',
-    // An array of regexp pattern strings used to skip coverage collection
-    coveragePathIgnorePatterns: ['\\\\node_modules\\\\', 'tests'],
-
-    // An array of file extensions your modules use
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-
-    // Automatically reset mock state between every test
-    // resetMocks: true,
-
-    testMatch: ['**/*.(test|tests|spec|specs).+(ts|tsx|js)'],
-
-    // This option allows the use of a custom results processor
-    // testResultsProcessor: 'jest-sonar-reporter',
-
-    // A map from regular expressions to paths to transformers
-    transform: {
-        '^.+\\.(ts|tsx)$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.json' }],
-    },
-};

package/tsconfig/lambda/tsconfig.json

@@ -1,14 +0,0 @@
-{
-    "extends": "@tsconfig/node16/tsconfig.json",
-    "compilerOptions": {
-        "sourceMap": true,
-        "allowJs": true,
-        "strictNullChecks": false,
-        "declaration": false,
-        "esModuleInterop": true,
-        "types": [
-            "@types/jest",
-            "node"
-        ]
-    }
-}

package/webpack/base/globalConfig.js

@@ -1,71 +0,0 @@
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon))/;
-
-module.exports = {
-  cache: false,
-  excludeNodeModulesExceptCentreonUi,
-  getModuleConfiguration: (jscTransformConfiguration) => ({
-    rules: [
-      {
-        parser: { system: false },
-        test: /\.[cm]?(j|t)sx?$/
-      },
-      {
-        exclude: [excludeNodeModulesExceptCentreonUi],
-        test: /\.[jt]sx?$/,
-        use: {
-          loader: 'swc-loader',
-          options: {
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true
-              },
-              transform: jscTransformConfiguration
-            }
-          }
-        }
-      },
-      {
-        test: /\.icon.svg$/,
-        use: ['@svgr/webpack']
-      },
-      {
-        exclude: excludeNodeModulesExceptCentreonUi,
-        test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 10000,
-              name: '[name].[hash:8].[ext]'
-            }
-          }
-        ]
-      },
-      {
-        generator: {
-          filename: '[name][ext]'
-        },
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource'
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader']
-      }
-    ]
-  }),
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      maxSize: 400 * 1024
-    }
-  },
-  output: {
-    chunkFilename: '[name].[chunkhash:8].chunk.js',
-    filename: '[name].[chunkhash:8].js',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  }
-};