@centreon/ui 25.10.28 → 25.10.30

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

@@ -26,14 +26,14 @@ import {
   map,
   negate,
   pipe,
-  pluck,
   prop,
   propEq,
   reduce,
   reject,
   sortBy,
   split,
-  uniq
+  uniq,
+  isNotNil
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -54,6 +54,17 @@ interface TimeTickWithMetrics {
   timeTick: string;
 }
 
+const defaultDsData = {
+  ds_color_line: '#000000',
+  ds_filled: false,
+  ds_invert: false,
+  ds_legend: '',
+  ds_order: '0',
+  ds_stack: '0',
+  ds_stack_key: null,
+  ds_transparency: 80
+};
+
 const toTimeTickWithMetrics = ({
   metrics,
   times
@@ -73,7 +84,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);
@@ -120,30 +131,39 @@ const toLine = ({
   maximum_value,
   metric_id,
   displayAs
-}: Metric): Line => ({
-  areaColor: ds_data.ds_color_area,
-  average_value,
-  color: ds_data.ds_color_line,
-  display: true,
-  displayAs,
-  filled: ds_data.ds_filled,
-  highlight: undefined,
-  invert: ds_data.ds_invert,
-  legend: ds_data.ds_legend,
-  lineColor: ds_data.ds_color_line,
-  maximum_value,
-  metric,
-  metric_id,
-  minimum_value,
-  name: legend,
-  stackOrder:
-    equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
-      ? Number.parseInt(ds_data.ds_order || '0', 10)
-      : null,
-  stackKey: ds_data.ds_stack_key || null,
-  transparency: ds_data.ds_transparency,
-  unit
-});
+}: Metric): Line => {
+  const safeDsData = {
+    ...defaultDsData,
+    ...(ds_data || {}),
+    ds_color_area:
+      ds_data?.ds_color_area ?? ds_data?.ds_color_line ?? defaultDsData.ds_color_line
+  };
+
+  return {
+    areaColor: safeDsData.ds_color_area,
+    average_value,
+    color: safeDsData.ds_color_line,
+    display: true,
+    displayAs,
+    filled: safeDsData.ds_filled,
+    highlight: undefined,
+    invert: safeDsData.ds_invert,
+    legend: safeDsData.ds_legend,
+    lineColor: safeDsData.ds_color_line,
+    maximum_value,
+    metric,
+    metric_id,
+    minimum_value,
+    name: legend,
+    stackKey: safeDsData.ds_stack_key || null,
+    stackOrder:
+      equals(safeDsData.ds_stack, '1') || equals(safeDsData.ds_stack, true)
+        ? Number.parseInt(safeDsData.ds_order || '0', 10)
+        : null,
+    transparency: safeDsData.ds_transparency,
+    unit
+  };
+};
 
 const getLineData = (graphData: LineChartData): Array<Line> =>
   map(toLine, graphData.metrics);
@@ -160,8 +180,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);
@@ -242,10 +262,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>,
@@ -308,8 +325,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]
           };
@@ -342,10 +359,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;
 };
 
@@ -382,6 +399,7 @@ const getScale = ({
   invert,
   hasDisplayAsBar,
   hasLineFilled,
+  hasStackedLines,
   min,
   max
 }): ScaleLinear<number, number> => {
@@ -389,30 +407,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);
 
@@ -479,7 +509,8 @@ const getYScaleUnit = ({
   min,
   max,
   isBarChart,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   invert?: boolean | string | null;
   unit: string;
@@ -487,6 +518,7 @@ const getYScaleUnit = ({
   min?: number;
   boundariesUnit?: string;
   isBarChart?: boolean;
+  isFilled?: boolean;
 }): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
@@ -505,12 +537,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,
@@ -520,8 +552,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,
@@ -561,12 +599,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);
 
@@ -590,7 +630,8 @@ const getYScalePerUnit = ({
         min,
         max,
         isBarChart,
-        boundariesUnit
+        boundariesUnit,
+        isFilled
       })
     };
   }, {});
@@ -598,15 +639,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)/,
@@ -623,27 +664,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',
@@ -673,13 +693,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}`;
@@ -698,6 +717,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -710,7 +731,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;
@@ -760,93 +783,6 @@ export const formatMetricName = ({
   return metricName;
 };
 
-export const getStackedLinesTimeSeriesPerStackAndUnit = ({
-  stackedLines,
-  timeSeries,
-  invert
-}: {
-  stackedLines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  invert?: boolean;
-}): {
-  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
-    string,
-    { lines: Array<Line>; timeSeries: Array<TimeValue> }
-  >;
-  stackedKeys: Record<string, null>;
-} => {
-  const stackedKeys = stackedLines.reduce(
-    (acc, { unit, stackKey }) => ({
-      ...acc,
-      [`stacked-${unit || ''}-${stackKey ? stackKey : ''}`]: null
-    }),
-    {}
-  );
-  const stackedKeysWithOnlyStackKey = Object.keys(stackedKeys).filter(
-    (stackKey: string) => stackKey.split('-')[2]
-  );
-  const stackedKeysWithOnlyUnit = Object.keys(stackedKeys).filter(
-    (stackKey: string) => !stackKey.split('-')[2]
-  );
-
-  const stackedLinesTimeSeriesPerStackKey = stackedKeysWithOnlyStackKey.reduce(
-    (acc, stackedKey: string) => {
-      const [, stackUnit, stackKey] = stackedKey.split('-');
-      const relatedLines = stackedLines.filter(({ unit, stackKey: key }) => {
-        return stackUnit === (unit || '') && stackKey === key;
-      });
-
-      return {
-        ...acc,
-        [stackedKey]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            invert,
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
-  const affectedLinesPerStackKey = flatten(
-    pluck('lines', Object.values(stackedLinesTimeSeriesPerStackKey))
-  );
-  const stackedLinesTimeSeriesPerUnit = stackedKeysWithOnlyUnit.reduce(
-    (acc, stackedKey: string) => {
-      const [, stackUnit] = stackedKey.split('-');
-      const relatedLines = stackedLines.filter(
-        (line) =>
-          !affectedLinesPerStackKey.some(
-            (affectedLine) => line.metric_id === affectedLine.metric_id
-          ) && stackUnit === (line.unit || '')
-      );
-
-      return {
-        ...acc,
-        [stackedKey]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries,
-            invert
-          })
-        }
-      };
-    },
-    {}
-  );
-
-  return {
-    stackedLinesTimeSeriesPerStackKeyAndUnit: {
-      ...stackedLinesTimeSeriesPerStackKey,
-      ...stackedLinesTimeSeriesPerUnit
-    },
-    stackedKeys
-  };
-};
-
 export {
   getTimeSeries,
   getLineData,

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

@@ -21,7 +21,7 @@ export interface Metric {
   critical_low_threshold: number | null;
   data: Array<number | null>;
   displayAs?: 'line' | 'bar';
-  ds_data: DsData;
+  ds_data?: DsData;
   legend: string;
   maximum_value: number | null;
   metric: string;

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,20 +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 { default as Header } from './common/BaseChart/Header';
-
-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;
@@ -340,11 +340,11 @@ const ConnectedAutocompleteField = (
     );
 
     useEffect(() => {
-      if (!autocompleteChangedValue && !props?.value) {
+      if (!autocompleteChangedValue) {
         return;
       }
       setSearchParameter(undefined);
-    }, [autocompleteChangedValue, props?.value]);
+    }, [autocompleteChangedValue]);
 
     useEffect(() => {
       if (!optionsOpen) {

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

@@ -38,7 +38,8 @@ const ListboxComponent = ({
   options,
   isOptionSelected,
   onChange,
-  total
+  total,
+  value = []
 }) => {
   if (disableSelectAll) {
     return;
@@ -54,12 +55,19 @@ const ListboxComponent = ({
       const syntheticEvent = {} as React.SyntheticEvent;
 
       if (allSelected) {
-        onChange?.(syntheticEvent, [], 'selectOption');
+        const remaining = value.filter(
+          (v) => !options.some((opt) => opt.id === v.id)
+        );
+        onChange?.(syntheticEvent, remaining, 'selectOption');
 
         return;
       }
 
-      onChange?.(syntheticEvent, options, 'selectOption');
+      const merged = [
+        ...value,
+        ...options.filter((opt) => !isOptionSelected(opt))
+      ];
+      onChange?.(syntheticEvent, merged, 'selectOption');
     };
 
     return (

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,
@@ -113,7 +113,8 @@ const MultiAutocompleteField = ({
         onChange,
         isOptionSelected,
         disableSelectAll,
-        options
+        options,
+        value: values
       })}
       onChange={onChange}
       {...props}