@centreon/js-config 23.10.21 → 23.10.22

package/cypress/component/configuration.js

@@ -4,16 +4,24 @@ const {
   addMatchImageSnapshotPlugin
 } = require('@simonsmith/cypress-image-snapshot/plugin');
 
-module.exports = ({ webpackConfig, cypressFolder, specPattern, env }) => {
+module.exports = ({
+  webpackConfig,
+  cypressFolder,
+  specPattern,
+  env,
+  useVite = false,
+  excludeSpecPattern
+}) => {
   const mainCypressFolder = cypressFolder || 'cypress';
 
   return defineConfig({
     component: {
       devServer: {
-        bundler: 'webpack',
+        bundler: useVite ? 'vite' : 'webpack',
         framework: 'react',
         webpackConfig
       },
+      excludeSpecPattern,
       setupNodeEvents: (on, config) => {
         addMatchImageSnapshotPlugin(on, config);
       },

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.06,
+    failureThreshold: 0.07,
     failureThresholdType: 'percent'
   });
 };

package/cypress/e2e/commands.ts

@@ -4,6 +4,8 @@ import './commands/configuration';
 
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
+const artifactIllegalCharactersMatcher = /[,\s/|<>*?:"]/g;
+
 Cypress.Commands.add('getWebVersion', (): Cypress.Chainable => {
   return cy
     .exec(
@@ -21,7 +23,7 @@ Cypress.Commands.add('getWebVersion', (): Cypress.Chainable => {
 
 Cypress.Commands.add('getIframeBody', (): Cypress.Chainable => {
   return cy
-    .get('iframe#main-content')
+    .get('iframe#main-content', { timeout: 10000 })
     .its('0.contentDocument.body')
     .should('not.be.empty')
     .then(cy.wrap);
@@ -37,6 +39,13 @@ 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;
@@ -49,8 +58,13 @@ Cypress.Commands.add(
     if (subMenu) {
       cy.hoverRootMenuItem(rootItemNumber)
         .contains(subMenu)
-        .trigger('mouseover', { force: true });
-      cy.contains(page).click({ force: true });
+        .trigger('mouseover')
+        .get('.MuiCollapse-wrapper')
+        .find('div[data-cy="collapse"]')
+        .should('be.visible')
+        .and('contain', page);
+
+      cy.clickSubRootMenuItem(page);
 
       return;
     }
@@ -83,29 +97,41 @@ Cypress.Commands.add(
 
 interface CopyFromContainerProps {
   destination: string;
+  name?: string;
   source: string;
 }
 
 Cypress.Commands.add(
   'copyFromContainer',
-  ({ source, destination }: CopyFromContainerProps) => {
-    return cy.exec(
-      `docker cp ${Cypress.env('dockerName')}:${source} "${destination}"`
-    );
+  (
+    {
+      name = Cypress.env('dockerName'),
+      source,
+      destination
+    }: CopyFromContainerProps,
+    options
+  ) => {
+    return cy.exec(`docker cp ${name}:${source} "${destination}"`, options);
   }
 );
 
 interface CopyToContainerProps {
   destination: string;
+  name?: string;
   source: string;
 }
 
 Cypress.Commands.add(
   'copyToContainer',
-  ({ source, destination }: CopyToContainerProps) => {
-    return cy.exec(
-      `docker cp ${source} ${Cypress.env('dockerName')}:${destination}`
-    );
+  (
+    {
+      name = Cypress.env('dockerName'),
+      source,
+      destination
+    }: CopyToContainerProps,
+    options
+  ) => {
+    return cy.exec(`docker cp ${source} ${name}:${destination}`, options);
   }
 );
 
@@ -196,8 +222,28 @@ Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
     return cy
-      .exec(`docker image inspect ${image} || docker pull ${image}`)
-      .task('startContainer', { image, name, portBindings });
+      .exec('docker image list --format "{{.Repository}}:{{.Tag}}"')
+      .then(({ stdout }) => {
+        if (
+          stdout.match(
+            new RegExp(
+              `^${image.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')}`,
+              'm'
+            )
+          )
+        ) {
+          cy.log(`Local docker image found : ${image}`);
+
+          return cy.wrap(image);
+        }
+
+        cy.log(`Pulling remote docker image : ${image}`);
+
+        return cy.exec(`docker pull ${image}`).then(() => cy.wrap(image));
+      })
+      .then((imageName) =>
+        cy.task('startContainer', { image: imageName, name, portBindings })
+      );
   }
 );
 
@@ -212,7 +258,7 @@ Cypress.Commands.add(
   'startWebContainer',
   ({
     name = Cypress.env('dockerName'),
-    os = 'alma9',
+    os = Cypress.env('WEB_IMAGE_OS'),
     useSlim = true,
     version = Cypress.env('WEB_IMAGE_VERSION')
   }: StartWebContainerProps = {}): Cypress.Chainable => {
@@ -249,25 +295,51 @@ Cypress.Commands.add(
   ({
     name = Cypress.env('dockerName')
   }: StopWebContainerProps = {}): Cypress.Chainable => {
-    const logDirectory = `cypress/results/logs/${
-      Cypress.spec.name
-    }/${Cypress.currentTest.title.replace(/,|\s|\//g, '_')}`;
+    const logDirectory = `cypress/results/logs/${Cypress.spec.name.replace(
+      artifactIllegalCharactersMatcher,
+      '_'
+    )}/${Cypress.currentTest.title.replace(
+      artifactIllegalCharactersMatcher,
+      '_'
+    )}`;
 
     return cy
       .visitEmptyPage()
       .exec(`mkdir -p "${logDirectory}"`)
       .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'
       })
+      .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 });
   }
 );
@@ -281,10 +353,11 @@ Cypress.Commands.add(
   ({ name }: StopContainerProps): Cypress.Chainable => {
     cy.exec(`docker logs ${name}`).then(({ stdout }) => {
       cy.writeFile(
-        `cypress/results/logs/${
-          Cypress.spec.name
-        }/${Cypress.currentTest.title.replace(
-          /,|\s|\//g,
+        `cypress/results/logs/${Cypress.spec.name.replace(
+          artifactIllegalCharactersMatcher,
+          '_'
+        )}/${Cypress.currentTest.title.replace(
+          artifactIllegalCharactersMatcher,
           '_'
         )}/container-${name}.log`,
         stdout
@@ -295,9 +368,56 @@ 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'
+    });
+  }
+);
+
+Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
+  return cy.waitUntil(() => {
+    return cy.get('header div[data-cy="clock"]').then(($time) => {
+      const headerTime = $time.children()[1].textContent;
+      if (headerTime?.match(/\d+:\d+/)) {
+        return headerTime;
+      }
+
+      return false;
+    });
+  });
+});
+
 declare global {
   namespace Cypress {
     interface Chainable {
+      clickSubRootMenuItem: (page: string) => Cypress.Chainable;
       copyFromContainer: (props: CopyFromContainerProps) => Cypress.Chainable;
       copyToContainer: (props: CopyToContainerProps) => Cypress.Chainable;
       execInContainer: ({
@@ -305,8 +425,11 @@ declare global {
         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 = 'admin',
         loginViaApi = false

package/cypress/e2e/configuration.ts

@@ -45,7 +45,7 @@ export default ({
       WEB_IMAGE_VERSION: webImageVersion,
       dockerName: dockerName || 'centreon-dev'
     },
-    execTimeout: 120000,
+    execTimeout: 60000,
     reporter: 'mochawesome',
     reporterOptions: {
       html: false,

package/eslint/base.typescript.eslintrc.js

@@ -21,11 +21,15 @@ module.exports = {
           }
         ],
         '@typescript-eslint/camelcase': 'off',
-        '@typescript-eslint/consistent-type-definitions': [
+        '@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
+        '@typescript-eslint/explicit-function-return-type': [
           'error',
-          'interface'
+          {
+            allowExpressions: true,
+            allowHigherOrderFunctions: true,
+            allowTypedFunctionExpressions: true
+          }
         ],
-        '@typescript-eslint/explicit-function-return-type': ['error'],
         '@typescript-eslint/explicit-member-accessibility': [
           'error',
           {
@@ -76,13 +80,21 @@ 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/eslint/lambda/typescript.eslintrc.js

@@ -0,0 +1,48 @@
+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/index.js

@@ -1,12 +1,16 @@
 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/'],
+  testPathIgnorePatterns: ['/node_modules/', '!*.cypress.spec.tsx'],
   transform: {
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
     '^.+\\.[jt]sx?$': [
       '@swc/jest',
       {

package/jest/lambda/typescript.js

@@ -0,0 +1,49 @@
+/*
+ * 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@centreon/js-config",
   "description": "Centreon Frontend shared build configuration",
-  "version": "23.10.21",
+  "version": "23.10.22",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -17,12 +17,14 @@
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
+    "@tsconfig/node16": "^1.0.4",
     "@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",

package/tsconfig/index.json

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

package/tsconfig/lambda/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "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

@@ -0,0 +1,71 @@
+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
+  }
+};

package/webpack/base/index.js

@@ -3,68 +3,22 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { ModuleFederationPlugin } = require('webpack').container;
 
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon))/;
+const {
+  getModuleConfiguration,
+  optimization,
+  output,
+  cache
+} = require('./globalConfig');
 
 const getBaseConfiguration = ({
   moduleName,
   moduleFederationConfig,
   jscTransformConfiguration
 }) => ({
-  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
-  },
+  cache,
+  module: getModuleConfiguration(jscTransformConfiguration),
+  optimization,
+  output,
   plugins: [
     new CleanWebpackPlugin(),
     moduleName &&
@@ -121,7 +75,10 @@ const getBaseConfiguration = ({
   ].filter(Boolean),
   resolve: {
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      '@centreon/ui/fonts': path.resolve(
+        './node_modules/@centreon/ui/public/fonts'
+      )
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   }