@centreon/ui 23.10.122 → 24.4.0

package/src/Graph/Text/Text.styles.ts

@@ -1,6 +1,9 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useTextStyles = makeStyles()((theme) => ({
+  critical: {
+    color: theme.palette.error.main
+  },
   graphText: {
     alignItems: 'center',
     display: 'flex',
@@ -9,9 +12,17 @@ export const useTextStyles = makeStyles()((theme) => ({
     height: '100%',
     justifyContent: 'center'
   },
+  threshold: {
+    textAlign: 'center'
+  },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5)
+    gap: theme.spacing(5),
+    whiteSpace: 'nowrap',
+    width: '100%'
+  },
+  warning: {
+    color: theme.palette.warning.main
   }
 }));

package/src/Graph/Text/Text.tsx

@@ -2,6 +2,7 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
+import FluidTypography from '../../Typography/FluidTypography';
 import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValueWithUnit,
@@ -11,7 +12,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { useTextStyles } from './Text.styles';
 
-interface Props {
+export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;
@@ -30,7 +31,7 @@ export const Text = ({
   baseColor
 }: Props): JSX.Element | null => {
   const theme = useTheme();
-  const { classes } = useTextStyles();
+  const { classes, cx } = useTextStyles();
 
   if (isNil(data)) {
     return null;
@@ -74,16 +75,20 @@ export const Text = ({
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
-          <Typography sx={{ color: 'warning.main' }} variant="h5">
-            {labels.warning}
-            {': '}
-            {warningThresholdLabels.join(' - ')}
-          </Typography>
-          <Typography sx={{ color: 'error.main' }} variant="h5">
-            {labels.critical}
-            {': '}
-            {criticalThresholdLabels.join(' - ')}
-          </Typography>
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.warning)}
+            max="30px"
+            pref={14}
+            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.critical)}
+            max="30px"
+            pref={14}
+            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
         </div>
       )}
     </div>

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();
+  });
+});

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

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+import { equals, has } from 'ramda';
+
+import { Zoom } from '../../components';
+
+import {
+  ComplexData,
+  complexData,
+  moreComplexData,
+  SimpleData,
+  simpleData
+} from './stories/datas';
+import { ComplexContent, SimpleContent } from './stories/contents';
+
+import { StandaloneTree, Tree, TreeProps } from '.';
+
+const meta: Meta<typeof StandaloneTree> = {
+  component: StandaloneTree
+};
+
+export default meta;
+type Story = StoryObj<typeof StandaloneTree>;
+
+const StandaloneTreeTemplate = (args): JSX.Element => (
+  <div style={{ height: '90vh', width: '100%' }}>
+    <StandaloneTree<SimpleData> {...args} />
+  </div>
+);
+
+const TreeWithZoom = <TData,>({
+  tree,
+  ...args
+}: TreeProps<TData>): JSX.Element => {
+  const [currentTree, setTree] = useState(tree);
+
+  return (
+    <div style={{ height: '90vh', width: '100%' }}>
+      <Zoom
+        showMinimap
+        labels={{
+          clear: 'Clear'
+        }}
+      >
+        {({ width, height }) => (
+          <Tree<ComplexData>
+            {...args}
+            changeTree={setTree}
+            containerHeight={height}
+            containerWidth={width}
+            tree={currentTree}
+          />
+        )}
+      </Zoom>
+    </div>
+  );
+};
+
+export const DefaultStandaloneTree: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      width: 90
+    },
+    tree: simpleData
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const WithDefaultExpandFilter: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status),
+      width: 90
+    },
+    tree: simpleData
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const WithCustomLinks: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      width: 90
+    },
+    tree: simpleData,
+    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)
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const WithComplexData: Story = {
+  args: {
+    children: ComplexContent,
+    node: {
+      height: 90,
+      isDefaultExpanded: (data: SimpleData) =>
+        equals('critical', data.status) || !has('count', data),
+      width: 90
+    },
+    tree: complexData,
+    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)
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const treeWithZoom: Story = {
+  args: {
+    children: ComplexContent,
+    node: {
+      height: 90,
+      isDefaultExpanded: (data: SimpleData) =>
+        equals('critical', data.status) || !has('count', data),
+      width: 90
+    },
+    tree: moreComplexData,
+    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)
+    }
+  },
+  render: TreeWithZoom
+};

package/src/Graph/Tree/Tree.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useMemo } from 'react';
+
+import { Group } from '@visx/group';
+import { hierarchy, Tree as VisxTree } from '@visx/hierarchy';
+import { isNil } from 'ramda';
+
+import { useDeepCompare } from '../../utils';
+
+import { nodeMargins } from './constants';
+import { BaseProp, Node, TreeProps } from './models';
+import { updateNodeFromTree } from './utils';
+import Links from './Links';
+import DescendantNodes from './DescendantNodes';
+
+export const Tree = <TData extends BaseProp>({
+  containerHeight,
+  containerWidth,
+  tree,
+  node,
+  treeLink = {},
+  changeTree,
+  children
+}: TreeProps<TData>): JSX.Element => {
+  const formattedTree: Node<TData> = useMemo(
+    () => ({
+      ...tree,
+      isExpanded: true
+    }),
+    useDeepCompare([tree])
+  );
+
+  const toggleTreeNodesExpanded = useCallback(
+    ({ currentTree, targetNode }): Node<TData> => {
+      return updateNodeFromTree({
+        callback: (subTree) => {
+          if (isNil(subTree.isExpanded) && isNil(node.isDefaultExpanded)) {
+            return {
+              isExpanded: false
+            };
+          }
+
+          return {
+            isExpanded: isNil(subTree.isExpanded)
+              ? !node.isDefaultExpanded?.(subTree.data)
+              : !subTree.isExpanded || false
+          };
+        },
+        targetNode,
+        tree: currentTree
+      });
+    },
+    [node.isDefaultExpanded]
+  );
+
+  const expandCollapseNode = useCallback(
+    (targetNode: Node<TData>): void => {
+      changeTree?.(
+        toggleTreeNodesExpanded({ currentTree: formattedTree, targetNode })
+      );
+    },
+    [formattedTree]
+  );
+
+  const getExpanded = useCallback(
+    (d: Node<TData>): Array<Node<TData>> | undefined | null => {
+      if (isNil(d.isExpanded) && isNil(node.isDefaultExpanded)) {
+        return d.children;
+      }
+      if (isNil(d.isExpanded)) {
+        return node.isDefaultExpanded?.(d.data) ? d.children : null;
+      }
+
+      return d.isExpanded ? d.children : null;
+    },
+    [node.isDefaultExpanded]
+  );
+
+  const origin = useMemo(
+    () => ({
+      x: 0,
+      y: containerHeight / 2
+    }),
+    [containerHeight]
+  );
+
+  return (
+    <Group left={node.width}>
+      <VisxTree
+        left={0}
+        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        root={hierarchy(formattedTree, getExpanded)}
+        separation={() => 1}
+        size={[containerWidth, containerHeight]}
+        top={0}
+      >
+        {(subTree) => (
+          <Group left={origin.x} top={origin.y}>
+            <Links links={subTree.links()} treeLink={treeLink} />
+
+            <DescendantNodes
+              descendants={subTree.descendants()}
+              expandCollapseNode={expandCollapseNode}
+              getExpanded={getExpanded}
+              nodeSize={{
+                height: node.height,
+                width: node.width
+              }}
+            >
+              {children}
+            </DescendantNodes>
+          </Group>
+        )}
+      </VisxTree>
+    </Group>
+  );
+};

package/src/Graph/Tree/constants.ts

@@ -0,0 +1,2 @@
+export const margins = { bottom: 30, left: 30, right: 30, top: 30 };
+export const nodeMargins = { x: 90, y: 16 };