@centreon/ui 24.4.44 → 24.4.45-develop.0

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/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/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/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);
 

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

@@ -141,126 +141,132 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = ({
-  options,
-  label,
-  placeholder,
-  loading = false,
-  onTextChange = (): void => undefined,
-  endAdornment = undefined,
-  inputValue,
-  displayOptionThumbnail = false,
-  required = false,
-  error,
-  displayPopupIcon = true,
-  autoFocus = false,
-  hideInput = false,
-  dataTestId,
-  autoSize = false,
-  autoSizeDefaultWidth = 0,
-  autoSizeCustomPadding,
-  getOptionItemLabel = (option) => option.name,
-  ...autocompleteProps
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ hideInput });
-  const { t } = useTranslation();
-  const theme = useTheme();
+const AutocompleteField = React.forwardRef(
+  (
+    {
+      options,
+      label,
+      placeholder,
+      loading = false,
+      onTextChange = (): void => undefined,
+      endAdornment = undefined,
+      inputValue,
+      displayOptionThumbnail = false,
+      required = false,
+      error,
+      displayPopupIcon = true,
+      autoFocus = false,
+      hideInput = false,
+      dataTestId,
+      autoSize = false,
+      autoSizeDefaultWidth = 0,
+      autoSizeCustomPadding,
+      getOptionItemLabel = (option) => option.name,
+      ...autocompleteProps
+    }: Props,
+    ref?: React.ForwardedRef<HTMLDivElement>
+  ): JSX.Element => {
+    const { classes, cx } = useStyles({ hideInput });
+    const { t } = useTranslation();
+    const theme = useTheme();
 
-  const areSelectEntriesEqual = (option, value): boolean => {
-    const identifyingProps = ['id', 'name'];
+    const areSelectEntriesEqual = (option, value): boolean => {
+      const identifyingProps = ['id', 'name'];
 
-    return equals(
-      pick(identifyingProps, option),
-      pick(identifyingProps, value)
+      return equals(
+        pick(identifyingProps, option),
+        pick(identifyingProps, value)
+      );
+    };
+
+    const renderInput = (params): JSX.Element => (
+      <TextField
+        {...params}
+        InputLabelProps={{
+          classes: {
+            marginDense: classes.inputLabel,
+            shrink: classes.inputLabelShrink
+          }
+        }}
+        InputProps={{
+          ...params.InputProps,
+          endAdornment: (
+            <>
+              {endAdornment && (
+                <InputAdornment position="end">{endAdornment}</InputAdornment>
+              )}
+              {params.InputProps.endAdornment}
+            </>
+          ),
+          style: {
+            background: 'transparent',
+            paddingRight: theme.spacing(5)
+          }
+        }}
+        autoFocus={autoFocus}
+        autoSize={autoSize}
+        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+        autoSizeDefaultWidth={autoSizeDefaultWidth}
+        classes={{
+          root: classes.textfield
+        }}
+        error={error}
+        externalValueForAutoSize={autocompleteProps?.value?.name}
+        inputProps={{
+          ...params.inputProps,
+          'aria-label': label,
+          'data-testid': dataTestId || label,
+          id: getNormalizedId(label || '')
+        }}
+        label={label}
+        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+        required={required}
+        value={inputValue || undefined}
+        onChange={onTextChange}
+      />
     );
-  };
 
-  const renderInput = (params): JSX.Element => (
-    <TextField
-      {...params}
-      InputLabelProps={{
-        classes: {
-          marginDense: classes.inputLabel,
-          shrink: classes.inputLabelShrink
-        }
-      }}
-      InputProps={{
-        ...params.InputProps,
-        endAdornment: (
-          <>
-            {endAdornment && (
-              <InputAdornment position="end">{endAdornment}</InputAdornment>
-            )}
-            {params.InputProps.endAdornment}
-          </>
-        ),
-        style: {
-          background: 'transparent',
-          paddingRight: theme.spacing(5)
+    return (
+      <Autocomplete
+        disableClearable
+        classes={{
+          groupLabel: classes.inputLabel,
+          inputRoot: cx([
+            classes.input,
+            label ? classes.inputWithLabel : classes.inputWithoutLabel
+          ]),
+          popper: classes.popper,
+          root: classes.textfield
+        }}
+        forcePopupIcon={displayPopupIcon}
+        getOptionLabel={(option): string =>
+          (option as SelectEntry)?.name?.toString() || ''
         }
-      }}
-      autoFocus={autoFocus}
-      autoSize={autoSize}
-      autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-      autoSizeDefaultWidth={autoSizeDefaultWidth}
-      classes={{
-        root: classes.textfield
-      }}
-      error={error}
-      externalValueForAutoSize={autocompleteProps?.value?.name}
-      inputProps={{
-        ...params.inputProps,
-        'aria-label': label,
-        'data-testid': dataTestId || label,
-        id: getNormalizedId(label || '')
-      }}
-      label={label}
-      placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-      required={required}
-      value={inputValue || undefined}
-      onChange={onTextChange}
-    />
-  );
-
-  return (
-    <Autocomplete
-      disableClearable
-      classes={{
-        groupLabel: classes.inputLabel,
-        inputRoot: cx([
-          classes.input,
-          label ? classes.inputWithLabel : classes.inputWithoutLabel
-        ]),
-        popper: classes.popper,
-        root: classes.textfield
-      }}
-      forcePopupIcon={displayPopupIcon}
-      getOptionLabel={(option): string =>
-        (option as SelectEntry)?.name?.toString() || ''
-      }
-      isOptionEqualToValue={areSelectEntriesEqual}
-      loading={loading}
-      loadingText={<LoadingIndicator />}
-      options={options}
-      renderInput={renderInput}
-      renderOption={(props, option): JSX.Element => {
-        return (
-          <li
-            className={classes.options}
-            {...(props as React.HTMLAttributes<HTMLLIElement>)}
-          >
-            <Option
-              thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+        isOptionEqualToValue={areSelectEntriesEqual}
+        loading={loading}
+        loadingText={<LoadingIndicator />}
+        options={options}
+        ref={ref}
+        renderInput={renderInput}
+        renderOption={(props, option): JSX.Element => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as React.HTMLAttributes<HTMLLIElement>)}
             >
-              {getOptionItemLabel(option)}
-            </Option>
-          </li>
-        );
-      }}
-      size="small"
-      {...autocompleteProps}
-    />
-  );
-};
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        }}
+        size="small"
+        {...autocompleteProps}
+      />
+    );
+  }
+);
 
 export default AutocompleteField;