@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Timeline/Timeline.cypress.spec.tsx

@@ -1,43 +1,45 @@
 import { userAtom } from '@centreon/ui-context';
-import { Provider, createStore } from 'jotai';
+
+import { createStore, Provider } from 'jotai';
+
+import type { Tooltip } from './models';
 import Timeline from './Timeline';
-import { Tooltip } from './models';
 
 const data = [
   {
-    start: '2024-09-09T10:57:42+02:00',
+    color: 'green',
     end: '2024-09-09T11:15:00+02:00',
-    color: 'green'
+    start: '2024-09-09T10:57:42+02:00'
   },
   {
-    start: '2024-09-09T11:15:00+02:00',
+    color: 'red',
     end: '2024-09-09T11:30:00+02:00',
-    color: 'red'
+    start: '2024-09-09T11:15:00+02:00'
   },
   {
-    start: '2024-09-09T11:30:00+02:00',
+    color: 'gray',
     end: '2024-09-09T11:45:00+02:00',
-    color: 'gray'
+    start: '2024-09-09T11:30:00+02:00'
   },
   {
-    start: '2024-09-09T11:45:00+02:00',
+    color: 'green',
     end: '2024-09-09T12:00:00+02:00',
-    color: 'green'
+    start: '2024-09-09T11:45:00+02:00'
   },
   {
-    start: '2024-09-09T12:00:00+02:00',
+    color: 'red',
     end: '2024-09-09T12:20:00+02:00',
-    color: 'red'
+    start: '2024-09-09T12:00:00+02:00'
   },
   {
-    start: '2024-09-09T12:20:00+02:00',
+    color: 'gray',
     end: '2024-09-09T12:40:00+02:00',
-    color: 'gray'
+    start: '2024-09-09T12:20:00+02:00'
   },
   {
-    start: '2024-09-09T12:40:00+02:00',
+    color: 'green',
     end: '2024-09-09T12:57:42+02:00',
-    color: 'green'
+    start: '2024-09-09T12:40:00+02:00'
   }
 ];
 
@@ -48,11 +50,11 @@ const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
   <div
     data-testid="tooltip-content"
     style={{
+      alignItems: 'center',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
       gap: '10px',
+      justifyContent: 'center',
       padding: '5px'
     }}
   >
@@ -64,7 +66,7 @@ const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
 );
 
 const store = createStore();
-store.set(userAtom, { timezone: 'Europe/Paris', locale: 'en' });
+store.set(userAtom, { locale: 'en', timezone: 'Europe/Paris' });
 
 const initialize = (displayDefaultTooltip = true): void => {
   cy.mount({
@@ -78,8 +80,8 @@ const initialize = (displayDefaultTooltip = true): void => {
         >
           <Timeline
             data={data}
-            startDate={startDate}
             endDate={endDate}
+            startDate={startDate}
             TooltipContent={displayDefaultTooltip ? undefined : TooltipContent}
           />
         </div>

package/src/Graph/Timeline/Timeline.stories.tsx

@@ -1,23 +1,24 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Typography } from '@mui/material';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
 import Timeline from './Timeline';
 
 const data = [
   {
-    start: '2024-09-25T21:00:42+01:00',
+    color: 'gray',
     end: '2024-09-25T21:15:00+01:00',
-    color: 'gray'
+    start: '2024-09-25T21:00:42+01:00'
   },
   {
-    start: '2024-09-25T21:15:00+01:00',
+    color: 'green',
     end: '2024-09-25T21:54:00+01:00',
-    color: 'green'
+    start: '2024-09-25T21:15:00+01:00'
   },
   {
-    start: '2024-09-25T21:54:00+01:00',
+    color: 'red',
     end: '2024-09-25T22:30:00+01:00',
-    color: 'red'
+    start: '2024-09-25T21:54:00+01:00'
   }
 ];
 
@@ -26,7 +27,7 @@ const endDate = '2024-09-25T22:30:00+01:00';
 
 const Template = (args): JSX.Element => {
   return (
-    <div style={{ width: '700px', height: '100px' }}>
+    <div style={{ height: '100px', width: '700px' }}>
       <Timeline {...args} />
     </div>
   );
@@ -48,40 +49,40 @@ type Story = StoryObj<typeof Timeline>;
 export const Normal: Story = {
   args: {
     data,
-    startDate,
-    endDate
+    endDate,
+    startDate
   }
 };
 
 export const WithoutData: Story = {
   args: {
     data: [],
-    startDate,
-    endDate
+    endDate,
+    startDate
   }
 };
 
 export const WithSmallerTimeRangeThanData: Story = {
   args: {
     data,
-    startDate,
-    endDate: '2024-09-25T22:00:00+01:00'
+    endDate: '2024-09-25T22:00:00+01:00',
+    startDate
   }
 };
 
 export const WithCustomTooltip: Story = {
   args: {
     data,
-    startDate,
     endDate,
+    startDate,
     TooltipContent: ({ duration, color }) => (
       <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
         <div
           style={{
             backgroundColor: color,
-            width: '20px',
+            borderRadius: '4px',
             height: '20px',
-            borderRadius: '4px'
+            width: '20px'
           }}
         />
         <Typography>{duration}</Typography>

package/src/Graph/Timeline/Timeline.tsx

@@ -1,8 +1,8 @@
 import type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
-import { ParentSize } from '../..';
 
-import ResponsiveTimeline from './ResponsiveTimeline';
+import { ParentSize } from '../..';
 import type { TimelineProps } from './models';
+import ResponsiveTimeline from './ResponsiveTimeline';
 
 interface Props extends ParentSizeProps, TimelineProps {}
 
@@ -18,11 +18,11 @@ const Timeline = ({
     {({ width, height }) => (
       <ResponsiveTimeline
         data={data}
-        startDate={startDate}
         endDate={endDate}
+        height={height}
+        startDate={startDate}
         TooltipContent={TooltipContent}
         tooltipClassName={tooltipClassName}
-        height={height}
         width={width}
       />
     )}

package/src/Graph/Timeline/timeline.styles.ts

@@ -3,9 +3,9 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()((theme) => ({
   tooltip: {
     backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(1),
     boxShadow: theme.shadows[3],
-    maxWidth: 'none'
+    color: theme.palette.text.primary,
+    maxWidth: 'none',
+    padding: theme.spacing(1)
   }
 }));

package/src/Graph/Timeline/useTimeline.ts

@@ -1,8 +1,9 @@
-import dayjs, { Dayjs } from 'dayjs';
-
 import { usePluralizedTranslation } from '@centreon/ui';
+
+import dayjs, { type Dayjs } from 'dayjs';
 import { lt } from 'ramda';
 import { useCallback } from 'react';
+
 import {
   labelDay,
   labelHour,
@@ -36,27 +37,30 @@ export const useTimeline = (): UseTimelineState => {
 
       const timeUnits = [
         {
-          value: diffDuration.years(),
-          unit: pluralizedT({ label: labelYear, count: diffDuration.years() })
+          unit: pluralizedT({ count: diffDuration.years(), label: labelYear }),
+          value: diffDuration.years()
         },
         {
-          value: diffDuration.months(),
-          unit: pluralizedT({ label: labelMonth, count: diffDuration.months() })
+          unit: pluralizedT({
+            count: diffDuration.months(),
+            label: labelMonth
+          }),
+          value: diffDuration.months()
         },
         {
-          value: diffDuration.days(),
-          unit: pluralizedT({ label: labelDay, count: diffDuration.days() })
+          unit: pluralizedT({ count: diffDuration.days(), label: labelDay }),
+          value: diffDuration.days()
         },
         {
-          value: diffDuration.hours(),
-          unit: pluralizedT({ label: labelHour, count: diffDuration.hours() })
+          unit: pluralizedT({ count: diffDuration.hours(), label: labelHour }),
+          value: diffDuration.hours()
         },
         {
-          value: diffDuration.minutes(),
           unit: pluralizedT({
-            label: labelMinute,
-            count: diffDuration.minutes()
-          })
+            count: diffDuration.minutes(),
+            label: labelMinute
+          }),
+          value: diffDuration.minutes()
         }
       ];
 
@@ -66,7 +70,7 @@ export const useTimeline = (): UseTimelineState => {
 
       return readableUnits.slice(0, 2).join(', ');
     },
-    []
+    [pluralizedT]
   );
 
   const getWidth = useCallback(

package/src/Graph/Tree/DescendantNodes.tsx

@@ -1,10 +1,9 @@
-import { useState } from 'react';
-
 import { Group } from '@visx/group';
-import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import type { HierarchyPointNode } from '@visx/hierarchy/lib/types';
 import { gt, isNil, pluck } from 'ramda';
+import { useState } from 'react';
 
-import { BaseProp, Node, TreeProps } from './models';
+import type { BaseProp, Node, TreeProps } from './models';
 
 interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
   descendants: Array<HierarchyPointNode<Node<TData>>>;

package/src/Graph/Tree/Links.tsx

@@ -1,14 +1,14 @@
-import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+import { useTheme } from '@mui/material';
+
+import type { HierarchyPointLink } from '@visx/hierarchy/lib/types';
 import {
   LinkHorizontal,
   LinkHorizontalLine,
   LinkHorizontalStep
 } from '@visx/shape';
-import { T, always, cond, equals } from 'ramda';
-
-import { useTheme } from '@mui/material';
+import { always, cond, equals, T } from 'ramda';
 
-import { BaseProp, Node, TreeProps } from './models';
+import type { BaseProp, Node, TreeProps } from './models';
 
 interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;

package/src/Graph/Tree/StandaloneTree.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 
 import { ParentSize } from '../..';
-
+import type { BaseProp, TreeProps } from './models';
 import { Tree } from './Tree';
-import { BaseProp, TreeProps } from './models';
 
 export const StandaloneTree = <TData extends BaseProp>({
   tree,
@@ -18,6 +17,7 @@ export const StandaloneTree = <TData extends BaseProp>({
     <ParentSize>
       {({ width, height }) => (
         <svg height={height} width={width}>
+          <title>Tree</title>
           <Tree
             {...props}
             changeTree={setTree}

package/src/Graph/Tree/Tree.cypress.spec.tsx

@@ -1,15 +1,14 @@
 import { equals } from 'ramda';
 
+import { type Node, StandaloneTree, type TreeProps } from '.';
 import { ComplexContent, SimpleContent } from './stories/contents';
 import {
-  ComplexData,
-  SimpleData,
+  type ComplexData,
   complexData,
+  type SimpleData,
   simpleData
 } from './stories/datas';
 
-import { Node, StandaloneTree, TreeProps } from '.';
-
 const validateTree = (tree): void => {
   if (!tree.children) {
     cy.contains(tree.data.name).should('be.visible');
@@ -17,7 +16,7 @@ const validateTree = (tree): void => {
     return;
   }
 
-  cy.contains(tree.data.name).should('be.visible');
+  cy.contains(new RegExp(`^${tree.data.name}$`)).should('be.visible');
   tree.children.forEach((child) => {
     validateTree(child);
   });
@@ -178,7 +177,7 @@ describe('Complex data tree', () => {
       }
     });
 
-    cy.contains('T').should('be.visible');
+    cy.contains(/^T$/).should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -190,7 +189,7 @@ describe('Complex data tree', () => {
       }
     });
 
-    cy.contains('T').should('be.visible');
+    cy.contains(/^T$/).should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/Tree/Tree.stories.tsx

@@ -1,21 +1,18 @@
-import { useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { equals, has } from 'ramda';
+import { useState } from 'react';
 
 import { Zoom } from '../../components';
-
+import { StandaloneTree, Tree, type TreeProps } from '.';
 import { ComplexContent, SimpleContent } from './stories/contents';
 import {
-  ComplexData,
-  SimpleData,
+  type ComplexData,
   complexData,
   moreComplexData,
+  type SimpleData,
   simpleData
 } from './stories/datas';
 
-import { StandaloneTree, Tree, TreeProps } from '.';
-
 const meta: Meta<typeof StandaloneTree> = {
   component: StandaloneTree
 };
@@ -38,10 +35,10 @@ const TreeWithZoom = <TData,>({
   return (
     <div style={{ height: '90vh', width: '100%' }}>
       <Zoom
-        showMinimap
         labels={{
           clear: 'Clear'
         }}
+        showMinimap
       >
         {({ width, height }) => (
           <Tree<ComplexData>
@@ -156,8 +153,8 @@ export const treeWithZoom: Story = {
       getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
-  render: TreeWithZoom,
   parameters: {
     chromatic: { disableSnapshot: true }
-  }
+  },
+  render: TreeWithZoom
 };

package/src/Graph/Tree/Tree.tsx

@@ -1,15 +1,13 @@
-import { useCallback, useMemo } from 'react';
-
 import { Group } from '@visx/group';
-import { Tree as VisxTree, hierarchy } from '@visx/hierarchy';
+import { hierarchy, Tree as VisxTree } from '@visx/hierarchy';
 import { isNil } from 'ramda';
+import { useCallback, useMemo } from 'react';
 
 import { useDeepCompare } from '../../utils';
-
+import { nodeMargins } from './constants';
 import DescendantNodes from './DescendantNodes';
 import Links from './Links';
-import { nodeMargins } from './constants';
-import { BaseProp, Node, TreeProps } from './models';
+import type { BaseProp, Node, TreeProps } from './models';
 import { updateNodeFromTree } from './utils';
 
 export const Tree = <TData extends BaseProp>({
@@ -26,7 +24,7 @@ export const Tree = <TData extends BaseProp>({
       ...tree,
       isExpanded: true
     }),
-    useDeepCompare([tree])
+    [...useDeepCompare([tree]), tree]
   );
 
   const toggleTreeNodesExpanded = useCallback(
@@ -58,7 +56,7 @@ export const Tree = <TData extends BaseProp>({
         toggleTreeNodesExpanded({ currentTree: formattedTree, targetNode })
       );
     },
-    [formattedTree]
+    [formattedTree, changeTree, toggleTreeNodesExpanded]
   );
 
   const getExpanded = useCallback(

package/src/Graph/Tree/index.ts

@@ -1,4 +1,4 @@
-export { Tree } from './Tree';
+export type { ChildrenProps, Node, TreeProps } from './models';
 export { StandaloneTree } from './StandaloneTree';
+export { Tree } from './Tree';
 export * from './utils';
-export type { Node, TreeProps, ChildrenProps } from './models';

package/src/Graph/Tree/stories/contents.tsx

@@ -1,11 +1,10 @@
-import { T, always, cond, equals, has } from 'ramda';
-
 import SpaIcon from '@mui/icons-material/Spa';
 import { Avatar, Paper, Typography, useTheme } from '@mui/material';
 
-import { ChildrenProps } from '..';
+import { always, cond, equals, has, T } from 'ramda';
 
-import { ComplexData, SimpleData } from './datas';
+import type { ChildrenProps } from '..';
+import type { ComplexData, SimpleData } from './datas';
 
 export const SimpleContent = ({
   node,
@@ -47,6 +46,9 @@ export const SimpleContent = ({
 
   return (
     <Paper
+      onClick={() => {
+        expandCollapseNode(node);
+      }}
       sx={{
         alignItems: 'center',
         backgroundColor: fillColor,
@@ -59,9 +61,6 @@ export const SimpleContent = ({
         position: 'relative',
         width: nodeSize.width
       }}
-      onClick={() => {
-        expandCollapseNode(node);
-      }}
     >
       {!node.children && (
         <SpaIcon
@@ -124,13 +123,13 @@ export const ComplexContent = ({
         }}
       >
         <Avatar
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp(() => expandCollapseNode(node))}
           sx={{
             backgroundColor: fillColor,
             color: theme.palette.text.primary,
             cursor: 'pointer'
           }}
-          onMouseDown={onMouseDown}
-          onMouseUp={onMouseUp(() => expandCollapseNode(node))}
         >
           {node.data.count}
         </Avatar>

package/src/Graph/Tree/stories/datas.ts

@@ -1,4 +1,4 @@
-import { Node } from '../models';
+import type { Node } from '../models';
 
 export interface SimpleData {
   id: number;

package/src/Graph/Tree/utils.ts

@@ -1,6 +1,6 @@
 import { equals, omit } from 'ramda';
 
-import { BaseProp, Node } from './models';
+import type { BaseProp, Node } from './models';
 
 interface UpdateNodeFromTreeProps<TData> {
   callback: (tree: Node<TData>) => Partial<Node<TData>>;

package/src/Graph/common/Axes/UnitLabel.tsx

@@ -1,6 +1,5 @@
 import SelectField from '../../../InputField/Select';
 import { commonTickLabelProps } from '../utils';
-
 import { useYAxisStyles } from './AxisStyles';
 
 interface UnitLabelProps {
@@ -26,13 +25,13 @@ const UnitLabel = ({
         <SelectField
           className={classes.axisInput}
           dataTestId="unit-selector"
+          onChange={(e) => onUnitChange(e.target.value)}
           options={units.map((unitOption) => ({
             id: unitOption,
             name: unitOption
           }))}
           selectedOptionId={unit}
           size="small"
-          onChange={(e) => onUnitChange(e.target.value)}
         />
       </div>
     </foreignObject>

package/src/Graph/common/Axes/index.tsx

@@ -1,15 +1,14 @@
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
 import { Axis } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { equals, head, isNil, last } from 'ramda';
 
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
 import { margin } from '../../Chart/common';
 import { getXAxisTickFormat } from '../../Chart/helpers';
 import { getUnits } from '../timeSeries';
-
+import type { Data } from './models';
 import UnitLabel from './UnitLabel';
-import { Data } from './models';
 import useAxisY from './useAxisY';
 
 interface Props {
@@ -81,11 +80,11 @@ const Axes = ({
 
       {axisLeft.displayUnit && (
         <UnitLabel
+          onUnitChange={data.axisYLeft?.onUnitChange}
           unit={axisLeft.unit}
           units={allUnits}
           x={isHorizontal ? -8 : width + 8}
           y={isHorizontal ? 16 : -2}
-          onUnitChange={data.axisYLeft?.onUnitChange}
         />
       )}
 
@@ -122,11 +121,11 @@ const Axes = ({
       )}
       {axisRight.displayUnit && (
         <UnitLabel
+          onUnitChange={data.axisYRight?.onUnitChange}
           unit={axisRight.unit}
           units={allUnits}
           x={width}
           y={isHorizontal ? 16 : -(height + 8)}
-          onUnitChange={data.axisYRight?.onUnitChange}
         />
       )}
     </g>

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

@@ -1,5 +1,5 @@
-import { ChartAxis } from '../../Chart/models';
-import { Line, TimeValue } from '../timeSeries/models';
+import type { ChartAxis } from '../../Chart/models';
+import type { Line, TimeValue } from '../timeSeries/models';
 
 export interface LabelProps {
   [x: string]: unknown;

package/src/Graph/common/Axes/useAxisY.ts

@@ -1,13 +1,11 @@
-import { useMemo } from 'react';
+import { useTheme } from '@mui/material';
 
 import type { Axis } from '@visx/visx';
 import { isNil } from 'ramda';
-
-import { useTheme } from '@mui/material';
+import { useMemo } from 'react';
 
 import { formatMetricValueWithUnit, getUnits } from '../timeSeries';
 import { commonTickLabelProps } from '../utils';
-
 import type { Data, LabelProps } from './models';
 
 interface AxisYData {

package/src/Graph/common/BaseChart/AdditionalLine.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { AdditionalLineProps } from '../models';
+
+import type { AdditionalLineProps } from '../models';
 
 interface Props extends AdditionalLineProps {
   graphWidth: number;
@@ -18,17 +19,17 @@ const AdditionalLine = ({
   return (
     <g>
       {text && (
-        <text x={8} y={positionY - 8} fill={color} style={{ fontSize: '10px' }}>
+        <text fill={color} style={{ fontSize: '10px' }} x={8} y={positionY - 8}>
           {text}
         </text>
       )}
       <line
+        data-testid={`${color}-${yValue}`}
+        stroke={color}
         x1={0}
         x2={graphWidth}
         y1={positionY}
         y2={positionY}
-        stroke={color}
-        data-testid={`${color}-${yValue}`}
       />
     </g>
   );