@centreon/ui 24.4.1-MON-38194-widgets-display-optimizations.0 → 24.4.1-MON-38194-widgets-display-optimizations.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-38194-widgets-display-optimizations.0",
+  "version": "24.4.1-MON-38194-widgets-display-optimizations.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -82,7 +82,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "axios-mock-adapter": "^1.22.0",
-    "cypress": "^13.7.0",
+    "cypress": "^13.7.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -114,15 +114,20 @@
     "@lexical/selection": "^0.12.6",
     "@lexical/utils": "^0.12.6",
     "@react-spring/web": "^9.7.3",
+    "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
+    "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
+    "@visx/hierarchy": "^3.3.0",
     "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.3.0",
+    "@visx/point": "^3.3.0",
     "@visx/scale": "^3.5.0",
-    "@visx/shape": "^2.12.2",
+    "@visx/shape": "^2.18.0",
     "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
+    "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
     "humanize-duration": "^3.31.0",

package/src/Dashboard/Dashboard.styles.ts

@@ -76,7 +76,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       border: 'none',
       borderRadius: theme.spacing(1),
       height: '100%',
-      paddingBottom: theme.spacing(2),
+      paddingBottom: theme.spacing(4),
       width: '100%'
     },
     widgetContent: {
@@ -92,17 +92,19 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(0.5, 2),
+      padding: theme.spacing(2.5, 2.5, 0.5),
       position: 'relative'
     },
     widgetHeaderDraggable: {
       height: '100%',
+      left: 0,
       position: 'absolute',
+      top: 0,
       width: '100%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
+      padding: hasHeader ? theme.spacing(1, 2.5, 3) : theme.spacing(1, 2)
     }
   })
 );

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -6,7 +6,7 @@ interface MakeStylesProps {
   limitLegendRows?: boolean;
 }
 
-export const legendWidth = 21;
+export const legendWidth = 25;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
@@ -62,12 +62,6 @@ interface StylesProps {
 
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
-    container: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
-      width: '100%'
-    },
     disabled: {
       color: theme.palette.text.disabled
     },
@@ -78,12 +72,6 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       minWidth: theme.spacing(1.5),
       width: theme.spacing(1.5)
     },
-    legendName: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
-    },
     markerAndLegendName: {
       alignItems: 'center',
       display: 'flex',
@@ -97,7 +85,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightBold,
       lineHeight: 1
     }
   })

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -1,5 +1,3 @@
-import { isEmpty } from 'ramda';
-
 import { Typography } from '@mui/material';
 
 import {
@@ -36,60 +34,47 @@ const LegendHeader = ({
   const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
-  const hasUnit = !isEmpty(unit);
   const unitName = `(${unit})`;
 
-  const getEndText = (): string => {
-    if (value) {
-      return value;
-    }
-
-    return hasUnit ? ` ${unitName}` : '';
-  };
-
   return (
-    <div className={classes.container}>
-      <Tooltip
-        followCursor={false}
-        label={
-          minMaxAvg ? (
-            <div>
-              <Typography>{`${legendName} ${unitName}`}</Typography>
-              <div className={classes.minMaxAvgContainer}>
-                {minMaxAvg.map(({ label, value: subValue }) => (
-                  <LegendContent
-                    data={formatMetricValue({
-                      unit: line.unit,
-                      value: subValue
-                    })}
-                    key={label}
-                    label={label}
-                  />
-                ))}
-              </div>
+    <Tooltip
+      followCursor={false}
+      label={
+        minMaxAvg ? (
+          <div>
+            <Typography>{`${legendName} ${unitName}`}</Typography>
+            <div className={classes.minMaxAvgContainer}>
+              {minMaxAvg.map(({ label, value: subValue }) => (
+                <LegendContent
+                  data={formatMetricValue({
+                    unit: line.unit,
+                    value: subValue
+                  })}
+                  key={label}
+                  label={label}
+                />
+              ))}
             </div>
-          ) : (
-            `${legendName} ${unitName}`
-          )
-        }
-        placement="top"
-      >
-        <div className={classes.markerAndLegendName}>
-          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
-          <EllipsisTypography
-            className={cx(classes.text, classes.legendName)}
-            data-mode={
-              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
-            }
-          >
-            {metricName}
-          </EllipsisTypography>
-        </div>
-      </Tooltip>
-      {hasUnit && (
-        <Typography className={classes.text}>{getEndText()}</Typography>
-      )}
-    </div>
+          </div>
+        ) : (
+          `${legendName} ${unitName}`
+        )
+      }
+      placement="top"
+    >
+      <div className={classes.markerAndLegendName}>
+        <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
+        <EllipsisTypography
+          className={classes.text}
+          data-mode={
+            value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
+          }
+          variant="body2"
+        >
+          {metricName}
+        </EllipsisTypography>
+      </div>
+    </Tooltip>
   );
 };
 

package/src/Graph/Tree/DescendantNodes.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+
+import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import { Group } from '@visx/group';
+import { gt, isNil, pluck } from 'ramda';
+
+import { BaseProp, Node, TreeProps } from './models';
+
+interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
+  descendants: Array<HierarchyPointNode<Node<TData>>>;
+  expandCollapseNode: (targetNode: Node<TData>) => void;
+  getExpanded: (d: Node<TData>) => Array<Node<TData>> | undefined;
+  nodeSize: {
+    height: number;
+    width: number;
+  };
+}
+
+const DescendantNodes = <TData extends BaseProp>({
+  descendants,
+  children,
+  expandCollapseNode,
+  getExpanded,
+  nodeSize
+}: Props<TData>): Array<JSX.Element> => {
+  const [pressEventTimeStamp, setPressEventTimeStamp] = useState<number | null>(
+    null
+  );
+
+  const mouseDown = (e: MouseEvent): void => {
+    setPressEventTimeStamp(e.timeStamp);
+  };
+
+  const mouseUp =
+    (callback) =>
+    (e: MouseEvent): void => {
+      if (isNil(pressEventTimeStamp)) {
+        callback();
+
+        return;
+      }
+
+      const diffTimeStamp = e.timeStamp - pressEventTimeStamp;
+
+      if (gt(diffTimeStamp, 120)) {
+        return;
+      }
+
+      callback();
+    };
+
+  return descendants.map((node) => {
+    const top = node.x;
+    const left = node.y;
+    const ancestorIds = node
+      .ancestors()
+      .map((ancestor) => ancestor.data.data.id);
+    const descendantIds = node
+      .descendants()
+      .map((ancestor) => ancestor.data.data.id);
+
+    const key = `${node.data.data.id}-${node.data.data.name}-${ancestorIds.toString()}-${descendantIds.toString()}`;
+
+    return (
+      <Group key={key} left={left} top={top}>
+        <foreignObject
+          height={nodeSize.height}
+          width={nodeSize.width}
+          x={-nodeSize.width / 2}
+          y={-nodeSize.height / 2}
+        >
+          {children({
+            ancestors: pluck('data', node.ancestors()),
+            depth: node.depth,
+            expandCollapseNode,
+            isExpanded: !!getExpanded(node.data),
+            node: node.data,
+            nodeSize,
+            onMouseDown: mouseDown,
+            onMouseUp: mouseUp
+          })}
+        </foreignObject>
+      </Group>
+    );
+  });
+};
+
+export default DescendantNodes;

package/src/Graph/Tree/Links.tsx

@@ -0,0 +1,64 @@
+import { LinkHorizontal } from '@visx/shape';
+import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+
+import { useTheme } from '@mui/material';
+
+import { TreeProps, Node, BaseProp } from './models';
+
+interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
+  links: Array<HierarchyPointLink<Node<TData>>>;
+}
+
+const Links = <TData extends BaseProp>({
+  links,
+  treeLink
+}: Props<TData>): Array<JSX.Element> => {
+  const theme = useTheme();
+
+  return links.map((link) => {
+    const ancestorIds = link.target
+      .ancestors()
+      .map((ancestor) => ancestor.data.data.id);
+
+    const descendantIds = link.target
+      .descendants()
+      .map((ancestor) => ancestor.data.data.id);
+
+    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
+
+    return (
+      <LinkHorizontal
+        data={link}
+        data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
+        fill="none"
+        key={key}
+        stroke={
+          treeLink?.getStroke?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || theme.palette.text.primary
+        }
+        strokeDasharray={
+          treeLink?.getStrokeDasharray?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || '0'
+        }
+        strokeOpacity={
+          treeLink?.getStrokeOpacity?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || 1
+        }
+        strokeWidth={
+          treeLink?.getStrokeWidth?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || '2'
+        }
+      />
+    );
+  });
+};
+
+export default Links;

package/src/Graph/Tree/StandaloneTree.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { ParentSize } from '../..';
+
+import { BaseProp, TreeProps } from './models';
+import { Tree } from './Tree';
+
+export const StandaloneTree = <TData extends BaseProp>({
+  tree,
+  ...props
+}: Omit<
+  TreeProps<TData>,
+  'containerHeight' | 'containerWidth'
+>): JSX.Element => {
+  const [currentTree, setTree] = useState(tree);
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <svg height={height} width={width}>
+          <Tree
+            {...props}
+            changeTree={setTree}
+            containerHeight={height}
+            containerWidth={width}
+            tree={currentTree}
+          />
+        </svg>
+      )}
+    </ParentSize>
+  );
+};

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

@@ -0,0 +1,171 @@
+import { equals } from 'ramda';
+
+import {
+  ComplexData,
+  complexData,
+  SimpleData,
+  simpleData
+} from './stories/datas';
+import { ComplexContent, SimpleContent } from './stories/contents';
+
+import { Node, StandaloneTree, TreeProps } from '.';
+
+const validateTree = (tree): void => {
+  if (!tree.children) {
+    cy.contains(tree.data.name).should('be.visible');
+
+    return;
+  }
+
+  cy.contains(tree.data.name).should('be.visible');
+  tree.children.forEach((child) => {
+    validateTree(child);
+  });
+};
+
+interface InitializeProps
+  extends Pick<TreeProps<SimpleData | ComplexData>, 'treeLink' | 'children'> {
+  data?: Node<SimpleData | ComplexData>;
+  isDefaultExpanded?: (data: SimpleData | ComplexData) => boolean;
+}
+
+const initializeStandaloneTree = ({
+  data = simpleData,
+  isDefaultExpanded = undefined,
+  treeLink,
+  children = SimpleContent
+}: InitializeProps): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '99vh' }}>
+        <StandaloneTree
+          node={{ height: 70, isDefaultExpanded, width: 70 }}
+          tree={data}
+          treeLink={treeLink}
+        >
+          {children}
+        </StandaloneTree>
+      </div>
+    )
+  });
+};
+
+describe('Simple data tree', () => {
+  it('displays the whole tree', () => {
+    initializeStandaloneTree({});
+
+    validateTree(simpleData);
+
+    cy.makeSnapshot();
+  });
+
+  it("collapses a node's childrens when a node is clicked", () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^E$/).should('be.visible');
+    cy.contains(/^E1$/).should('be.visible');
+
+    cy.contains(/^C$/).click();
+
+    cy.contains(/^E$/).should('not.exist');
+    cy.contains(/^E1$/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it("expands a node's childrens when a node is clicked", () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^A$/).click();
+
+    cy.contains(/^A1$/).should('not.exist');
+    cy.contains(/^A2$/).should('not.exist');
+    cy.contains(/^A3$/).should('not.exist');
+    cy.contains(/^C$/).should('not.exist');
+
+    cy.contains(/^A$/).click();
+
+    cy.contains(/^A1$/).should('be.visible');
+    cy.contains(/^A2$/).should('be.visible');
+    cy.contains(/^A3$/).should('be.visible');
+    cy.contains(/^C$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('cannot collapses a node when a leaf is clicked', () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^Z$/).click();
+
+    cy.contains(/^Z$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('expands nodes by default when a prop is set', () => {
+    initializeStandaloneTree({
+      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status)
+    });
+
+    cy.contains(/^T$/).should('be.visible');
+    cy.contains(/^A$/).should('be.visible');
+    cy.contains(/^A3$/).should('be.visible');
+    cy.contains(/^C$/).should('be.visible');
+    cy.contains(/^E$/).should('be.visible');
+    cy.contains(/^E1$/).should('be.visible');
+
+    cy.contains(/^B1$/).should('not.exist');
+    cy.contains(/^D1$/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays customized links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
+        getStrokeDasharray: ({ target }) =>
+          target.status === 'ok' ? '5,5' : '0',
+        getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
+        getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      }
+    });
+
+    cy.contains(/^Z$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('Complex data tree', () => {
+  it('cannot collapse a node when a node is not clickable', () => {
+    initializeStandaloneTree({
+      children: ComplexContent,
+      data: complexData
+    });
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.contains('BA 2').click();
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('collapses a node when a node is clickable', () => {
+    initializeStandaloneTree({
+      children: ComplexContent,
+      data: complexData
+    });
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.contains('2').click();
+
+    cy.contains('BA 3').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});