@centreon/ui 24.4.57 → 24.4.59

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

@@ -27,9 +27,9 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq(false, 'display'), lines);
+  const displayedLines = reject(propEq('display', false), 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(line.metric_id, 'metric_id'), lines)?.display ?? true
+      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

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

@@ -69,24 +69,21 @@ 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(false, 'display'), sortedLines);
+  const displayedLines = reject(propEq('display', false), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

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

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

package/src/Graph/LineChart/index.tsx

@@ -78,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
+      style={{ height: '100%', width: '100%' }}
     >
       <ParentSize>
         {({

package/src/Graph/SingleBar/Thresholds.tsx

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

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

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

package/src/Graph/Text/Text.tsx

@@ -11,7 +11,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { useTextStyles } from './Text.styles';
 
-export interface Props {
+interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

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,
@@ -476,7 +476,15 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
-const getBase1024 = ({ unit, base }): boolean => {
+const formatMetricValue = ({
+  value,
+  unit,
+  base = 1000
+}: FormatMetricValueProps): string | null => {
+  if (isNil(value)) {
+    return null;
+  }
+
   const base2Units = [
     'B',
     'bytes',
@@ -489,19 +497,7 @@ const getBase1024 = ({ unit, base }): boolean => {
     'b'
   ];
 
-  return base2Units.includes(unit) || Number(base) === 1024;
-};
-
-const formatMetricValue = ({
-  value,
-  unit,
-  base = 1000
-}: FormatMetricValueProps): string | null => {
-  if (isNil(value)) {
-    return null;
-  }
-
-  const base1024 = getBase1024({ base, unit });
+  const base1024 = base2Units.includes(unit) || Number(base) === 1024;
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
@@ -529,8 +525,6 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
-  const base1024 = getBase1024({ base, unit });
-
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -543,9 +537,7 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return base1024 || !unit || equals(unit, 'ms')
-    ? formattedMetricValue
-    : `${formattedMetricValue} ${unit}`;
+  return formattedMetricValue;
 };
 
 const getStackedYScale = ({

package/src/Graph/common/utils.ts

@@ -11,7 +11,6 @@ import {
   lte,
   pluck
 } from 'ramda';
-import numeral from 'numeral';
 
 import { Theme } from '@mui/material';
 
@@ -74,21 +73,3 @@ export const getColorFromDataAndTresholds = ({
     [T, always(theme.palette.error.main)]
   ])(data);
 };
-
-interface ValueByUnitProps {
-  total: number;
-  unit: 'percentage' | 'number';
-  value: number;
-}
-
-export const getValueByUnit = ({
-  unit,
-  value,
-  total
-}: ValueByUnitProps): string => {
-  if (equals(unit, 'number')) {
-    return numeral(value).format('0a').toUpperCase();
-  }
-
-  return `${((value * 100) / total).toFixed(1)}%`;
-};

package/src/Graph/index.ts

@@ -2,7 +2,4 @@ export { default as LineChart } from './LineChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
-
 export { HeatMap } from './HeatMap';
-export { BarStack } from './BarStack';
-export { PieChart } from './PieChart';

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

@@ -292,16 +292,13 @@ 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(item, 'id'), items),
+        (item) => find(propEq('id', item), 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/Multi/index.tsx

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
+import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,11 +85,9 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
-  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
-
   const autocompleteOptions = disableSortedOptions
     ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
+    : [...values, ...reject(isOptionSelected, options)];
 
   return (
     <Autocomplete

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { equals, isEmpty, isNil, pick } from 'ramda';
+import { equals, isNil, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
@@ -141,139 +141,126 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-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 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 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)
-      );
-    };
-
-    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',
-            minWidth: 0,
-            padding: theme.spacing(
-              0.75,
-              isEmpty(placeholder) ? 0 : 5,
-              0.75,
-              0.75
-            )
-          }
-        }}
-        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 || ''),
-          ...autocompleteProps?.inputProps
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
+    return equals(
+      pick(identifyingProps, option),
+      pick(identifyingProps, value)
     );
+  };
 
-    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() || ''
+  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)
         }
-        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>)}
+      }}
+      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}
             >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
-        size="small"
-        {...autocompleteProps}
-      />
-    );
-  }
-);
+              {getOptionItemLabel(option)}
+            </Option>
+          </li>
+        );
+      }}
+      size="small"
+      {...autocompleteProps}
+    />
+  );
+};
 
 export default AutocompleteField;