@centreon/ui 24.4.38 → 24.4.39

package/src/Form/Inputs/models.ts

@@ -18,7 +18,8 @@ export enum InputType {
   Grid,
   Custom,
   Checkbox,
-  CheckboxGroup
+  CheckboxGroup,
+  List
 }
 
 interface FieldsTableGetRequiredProps {
@@ -76,6 +77,13 @@ export interface InputProps {
   hideInput?: (values: FormikValues) => boolean;
   inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
       label: string | JSX.Element;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { isEmpty, isNil } from 'ramda';
 
-import { Circle } from './models';
+import { Circle as CircleModel } from './models';
 import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({
@@ -11,7 +11,7 @@ const Circle = ({
   timeSeries,
   getX,
   getCountDisplayedCircles
-}: Circle): JSX.Element | null => {
+}: CircleModel): JSX.Element | null => {
   const coordinates = useCoordinateCircle({
     getCountDisplayedCircles,
     getX,

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,10 +130,11 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map((element) =>
-        element?.map(({ Component, props, key }) => (
-          <Component {...props} id={key} key={key} />
-        ))
+      {filteredThresholdLines.map(
+        (element) =>
+          element?.map(({ Component, props, key }) => (
+            <Component {...props} id={key} key={key} />
+          ))
       )}
     </g>
   );

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -2,7 +2,7 @@ import { equals, isNil } from 'ramda';
 
 import { getUnits, getYScale } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
-import { Thresholds } from '../../common/models';
+import { Thresholds as ThresholdsModel } from '../../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -13,7 +13,7 @@ interface Props {
   rightScale: (value: number) => number;
   showTooltip: (props) => void;
   thresholdUnit?: string;
-  thresholds: Thresholds;
+  thresholds: ThresholdsModel;
   width: number;
 }
 

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -28,7 +28,7 @@ const useFilterLines = ({
   linesGraph,
   setLinesGraph
 }: UseFilterLines): Result => {
-  const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
+  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -2,7 +2,7 @@ import { Shape } from '@visx/visx';
 
 import { grey } from '@mui/material/colors';
 
-import { GuidingLines } from './models';
+import { GuidingLines as GuidingLinesModel } from './models';
 import useTickGraph from './useTickGraph';
 
 const GuidingLines = ({
@@ -10,7 +10,7 @@ const GuidingLines = ({
   xScale,
   graphHeight,
   graphWidth
-}: GuidingLines): JSX.Element | null => {
+}: GuidingLinesModel): JSX.Element | null => {
   const { positionX, positionY } = useTickGraph({
     timeSeries,
     xScale

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,9 +43,8 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
-    event.contact?.name
-  })`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
+    ?.name})`;
 
   return (
     <g>

package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -26,7 +26,7 @@ const EventAnnotations = ({
   color,
   annotationHoveredId
 }: Props): JSX.Element => {
-  const events = filter(propEq('type', type), data);
+  const events = filter(propEq(type, 'type'), data);
 
   return (
     <>

package/src/Graph/LineChart/Legend/index.tsx

@@ -7,7 +7,6 @@ import { Box, alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { maxLinesDisplayedLegend } from '../common';
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
@@ -24,7 +23,7 @@ import LegendContent from './LegendContent';
 interface Props {
   base: number;
   displayAnchor?: boolean;
-  limitLegendRows?: boolean;
+  limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
@@ -39,14 +38,14 @@ const MainLegend = ({
   timeSeries,
   base,
   toggable = true,
-  limitLegendRows = true,
+  limitLegend = false,
   renderExtraComponent,
   displayAnchor = true,
   setLinesGraph,
   xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows });
+  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -61,8 +60,8 @@ const MainLegend = ({
 
   const sortedData = sortBy(prop('metric_id'), lines);
 
-  const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, sortedData)
+  const displayedLines = limitLegend
+    ? slice(0, limitLegend, sortedData)
     : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
@@ -174,7 +173,7 @@ const MainLegend = ({
 const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
-    limitLegendRows,
+    limitLegend,
     timeSeries,
     lines,
     base,
@@ -191,7 +190,7 @@ const Legend = (props: Props): JSX.Element => {
       lines,
       base,
       toggable,
-      limitLegendRows,
+      limitLegend,
       displayAnchor,
       shouldDisplayLegendInCompactMode
     ]

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -27,9 +27,9 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq('display', false), lines);
+  const displayedLines = reject(propEq(false, 'display'), lines);
   const getLineByMetric = (metric_id: number): Line =>
-    find(propEq('metric_id', metric_id), lines) as Line;
+    find(propEq(metric_id, 'metric_id'), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
     const data = lines.map((line) => ({
@@ -92,7 +92,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
+      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

package/src/Graph/LineChart/LineChart.tsx

@@ -43,6 +43,7 @@ interface Props extends LineChartProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
+  limitLegend?: false | number;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
@@ -73,7 +74,8 @@ const LineChart = ({
   curve,
   marginBottom,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -301,6 +303,7 @@ const LineChart = ({
           <Legend
             base={baseAxis}
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+            limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}

package/src/Graph/LineChart/helpers/doc.ts

@@ -69,21 +69,24 @@ export const getDescription = ({ sections }: Description): string => {
       })}<br></details>`;
     }
 
-    const formattedProps = props.reduce((accumulator, currentValue, index) => {
-      const key = Object.keys(currentValue)[0];
-      const { description, type } = currentValue[key];
-      const body = `${accumulator} ${getBodyDescription({
-        description,
-        key,
-        type
-      })}`;
+    const formattedProps = props.reduce(
+      (accumulator, currentValue, index) => {
+        const key = Object.keys(currentValue)[0];
+        const { description, type } = currentValue[key];
+        const body = `${accumulator} ${getBodyDescription({
+          description,
+          key,
+          type
+        })}`;
 
-      if (!equals(index, props.length - 1)) {
-        return body;
-      }
+        if (!equals(index, props.length - 1)) {
+          return body;
+        }
 
-      return `${body}</details>`;
-    }, getInitialValue({ section: name, type: item?.type }));
+        return `${body}</details>`;
+      },
+      getInitialValue({ section: name, type: item?.type })
+    );
 
     return formattedProps as string;
   });

package/src/Graph/LineChart/helpers/index.ts

@@ -14,7 +14,7 @@ import { LineChartData } from '../../common/models';
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq('display', false), sortedLines);
+  const displayedLines = reject(propEq(false, 'display'), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

package/src/Graph/LineChart/index.stories.tsx

@@ -39,8 +39,7 @@ import { Interval, ThresholdType, TooltipData } from './models';
 import WrapperLineChart from './index';
 
 const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart,
-  tags: ['autodocs']
+  component: WrapperLineChart
 };
 export default meta;
 
@@ -353,6 +352,9 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 

package/src/Graph/LineChart/index.tsx

@@ -28,6 +28,7 @@ interface Props extends Partial<LineChartProps> {
   data?: LineChartData;
   end: string;
   legend: LegendModel;
+  limitLegend?: false | number;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
@@ -55,7 +56,8 @@ const WrapperLineChart = ({
   curve = Curve.curveLinear,
   marginBottom = 0,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -95,6 +97,7 @@ const WrapperLineChart = ({
               header={header}
               height={height || responsiveHeight}
               legend={legend}
+              limitLegend={limitLegend}
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,4 +1,4 @@
-import { Thresholds } from '../common/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -8,7 +8,7 @@ interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
   size: 'small' | 'medium';
-  thresholds: Thresholds;
+  thresholds: ThresholdsModel;
   xScale: (value: number) => number;
 }
 

package/src/Graph/Text/Text.stories.tsx

@@ -24,7 +24,21 @@ export const success: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -36,7 +50,21 @@ export const warning: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.2, 0.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.4
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -48,7 +76,21 @@ export const critical: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.13, 0.35]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.3
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -61,7 +103,21 @@ export const rawValue: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };

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

@@ -179,7 +179,7 @@ const getMetricValuesForUnit = ({
     ) as Array<number>;
 
   return pipe(
-    filter(propEq('unit', unit)) as (line) => Array<Line>,
+    filter(propEq(unit, 'unit')) as (line) => Array<Line>,
     map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
@@ -203,7 +203,7 @@ const getLineForMetric = ({
   lines,
   metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq('metric_id', metric_id), lines);
+  find(propEq(metric_id, 'metric_id'), lines);
 
 interface LinesTimeSeries {
   lines: Array<Line>;
@@ -275,7 +275,7 @@ interface HasStackedLines {
 }
 
 const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
-  pipe(getSortedStackedLines, any(propEq('unit', unit)))(lines);
+  pipe(getSortedStackedLines, any(propEq(unit, 'unit')))(lines);
 
 const getTimeSeriesForLines = ({
   lines,

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -292,13 +292,16 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(() => {
-      setSearchParameter(
-        !isEmpty(searchConditions)
-          ? { conditions: searchConditions }
-          : undefined
-      );
-    }, useDeepCompare([searchConditions]));
+    useEffect(
+      () => {
+        setSearchParameter(
+          !isEmpty(searchConditions)
+            ? { conditions: searchConditions }
+            : undefined
+        );
+      },
+      useDeepCompare([searchConditions])
+    );
 
     useEffect(() => {
       if (!autocompleteChangedValue && !props?.value) {

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq('id', item), items),
+        (item) => find(propEq(item, 'id'), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq('id', id), items);
+      const itemIndex = findIndex(propEq(id, 'id'), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq('id', id), values);
+        const index = findIndex(propEq(id, 'id'), values);
 
         const newSelectedValues = remove(index, 1, values);