@centreon/ui 26.1.0 → 26.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.1.0",
+  "version": "26.3.1",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -76,14 +76,14 @@ const checkWidth = (orientation): void => {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
       .should('have.attr', 'x2')
-      .and('equal', '1145');
+      .and('equal', '1133');
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
     .should('have.attr', 'x2')
-    .and('equal', '1180');
+    .and('equal', '1168');
 };
 
 describe('Bar chart', () => {
@@ -103,7 +103,7 @@ describe('Bar chart', () => {
     cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
       'be.visible'
     );
-    cy.contains('7.47 KB').should('be.visible');
+    cy.contains('7.47 KiB').should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -157,7 +157,7 @@ const checkGraphWidth = (): void => {
     .and('equal', '392');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
-    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1167);
   });
 };
 
@@ -180,8 +180,8 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.4 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('0.44 s').should('be.visible');
+      cy.contains('75.19%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -235,7 +235,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1170, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1100, 100);
 
       cy.get('[data-metric="querytime"]').should('be.visible');
       cy.get('[data-metric="hitratio"]').should('be.visible');
@@ -533,8 +533,8 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="248.33333333333334"]').should('be.visible');
-      cy.get('circle[cy="267.9948393443889"]').should('be.visible');
+      cy.get('circle[cx="245.83333333333334"]').should('be.visible');
+      cy.get('circle[cy="256.7205013298516"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -592,7 +592,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle[cx="33.11111111111111"]').should('be.visible');
+      cy.get('circle[cx="32.77777777777778"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -714,7 +714,7 @@ describe('Lines and bars', () => {
     cy.findByLabelText('B').click();
 
     cy.findAllByTestId('unit-selector').eq(0).should('have.value', 'B');
-    cy.contains('8.79 KB').should('be.visible');
+    cy.contains('8.79 KiB').should('be.visible');
 
     cy.findAllByTestId('unit-selector').eq(1).parent().click();
     cy.findByLabelText('%').click();
@@ -748,10 +748,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,289.92398616599974 h56.51239669421488 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
+      'path[d="M7.435261707988982,289.92398616599974 h55.91735537190083 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-55.91735537190083 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,73.57899638721061 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v137.44495707537567 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-137.44495707537567 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M23.81046831955923,235.36727985204413 h23.166942148760334 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,17.37520661157025 v19.806293090815103 v17.37520661157025h-17.37520661157025 h-23.166942148760334 h-17.37520661157025v-17.37520661157025 v-19.806293090815103 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,-17.37520661157025z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -69,11 +69,12 @@ export const useComputeYAxisMaxCharacters = ({
     ]
   );
 
+  // Always add a character space in case the algorithm does not compute the displayed value in axis.
   const maxLeftAxisCharacters = useMemo(
     () =>
       isEmpty(maxLeftValue)
         ? 2
-        : Math.max(...maxLeftValue.map((value) => value.length), 2),
+        : Math.max(...maxLeftValue.map((value) => value.length), 2) + 1,
     [maxLeftValue]
   );
 
@@ -81,7 +82,7 @@ export const useComputeYAxisMaxCharacters = ({
     () =>
       isEmpty(maxRightValue)
         ? 5
-        : Math.max(...maxRightValue.map((value) => value.length), 5),
+        : Math.max(...maxRightValue.map((value) => value.length), 5) + 1,
     [maxRightValue]
   );
 

package/src/Graph/common/timeSeries/index.test.ts

@@ -374,10 +374,10 @@ describe('timeSeries', () => {
   describe(formatMetricValue, () => {
     const cases: Array<TestCase> = [
       [218857269, '', 1000, '218.86m'],
-      [218857269, '', 1024, '208.72 M'],
+      [218857269, '', 1024, '208.72 Mi'],
       [0.12232323445, '', 1000, '0.12'],
-      [1024, 'B', 1000, '1 KB'],
-      [1024, 'B', 1024, '1 KB'],
+      [1024, 'B', 1000, '1 KiB'],
+      [1024, 'B', 1024, '1 KiB'],
       [null, 'B', 1024, null]
     ];
 
@@ -573,7 +573,7 @@ describe('Format value with unit', () => {
       return '324.23m';
     }
 
-    return `309.21 M${unit}`;
+    return `309.21 Mi${unit}`;
   };
 
   const humanReadableTestCases = units.map((unit) => {

package/src/Graph/common/timeSeries/index.ts

@@ -704,7 +704,7 @@ const formatMetricValue = ({
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/(iB|B)/g, unit);
+    .replace(/B/, unit);
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;

package/src/components/CopyCommand/CopyCommand.cypress.spec.tsx

@@ -131,6 +131,21 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
   });
 
   it('copies the command to the clipboard when the button is clicked', () => {
+    cy.wrap(
+      Cypress.automation('remote:debugger:protocol', {
+        command: 'Browser.grantPermissions',
+        params: {
+          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
+          origin: window.location.origin
+        }
+      })
+    );
+    cy.window()
+      .its('navigator.clipboard')
+      .then((clipboard) => {
+        cy.spy(clipboard, 'writeText').as('writeText');
+      });
+
     initialize({
       text: `# a simple command
 echo "hello" | grep "hel"`,
@@ -138,12 +153,6 @@ echo "hello" | grep "hel"`,
       commandToCopy: 'echo "hello" | grep "hel"'
     });
 
-    cy.window()
-      .its('navigator.clipboard')
-      .then((clipboard) => {
-        cy.spy(clipboard, 'writeText').as('writeText');
-      });
-
     cy.findByTestId('Copy command').click();
 
     cy.get('@writeText').should(