@centreon/ui 24.4.48 → 24.4.49

package/src/Graph/common/testUtils.ts

@@ -0,0 +1,71 @@
+export const successThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};
+
+export const warningThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.4
+    }
+  ]
+};
+
+export const criticalThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.3
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.2
+    }
+  ]
+};
+
+export const rangedThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.55
+    },
+    {
+      label: 'Critical',
+      value: 0.65
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.13
+    },
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};

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

package/src/Graph/common/utils.ts

@@ -11,6 +11,7 @@ import {
   lte,
   pluck
 } from 'ramda';
+import numeral from 'numeral';
 
 import { Theme } from '@mui/material';
 
@@ -73,3 +74,21 @@ 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,4 +2,7 @@ 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/Graph/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelNoDataFound = 'No Data Available';

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;

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

@@ -73,14 +73,14 @@ const IconPopoverMultiAutocomplete = ({
   };
 
   const isSelected = (id: number | string): boolean => {
-    return pipe(find(propEq('id', id)), Boolean)(value);
+    return pipe(find(propEq(id, 'id')), Boolean)(value);
   };
 
   const unSelect = (option: SelectEntry): void => {
     const { id } = option;
 
     const updatedValue = isSelected(id)
-      ? reject(propEq('id', id), value)
+      ? reject(propEq(id, 'id'), value)
       : [...value, option];
 
     onChange(updatedValue);

package/src/InputField/Select/index.tsx

@@ -69,7 +69,7 @@ const SelectField = ({
   const { classes, cx } = useStyles();
 
   const getOption = (id): SelectEntry => {
-    return options.find(propEq('id', id)) as SelectEntry;
+    return options.find(propEq(id, 'id')) as SelectEntry;
   };
 
   const changeOption = (event): void => {

package/src/InputField/Text/index.tsx

@@ -154,9 +154,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
-              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId
+              'data-testid': dataTestId,
+              ...rest.inputProps
             }}
             label={label}
             ref={ref}

package/src/Listing/ActionBar/index.tsx

@@ -174,14 +174,15 @@ const MemoListingActionBar = ({
               </IconButton>
             )}
           <div className={classes.ModeViewer} />
-          {columnConfiguration?.selectedColumnIds && (
-            <ColumnMultiSelect
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              onResetColumns={onResetColumns}
-              onSelectColumns={onSelectColumns}
-            />
-          )}
+          {columnConfiguration?.selectedColumnIds &&
+            columnConfiguration?.sortable && (
+              <ColumnMultiSelect
+                columnConfiguration={columnConfiguration}
+                columns={columns}
+                onResetColumns={onResetColumns}
+                onSelectColumns={onSelectColumns}
+              />
+            )}
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}

package/src/Listing/Cell/DataCell.styles.ts

@@ -8,6 +8,9 @@ const useStyles = makeStyles()((theme) => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   },
+  clickable: {
+    cursor: 'default'
+  },
   componentColumn: {
     width: theme.spacing(2.75)
   },

package/src/Listing/Cell/DataCell.tsx

@@ -46,7 +46,7 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -64,7 +64,7 @@ const DataCell = ({
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan } = column;
+      const { getFormattedString, isTruncated, getColSpan, align } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -87,6 +87,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
+            alignItems: align,
             gridColumn
           }}
           {...commonCellProps}
@@ -99,7 +100,7 @@ const DataCell = ({
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable } = column;
+      const { getHiddenCondition, clickable, align } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -107,14 +108,31 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return null;
+        return (
+          <Cell
+            className={classes.cell}
+            isRowHighlighted={isRowHighlighted}
+            listingVariant={listingVariant}
+            onClick={(e): void => {
+              if (!clickable) {
+                return;
+              }
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            {...commonCellProps}
+          />
+        );
       }
 
       return (
         <Cell
-          className={classes.cell}
+          className={cx(classes.cell, clickable && classes.clickable)}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
+          style={{
+            alignItems: align
+          }}
           onClick={(e): void => {
             if (!clickable) {
               return;

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq('id', id), columns) as Column;
+    return find(propEq(id, 'id'), columns) as Column;
   };
 
   const Content = React.useCallback(