@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Chart/InteractiveComponents/Annotations/Line/Acknowledgement.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'react-i18next';
-
 import IconAcknowledge from '@mui/icons-material/Person';
 import { useTheme } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { labelAcknowledgement } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
+import type { Args } from '../models';
 
 const AcknowledgementAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();
@@ -15,9 +15,9 @@ const AcknowledgementAnnotations = (props: Args): JSX.Element => {
 
   return (
     <EventAnnotations
-      Icon={IconAcknowledge}
       ariaLabel={t(labelAcknowledgement)}
       color={color}
+      Icon={IconAcknowledge}
       type="acknowledgement"
       {...props}
     />

package/src/Graph/Chart/InteractiveComponents/Annotations/Line/Comments.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'react-i18next';
-
 import IconComment from '@mui/icons-material/Comment';
 import { useTheme } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { labelComment } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
+import type { Args } from '../models';
 
 const CommentAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();
@@ -13,9 +13,9 @@ const CommentAnnotations = (props: Args): JSX.Element => {
 
   return (
     <EventAnnotations
-      Icon={IconComment}
       ariaLabel={t(labelComment)}
       color={theme.palette.primary.main}
+      Icon={IconComment}
       type="comment"
       {...props}
     />

package/src/Graph/Chart/InteractiveComponents/Annotations/annotationsAtoms.ts

@@ -1,8 +1,8 @@
-import { ScaleTime } from 'd3-scale';
+import { alpha } from '@mui/material';
+
+import type { ScaleTime } from 'd3-scale';
 import { atom } from 'jotai';
 import {
-  Pred,
-  T,
   __,
   always,
   both,
@@ -17,12 +17,12 @@ import {
   lte,
   not,
   or,
-  pipe
+  type Pred,
+  pipe,
+  T
 } from 'ramda';
 
-import { alpha } from '@mui/material';
-
-import { TimelineEvent } from './models';
+import type { TimelineEvent } from './models';
 
 interface ChangeAnnotationHoveredProps {
   annotationHoveredId: number;

package/src/Graph/Chart/InteractiveComponents/Annotations/index.tsx

@@ -1,11 +1,10 @@
-import { MutableRefObject } from 'react';
-
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
+import type { MutableRefObject } from 'react';
 
 import DowntimeAnnotations from './Area/Downtime';
 import AcknowledgementAnnotations from './Line/Acknowledgement';
 import CommentAnnotations from './Line/Comments';
-import { TimelineEvent } from './models';
+import type { TimelineEvent } from './models';
 import useAnnotation from './useAnnotation';
 
 export interface Props {

package/src/Graph/Chart/InteractiveComponents/Annotations/models.ts

@@ -1,4 +1,4 @@
-import { Props } from '.';
+import type { Props } from '.';
 
 export interface Status {
   name: string;

package/src/Graph/Chart/InteractiveComponents/Annotations/useAnnotation.ts

@@ -1,20 +1,17 @@
-import { useEffect } from 'react';
-
 import { useAtomValue, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
 
 import { margin } from '../../common';
 import {
   eventMouseLeaveAtom,
   mousePositionAtom
 } from '../interactionWithGraphAtoms';
-
+import type { Props } from '.';
 import {
   annotationHoveredAtom,
   changeAnnotationHoveredDerivedAtom
 } from './annotationsAtoms';
 
-import { Props } from '.';
-
 const useAnnotation = ({
   graphWidth,
   data,
@@ -23,7 +20,7 @@ const useAnnotation = ({
   const [annotationHoveredId] = crypto.getRandomValues(new Uint16Array(1));
 
   const mousePosition = useAtomValue(mousePositionAtom);
-  const mouseLeaveEvent = useAtomValue(eventMouseLeaveAtom);
+  const _mouseLeaveEvent = useAtomValue(eventMouseLeaveAtom);
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
   const changeAnnotationHovered = useSetAtom(
@@ -44,11 +41,18 @@ const useAnnotation = ({
       timeline: data,
       xScale
     });
-  }, [mousePosition]);
+  }, [
+    mousePosition,
+    annotationHoveredId,
+    changeAnnotationHovered,
+    data,
+    graphWidth,
+    xScale
+  ]);
 
   useEffect(() => {
     setAnnotationHovered(undefined);
-  }, [mouseLeaveEvent]);
+  }, [setAnnotationHovered]);
 
   return annotationHoveredId;
 };

package/src/Graph/Chart/InteractiveComponents/Bar.tsx

@@ -1,4 +1,4 @@
-import { AddSVGProps } from '@visx/shape/lib/types';
+import type { AddSVGProps } from '@visx/shape/lib/types';
 import { Shape } from '@visx/visx';
 
 interface BarProps {

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -1,11 +1,10 @@
-import { equals } from 'ramda';
-
 import { Typography } from '@mui/material';
 
+import { equals } from 'ramda';
+
 import { Tooltip as MuiTooltip } from '../../../../components/Tooltip';
 import { useTooltipStyles } from '../../../common/useTooltipStyles';
-import { ThresholdTooltip, Tooltip } from '../../models';
-
+import type { ThresholdTooltip, Tooltip } from '../../models';
 import GraphValueTooltipContent from './GraphValueTooltipContent';
 
 interface Props {

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx

@@ -1,12 +1,11 @@
+import { Box, Typography } from '@mui/material';
+
 import { useAtomValue } from 'jotai';
 import { equals, isNil } from 'ramda';
 
-import { Box, Typography } from '@mui/material';
-
 import { formatMetricValueWithUnit } from '../../../common/timeSeries';
-import { Tooltip } from '../../models';
+import type { Tooltip } from '../../models';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
-
 import { useGraphValueTooltip } from './useGraphValueTooltip';
 import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
 

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,6 +1,5 @@
 import { useAtomValue } from 'jotai';
 import {
-  T,
   always,
   cond,
   equals,
@@ -8,11 +7,12 @@ import {
   isNil,
   prop,
   reverse,
-  sortBy
+  sortBy,
+  T
 } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '../../../../utils';
-import { GraphTooltipData, Tooltip } from '../../models';
+import type { GraphTooltipData, Tooltip } from '../../models';
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 
 interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import { useMemoComponent } from '@centreon/ui';
 
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { useMemoComponent } from '@centreon/ui';
-
-import { TimeShiftDirection } from './models';
+import type { TimeShiftDirection } from './models';
 
 export const timeShiftIconSize = 20;
 
@@ -46,6 +45,7 @@ const TimeShiftIcon = ({
     Component: (
       <g>
         <svg {...svgProps}>
+          <title>time shift icon</title>
           <rect
             fill="transparent"
             height={timeShiftIconSize}

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx

@@ -1,13 +1,11 @@
-import { Dispatch, SetStateAction } from 'react';
+import { alpha, useTheme } from '@mui/material';
 
 import { Shape } from '@visx/visx';
 import { equals, negate } from 'ramda';
+import type { Dispatch, SetStateAction } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { alpha, useTheme } from '@mui/material';
-
-import { GraphInterval, Interval } from '../../models';
-
+import type { GraphInterval, Interval } from '../../models';
 import { TimeShiftDirection } from './models';
 import { useTimeShiftZones } from './useTimeShiftZones';
 
@@ -57,6 +55,9 @@ const TimeShiftZone = ({
           : 'transparent'
       }
       height={graphHeight}
+      onClick={handleClick}
+      onMouseLeave={(): void => onDirectionHover(null)}
+      onMouseOver={(): void => onDirectionHover(direction)}
       width={timeShiftZoneWidth}
       x={
         equals(direction, TimeShiftDirection.backward)
@@ -64,9 +65,6 @@ const TimeShiftZone = ({
           : graphWidth
       }
       y={0}
-      onClick={handleClick}
-      onMouseLeave={(): void => onDirectionHover(null)}
-      onMouseOver={(): void => onDirectionHover(direction)}
     />
   );
 };

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/index.tsx

@@ -1,16 +1,14 @@
-import { useState } from 'react';
-
-import { equals, isNil, negate } from 'ramda';
-
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
-import { margin } from '../../common';
-import { GraphInterval, Interval } from '../../models';
+import { equals, isNil, negate } from 'ramda';
+import { useState } from 'react';
 
+import { margin } from '../../common';
+import type { GraphInterval, Interval } from '../../models';
+import { TimeShiftDirection } from './models';
 import TimeShiftIcon, { timeShiftIconSize } from './TimeShiftIcon';
 import TimeShiftZone from './TimeShiftZone';
-import { TimeShiftDirection } from './models';
 
 interface Props {
   getInterval?: (args: Interval) => void;
@@ -70,9 +68,9 @@ const TimeShiftZones = ({
       />
       {displayIcon && (
         <TimeShiftIcon
-          Icon={Icon}
           ariaLabel={ariaLabelIcon}
           directionHovered={directionHovered}
+          Icon={Icon}
           xIcon={xIcon}
           yIcon={yIcon}
         />

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/models.ts

@@ -1,4 +1,4 @@
-import { GraphInterval, GraphIntervalProperty } from '../../models';
+import type { GraphInterval, GraphIntervalProperty } from '../../models';
 
 export enum TimeShiftDirection {
   backward = 0,

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
-
 import { add, equals, negate, prop } from 'ramda';
+import { useCallback, useEffect, useState } from 'react';
 
-import { GraphInterval, GraphIntervalProperty, Interval } from '../../models';
-
-import { GetShiftDate, TimeShiftDirection } from './models';
+import {
+  type GraphInterval,
+  GraphIntervalProperty,
+  type Interval
+} from '../../models';
+import { type GetShiftDate, TimeShiftDirection } from './models';
 
 interface Props {
   direction: TimeShiftDirection;
@@ -20,34 +22,37 @@ export const useTimeShiftZones = ({
   const [start, setStart] = useState<Date>();
   const [end, setEnd] = useState<Date>();
 
-  const getShiftedDate = ({
-    property,
-    timeShiftDirection,
-    timePeriod
-  }: GetShiftDate): Date | null => {
-    if (!timePeriod?.end || !timePeriod?.start) {
-      return null;
-    }
-    const adjustTimePeriodProps =
-      (new Date(timePeriod.end).getTime() -
-        new Date(timePeriod.start).getTime()) /
-      shiftRatio;
+  const getShiftedDate = useCallback(
+    ({
+      property,
+      timeShiftDirection,
+      timePeriod
+    }: GetShiftDate): Date | null => {
+      if (!timePeriod?.end || !timePeriod?.start) {
+        return null;
+      }
+      const adjustTimePeriodProps =
+        (new Date(timePeriod.end).getTime() -
+          new Date(timePeriod.start).getTime()) /
+        shiftRatio;
 
-    const date = prop(property, timePeriod);
+      const date = prop(property, timePeriod);
 
-    if (!date) {
-      return null;
-    }
+      if (!date) {
+        return null;
+      }
 
-    return new Date(
-      add(
-        new Date(date).getTime(),
-        equals(timeShiftDirection, TimeShiftDirection.backward)
-          ? negate(adjustTimePeriodProps)
-          : adjustTimePeriodProps
-      )
-    );
-  };
+      return new Date(
+        add(
+          new Date(date).getTime(),
+          equals(timeShiftDirection, TimeShiftDirection.backward)
+            ? negate(adjustTimePeriodProps)
+            : adjustTimePeriodProps
+        )
+      );
+    },
+    []
+  );
 
   useEffect(() => {
     const endInterval = getShiftedDate({
@@ -67,7 +72,13 @@ export const useTimeShiftZones = ({
     }
     setStart(startInterval);
     setEnd(endInterval);
-  }, [graphInterval.end, graphInterval.start, direction]);
+  }, [
+    graphInterval.end,
+    graphInterval.start,
+    direction,
+    getShiftedDate,
+    graphInterval
+  ]);
 
   return { end, start } as Interval;
 };

package/src/Graph/Chart/InteractiveComponents/Tooltip/index.tsx

@@ -1,12 +1,10 @@
-import { useEffect } from 'react';
-
-import { equals } from 'ramda';
-
 import { Paper } from '@mui/material';
 
-import { Tooltip } from '../../models';
+import { equals } from 'ramda';
+import { useCallback, useEffect } from 'react';
 
-import { GraphTooltip as GraphTooltipModel, width } from './models';
+import type { Tooltip } from '../../models';
+import { type GraphTooltip as GraphTooltipModel, width } from './models';
 
 interface Props extends GraphTooltipModel, Tooltip {
   [x: string]: unknown;
@@ -20,11 +18,14 @@ const GraphTooltip = ({
   renderComponent,
   tooltipOpen
 }: Props): JSX.Element | null => {
-  const hideTooltipOnEscapePress = (event: globalThis.KeyboardEvent): void => {
-    if (equals(event.key, 'Escape')) {
-      hideTooltip();
-    }
-  };
+  const hideTooltipOnEscapePress = useCallback(
+    (event: globalThis.KeyboardEvent): void => {
+      if (equals(event.key, 'Escape')) {
+        hideTooltip();
+      }
+    },
+    [hideTooltip]
+  );
 
   useEffect(() => {
     document.addEventListener('keydown', hideTooltipOnEscapePress, false);
@@ -32,7 +33,7 @@ const GraphTooltip = ({
     return (): void => {
       document.removeEventListener('keydown', hideTooltipOnEscapePress, false);
     };
-  }, []);
+  }, [hideTooltipOnEscapePress]);
 
   if (!tooltipOpen) {
     return null;

package/src/Graph/Chart/InteractiveComponents/Tooltip/useGraphTooltip.ts

@@ -1,15 +1,13 @@
-import { useEffect } from 'react';
-
 import { Event, Tooltip } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
+import { useEffect } from 'react';
 
-import { TimeValue } from '../../../common/timeSeries/models';
+import type { TimeValue } from '../../../common/timeSeries/models';
 import { getDate } from '../../helpers/index';
-import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
 import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
-
-import { GraphTooltip, width } from './models';
+import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
+import { type GraphTooltip, width } from './models';
 
 interface Props {
   graphWidth: number;
@@ -53,7 +51,15 @@ const useGraphTooltip = ({
       tooltipLeft: displayLeft ? x - tooltipWidth : x,
       tooltipTop: y
     });
-  }, [mouseUpEvent]);
+  }, [
+    mouseUpEvent,
+    graphWidth,
+    isZoomApplied,
+    showTooltip,
+    timeSeries,
+    tooltipWidth,
+    xScale
+  ]);
 
   return {
     hideTooltip,

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/index.tsx

@@ -1,11 +1,10 @@
-import { omit } from 'ramda';
-
 import { alpha, useTheme } from '@mui/system';
 
-import Bar from '../Bar';
+import { omit } from 'ramda';
 
 import { margin } from '../../common';
-import { ZoomPreviewData } from './models';
+import Bar from '../Bar';
+import type { ZoomPreviewData } from './models';
 import useZoomPreview from './useZoomPreview';
 
 const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
@@ -23,10 +22,10 @@ const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
 
   const { zoomBarWidth, zoomBoundaries } = useZoomPreview({
     getInterval,
-    graphWidth,
-    xScale,
+    graphMarginLeft,
     graphSvgRef,
-    graphMarginLeft
+    graphWidth,
+    xScale
   });
 
   const restData = omit(['enable'], { ...rest });

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/models.ts

@@ -1,7 +1,7 @@
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
+import type { RefObject } from 'react';
 
-import { RefObject } from 'react';
-import { InteractedZone } from '../../models';
+import type { InteractedZone } from '../../models';
 
 export interface ZoomPreviewData extends InteractedZone {
   graphHeight: number;

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/useZoomPreview.ts

@@ -1,10 +1,10 @@
-import { RefObject, useEffect, useState } from 'react';
-
 import { Event } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
 import { useAtom, useAtomValue } from 'jotai';
 import { equals, gte, isNil, lt } from 'ramda';
-import { Interval } from '../../models';
+import { type RefObject, useCallback, useEffect, useState } from 'react';
+
+import type { Interval } from '../../models';
 import {
   eventMouseDownAtom,
   eventMouseUpAtom,
@@ -55,12 +55,12 @@ const useZoomPreview = ({
     ? mousePosition[0] - graphMarginLeft
     : null;
 
-  const applyZoom = (): void => {
+  const applyZoom = useCallback((): void => {
     getInterval?.({
       end: xScale?.invert(zoomBoundaries?.end || graphWidth),
       start: xScale?.invert(zoomBoundaries?.start || 0)
     });
-  };
+  }, [xScale, zoomBoundaries, graphWidth, getInterval]);
 
   useEffect(() => {
     if (isNil(mouseDownPositionX) || isNil(movingMousePositionX)) {
@@ -86,7 +86,7 @@ const useZoomPreview = ({
     }
     applyZoom();
     setApplyingZoom(false);
-  }, [eventMouseUp]);
+  }, [eventMouseUp, applyZoom, setApplyingZoom, zoomBoundaries]);
 
   useEffect(() => {
     if (isNil(zoomBoundaries)) {
@@ -96,7 +96,7 @@ const useZoomPreview = ({
       return;
     }
     setApplyingZoom(true);
-  }, [zoomBoundaries]);
+  }, [zoomBoundaries, setApplyingZoom]);
 
   useEffect(() => {
     if (isApplyingZoom) {