@centreon/js-config 24.4.31 → 24.4.33

package/cypress/component/commands.tsx

@@ -1,201 +1,203 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-import React from 'react';
-
-import { mount } from 'cypress/react18';
-import { equals, isNil } from 'ramda';
-
-import { Box, CssBaseline } from '@mui/material';
-
-import { ThemeProvider } from '@centreon/ui';
-
-import '@testing-library/cypress/add-commands';
-import 'cypress-msw-interceptor';
-import 'cypress-real-events';
-
-import disableMotion from './disableCssTransitions';
-
-interface MountProps {
-  Component: React.ReactNode;
-  options?: object;
-}
-interface Resolution {
-  height: number;
-  width: number;
-}
-
-interface MakeSnapshotWithCustomResolution {
-  resolution: Resolution;
-  title: string;
-}
-
-export enum Method {
-  DELETE = 'DELETE',
-  GET = 'GET',
-  PATCH = 'PATCH',
-  POST = 'POST',
-  PUT = 'PUT'
-}
-
-Cypress.Commands.add('mount', ({ Component, options = {} }) => {
-  const wrapped = (
-    <ThemeProvider>
-      <Box
-        sx={{
-          backgroundColor: 'background.paper',
-          height: '100%',
-          width: '100%'
-        }}
-      >
-        {Component}
-      </Box>
-      <CssBaseline />
-    </ThemeProvider>
-  );
-
-  return mount(wrapped, options);
-});
-
-interface Query {
-  name: string;
-  value: string;
-}
-
-export interface InterceptAPIRequestProps<T> {
-  alias: string;
-  method: Method;
-  path: string;
-  query?: Query;
-  response?: T | Array<T>;
-  statusCode?: number;
-}
-
-Cypress.Commands.add(
-  'interceptAPIRequest',
-  <T extends object>({
-    method,
-    path,
-    response,
-    alias,
-    query,
-    statusCode = 200
-  }: InterceptAPIRequestProps<T>): void => {
-    cy.interceptRequest(
-      method,
-      path.replace('./', '**'),
-      (req, res, ctx) => {
-        const getQuery = req?.url?.searchParams?.get(query?.name);
-        if (query && equals(query.value, getQuery)) {
-          return res(
-            ctx.delay(500),
-            ctx.json(response),
-            ctx.status(statusCode)
-          );
-        }
-        if (!getQuery && isNil(query)) {
-          return res(
-            ctx.delay(500),
-            ctx.json(response),
-            ctx.status(statusCode)
-          );
-        }
-
-        return null;
-      },
-      alias
-    );
-  }
-);
-
-interface MoveSortableElementProps {
-  direction: 'up' | 'down' | 'left' | 'right';
-  element: Cypress.Chainable<JQuery<HTMLElement>>;
-  times?: number;
-}
-
-Cypress.Commands.add(
-  'moveSortableElement',
-  ({ element, direction, times = 1 }: MoveSortableElementProps): void => {
-    const key = `{${direction}arrow}`;
-
-    element.type(' ', {
-      force: true,
-      scrollBehavior: false
-    });
-
-    Array.from({ length: times }).forEach(() => {
-      element.eq(-1).type(key, {
-        scrollBehavior: false
-      });
-    });
-    element.eq(-1).type(' ', {
-      scrollBehavior: false
-    });
-  }
-);
-
-Cypress.Commands.add(
-  'moveSortableElementUsingAriaLabel',
-  ({ ariaLabel, direction }): void => {
-    const key = `{${direction}arrow}`;
-
-    cy.findByLabelText(ariaLabel).type(' ', {
-      force: true,
-      scrollBehavior: false
-    });
-    cy.findAllByLabelText(ariaLabel).eq(-1).type(key, {
-      scrollBehavior: false
-    });
-    cy.findAllByLabelText(ariaLabel).eq(-1).type(' ', {
-      scrollBehavior: false
-    });
-  }
-);
-
-Cypress.Commands.add('adjustViewport', () => cy.viewport(1280, 590));
-
-Cypress.Commands.add('makeSnapshot', (title?: string) => {
-  cy.adjustViewport();
-  cy.matchImageSnapshot(title);
-});
-
-Cypress.Commands.add(
-  'makeSnapshotWithCustomResolution',
-  ({ title, resolution }: MakeSnapshotWithCustomResolution) => {
-    const { width, height } = resolution;
-    cy.viewport(width, height);
-    cy.matchImageSnapshot(title);
-  }
-);
-
-Cypress.Commands.add('cssDisableMotion', (): void => {
-  Cypress.on('window:before:load', (cyWindow) => {
-    disableMotion(cyWindow);
-  });
-});
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      adjustViewport: () => Cypress.Chainable;
-      cssDisableMotion: () => Cypress.Chainable;
-      getRequestCalls: (alias) => Cypress.Chainable;
-      interceptAPIRequest: <T extends object>(
-        props: InterceptAPIRequestProps<T>
-      ) => Cypress.Chainable;
-      interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
-      makeSnapshot: (title?: string) => void;
-      makeSnapshotWithCustomResolution: ({
-        title,
-        resolution
-      }: MakeSnapshotWithCustomResolution) => Cypress.Chainable;
-      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
-      moveSortableElement: ({
-        element,
-        direction,
-        times
-      }: MoveSortableElementProps) => void;
-      moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
-      waitForRequest: (alias) => Cypress.Chainable;
-    }
-  }
-}
+/* eslint-disable @typescript-eslint/no-namespace */
+import React from 'react';
+
+import { mount } from 'cypress/react18';
+import { equals, isNil } from 'ramda';
+
+import { Box, CssBaseline } from '@mui/material';
+
+import { ThemeProvider } from '@centreon/ui';
+
+import '@testing-library/cypress/add-commands';
+import 'cypress-msw-interceptor';
+import 'cypress-real-events';
+
+import disableMotion from './disableCssTransitions';
+
+interface MountProps {
+  Component: React.ReactNode;
+  options?: object;
+}
+interface Resolution {
+  height: number;
+  width: number;
+}
+
+interface MakeSnapshotWithCustomResolution {
+  resolution: Resolution;
+  title: string;
+}
+
+export enum Method {
+  DELETE = 'DELETE',
+  GET = 'GET',
+  PATCH = 'PATCH',
+  POST = 'POST',
+  PUT = 'PUT'
+}
+
+Cypress.Commands.add('mount', ({ Component, options = {} }) => {
+  const wrapped = (
+    <ThemeProvider>
+      <Box
+        sx={{
+          backgroundColor: 'background.paper',
+          height: '100%',
+          width: '100%'
+        }}
+      >
+        {Component}
+      </Box>
+      <CssBaseline />
+    </ThemeProvider>
+  );
+
+  return mount(wrapped, options);
+});
+
+interface Query {
+  name: string;
+  value: string;
+}
+
+export interface InterceptAPIRequestProps<T> {
+  alias: string;
+  delay?: number;
+  method: Method;
+  path: string;
+  query?: Query;
+  response?: T | Array<T>;
+  statusCode?: number;
+}
+
+Cypress.Commands.add(
+  'interceptAPIRequest',
+  <T extends object>({
+    method,
+    path,
+    response,
+    alias,
+    query,
+    statusCode = 200,
+    delay = 500
+  }: InterceptAPIRequestProps<T>): void => {
+    cy.interceptRequest(
+      method,
+      path.replace('./', '**'),
+      (req, res, ctx) => {
+        const getQuery = req?.url?.searchParams?.get(query?.name);
+        if (query && equals(query.value, getQuery)) {
+          return res(
+            ctx.delay(delay),
+            ctx.json(response),
+            ctx.status(statusCode)
+          );
+        }
+        if (!getQuery && isNil(query)) {
+          return res(
+            ctx.delay(delay),
+            ctx.json(response),
+            ctx.status(statusCode)
+          );
+        }
+
+        return null;
+      },
+      alias
+    );
+  }
+);
+
+interface MoveSortableElementProps {
+  direction: 'up' | 'down' | 'left' | 'right';
+  element: Cypress.Chainable<JQuery<HTMLElement>>;
+  times?: number;
+}
+
+Cypress.Commands.add(
+  'moveSortableElement',
+  ({ element, direction, times = 1 }: MoveSortableElementProps): void => {
+    const key = `{${direction}arrow}`;
+
+    element.type(' ', {
+      force: true,
+      scrollBehavior: false
+    });
+
+    Array.from({ length: times }).forEach(() => {
+      element.eq(-1).type(key, {
+        scrollBehavior: false
+      });
+    });
+    element.eq(-1).type(' ', {
+      scrollBehavior: false
+    });
+  }
+);
+
+Cypress.Commands.add(
+  'moveSortableElementUsingAriaLabel',
+  ({ ariaLabel, direction }): void => {
+    const key = `{${direction}arrow}`;
+
+    cy.findByLabelText(ariaLabel).type(' ', {
+      force: true,
+      scrollBehavior: false
+    });
+    cy.findAllByLabelText(ariaLabel).eq(-1).type(key, {
+      scrollBehavior: false
+    });
+    cy.findAllByLabelText(ariaLabel).eq(-1).type(' ', {
+      scrollBehavior: false
+    });
+  }
+);
+
+Cypress.Commands.add('adjustViewport', () => cy.viewport(1280, 590));
+
+Cypress.Commands.add('makeSnapshot', (title?: string) => {
+  cy.adjustViewport();
+  cy.matchImageSnapshot(title);
+});
+
+Cypress.Commands.add(
+  'makeSnapshotWithCustomResolution',
+  ({ title, resolution }: MakeSnapshotWithCustomResolution) => {
+    const { width, height } = resolution;
+    cy.viewport(width, height);
+    cy.matchImageSnapshot(title);
+  }
+);
+
+Cypress.Commands.add('cssDisableMotion', (): void => {
+  Cypress.on('window:before:load', (cyWindow) => {
+    disableMotion(cyWindow);
+  });
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      adjustViewport: () => Cypress.Chainable;
+      cssDisableMotion: () => Cypress.Chainable;
+      getRequestCalls: (alias) => Cypress.Chainable;
+      interceptAPIRequest: <T extends object>(
+        props: InterceptAPIRequestProps<T>
+      ) => Cypress.Chainable;
+      interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
+      makeSnapshot: (title?: string) => void;
+      makeSnapshotWithCustomResolution: ({
+        title,
+        resolution
+      }: MakeSnapshotWithCustomResolution) => Cypress.Chainable;
+      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
+      moveSortableElement: ({
+        element,
+        direction,
+        times
+      }: MoveSortableElementProps) => void;
+      moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
+      waitForRequest: (alias) => Cypress.Chainable;
+    }
+  }
+}

package/cypress/component/configuration.js

@@ -1,69 +1,83 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { defineConfig } = require('cypress');
-const {
-  addMatchImageSnapshotPlugin
-} = require('@simonsmith/cypress-image-snapshot/plugin');
-const cypressCodeCoverageTask = require('@cypress/code-coverage/task');
-
-module.exports = ({
-  webpackConfig,
-  cypressFolder,
-  specPattern,
-  env,
-  useVite = false,
-  excludeSpecPattern
-}) => {
-  const mainCypressFolder = cypressFolder || 'cypress';
-
-  return defineConfig({
-    component: {
-      devServer: {
-        bundler: useVite ? 'vite' : 'webpack',
-        framework: 'react',
-        webpackConfig
-      },
-      excludeSpecPattern,
-      setupNodeEvents: (on, config) => {
-        addMatchImageSnapshotPlugin(on, config);
-
-        cypressCodeCoverageTask(on, config);
-
-        on('before:browser:launch', (browser, launchOptions) => {
-          if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args.push('--headless=new');
-            launchOptions.args.push('--force-color-profile=srgb');
-          }
-
-          return launchOptions;
-        });
-      },
-      specPattern,
-      supportFile: `${mainCypressFolder}/support/component.tsx`
-    },
-    env: {
-      baseUrl: 'http://localhost:9092',
-      codeCoverage: {
-        exclude: [
-          'cypress/**/*.*',
-          'packages/**',
-          'node_modules',
-          '**/*.js',
-          '**/*.spec.tsx'
-        ]
-      },
-      ...env
-    },
-    reporter: 'mochawesome',
-    reporterOptions: {
-      html: false,
-      json: true,
-      overwrite: true,
-      reportDir: `${mainCypressFolder}/results`,
-      reportFilename: '[name]-report.json'
-    },
-    video: true,
-    videosFolder: `${mainCypressFolder}/results/videos`,
-    viewportHeight: 590,
-    viewportWidth: 1280
-  });
-};
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { defineConfig } = require('cypress');
+const { devServer } = require('cypress-rspack-dev-server');
+const {
+  addMatchImageSnapshotPlugin
+} = require('@simonsmith/cypress-image-snapshot/plugin');
+const cypressCodeCoverageTask = require('@cypress/code-coverage/task');
+
+module.exports = ({
+  webpackConfig,
+  cypressFolder,
+  specPattern,
+  env,
+  useVite = false,
+  excludeSpecPattern
+}) => {
+  const mainCypressFolder = cypressFolder || 'cypress';
+
+  return defineConfig({
+    component: {
+      devServer: useVite
+        ? {
+            bundler: 'vite',
+            framework: 'react',
+            webpackConfig
+          }
+        : (devServerConfig) =>
+            devServer({
+              ...devServerConfig,
+              framework: 'react',
+              rspackConfig: webpackConfig
+            }),
+      excludeSpecPattern,
+      setupNodeEvents: (on, config) => {
+        addMatchImageSnapshotPlugin(on, config);
+
+        cypressCodeCoverageTask(on, config);
+        on('task', {
+          coverageReport: () => {
+            return null;
+          }
+        });
+
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--headless=new');
+            launchOptions.args.push('--force-color-profile=srgb');
+            launchOptions.args.push('--window-size=1400,1200');
+          }
+
+          return launchOptions;
+        });
+      },
+      specPattern,
+      supportFile: `${mainCypressFolder}/support/component.tsx`
+    },
+    env: {
+      baseUrl: 'http://localhost:9092',
+      codeCoverage: {
+        exclude: [
+          'cypress/**/*.*',
+          'packages/**',
+          'node_modules',
+          '**/*.js',
+          '**/*.spec.tsx'
+        ]
+      },
+      ...env
+    },
+    reporter: 'mochawesome',
+    reporterOptions: {
+      html: false,
+      json: true,
+      overwrite: true,
+      reportDir: `${mainCypressFolder}/results`,
+      reportFilename: '[name]-report.json'
+    },
+    video: true,
+    videosFolder: `${mainCypressFolder}/results/videos`,
+    viewportHeight: 590,
+    viewportWidth: 1280
+  });
+};

package/cypress/component/enableVisualTesting.ts

@@ -1,21 +1,21 @@
-import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
-
-const enableVisualTesting = (cypressFolder = 'cypress'): void => {
-  if (Cypress.config('isInteractive')) {
-    Cypress.Commands.add('matchImageSnapshot', () => {
-      cy.log('Skipping snapshot');
-    });
-
-    return;
-  }
-
-  addMatchImageSnapshotCommand({
-    capture: 'viewport',
-    customDiffConfig: { threshold: 0.01 },
-    customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
-    failureThreshold: 0.07,
-    failureThresholdType: 'percent'
-  });
-};
-
-export default enableVisualTesting;
+import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
+
+const enableVisualTesting = (cypressFolder = 'cypress'): void => {
+  if (Cypress.config('isInteractive')) {
+    Cypress.Commands.add('matchImageSnapshot', () => {
+      cy.log('Skipping snapshot');
+    });
+
+    return;
+  }
+
+  addMatchImageSnapshotCommand({
+    capture: 'viewport',
+    customDiffConfig: { threshold: 0.01 },
+    customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
+    failureThreshold: 0.07,
+    failureThresholdType: 'percent'
+  });
+};
+
+export default enableVisualTesting;

package/cypress/e2e/commands/configuration.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 
+import { Action } from 'e2e/features/ACLs/commands';
+
 const apiBase = '/centreon/api';
 const apiActionV1 = `${apiBase}/index.php`;
 
@@ -496,9 +498,172 @@ Cypress.Commands.add(
   }
 );
 
+interface ACLGroup {
+  alias?: string | null;
+  contacts?: string[];
+  contactGroups?: string[];
+  name: string;
+}
+
+Cypress.Commands.add(
+  'addACLGroup',
+  ({
+    alias = null,
+    contacts = [],
+    contactGroups = [],
+    name
+  }: ACLGroup): Cypress.Chainable => {
+    const ACLGroupALias = alias === null ? name : alias;
+
+    return cy
+      .executeActionViaClapi({
+        bodyContent: {
+          action: 'ADD',
+          object: 'ACLGROUP',
+          values: `${name};${ACLGroupALias}`
+        }
+      })
+      .then(() => {
+        if (contacts) {
+          contacts.map((contact) => {
+            cy.executeActionViaClapi({
+              bodyContent: {
+                action: 'ADDCONTACT',
+                object: 'ACLGROUP',
+                values: `${name};${contact}`
+              }
+            });
+          });
+        }
+        if (contactGroups) {
+          contactGroups.map((contactGroup) => {
+            cy.executeActionViaClapi({
+              bodyContent: {
+                action: 'ADDCONTACTGROUP',
+                object: 'ACLGROUP',
+                values: `${name};${contactGroup}`
+              }
+            });
+          });
+        }
+      });
+  }
+);
+
+interface ACLMenu {
+  name: string;
+  rule?: string[];
+  alias?: string | null;
+  includeChildren?: boolean;
+  readOnly?: boolean;
+}
+
+Cypress.Commands.add(
+  'addACLMenu',
+  ({
+    name,
+    rule = [],
+    alias = null,
+    includeChildren = true,
+    readOnly = false
+  }: ACLMenu): Cypress.Chainable => {
+    const ACLMenuAlias = alias === null ? name : alias;
+    const action = readOnly ? 'GRANTRO' : 'GRANTRW';
+    const children = includeChildren ? '1' : '0';
+
+    return cy
+      .executeActionViaClapi({
+        bodyContent: {
+          action: 'ADD',
+          object: 'ACLMENU',
+          values: `${name};${ACLMenuAlias}`
+        }
+      })
+      .then(() => {
+        if (rule.length == 0) {
+          return cy.wrap(null);
+        }
+
+        let ruleCommand = '';
+        rule.map((rulePage, index) => {
+          ruleCommand += rulePage + (index == rule.length - 1 ? '' : ';');
+        });
+        cy.executeActionViaClapi({
+          bodyContent: {
+            action: action,
+            object: 'ACLMENU',
+            values: `${name};${children};${ruleCommand}`
+          }
+        });
+        return cy.wrap(null);
+      });
+  }
+);
+
+interface ACLAction {
+  name: string;
+  description: string;
+  actions?: Action[];
+}
+
+Cypress.Commands.add(
+  'addACLAction',
+  ({ name, description, actions = [] }: ACLAction): Cypress.Chainable => {
+    return cy
+      .executeActionViaClapi({
+        bodyContent: {
+          action: 'ADD',
+          object: 'ACLACTION',
+          values: `${name};${description}`
+        }
+      })
+      .then(() => {
+        if (actions.length == 0) {
+          return cy.wrap(null);
+        }
+
+        let actionCommand = '';
+        actions.map((action, index) => {
+          actionCommand += action + (index == actions.length - 1 ? '' : '|');
+        });
+        cy.executeActionViaClapi({
+          bodyContent: {
+            action: 'GRANT',
+            object: 'ACLACTION',
+            values: `${name};${actionCommand}`
+          }
+        });
+        return cy.wrap(null);
+      });
+  }
+);
+
+interface ACLResource {
+  name: string;
+  alias?: string | null;
+}
+
+Cypress.Commands.add(
+  'addACLResource',
+  ({ name, alias = null }: ACLResource): Cypress.Chainable => {
+    const ACLResourcesAlias = alias === null ? name : alias;
+    return cy.executeActionViaClapi({
+      bodyContent: {
+        action: 'ADD',
+        object: 'ACLRESOURCE',
+        values: `${name};${ACLResourcesAlias}`
+      }
+    });
+  }
+);
+
 declare global {
   namespace Cypress {
     interface Chainable {
+      addACLAction: (props: ACLAction) => Cypress.Chainable;
+      addACLGroup: (props: ACLGroup) => Cypress.Chainable;
+      addACLMenu: (props: ACLMenu) => Cypress.Chainable;
+      addACLResource: (props: ACLResource) => Cypress.Chainable;
       addCheckCommand: (props: CheckCommand) => Cypress.Chainable;
       addContact: (props: Contact) => Cypress.Chainable;
       addContactGroup: (props: ContactGroup) => Cypress.Chainable;

package/cypress/e2e/commands/monitoring.ts

@@ -29,6 +29,12 @@ interface SubmitResult {
   status: string;
 }
 
+interface ServiceCheck {
+  host: string;
+  isForced?: boolean;
+  service: string;
+}
+
 Cypress.Commands.add(
   'submitResults',
   (results: Array<SubmitResult>): Cypress.Chainable => {
@@ -64,10 +70,60 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add(
+  'scheduleServiceCheck',
+  ({
+    host,
+    isForced = true,
+    service
+  }: ServiceCheck): Cypress.Chainable => {
+    let query = `SELECT parent_id, id FROM resources WHERE parent_name = '${host}' AND name = '${service}'`;
+
+    return cy
+      .requestOnDatabase({
+        database: 'centreon_storage',
+        query
+      })
+      .then(([rows]) => {
+        if (rows.length === 0) {
+          throw new Error(`Cannot find service ${host} / ${service}`);
+        }
+
+        const hostId = rows[0].parent_id;
+        const serviceId = rows[0].id;
+
+        return cy.request({
+          body: {
+            check: {
+              is_forced: isForced
+            },
+            resources: [
+              {
+                id: serviceId,
+                parent: {
+                  id: hostId
+                },
+                type: 'service'
+              }
+            ]
+          },
+          method: 'POST',
+          timeout: 30000,
+          url: '/centreon/api/latest/monitoring/resources/check'
+        }).then((response) => {
+          expect(response.status).to.eq(204);
+
+          return cy.wrap(null);
+        });
+      });
+  }
+);
+
 declare global {
   namespace Cypress {
     interface Chainable {
       submitResults: (props: Array<SubmitResult>) => Cypress.Chainable;
+      scheduleServiceCheck: (serviceCheck) => Cypress.Chainable;
     }
   }
 }

package/cypress/e2e/commands.ts

@@ -79,6 +79,34 @@ Cypress.Commands.add('getIframeBody', (): Cypress.Chainable => {
     .then(cy.wrap);
 });
 
+Cypress.Commands.add(
+  'waitForElementInIframe',
+  (iframeSelector, elementSelector) => {
+    cy.waitUntil(
+      () =>
+        cy.get(iframeSelector).then(($iframe) => {
+          const iframeBody = $iframe[0].contentDocument.body;
+          if (iframeBody) {
+            const $element = Cypress.$(iframeBody).find(elementSelector);
+
+            return $element.length > 0 && $element.is(':visible');
+          }
+
+          return false;
+        }),
+      {
+        errorMsg: 'The element is not visible within the iframe',
+        interval: 5000,
+        timeout: 100000
+      }
+    ).then((isVisible) => {
+      if (!isVisible) {
+        throw new Error('The element is not visible');
+      }
+    });
+  }
+);
+
 Cypress.Commands.add(
   'hoverRootMenuItem',
   (rootItemNumber: number): Cypress.Chainable => {
@@ -260,6 +288,7 @@ Cypress.Commands.add(
     return cy.get('.MuiAlert-message').then(($snackbar) => {
       if ($snackbar.text().includes('Login succeeded')) {
         cy.wait('@getNavigationList');
+        cy.get('.MuiAlert-message').should('not.be.visible');
       }
     });
   }
@@ -500,99 +529,111 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('stopContainers', (): Cypress.Chainable => {
-  cy.log('Stopping containers ...');
+Cypress.Commands.add(
+  'getLogDirectory',
+  (): Cypress.Chainable => {
+    const logDirectory = `results/logs/${Cypress.spec.name.replace(
+        artifactIllegalCharactersMatcher,
+        '_'
+      )}/${Cypress.currentTest.title.replace(
+        artifactIllegalCharactersMatcher,
+        '_'
+      )}`;
 
-  const logDirectory = `results/logs/${Cypress.spec.name.replace(
-    artifactIllegalCharactersMatcher,
-    '_'
-  )}/${Cypress.currentTest.title.replace(
-    artifactIllegalCharactersMatcher,
-    '_'
-  )}`;
+    return cy
+      .createDirectory(logDirectory)
+      .exec(`chmod -R 755 "${logDirectory}"`)
+      .wrap(logDirectory);
+  }
+);
 
-  const name = 'web';
+interface CopyWebContainerLogsProps {
+  name: string;
+}
 
-  return cy
-    .visitEmptyPage()
-    .createDirectory(logDirectory)
-    .getContainersLogs()
-    .then((containersLogs: Array<Array<string>>) => {
-      Object.entries(containersLogs).forEach(([containerName, logs]) => {
-        cy.writeFile(
-          `results/logs/${Cypress.spec.name.replace(
-            artifactIllegalCharactersMatcher,
-            '_'
-          )}/${Cypress.currentTest.title.replace(
-            artifactIllegalCharactersMatcher,
-            '_'
-          )}/container-${containerName}.log`,
-          logs
-        );
-      });
-    })
-    .copyFromContainer({
-      destination: `${logDirectory}/broker`,
-      name,
-      source: '/var/log/centreon-broker'
-    })
-    .copyFromContainer({
-      destination: `${logDirectory}/engine`,
-      name,
-      source: '/var/log/centreon-engine'
-    })
-    .copyFromContainer({
-      destination: `${logDirectory}/centreon`,
-      name,
-      source: '/var/log/centreon'
-    })
-    .copyFromContainer({
-      destination: `${logDirectory}/centreon-gorgone`,
-      name,
-      source: '/var/log/centreon-gorgone'
-    })
-    .then(() => {
+Cypress.Commands.add(
+  'copyWebContainerLogs',
+  ({ name }: CopyWebContainerLogsProps): Cypress.Chainable => {
+    cy.log(`Getting logs from container ${name} ...`);
+
+    return cy.getLogDirectory().then((logDirectory) => {
+      let sourcePhpLogs = '/var/log/php8.1-fpm-centreon-error.log';
+      let targetPhpLogs = `${logDirectory}/php8.1-fpm-centreon-error.log`;
+      let sourceApacheLogs = '/var/log/apache2';
+      let targetApacheLogs = `${logDirectory}/apache2`;
       if (Cypress.env('WEB_IMAGE_OS').includes('alma')) {
-        return cy.copyFromContainer({
-          destination: `${logDirectory}/php`,
-          name,
-          source: '/var/log/php-fpm'
-        });
+        sourcePhpLogs = '/var/log/php-fpm';
+        targetPhpLogs = `${logDirectory}/php`;
+        sourceApacheLogs = '/var/log/httpd';
+        targetApacheLogs = `${logDirectory}/httpd`;
       }
 
-      return cy.copyFromContainer(
-        {
-          destination: `${logDirectory}/php8.1-fpm-centreon-error.log`,
+      return cy
+        .copyFromContainer({
+          destination: `${logDirectory}/broker`,
           name,
-          source: '/var/log/php8.1-fpm-centreon-error.log'
-        },
-        { failOnNonZeroExit: false }
-      );
-    })
-    .then(() => {
-      if (Cypress.env('WEB_IMAGE_OS').includes('alma')) {
-        return cy.copyFromContainer({
-          destination: `${logDirectory}/httpd`,
+          source: '/var/log/centreon-broker'
+        })
+        .copyFromContainer({
+          destination: `${logDirectory}/engine`,
           name,
-          source: '/var/log/httpd'
-        });
-      }
-
-      return cy.copyFromContainer(
-        {
-          destination: `${logDirectory}/apache2`,
+          source: '/var/log/centreon-engine'
+        })
+        .copyFromContainer({
+          destination: `${logDirectory}/centreon`,
           name,
-          source: '/var/log/apache2'
-        },
-        { failOnNonZeroExit: false }
-      );
-    })
-    .exec(`chmod -R 755 "${logDirectory}"`)
-    .task(
-      'stopContainers',
-      {},
-      { timeout: 600000 } // 10 minutes because docker pull can be very slow
-    );
+          source: '/var/log/centreon'
+        })
+        .copyFromContainer({
+          destination: `${logDirectory}/centreon-gorgone`,
+          name,
+          source: '/var/log/centreon-gorgone'
+        })
+        .copyFromContainer({
+          destination: targetPhpLogs,
+          name,
+          source: sourcePhpLogs,
+        })
+        .copyFromContainer({
+          destination: targetApacheLogs,
+          name,
+          source: sourceApacheLogs,
+        })
+        .exec(`chmod -R 755 "${logDirectory}"`);
+      });
+});
+
+Cypress.Commands.add('stopContainers', (): Cypress.Chainable => {
+  cy.log('Stopping containers ...');
+
+  const name = 'web';
+
+  return cy
+    .visitEmptyPage()
+    .getLogDirectory()
+    .then((logDirectory) => {
+      return cy
+        .getContainersLogs()
+        .then((containersLogs: Array<Array<string>>) => {
+          if (!containersLogs) {
+            return;
+          }
+
+          Object.entries(containersLogs).forEach(([containerName, logs]) => {
+            cy.writeFile(
+              `${logDirectory}/container-${containerName}.log`,
+              logs
+            );
+          });
+        })
+        .copyWebContainerLogs({ name })
+        .exec(`chmod -R 755 "${logDirectory}"`)
+        .task(
+          'stopContainers',
+          {},
+          { timeout: 600000 } // 10 minutes because docker pull can be very slow
+        );
+    });
 });
 
 Cypress.Commands.add(
@@ -743,7 +784,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
   return cy
-    .get('header div[data-cy="clock"]', { timeout: 10000 })
+    .get('header div[data-cy="clock"]', { timeout: 20000 })
     .should('be.visible')
     .then(($time) => {
       const headerTime = $time.children()[1].textContent;
@@ -769,6 +810,7 @@ declare global {
         props: CopyToContainerProps,
         options?: Partial<Cypress.ExecOptions>
       ) => Cypress.Chainable;
+      copyWebContainerLogs: (props: CopyWebContainerLogsProps) => Cypress.Chainable;
       createDirectory: (directoryPath: string) => Cypress.Chainable;
       execInContainer: ({
         command,
@@ -788,6 +830,7 @@ declare global {
       getContainerIpAddress: (containerName: string) => Cypress.Chainable;
       getContainersLogs: () => Cypress.Chainable;
       getIframeBody: () => Cypress.Chainable;
+      getLogDirectory: () => Cypress.Chainable;
       getTimeFromHeader: () => Cypress.Chainable;
       getWebVersion: () => Cypress.Chainable;
       hoverRootMenuItem: (rootItemNumber: number) => Cypress.Chainable;
@@ -839,6 +882,10 @@ declare global {
         webOs,
         webVersion
       }?: StartContainersProps) => Cypress.Chainable;
+      waitForElementInIframe: (
+        iframeSelector: string,
+        elementSelector: string
+      ) => Cypress.Chainable;
       stopContainer: ({ name }: StopContainerProps) => Cypress.Chainable;
       stopContainers: () => Cypress.Chainable;
       visitEmptyPage: () => Cypress.Chainable;

package/cypress/e2e/configuration.ts

@@ -38,7 +38,7 @@ export default ({
 
   return defineConfig({
     chromeWebSecurity: false,
-    defaultCommandTimeout: 6000,
+    defaultCommandTimeout: 20000,
     downloadsFolder: `${resultsFolder}/downloads`,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
@@ -47,30 +47,46 @@ export default ({
       reporterOptions: {
         configFile: `${__dirname}/reporter-config.js`
       },
-      setupNodeEvents: async (on, config) => {
-        installLogsPrinter(on);
+      setupNodeEvents: async (cypressOn, config) => {
+        const on = require('cypress-on-fix')(cypressOn)
+        installLogsPrinter(on, {
+          commandTrimLength: 5000,
+          defaultTrimLength: 5000,
+        });
+        on("task", {
+          logVersion(message) {
+            console.log(`[LOG]: ${message}`);
+            return null;
+          },
+        });
         await esbuildPreprocessor(on, config);
         tasks(on);
 
         return plugins(on, config);
       },
       specPattern,
-      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
+      supportFile: 'support/e2e.{js,jsx,ts,tsx}',
+      testIsolation: true,
     },
     env: {
       ...env,
-      DATABASE_IMAGE: 'bitnami/mariadb:10.5',
+      DATABASE_IMAGE: 'bitnami/mariadb:10.11',
       OPENID_IMAGE_VERSION: process.env.MAJOR || '24.04',
       SAML_IMAGE_VERSION: process.env.MAJOR || '24.04',
       WEB_IMAGE_OS: 'alma9',
       WEB_IMAGE_VERSION: webImageVersion
     },
     execTimeout: 60000,
-    requestTimeout: 10000,
-    retries: 0,
+    requestTimeout: 20000,
+    retries: {
+      openMode: 0,
+      runMode: 2
+    },
     screenshotsFolder: `${resultsFolder}/screenshots`,
     video: isDevelopment,
     videoCompression: 0,
-    videosFolder: `${resultsFolder}/videos`
+    videosFolder: `${resultsFolder}/videos`,
+    viewportHeight: 1080,
+    viewportWidth: 1920
   });
 };

package/cypress/e2e/plugins.ts

@@ -3,6 +3,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-param-reassign */
 
+import fs from 'fs';
+import path from 'path';
+
 export default (
   on: Cypress.PluginEvents,
   config: Cypress.PluginConfigOptions
@@ -23,14 +26,38 @@ export default (
       launchOptions.args.push('--hide-scrollbars');
       launchOptions.args.push('--mute-audio');
 
-      launchOptions.args.push(`--window-size=${width},${height}`);
-
       // force screen to be non-retina and just use our given resolution
       launchOptions.args.push('--force-device-scale-factor=1');
+
+      launchOptions.args.push(`--window-size=${width},${height}`);
     }
 
     return launchOptions;
   });
 
+  on('after:run', (results) => {
+    const testRetries: { [key: string]: Number } = {};
+    if ('runs' in results) {
+      results.runs.forEach((run) => {
+        run.tests.forEach((test) => {
+          console.log(test)
+          if (test.attempts && test.attempts.length > 1 && test.state === 'passed') {
+            const testTitle = test.title.join(' > '); // Convert the array to a string
+            testRetries[testTitle] = test.attempts.length - 1;
+          }
+        });
+      });
+    }
+
+    // Save the testRetries object to a file in the e2e/results directory
+    const resultFilePath = path.join(
+      __dirname,
+      '../../../../tests/e2e/results',
+      'retries.json'
+    );
+
+    fs.writeFileSync(resultFilePath, JSON.stringify(testRetries, null, 2));
+  });
+
   return config;
-};
+};

package/cypress/e2e/tasks.ts

@@ -55,19 +55,17 @@ export default (on: Cypress.PluginEvents): void => {
   on('task', {
     copyFromContainer: async ({ destination, serviceName, source }) => {
       try {
-        if (dockerEnvironment !== null) {
-          const container = dockerEnvironment.getContainer(`${serviceName}-1`);
-
-          await container
-            .copyArchiveFromContainer(source)
-            .then((archiveStream) => {
-              return new Promise<void>((resolve) => {
-                const dest = tar.extract(destination);
-                archiveStream.pipe(dest);
-                dest.on('finish', resolve);
-              });
+        const container = getContainer(serviceName);
+
+        await container
+          .copyArchiveFromContainer(source)
+          .then((archiveStream) => {
+            return new Promise<void>((resolve) => {
+              const dest = tar.extract(destination);
+              archiveStream.pipe(dest);
+              dest.on('finish', resolve);
             });
-        }
+          });
       } catch (error) {
         console.error(error);
       }
@@ -106,7 +104,7 @@ export default (on: Cypress.PluginEvents): void => {
       const { exitCode, output } = await getContainer(name).exec([
         'bash',
         '-c',
-        command
+        `${command}${command.match(/[\n\r]/) ? '' : ' 2>&1'}`
       ]);
 
       return { exitCode, output };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@centreon/js-config",
     "description": "Centreon Frontend shared build configuration",
-    "version": "24.4.31",
+    "version": "24.4.33",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/centreon/centreon-frontend.git"

package/webpack/base/index.js

@@ -63,7 +63,7 @@ const getBaseConfiguration = ({
           },
           {
             'react-i18next': {
-              requiredVersion: '11.x',
+              requiredVersion: '14.x',
               singleton: true
             }
           },