@centreon/ui 25.10.9 → 25.10.11

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

@@ -32,7 +32,8 @@ import {
   reject,
   sortBy,
   split,
-  uniq
+  uniq,
+  isNotNil
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -72,7 +73,7 @@ const toTimeTickValue = (
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
     const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
       ...acc,
-      [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
+      [metric_id]: data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -158,8 +159,8 @@ const getMetrics = (timeValue: TimeValue): Array<string> =>
 
 const getValueForMetric =
   (timeValue: TimeValue) =>
-  (metric_id: number): number =>
-    prop(metric_id, timeValue) as number;
+    (metric_id: number): number =>
+      prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
   pipe(map(prop('unit')), uniq)(lines);
@@ -240,10 +241,7 @@ const getStackedMetricValues = ({
   timeSeries
 }: LinesTimeSeries): Array<number> => {
   const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
-    map(
-      (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
-      timeSeries
-    );
+    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
 
   const metricsValues = pipe(
     map(prop('metric_id')) as (metric) => Array<number>,
@@ -306,8 +304,8 @@ const getTimeSeriesForLines = ({
             ...acc,
             [metric_id]:
               invert &&
-              metricsValue[metric_id] &&
-              gt(metricsValue[metric_id], 0)
+                metricsValue[metric_id] &&
+                gt(metricsValue[metric_id], 0)
                 ? negate(metricsValue[metric_id])
                 : metricsValue[metric_id]
           };
@@ -340,10 +338,10 @@ const getYScale = ({
 
   return invert
     ? getScaleType(scale)({
-        base: scaleLogarithmicBase,
-        domain: yScale.domain().reverse(),
-        range: yScale.range().reverse()
-      })
+      base: scaleLogarithmicBase,
+      domain: yScale.domain().reverse(),
+      range: yScale.range().reverse()
+    })
     : yScale;
 };
 
@@ -380,6 +378,7 @@ const getScale = ({
   invert,
   hasDisplayAsBar,
   hasLineFilled,
+  hasStackedLines,
   min,
   max
 }): ScaleLinear<number, number> => {
@@ -387,30 +386,42 @@ const getScale = ({
   const sanitizedValuesForMinimum = min
     ? [min]
     : getSanitizedValues([
-        invert && graphValues.every(lt(0))
-          ? negate(getMax(graphValues))
-          : getMin(graphValues),
-        !isEmpty(stackedValues) &&
-          !equals(stackedValues, [0]) &&
-          getMin(stackedValues),
-        Math.min(...thresholds)
-      ]);
-  const minValue = Math.min(...sanitizedValuesForMinimum);
-  const minValueWithMargin =
-    (hasDisplayAsBar || hasLineFilled) && minValue > 0 && !min
-      ? 0
-      : minValue - Math.abs(minValue) * 0.05;
+      invert && graphValues.every(lt(0))
+        ? negate(getMax(graphValues))
+        : getMin(graphValues),
+      !isEmpty(stackedValues) &&
+      !equals(stackedValues, [0]) &&
+      getMin(stackedValues),
+      Math.min(...thresholds)
+    ]);
+  const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));
 
   const sanitizedValuesForMaximum = max
     ? [max]
     : getSanitizedValues([
-        getMax(graphValues),
-        getMax(stackedValues),
-        hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
-        Math.max(...thresholds)
-      ]);
-  const maxValue = Math.max(...sanitizedValuesForMaximum);
-  const maxValueWithMargin = maxValue + Math.abs(maxValue) * 0.05;
+      getMax(graphValues),
+      getMax(stackedValues),
+      hasOnlyZeroesHasValue(graphValues) ? 1 : null,
+      Math.max(...thresholds)
+    ]);
+  const maxValue = Math.max(...sanitizedValuesForMaximum.filter(isNotNil));
+
+  const minValueWithMargin =
+    (hasDisplayAsBar && minValue > 0) ||
+      (hasLineFilled &&
+        Math.max(maxValue, minValue) > minValue &&
+        minValue > 0) ||
+      (hasStackedLines && minValue > maxValue)
+      ? 0
+      : minValue - Math.abs(minValue) * 0.05;
+  const maxValueWithMargin =
+    (hasDisplayAsBar && maxValue < 0) ||
+      (hasLineFilled &&
+        Math.min(maxValue, minValue) < maxValue &&
+        maxValue < 0) ||
+      (hasStackedLines && minValue > maxValue)
+      ? 0
+      : maxValue + Math.abs(maxValue) * 0.05;
 
   const scaleType = getScaleType(scale);
 
@@ -477,7 +488,8 @@ const getYScaleUnit = ({
   min,
   max,
   isBarChart,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   invert?: boolean | string | null;
   unit: string;
@@ -485,6 +497,7 @@ const getYScaleUnit = ({
   min?: number;
   boundariesUnit?: string;
   isBarChart?: boolean;
+  isFilled?: boolean;
 }): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
@@ -503,12 +516,12 @@ const getYScaleUnit = ({
 
   const stackedValues = hasStackedLines
     ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines).filter(
-          ({ unit: stackedUnit }) => equals(unit, stackedUnit)
-        ),
-        timeSeries: dataTimeSeries
-      })
-    : [0];
+      lines: getSortedStackedLines(dataLines).filter(
+        ({ unit: stackedUnit }) => equals(unit, stackedUnit)
+      ),
+      timeSeries: dataTimeSeries
+    })
+    : [];
 
   return getScale({
     graphValues,
@@ -518,8 +531,14 @@ const getYScaleUnit = ({
         ({ displayAs, unit: lineUnit }) =>
           equals(unit, lineUnit) && equals(displayAs, 'bar')
       ),
-    hasLineFilled: dataLines.some(
-      ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+    hasLineFilled: isNil(isFilled)
+      ? dataLines.some(
+        ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+      )
+      : isFilled,
+    hasStackedLines: dataLines.some(
+      ({ unit: lineUnit, stackKey, stackOrder }) =>
+        equals(unit, lineUnit) && (stackKey || stackOrder)
     ),
     height: valueGraphHeight,
     invert,
@@ -559,12 +578,14 @@ const getYScalePerUnit = ({
   isBarChart,
   min,
   max,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   min?: number;
   max?: number;
   isBarChart?: boolean;
   boundariesUnit?: string;
+  isFilled?: boolean;
 }): Record<string, ScaleLinear<number, number>> => {
   const units = getUnits(dataLines);
 
@@ -588,7 +609,8 @@ const getYScalePerUnit = ({
         min,
         max,
         isBarChart,
-        boundariesUnit
+        boundariesUnit,
+        isFilled
       })
     };
   }, {});
@@ -596,15 +618,15 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = ({ value, unit }): string => {
-  return `${numeral(value).format('0.[00]a')} ${unit}`;
+const formatTime = (value: number): string => {
+  return `${numeral(value).format('0.[00]a')} ms`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime({ value, unit: 'ms' });
+        return formatTime(value);
       },
       regexps: {
         format: /(ms)/,
@@ -621,27 +643,6 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
-const registerSecondsUnitToNumeral = (): null => {
-  try {
-    numeral.register('format', 'seconds', {
-      format: (value) => {
-        return formatTime({ value, unit: 's' });
-      },
-      regexps: {
-        format: /(s)/,
-        unformat: /(s)/
-      },
-      unformat: () => ''
-    });
-
-    return null;
-  } catch (_) {
-    return null;
-  }
-};
-
-registerSecondsUnitToNumeral();
-
 const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
@@ -671,13 +672,12 @@ const formatMetricValue = ({
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
-    [equals('s'), always(' s')],
     [T, always(base1024 ? ' ib' : 'a')]
   ])(unit);
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/(iB|B)/g, unit);
+    .replace(/B/, unit);
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;
@@ -696,6 +696,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -708,7 +710,9 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return formattedMetricValue;
+  return base1024 || !unit || equals(unit, 'ms')
+    ? formattedMetricValue
+    : `${formattedMetricValue} ${unit}`;
 };
 
 const bisectDate = bisector(identity).center;
@@ -787,4 +791,4 @@ export {
   formatMetricValueWithUnit,
   getYScaleUnit,
   getYScalePerUnit
-};
+};

package/src/Graph/common/utils.ts

@@ -25,7 +25,7 @@ import { BarStyle } from '../BarChart/models';
 import { margin } from '../Chart/common';
 import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
-import { formatMetricValueWithUnit } from './timeSeries';
+import { formatMetricValue } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
@@ -234,7 +234,7 @@ export const getFormattedAxisValues = ({
 
   const formattedData = metricIds.map((metricId) =>
     timeSeries.map((data) =>
-      formatMetricValueWithUnit({
+      formatMetricValue({
         value: data[metricId],
         unit: axisUnit,
         base
@@ -246,7 +246,7 @@ export const getFormattedAxisValues = ({
 
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
-        formatMetricValueWithUnit({
+        formatMetricValue({
           value,
           unit: axisUnit,
           base
@@ -273,11 +273,5 @@ export const computeGElementMarginLeft = ({
 export const computPixelsToShiftMouse = (xScale): number => {
   const domain = xScale.domain();
 
-  const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');
-
-  if (!hoursDiffInGraph) {
-    return 0;
-  }
-
-  return Math.round(8 / hoursDiffInGraph);
+  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
 };

package/src/Graph/index.ts

@@ -1,19 +1,20 @@
-export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
-export { default as LineChart } from './Chart';
-export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
-export { default as useLineChartData } from './Chart/useChartData';
-export { default as BarChart } from './BarChart/BarChart';
-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';
-export { Timeline } from './Timeline';
-export * from './Tree';
-export type { LineChartData, Threshold, Thresholds } from './common/models';
-export * from './common/timeSeries';
-export type { Metric } from './common/timeSeries/models';
-export * from './Chart/models';
-export * from './PieChart/models';
+export type { ParentSizeProps } from "@visx/responsive/lib/components/ParentSize";
+export { default as BarChart } from "./BarChart/BarChart";
+export { BarStack } from "./BarStack";
+export { default as LineChart } from "./Chart";
+export { default as ThresholdLines } from "./Chart/BasicComponents/Lines/Threshold";
+export * from "./Chart/models";
+export { default as useLineChartData } from "./Chart/useChartData";
+export { default as Header } from "./common/BaseChart/Header";
+export { default as NoData } from "./common/Error/NoData";
+export type { LineChartData, Threshold, Thresholds } from "./common/models";
+export * from "./common/timeSeries";
+export type { Metric } from "./common/timeSeries/models";
+export { Gauge } from "./Gauge";
+export { HeatMap } from "./HeatMap";
+export { PieChart } from "./PieChart";
+export * from "./PieChart/models";
+export { SingleBar } from "./SingleBar";
+export { Text as GraphText } from "./Text";
+export { Timeline } from "./Timeline";
+export * from "./Tree";

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -44,7 +44,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   field: string;
   getEndpoint: ({ search, page }) => string;
   decoder?;
-  getRenderedOptionText: (option: TData) => string;
+  getRenderedOptionText?: (option: TData) => ReactElement | string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
@@ -53,9 +53,9 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
 }
 
 const ConnectedAutocompleteField = (
-  AutocompleteField: (props) => JSX.Element,
+  AutocompleteField: (props) => ReactElement,
   multiple: boolean
-): ((props) => JSX.Element) => {
+): ((props) => ReactElement) => {
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
@@ -65,7 +65,7 @@ const ConnectedAutocompleteField = (
     open,
     exclusionOptionProperty = 'id',
     searchConditions = [],
-    getRenderedOptionText = (option): string => option.name?.toString(),
+    getRenderedOptionText = (option): string => option?.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
     queryKey,
@@ -74,7 +74,7 @@ const ConnectedAutocompleteField = (
     changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
-    Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
+    Omit<AutocompleteFieldProps, 'options'>): ReactElement => {
     const [options, setOptions] = useState<Array<TData>>([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(initialPage);
@@ -221,7 +221,7 @@ const ConnectedAutocompleteField = (
       debounce(event.target.value);
     };
 
-    const renderOptions = (renderProps, option, { selected }): JSX.Element => {
+    const renderOptions = (renderProps, option, { selected }): ReactElement => {
       const { value } = props;
 
       const lastValue = Array.isArray(value) ? last(value) : value;

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

@@ -36,7 +36,7 @@ const MultiAutocompleteField = ({
   disableSortedOptions = false,
   disableSelectAll = true,
   optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
+  getOptionLabel = (option): string => option?.name,
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,

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

@@ -13,6 +13,7 @@ import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
 import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
@@ -33,6 +34,11 @@ export type Props = {
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
+  renderOption?: (
+    renderProps: HTMLAttributes<HTMLLIElement>,
+    option: SelectEntry,
+    state: AutocompleteRenderOptionState
+  ) => ReactElement;
   label: string;
   loading?: boolean;
   onTextChange?;
@@ -52,7 +58,7 @@ export type Props = {
 > &
   UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>;
 
-const LoadingIndicator = (): JSX.Element => {
+const LoadingIndicator = (): ReactElement => {
   const { classes } = useAutoCompleteStyles({});
 
   return (
@@ -90,10 +96,11 @@ const AutocompleteField = forwardRef(
       forceInputRenderValue = false,
       textFieldSlotsAndSlotProps,
       autocompleteSlotsAndSlotProps,
+      renderOption,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
+  ): ReactElement => {
     const { classes, cx } = useAutoCompleteStyles({ hideInput });
     const { t } = useTranslation();
     const theme = useTheme();
@@ -107,7 +114,24 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => {
+    const renderOptions = renderOption
+      ? renderOption
+      : (props, option): ReactElement => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
+            >
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        };
+
+    const renderInput = (params): ReactElement => {
       return (
         <TextField
           {...params}
@@ -202,20 +226,7 @@ const AutocompleteField = forwardRef(
         options={options}
         ref={ref}
         renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
-            >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
+        renderOption={renderOptions}
         size="small"
         slotProps={{
           ...autocompleteSlotsAndSlotProps?.slotProps,

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { ReactElement, RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
 
 interface Props {
   checkboxSelected?: boolean;
-  children: string;
+  children: string | ReactElement;
   thumbnailUrl?: string;
 }
 
 const Option = forwardRef(
-  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): JSX.Element => {
+  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): ReactElement => {
     const { classes } = useStyles();
 
     return (

package/src/InputField/Select/index.tsx

@@ -96,6 +96,7 @@ const SelectField = ({
       fullWidth={fullWidth}
       size="small"
       {...formControlProps}
+      
     >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
@@ -150,4 +151,4 @@ const SelectField = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

package/src/Module/index.tsx

@@ -3,7 +3,6 @@ import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
-import { ThemeOptions } from '@mui/material';
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
@@ -13,10 +12,6 @@ export interface ModuleProps {
   queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
-  overrideTheme?: {
-    light: Partial<ThemeOptions>;
-    dark: Partial<ThemeOptions>;
-  };
 }
 
 const Module = ({
@@ -24,8 +19,7 @@ const Module = ({
   seedName,
   maxSnackbars = 3,
   store,
-  queryClient,
-  overrideTheme
+  queryClient
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
@@ -35,7 +29,7 @@ const Module = ({
     <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider overrideTheme={overrideTheme}>
+          <ThemeProvider>
             <SnackbarProvider maxSnackbars={maxSnackbars}>
               {children}
             </SnackbarProvider>