@centreon/ui 24.11.10 → 24.11.12

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -63,7 +63,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         opacity: 1
       },
       position: 'relative',
-      height: '100%',
+      height: '100%'
     }
   })
 );

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,15 +13,9 @@ interface Props {
   columns: number;
   height: number;
   width: number;
-  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({
-  width,
-  height,
-  columns,
-  containerRef
-}: Props): ReactElement => {
+const Grid = ({ width, height, columns }: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(

package/src/Dashboard/Layout.tsx

@@ -4,10 +4,7 @@ import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 
-import {
-  ParentSize,
-  useMemoComponent
-} from '..';
+import { ParentSize, useMemoComponent } from '..';
 
 import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
@@ -33,10 +30,10 @@ const bottom = (layout: Array<Layout>): number => {
   layout.forEach((panel) => {
     bottomY = panel.y + panel.h;
     if (bottomY > max) max = bottomY;
-  })
+  });
 
   return max;
-}
+};
 
 const DashboardLayout = <T extends Layout>({
   children,
@@ -67,14 +64,10 @@ const DashboardLayout = <T extends Layout>({
   }, []);
 
   const containerHeight = useMemo((): number | undefined => {
-      const nbRow = bottom(getLayout(layout));
-      const containerPaddingY = 4
-      return (
-        nbRow * rowHeight +
-        (nbRow - 1) * 20 +
-        containerPaddingY * 2
-      );
-    }, [layout, rowHeight])
+    const nbRow = bottom(getLayout(layout));
+    const containerPaddingY = 4;
+    return nbRow * rowHeight + (nbRow - 1) * 20 + containerPaddingY * 2;
+  }, [layout, rowHeight]) ?? 0;
 
   useEffect(() => {
     window.addEventListener('resize', resize);
@@ -86,36 +79,40 @@ const DashboardLayout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <Box ref={dashboardContainerRef} sx={{ overflowY: 'auto', overflowX: 'hidden' }}>
-          <ParentSize>
-            {({ width, height }): JSX.Element => (
-              <Box className={classes.container}>
-                {displayGrid && (
-                  <Grid
-                    columns={columns}
-                    height={(containerHeight || 0) > height ? containerHeight : height}
-                    width={width}
-                    containerRef={dashboardContainerRef}
-                  />
-                )}
-                <ReactGridLayout
-                  cols={columns}
-                  containerPadding={[4, 0]}
-                  layout={getLayout(layout)}
-                  margin={[20, 20]}
-                  resizeHandles={['s', 'e', 'se']}
-                  rowHeight={rowHeight}
+      <Box
+        ref={dashboardContainerRef}
+        sx={{ overflowY: 'auto', overflowX: 'hidden' }}
+      >
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <Box className={classes.container}>
+              {displayGrid && (
+                <Grid
+                  columns={columns}
+                  height={
+                    containerHeight > height ? containerHeight : height
+                  }
                   width={width}
-                  onLayoutChange={changeLayout}
-                  onResizeStart={startResize}
-                  onResizeStop={stopResize}
-                >
-                  {children}
-                </ReactGridLayout>
-              </Box>
-            )}
-          </ParentSize>
-        </Box>
+                />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
+              >
+                {children}
+              </ReactGridLayout>
+            </Box>
+          )}
+        </ParentSize>
+      </Box>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { path, equals, isNil, map, not, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';
@@ -188,7 +188,9 @@ const Autocomplete = ({
           value={getValues() ?? null}
           onChange={changeValues}
           onTextChange={textChange}
-          style={{ width: autocomplete?.fullWidth ?? true ? 'auto' : '180px' }}
+          style={{
+            width: (autocomplete?.fullWidth ?? true) ? 'auto' : '180px'
+          }}
         />
         {inputErrors && (
           <Stack>

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { path, equals, includes, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

package/src/Form/Inputs/Text.tsx

@@ -2,11 +2,11 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import {
+  path,
   equals,
   gt,
   isEmpty,
   not,
-  path,
   split,
   type as variableType
 } from 'ramda';

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

@@ -30,7 +30,7 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle,
+  barStyle
 }: Pick<
   BarChartProps,
   'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'

package/src/Graph/BarChart/BarGroup.tsx

@@ -18,6 +18,12 @@ import { Line, TimeValue } from '../common/timeSeries/models';
 import BarStack from './BarStack';
 import { BarStyle } from './models';
 
+// Minimum value for logarithmic scale to avoid log(0)
+const minLogScaleValue = 0.001;
+
+const getNeutralValue = (scaleType?: 'linear' | 'logarithmic') =>
+  equals(scaleType, 'logarithmic') ? minLogScaleValue : 0;
+
 interface Props {
   barStyle: BarStyle;
   isTooltipHidden: boolean;
@@ -27,6 +33,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  scaleType?: 'linear' | 'logarithmic';
 }
 
 const BarGroup = ({
@@ -37,7 +44,8 @@ const BarGroup = ({
   xScale,
   yScalesPerUnit,
   isTooltipHidden,
-  barStyle
+  barStyle,
+  scaleType
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -142,6 +150,8 @@ const BarGroup = ({
     [isHorizontal, placeholderScale, xScale, metricScale]
   );
 
+  const neutralValue = useMemo(() => getNeutralValue(scaleType), [scaleType]);
+
   return (
     <BarComponent<TimeValue>
       color={colorScale}
@@ -185,6 +195,7 @@ const BarGroup = ({
                   lines={linesBar}
                   timeSeries={timeSeriesBar}
                   yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+                  neutralValue={neutralValue}
                 />
               ) : (
                 <BarStack
@@ -198,6 +209,7 @@ const BarGroup = ({
                   lines={[linesBar]}
                   timeSeries={timeSeriesBar}
                   yScale={yScalesPerUnit[linesBar.unit]}
+                  neutralValue={neutralValue}
                 />
               );
             })}
@@ -215,7 +227,8 @@ const propsToMemoize = [
   'lines',
   'secondUnit',
   'isCenteredZero',
-  'barStyle'
+  'barStyle',
+  'scaleType'
 ];
 
 export default memo(BarGroup, (prevProps, nextProps) => {

package/src/Graph/BarChart/BarStack.tsx

@@ -1,9 +1,10 @@
 import { memo } from 'react';
 
-import { scaleBand } from '@visx/scale';
+import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
 import { dec, equals, gt, pick } from 'ramda';
 
+import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
 import { BarStyle } from './models';
 import { UseBarStackProps, useBarStack } from './useBarStack';
 
@@ -19,6 +20,7 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barStyle: BarStyle;
   barWidth: number;
   isTooltipHidden: boolean;
+  neutralValue: number;
 }
 
 const getPadding = ({ padding, size, isNegativeValue }): number => {
@@ -29,6 +31,47 @@ const getPadding = ({ padding, size, isNegativeValue }): number => {
   return padding + size;
 };
 
+interface GetFirstBarHeightProps {
+  bar: Omit<BarGroupBar<StackKey>, 'key' | 'value'> & {
+    bar: SeriesPoint<unknown>;
+    key: StackKey;
+  };
+  isHorizontal: boolean;
+  barWidth: number;
+  y: number;
+  isFirstBar: boolean;
+  yScale: ScaleType;
+  neutralValue: number;
+}
+
+const getFirstBarHeight = ({
+  bar,
+  isHorizontal,
+  barWidth,
+  y,
+  isFirstBar,
+  yScale,
+  neutralValue
+}: GetFirstBarHeightProps): number => {
+  if (!isFirstBar || !isHorizontal) {
+    return isHorizontal ? Math.abs(bar.height) : barWidth;
+  }
+
+  if (equals(bar.height, 0)) {
+    return 0;
+  }
+
+  if (isHorizontal && bar.height < 0) {
+    return bar.height;
+  }
+
+  if (isHorizontal) {
+    return Math.abs(bar.width) - (y - yScale(neutralValue));
+  }
+
+  return barWidth;
+};
+
 const BarStack = ({
   timeSeries,
   isHorizontal,
@@ -38,7 +81,8 @@ const BarStack = ({
   barPadding,
   barIndex,
   isTooltipHidden,
-  barStyle = { opacity: 1, radius: 0.2 }
+  barStyle = { opacity: 1, radius: 0.2 },
+  neutralValue
 }: Props): JSX.Element => {
   const {
     BarStackComponent,
@@ -73,7 +117,21 @@ const BarStack = ({
                 {...barRoundedProps}
                 data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
                 fill={bar.color}
-                height={isHorizontal ? Math.abs(bar.height) : barWidth}
+                height={getFirstBarHeight({
+                  bar,
+                  barWidth,
+                  y: isHorizontal
+                    ? getPadding({
+                        isNegativeValue,
+                        padding: bar.y,
+                        size: bar.height
+                      })
+                    : barPadding,
+                  isFirstBar: shouldApplyRadiusOnBottom,
+                  isHorizontal,
+                  yScale,
+                  neutralValue
+                })}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
                 opacity={barStyle.opacity ?? 1}
                 radius={barWidth * barStyle.radius}
@@ -87,15 +145,7 @@ const BarStack = ({
                         size: bar.width
                       })
                 }
-                y={
-                  isHorizontal
-                    ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
-                    : barPadding
-                }
+                y={isHorizontal ? bar.y : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
@@ -122,7 +172,8 @@ const propsToMemoize = [
   'barPadding',
   'barIndex',
   'isTooltipHidden',
-  'barStyle'
+  'barStyle',
+  'neutralValue'
 ];
 
 export default memo(BarStack, (prevProps, nextProps) => {

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -39,6 +39,7 @@ interface Props
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
   width: number;
+  skipIntersectionObserver?: boolean;
 }
 
 const ResponsiveBarChart = ({
@@ -226,6 +227,7 @@ const ResponsiveBarChart = ({
                 timeSeries={timeSeries}
                 xScale={xScale}
                 yScalesPerUnit={yScalesPerUnit}
+                scaleType={axis?.scale}
               />
               {thresholds?.enabled && (
                 <Thresholds

package/src/Graph/Chart/Chart.tsx

@@ -59,17 +59,20 @@ interface Props extends LineChartProps {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
-const filterLines = (lines: Array<Line>, displayThreshold: boolean): Array<Line> => {
+const filterLines = (
+  lines: Array<Line>,
+  displayThreshold: boolean
+): Array<Line> => {
   if (!displayThreshold) {
     return lines;
   }
   const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 
   if (isEmpty(lineOriginMetric)) {
-      return lines;
+    return lines;
   }
 
   const findLinesUpperLower = lines.map((line) =>

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -79,7 +79,7 @@ interface Props {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
 const InteractionWithGraph = ({

package/src/Graph/Chart/index.tsx

@@ -37,7 +37,7 @@ interface Props extends Partial<LineChartProps> {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
 const WrapperChart = ({

package/src/Graph/common/utils.ts

@@ -8,11 +8,11 @@ import {
   gte,
   head,
   isNil,
+  last,
   length,
   lt,
   lte,
-  pluck,
-  last
+  pluck
 } from 'ramda';
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';

package/src/Icon/BusinessActivityIcon.tsx

@@ -0,0 +1,12 @@
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const BusinessActivityIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    Icon={AccountTreeIcon}
+    dataTestId="BusinessActivityIcon"
+    {...props}
+  />
+);

package/src/Icon/ContainerIcon.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M301 745.9L28 662.4c-7.4-2.3-12.5-9.2-12.5-16.9V270.4c0-5.7 2.7-10.9 7.3-14.3 4.6-3.3 10.4-4.2 15.8-2.5l273.1 88.5c7.3 2.4 12.2 9.1 12.2 16.8V729c0 5.6-2.7 10.9-7.2 14.2-3.1 2.3-6.8 3.5-10.5 3.5-1.8-.1-3.5-.3-5.2-.8zm5.2-16.9l5.2-16.9-5.2 16.9zM50.8 632.4l237.8 72.7V371.7l-237.8-77v337.7z" />
+    <path d="M295.7 743.2c-4.5-3.3-7.2-8.6-7.2-14.2V358.8c0-7.6 4.9-14.4 12.2-16.8l273.1-88.5c5.4-1.8 11.3-.8 15.8 2.5 4.6 3.4 7.3 8.7 7.3 14.3v375.1c0 7.8-5 14.6-12.5 16.9l-273.1 83.4-5.2-16.9 5.2 16.9c-1.7.5-3.4.8-5.2.8-3.6.1-7.3-1-10.4-3.3zm28.2-371.5V705l237.8-72.7V294.7l-237.8 77zM16.3 275.9c-3-9.3 2.1-19.3 11.4-22.3L300.8 165c9.2-3 19.2 2.1 22.2 11.3 3 9.3-2.1 19.3-11.3 22.2L38.6 287.2c-1.8.6-3.7.9-5.5.9-7.4-.1-14.3-4.8-16.8-12.2z" />
+    <path d="M573.9 287.2l-273-88.5c-9.3-3-14.4-13-11.4-22.2 3-9.3 13-14.4 22.2-11.3l273.1 88.5c9.3 3 14.4 13 11.4 22.3-2.4 7.4-9.4 12.2-16.8 12.2-1.9-.1-3.7-.5-5.5-1zm-131.3 42.5l-273.1-88.5c-9.3-3-14.4-13-11.4-22.2 3-9.3 12.9-14.4 22.3-11.4l273 88.5c9.3 3 14.4 13 11.4 22.3-2.4 7.4-9.3 12.2-16.8 12.2-1.7 0-3.5-.3-5.4-.9z" />
+  </g>
+);
+
+export const ContainerIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    {...props}
+    dataTestId="ContainerIcon"
+    Icon={icon}
+    viewBox="6 156 600 600"
+  />
+);

package/src/Icon/DowntimeIcon.tsx

@@ -10,5 +10,12 @@ const icon = (
 );
 
 export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
-  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+  <BaseIcon
+    {...props}
+    dataTestId="DowntimeIcon"
+    Icon={icon}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  />
 );

package/src/Icon/HostGroupIcon.tsx

@@ -0,0 +1,8 @@
+import BusinessIcon from '@mui/icons-material/Business';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const HostGroupIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={BusinessIcon} dataTestId="HostGroupIcon" {...props} />
+);

package/src/Icon/MetaServiceIcon.tsx

@@ -0,0 +1,12 @@
+import SettingsInputSvideoIcon from '@mui/icons-material/SettingsInputSvideo';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const MetaServiceIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    Icon={SettingsInputSvideoIcon}
+    dataTestId="MetaServiceIcon"
+    {...props}
+  />
+);

package/src/Icon/ServiceGroupIcon.tsx

@@ -0,0 +1,8 @@
+import LinearScaleIcon from '@mui/icons-material/LinearScale';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const ServiceGroupIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={LinearScaleIcon} dataTestId="ServiceGroupIcon" {...props} />
+);

package/src/Icon/index.ts

@@ -1,4 +1,9 @@
+export { DowntimeIcon } from './DowntimeIcon';
+export { AcknowledgementIcon } from './AcknowledgementIcon';
 export { HostIcon } from './HostIcon';
 export { ServiceIcon } from './ServiceIcon';
-export { DowntimeIcon } from './DowntimeIcon';
-export { AcknowledgementIcon } from './AcnowledgementIcon';
+export { BusinessActivityIcon } from './BusinessActivityIcon';
+export { HostGroupIcon } from './HostGroupIcon';
+export { ServiceGroupIcon } from './ServiceGroupIcon';
+export { MetaServiceIcon } from './MetaServiceIcon';
+export { ContainerIcon } from './ContainerIcon';

package/src/Listing/index.tsx

@@ -526,33 +526,32 @@ const Listing = <
         className={classes.container}
         ref={containerRef as RefObject<HTMLDivElement>}
       >
-        {
-          isActionBarVisible && 
-            <div
-              className={classes.actionBar}
-              ref={actionBarRef as RefObject<HTMLDivElement>}
-            >
-              <ListingActionBar
-                actions={actions}
-                actionsBarMemoProps={actionsBarMemoProps}
-                columnConfiguration={columnConfiguration}
-                columns={columns}
-                currentPage={currentPage}
-                customPaginationClassName={customPaginationClassName}
-                limit={limit}
-                listingVariant={listingVariant}
-                moveTablePagination={moveTablePagination}
-                paginated={paginated}
-                totalRows={totalRows}
-                viewerModeConfiguration={viewerModeConfiguration}
-                widthToMoveTablePagination={widthToMoveTablePagination}
-                onLimitChange={changeLimit}
-                onPaginate={onPaginate}
-                onResetColumns={onResetColumns}
-                onSelectColumns={onSelectColumns}
-              />
-            </div>
-        }
+        {isActionBarVisible && (
+          <div
+            className={classes.actionBar}
+            ref={actionBarRef as RefObject<HTMLDivElement>}
+          >
+            <ListingActionBar
+              actions={actions}
+              actionsBarMemoProps={actionsBarMemoProps}
+              columnConfiguration={columnConfiguration}
+              columns={columns}
+              currentPage={currentPage}
+              customPaginationClassName={customPaginationClassName}
+              limit={limit}
+              listingVariant={listingVariant}
+              moveTablePagination={moveTablePagination}
+              paginated={paginated}
+              totalRows={totalRows}
+              viewerModeConfiguration={viewerModeConfiguration}
+              widthToMoveTablePagination={widthToMoveTablePagination}
+              onLimitChange={changeLimit}
+              onPaginate={onPaginate}
+              onResetColumns={onResetColumns}
+              onSelectColumns={onSelectColumns}
+            />
+          </div>
+        )}
 
         <ParentSize
           parentSizeStyles={{

package/src/Typography/EllipsisTypography.tsx

@@ -1,11 +1,15 @@
-import { forwardRef, type ForwardedRef } from 'react';
+import { type ForwardedRef, forwardRef } from 'react';
 
 import { Box, Typography, type TypographyProps } from '@mui/material';
 
 const EllipsisTypography = forwardRef(
   (
-    { containerClassname, ...props }: TypographyProps & { containerClassname?: string },
-    ref?: ForwardedRef<HTMLSpanElement>) => {
+    {
+      containerClassname,
+      ...props
+    }: TypographyProps & { containerClassname?: string },
+    ref?: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <Box className={containerClassname} sx={{ width: '100%' }}>
         <Typography

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -24,7 +24,7 @@ export const useStyles = makeStyles()((theme) => ({
       backgroundColor: theme.palette.layout.body.background
     },
     '&[data-has-actions="true"]': {
-      gridTemplateRows: 'min-content auto',
+      gridTemplateRows: 'min-content auto'
     },
     display: 'grid',
     gridTemplateRows: 'auto',