@centreon/ui 25.10.9 → 25.10.10

package/package.json

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

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -137,6 +137,8 @@ const ConnectedAutocomplete = ({
         getEndpoint={getEndpoint}
         decoder={connectedAutocomplete?.decoder}
         getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
+        getOptionLabel={connectedAutocomplete?.getOptionLabel}
+        optionProperty={connectedAutocomplete?.optionProperty}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
         label={t(label)}

package/src/Form/Inputs/Grid.tsx

@@ -21,9 +21,8 @@ const Grid = ({
     <div
       className={`${className} grid gap-3`}
       style={{
-        gridTemplateColumns: className
-          ? grid?.gridTemplateColumns || undefined
-          : grid?.gridTemplateColumns ||
+        gridTemplateColumns:
+          className ? grid?.gridTemplateColumns || undefined : grid?.gridTemplateColumns ||
             `repeat(${grid?.columns.length || 1}, 1fr)`,
         alignItems: grid?.alignItems || 'flex-start'
       }}

package/src/Form/Inputs/models.ts

@@ -62,6 +62,8 @@ export interface InputProps {
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
+    getOptionLabel?: (option) => string;
+    optionProperty?: string;
     disableSelectAll?: boolean;
     limitTags?: number;
     decoder?;

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,9 @@
 export const useNavigateToSection = () => {
-  return (sectionName: string) => {
-    const section = document.querySelector(
-      `[data-section-group-form-id="${sectionName}"]`
-    );
+    return (sectionName: string) => {
+        const section = document.querySelector(
+            `[data-section-group-form-id="${sectionName}"]`
+        );
 
-    section?.scrollIntoView({ behavior: 'smooth' });
-  };
+        section?.scrollIntoView({ behavior: 'smooth' });
+    };
 };

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

@@ -8,7 +8,6 @@ import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -85,6 +84,61 @@ const checkWidth = (orientation): void => {
 };
 
 describe('Bar chart', () => {
+  it('displays a tooltip when a single bar is hovered', () => {
+    initialize({
+      orientation: 'horizontal'
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('7.47 KiB').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip when a stacked bar is hovered', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'ascending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+    cy.contains('0.02 ms').should('be.visible');
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+  });
+
   ['horizontal', 'vertical'].forEach((orientation) => {
     it(`displays the bar chart ${orientation}ly`, () => {
       initialize({ orientation });
@@ -184,27 +238,6 @@ describe('Bar chart', () => {
     });
   });
 
-  it('displays a tooltip when a single bar is hovered', () => {
-    initialize({
-      orientation: 'horizontal'
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('7.47 KB').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('does not display a tooltip when a bar is hovered and a props is set', () => {
     initialize({
       data: dataPingServiceStacked,
@@ -229,68 +262,6 @@ describe('Bar chart', () => {
     cy.makeSnapshot();
   });
 
-  it('displays a tooltip when a stacked bar is hovered', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'all',
-        sortOrder: 'ascending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-    cy.contains('0.02 ms').should('be.visible');
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-  });
-
-  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'single',
-        sortOrder: 'descending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('displays the bottom axis correctly when data starts from several days ago', () => {
     initialize({
       data: dataLastWeek,
@@ -313,12 +284,4 @@ describe('Bar chart', () => {
     cy.contains('1 s').should('be.visible');
     cy.contains('1%').should('be.visible');
   });
-
-  it('displays the stacked bar chart correctly when a point is missing compare to the time serie', () => {
-    initialize({ data: dataMissingPoint });
-
-    cy.findByTestId('stacked-bar-2-0-139').should('be.visible');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -6,8 +6,6 @@ import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 
-import { ClickAwayListener } from '@mui/material';
-import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -261,43 +259,4 @@ export const mixedStackedMinMax: Story = {
     max: 20
   },
   render: Template
-};
-
-const LegendSecondaryClick = (args) => {
-  const [position, setPosition] = useState<Array<[number, number]> | null>(
-    null
-  );
-
-  return (
-    <>
-      <Template
-        {...args}
-        legend={{
-          secondaryClick: ({ position }) => setPosition(position)
-        }}
-      />
-      {position && (
-        <ClickAwayListener onClickAway={() => setPosition(null)}>
-          <div
-            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
-            style={{ left: position?.[0], top: position?.[1] }}
-            open={Boolean(position)}
-            onClose={() => setPosition(null)}
-          >
-            menu
-          </div>
-        </ClickAwayListener>
-      )}
-    </>
-  );
-};
-
-export const withLegendSecondaryClick: Story = {
-  args: defaultArgs,
-  render: (args) => (
-    <LegendSecondaryClick
-      {...args}
-      data={dataPingService as unknown as LineChartData}
-    />
-  )
-};
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -116,4 +116,4 @@ const BarChart = ({
   );
 };
 
-export default BarChart;
+export default BarChart;

package/src/Graph/BarChart/BarStack.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, ReactElement } from 'react';
 
 import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
@@ -22,6 +22,7 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barWidth: number;
   isTooltipHidden: boolean;
   neutralValue: number;
+  isStacked?: boolean;
 }
 
 const getPadding = ({ padding, size, isNegativeValue }): number => {
@@ -83,8 +84,9 @@ const BarStack = ({
   barIndex,
   isTooltipHidden,
   barStyle = { opacity: 1, radius: 0.2 },
-  neutralValue
-}: Props): JSX.Element => {
+  neutralValue,
+  isStacked
+}: Props): ReactElement => {
   const {
     BarStackComponent,
     commonBarStackProps,
@@ -118,6 +120,15 @@ const BarStack = ({
               metricId: Number(bar.key)
             }) as BarStyle;
 
+            const barY =
+              isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
+                ? getPadding({
+                  isNegativeValue,
+                  padding: bar.y,
+                  size: bar.height
+                })
+                : bar.y;
+
             return (
               <BarRounded
                 {...barRoundedProps}
@@ -128,10 +139,10 @@ const BarStack = ({
                   barWidth,
                   y: isHorizontal
                     ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
+                      isNegativeValue,
+                      padding: bar.y,
+                      size: bar.height
+                    })
                     : barPadding,
                   isFirstBar: shouldApplyRadiusOnBottom,
                   isHorizontal,
@@ -146,19 +157,19 @@ const BarStack = ({
                   isHorizontal
                     ? barPadding
                     : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
+                      isNegativeValue,
+                      padding: bar.x,
+                      size: bar.width
+                    })
                 }
-                y={isHorizontal ? bar.y : barPadding}
+                y={isHorizontal ? barY : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
                     : hoverBar({
-                        barIndex,
-                        highlightedMetric: Number(bar.key)
-                      })
+                      barIndex,
+                      highlightedMetric: Number(bar.key)
+                    })
                 }
                 onMouseLeave={isTooltipHidden ? undefined : exitBar}
               />

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -61,18 +61,19 @@ const MemoizedGroup = ({
         const linesBar = isStackedBar
           ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
           : (notStackedLines.find(({ metric_id }) =>
-              equals(metric_id, Number(bar.key))
-            ) as Line);
+            equals(metric_id, Number(bar.key))
+          ) as Line);
         const timeSeriesBar = isStackedBar
           ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
               .timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
-              timeTick: timeSerie.timeTick,
-              [bar.key]: timeSerie[Number(bar.key)]
-            }));
+            timeTick: timeSerie.timeTick,
+            [bar.key]: timeSerie[Number(bar.key)]
+          }));
 
         return isStackedBar ? (
           <BarStack
+            isStacked
             key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             barIndex={barGroup.index}
             barPadding={isHorizontal ? bar.x : bar.y}
@@ -82,7 +83,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')] ?? undefined}
             neutralValue={neutralValue}
           />
         ) : (
@@ -96,7 +97,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={[linesBar as Line]}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            yScale={yScalesPerUnit[(linesBar as Line).unit ?? undefined]}
             neutralValue={neutralValue}
           />
         );

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -196,8 +196,7 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent,
-        secondaryClick: legend?.secondaryClick
+        renderExtraComponent: legend?.renderExtraComponent
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -27,6 +27,7 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
 import { LineStyle } from '../../../models';
 import Point from '../Point';
+import { ReactElement } from 'react';
 
 interface Props {
   areaTransparency?: number;
@@ -56,7 +57,7 @@ const StackLines = ({
   lineStyle,
   hasSecondUnit,
   maxLeftAxisCharacters
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
       ? lineStyle?.[0].curve
@@ -134,9 +135,9 @@ const StackLines = ({
                   equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
-                        areaColor: areaColor || lineColor,
-                        transparency: formattedTransparency
-                      })
+                      areaColor: areaColor || lineColor,
+                      transparency: formattedTransparency
+                    })
                 }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}