@centreon/ui 26.5.14 → 26.5.15

package/src/Graph/common/Thresholds/ThresholdLine.tsx

@@ -4,11 +4,17 @@ import { equals } from 'ramda';
 
 import { margin } from '../../Chart/common';
 
+interface ShowTooltipArgs {
+  tooltipData: string;
+  tooltipLeft: number;
+  tooltipTop: number;
+}
+
 interface Props {
   hideTooltip: () => void;
   isHorizontal: boolean;
   label: string;
-  showTooltip: (args) => void;
+  showTooltip: (args: ShowTooltipArgs) => void;
   thresholdType: string;
   value: number;
   width: number;

package/src/Graph/common/Thresholds/Thresholds.tsx

@@ -6,11 +6,17 @@ import { getUnits, getYScale } from '../timeSeries';
 import type { Line } from '../timeSeries/models';
 import { ThresholdLine } from './ThresholdLine';
 
+interface ShowTooltipArgs {
+  tooltipData: string;
+  tooltipLeft: number;
+  tooltipTop: number;
+}
+
 interface Props {
   displayedLines: Array<Line>;
   hideTooltip: () => void;
   isHorizontal?: boolean;
-  showTooltip: (props) => void;
+  showTooltip: (props: ShowTooltipArgs) => void;
   thresholdUnit?: string;
   thresholds: ThresholdsModel;
   width: number;

package/src/Graph/common/models.ts

@@ -1,7 +1,15 @@
 import type { Metric } from './timeSeries/models';
 
+export interface LineChartGlobal {
+  base?: number;
+  title?: string;
+  'lower-limit'?: number;
+  'upper-limit'?: number;
+  [key: string]: unknown;
+}
+
 export interface LineChartData {
-  global;
+  global: LineChartGlobal;
   metrics: Array<Metric>;
   times: Array<string>;
 }

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

@@ -581,7 +581,7 @@ describe('Format value with unit', () => {
     ''
   ];
 
-  const getExpectedResult = (unit): string => {
+  const getExpectedResult = (unit: string): string => {
     if (unit === '') {
       return '324.23m';
     }

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

@@ -68,10 +68,12 @@ const defaultDsData = {
 const toTimeTickWithMetrics = ({
   metrics,
   times
+}: {
+  metrics: Array<Metric>;
+  times: Array<string>;
 }): Array<TimeTickWithMetrics> =>
-  // @ts-expect-error - suppressing pre-existing type mismatch
   map(
-    (timeTick) => ({
+    (timeTick: string) => ({
       metrics,
       timeTick
     }),
@@ -83,10 +85,14 @@ const toTimeTickValue = (
   timeIndex: number
 ): TimeValue => {
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
-    const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
-      ...acc,
-      [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
-    });
+    const addMetricForTimeIndex = (
+      acc: TimeValue,
+      { metric_id, data }: Metric
+    ): TimeValue =>
+      ({
+        ...acc,
+        [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
+      }) as TimeValue;
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
   };
@@ -95,14 +101,14 @@ const toTimeTickValue = (
 };
 
 const getTimeSeries = (graphData: LineChartData): Array<TimeValue> => {
-  const isGreaterThanLowerLimit = (value): boolean => {
+  const isGreaterThanLowerLimit = (value: number | null): boolean => {
     const lowerLimit = path<number>(['global', 'lower-limit'], graphData);
 
     if (isNil(lowerLimit)) {
       return true;
     }
 
-    return value >= lowerLimit;
+    return value !== null && value >= lowerLimit;
   };
 
   const rejectLowerThanLimit = ({
@@ -202,14 +208,14 @@ const getMetricValuesForUnit = ({
   timeSeries,
   unit
 }: ValuesForUnitProps): Array<number> => {
-  const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
+  const getTimeSeriesValuesForMetric = (metric_id: number): Array<number> =>
     map(
       (timeValue) => getValueForMetric(timeValue)(metric_id),
       timeSeries
     ) as Array<number>;
 
   return pipe(
-    filter(propEq(unit, 'unit')) as (line) => Array<Line>,
+    filter(propEq(unit, 'unit')) as (line: Array<Line>) => Array<Line>,
     map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
@@ -266,7 +272,7 @@ const getStackedMetricValues = ({
   lines,
   timeSeries
 }: LinesTimeSeries): Array<number> => {
-  const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
+  const getTimeSeriesValuesForMetric = (metric_id: number): Array<number> =>
     map(
       (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
       timeSeries
@@ -274,7 +280,7 @@ const getStackedMetricValues = ({
 
   const metricsValues = pipe(
     // @ts-expect-error - suppressing pre-existing type mismatch
-    map(prop('metric_id')) as (metric) => Array<number>,
+    map(prop('metric_id')) as (metric: unknown) => Array<number>,
     // @ts-expect-error - suppressing pre-existing type mismatch
     map(getTimeSeriesValuesForMetric) as () => Array<Array<number>>
   )(lines as Array<Line>);
@@ -295,7 +301,7 @@ const getStackedMetricValues = ({
 const getSortedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
     reject(({ stackOrder }: Line): boolean => isNil(stackOrder)) as (
-      lines
+      lines: Array<Line>
     ) => Array<Line>,
     sortBy(prop('stackOrder'))
   )(lines);
@@ -303,14 +309,18 @@ const getSortedStackedLines = (lines: Array<Line>): Array<Line> =>
 const getInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
     // @ts-expect-error - suppressing pre-existing type mismatch
-    filter(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
+    filter(({ invert }: Line): boolean => invert) as (
+      lines: Array<Line>
+    ) => Array<Line>,
     getSortedStackedLines
   )(lines);
 
 const getNotInvertedStackedLines = (lines: Array<Line>): Array<Line> =>
   pipe(
     // @ts-expect-error - suppressing pre-existing type mismatch
-    reject(({ invert }: Line): boolean => invert) as (lines) => Array<Line>,
+    reject(({ invert }: Line): boolean => invert) as (
+      lines: Array<Line>
+    ) => Array<Line>,
     getSortedStackedLines
   )(lines);
 
@@ -401,6 +411,23 @@ const getSanitizedValues = reject(
     equals(value, Number.NEGATIVE_INFINITY)
 );
 
+interface GetScaleProps {
+  graphValues: Array<number>;
+  height: number;
+  stackedValues: Array<number>;
+  thresholds: Array<number>;
+  isCenteredZero?: boolean;
+  scale?: 'linear' | 'logarithmic';
+  scaleLogarithmicBase?: number;
+  isHorizontal: boolean;
+  invert?: boolean | string | null;
+  hasDisplayAsBar: boolean;
+  hasLineFilled: boolean;
+  hasStackedLines: boolean;
+  min?: number;
+  max?: number;
+}
+
 const getScale = ({
   graphValues,
   height,
@@ -416,7 +443,8 @@ const getScale = ({
   hasStackedLines,
   min,
   max
-}): ScaleLinear<number, number> => {
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: scale calculation requires multiple branching conditions
+}: GetScaleProps): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
   const sanitizedValuesForMinimum = min
     ? [min]
@@ -429,7 +457,9 @@ const getScale = ({
           getMin([0, ...stackedValues]),
         Math.min(...thresholds)
       ]);
-  const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));
+  const minValue = Math.min(
+    ...(sanitizedValuesForMinimum.filter(isNotNil) as Array<number>)
+  );
 
   const sanitizedValuesForMaximum = max
     ? [max]
@@ -460,7 +490,7 @@ const getScale = ({
       ? 0
       : maxValue + Math.abs(maxValue) * 0.05;
 
-  const scaleType = getScaleType(scale);
+  const scaleType = getScaleType(scale ?? 'linear');
 
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
   const range = [height, upperRangeValue];
@@ -473,7 +503,7 @@ const getScale = ({
 
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
-      clamp: min || max,
+      clamp: Boolean(min || max),
       domain: [-greatestValue, greatestValue],
       range: isHorizontal ? range : range.reverse()
     });
@@ -483,7 +513,7 @@ const getScale = ({
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
-    clamp: min || max,
+    clamp: Boolean(min || max),
     domain,
     range: isHorizontal ? range : range.reverse()
   });
@@ -594,6 +624,10 @@ const boundaryToApplyToUnit = ({
   boundary,
   boundariesUnit,
   unit
+}: {
+  boundary?: number;
+  boundariesUnit?: string;
+  unit: string;
 }): number | undefined => {
   if (!boundariesUnit) {
     return boundary;
@@ -655,21 +689,27 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = ({ value, unit }): string => {
+const formatTime = ({
+  value,
+  unit
+}: {
+  value: number;
+  unit: string;
+}): string => {
   return `${numeral(value).format('0.[00]a')} ${unit}`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
-      format: (value) => {
+      format: (value: number) => {
         return formatTime({ unit: 'ms', value });
       },
       regexps: {
         format: /(ms)/,
         unformat: /(ms)/
       },
-      unformat: () => ''
+      unformat: () => 0
     });
 
     return null;
@@ -683,14 +723,14 @@ registerMsUnitToNumeral();
 const registerSecondsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'seconds', {
-      format: (value) => {
+      format: (value: number) => {
         return formatTime({ unit: 's', value });
       },
       regexps: {
         format: /(s)/,
         unformat: /(s)/
       },
-      unformat: () => ''
+      unformat: () => 0
     });
 
     return null;
@@ -701,7 +741,13 @@ const registerSecondsUnitToNumeral = (): null => {
 
 registerSecondsUnitToNumeral();
 
-const getBase1024 = ({ unit, base }): boolean => {
+const getBase1024 = ({
+  unit,
+  base
+}: {
+  unit: string;
+  base: number | string;
+}): boolean => {
   const base2Units = [
     'B',
     'bytes',

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

@@ -135,5 +135,5 @@ export interface TimeValueProps {
   marginLeft?: number;
   timeSeries: Array<TimeValue>;
   x?: number;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleTime<number, number> | ScaleLinear<number, number>;
 }

package/src/Graph/common/utils.ts

@@ -274,7 +274,9 @@ export const computeGElementMarginLeft = ({
 }: ComputeGElementMarginLeftProps): number =>
   maxCharacters * 5 + (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6);
 
-export const computPixelsToShiftMouse = (xScale): number => {
+export const computPixelsToShiftMouse = (
+  xScale: import('d3-scale').ScaleTime<number, number>
+): number => {
   const domain = xScale.domain();
 
   const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');

package/src/Image/useLoadImage.ts

@@ -38,7 +38,12 @@ const createImage = ({
     });
 };
 
-export const useLoadImage = ({ imageSrc, alt }): boolean => {
+interface UseLoadImageProps {
+  alt: string;
+  imageSrc: string;
+}
+
+export const useLoadImage = ({ imageSrc, alt }: UseLoadImageProps): boolean => {
   const [images, setImages] = useAtom(imagesAtom);
 
   const image = prop(alt, images);

package/src/InputField/Search/RegexpHelpTooltip.tsx

@@ -47,7 +47,9 @@ const RegexpHelpTooltip = ({
   urlTip,
   labelUrlTip
 }: TooltipProps): JSX.Element => {
-  const displayElement = (element): ((prop) => ReactElement | null) =>
+  const displayElement = (
+    element: ReactElement
+  ): ((prop: unknown) => ReactElement | null) =>
     ifElse(isNil, always(null), always(element));
 
   const content = (

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -1,8 +1,11 @@
 import { buildListingEndpoint } from '../../../../../..';
+import type { BuildListingEndpointParameters } from '../../../../../../api/buildListingEndpoint/models';
 
 export const baseEndpoint = './endpoint';
 
-export const getEndpoint = (parameters): string => {
+export const getEndpoint = (
+  parameters: BuildListingEndpointParameters['parameters']
+): string => {
   return buildListingEndpoint({ baseEndpoint, parameters });
 };
 

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

@@ -9,7 +9,10 @@ import {
 	waitFor,
 } from "../../../../../test/testRenderer";
 import buildListingEndpoint from "../../../../api/buildListingEndpoint";
-import type { ConditionsSearchParameter } from "../../../../api/buildListingEndpoint/models";
+import type {
+	BuildListingEndpointParameters,
+	ConditionsSearchParameter,
+} from "../../../../api/buildListingEndpoint/models";
 import TestQueryProvider from "../../../../api/TestQueryProvider";
 
 import SingleConnectedAutocompleteField from "./Single";
@@ -31,7 +34,9 @@ const optionsData = {
 
 const baseEndpoint = "endpoint";
 
-const getEndpoint = (parameters): string => {
+const getEndpoint = (
+	parameters: BuildListingEndpointParameters["parameters"],
+): string => {
 	return buildListingEndpoint({ baseEndpoint, parameters });
 };
 

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

@@ -1,4 +1,5 @@
 import { CircularProgress, useTheme } from '@mui/material';
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 
 import {
   equals,
@@ -13,7 +14,14 @@ import {
   prop,
   uniqBy
 } from 'ramda';
-import { type ReactElement, useCallback, useEffect, useState } from 'react';
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  useCallback,
+  useEffect,
+  useState
+} from 'react';
+import type { JsonDecoder } from 'ts.data.json';
 
 import type { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
 import type {
@@ -35,26 +43,37 @@ interface OptionResult<T> {
   total: number;
 }
 
+export interface GetEndpointParams {
+  page: number;
+  search?: SearchParameter;
+}
+
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
-  changeIdValue: (item: TData) => number | string;
+  changeIdValue?: (item: TData) => number | string;
   exclusionOptionProperty?: keyof SelectEntry;
   field: string;
-  getEndpoint: ({ search, page }) => string;
-  decoder?;
+  getEndpoint: (params: GetEndpointParams) => string;
+  decoder?: JsonDecoder.Decoder<ListingModel<TData> | ListingMapModel<TData>>;
   getRenderedOptionText?: (option: TData) => ReactElement | string;
   getRequestHeaders?: HeadersInit;
-  initialPage: number;
+  initialPage?: number;
   labelKey?: string;
   queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: HOC accepts varied AutocompleteField shapes
+type AutocompleteLikeComponent = (props: any) => ReactElement;
+
 const ConnectedAutocompleteField = (
-  AutocompleteField: (props) => ReactElement,
+  AutocompleteField: AutocompleteLikeComponent,
   multiple: boolean
-): ((props) => ReactElement) => {
+): (<TData extends { name: string }>(
+  props: ConnectedAutoCompleteFieldProps<TData> &
+    Omit<AutocompleteFieldProps, 'options'>
+) => ReactElement) => {
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
@@ -85,8 +104,8 @@ const ConnectedAutocompleteField = (
     const [autocompleteChangedValue, setAutocompleteChangedValue] =
       useState<Array<SelectEntry>>();
     const debounce = useDebounce({
-      functionToDebounce: (value): void => {
-        setSearchParameter(getSearchParameter(value));
+      functionToDebounce: (value: unknown): void => {
+        setSearchParameter(getSearchParameter(value as string));
         setPage(1);
       },
       memoProps: [page, searchConditions],
@@ -216,26 +235,30 @@ const ConnectedAutocompleteField = (
       };
     };
 
-    const changeText = (event): void => {
+    const changeText = (event: React.ChangeEvent<HTMLInputElement>): void => {
       debounce(event.target.value);
     };
 
-    const renderOptions = (renderProps, option, { selected }): ReactElement => {
+    const renderOptions = (
+      renderProps: HTMLAttributes<HTMLLIElement>,
+      option: SelectEntry,
+      { selected }: AutocompleteRenderOptionState
+    ): ReactElement => {
       const { value } = props;
 
       const lastValue = Array.isArray(value) ? last(value) : value;
 
       const isLastValueWithoutOptions =
-        equals(option)(lastValue) && isEmpty(options);
+        equals(option as unknown)(lastValue as unknown) && isEmpty(options);
       const lastOption = last(options);
 
-      const isLastOption = equals(lastOption)(option);
+      const isLastOption = equals(lastOption as unknown)(option as unknown);
 
       const canTriggerInfiniteScroll = isLastOption && page <= maxPage;
 
       const ref = canTriggerInfiniteScroll ? { ref: lastOptionRef } : {};
 
-      const optionText = getRenderedOptionText(option);
+      const optionText = getRenderedOptionText(option as unknown as TData);
 
       const optionProps = {
         checkboxSelected: multiple ? selected : undefined,
@@ -259,12 +282,26 @@ const ConnectedAutocompleteField = (
       );
     };
 
-    const renameKey = useCallback(({ object, key, newKey }): Partial<TData> => {
-      const oldKeyValue = object[key];
-      const newObject = { ...object, [newKey]: oldKeyValue };
-
-      return omit([key], newObject);
-    }, []);
+    const renameKey = useCallback(
+      ({
+        object,
+        key,
+        newKey
+      }: {
+        object: TData;
+        key: string;
+        newKey: string;
+      }): Partial<TData> => {
+        const oldKeyValue = (object as Record<string, unknown>)[key];
+        const newObject = {
+          ...object,
+          [newKey]: oldKeyValue
+        } as Record<string, unknown>;
+
+        return omit([key], newObject) as Partial<TData>;
+      },
+      []
+    );
 
     const fetchOptionsAndPrefetchNextOptions = useCallback((): void => {
       fetchQuery().then((newOptions) => {
@@ -305,7 +342,7 @@ const ConnectedAutocompleteField = (
         }
 
         prefetchNextPage({
-          getPrefetchQueryKey: (newPage) => [
+          getPrefetchQueryKey: (newPage: number) => [
             `autocomplete-${props.label}`,
             newPage,
             searchParameter
@@ -361,18 +398,25 @@ const ConnectedAutocompleteField = (
       fetchOptionsAndPrefetchNextOptions();
     }, [optionsOpen, page, searchParameter]);
 
+    const handleChange = (
+      _: React.SyntheticEvent,
+      value: SelectEntry | Array<SelectEntry> | null
+    ): void => {
+      setAutocompleteChangedValue(value as Array<SelectEntry> | undefined);
+    };
+
     return (
       <AutocompleteField
-        filterOptions={(opt): SelectEntry => opt}
+        filterOptions={(opt: Array<SelectEntry>): Array<SelectEntry> => opt}
         loading={isFetching}
-        onChange={(_, value) => {
-          setAutocompleteChangedValue(value);
-        }}
+        onChange={handleChange as unknown as AutocompleteFieldProps['onChange']}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}
         options={
-          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
+          (allowUniqOption
+            ? uniqBy(getRenderedOptionText, options)
+            : options) as unknown as Array<SelectEntry>
         }
         renderOption={renderOptions}
         total={

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -44,9 +44,9 @@ const SortableList = ({
 }: SortableListProps): JSX.Element => {
   const { classes } = useStyles();
 
-  const dragEnd = ({ items: newItems }): void =>
+  const dragEnd = ({ items: newItems }: { items: Array<string> }): void =>
     changeItemsOrder(
-      (newItems as Array<string>).map(
+      newItems.map(
         (item) => find(propEq(item, 'id'), items) as DraggableSelectEntry
       )
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -3,19 +3,21 @@ import { Chip, Typography, useTheme } from '@mui/material';
 import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import clsx from 'clsx';
 import { findIndex, not, propEq } from 'ramda';
-import { type RefObject, useRef } from 'react';
+import type React from 'react';
+import { type CSSProperties, type RefObject, useRef } from 'react';
 
 import type { DraggableSelectEntry, SortableListProps } from './SortableList';
 
 interface ContentProps
   extends Pick<DraggableSelectEntry, 'name' | 'createOption' | 'id'> {
-  attributes;
+  // biome-ignore lint/suspicious/noExplicitAny: dnd-kit forwards arbitrary HTML attributes
+  attributes: Record<string, any>;
   id: string;
   index: number;
   isDragging: boolean;
   itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
-  style;
+  style: CSSProperties;
 }
 
 interface Props extends Omit<SortableListProps, 'changeItemsOrder'> {
@@ -43,7 +45,7 @@ const SortableListContent = ({
     const theme = useTheme();
     const labelItemRef = useRef<HTMLElement | null>(null);
 
-    const mouseUp = (event: MouseEvent): void => {
+    const mouseUp = (event: React.MouseEvent<HTMLElement>): void => {
       if (not(event.shiftKey)) {
         return;
       }