@centreon/ui 23.10.122 → 24.4.0

package/src/Graph/Tree/index.ts

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

package/src/Graph/Tree/models.ts

@@ -0,0 +1,52 @@
+export interface Node<T> {
+  children?: Array<Node<T>>;
+  data: T;
+  isExpanded?: boolean;
+}
+
+export interface LinkProps<T> {
+  source: T;
+  target: T;
+}
+
+export interface BaseProp {
+  id: number;
+  name: string;
+}
+
+export interface ChildrenProps<TData> {
+  ancestors: Array<Node<TData>>;
+  depth: number;
+  expandCollapseNode: (targetNode: Node<TData>) => void;
+  isExpanded: boolean;
+  node: Node<TData>;
+  nodeSize: {
+    height: number;
+    width: number;
+  };
+  onMouseDown: (e) => void;
+  onMouseUp: (callback) => (e) => void;
+}
+
+export interface TreeProps<TData> {
+  changeTree?: (newTree: Node<TData>) => void;
+  children: (props: ChildrenProps<TData>) => JSX.Element;
+  containerHeight: number;
+  containerWidth: number;
+  contentHeight?: number;
+  contentWidth?: number;
+  node: {
+    height: number;
+    isDefaultExpanded?: (data: TData) => boolean;
+    width: number;
+  };
+  tree: Node<TData>;
+  treeLink?: {
+    getStroke?: (props: LinkProps<TData>) => string | undefined;
+    getStrokeDasharray?: (
+      props: LinkProps<TData>
+    ) => string | number | undefined;
+    getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
+    getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+  };
+}

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

@@ -0,0 +1,164 @@
+import { always, cond, equals, has, T } from 'ramda';
+
+import { Avatar, Paper, Typography, useTheme } from '@mui/material';
+import SpaIcon from '@mui/icons-material/Spa';
+
+import { ChildrenProps } from '..';
+
+import { ComplexData, SimpleData } from './datas';
+
+export const SimpleContent = ({
+  node,
+  depth,
+  isExpanded,
+  nodeSize,
+  expandCollapseNode
+}: ChildrenProps<SimpleData>): JSX.Element => {
+  const theme = useTheme();
+  const fillColor = cond([
+    [equals('critical'), always(theme.palette.error.main)],
+    [equals('warning'), always(theme.palette.warning.main)],
+    [T, always(theme.palette.success.main)]
+  ])(node.data.status);
+
+  if (equals(depth, 0)) {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+        >
+          {node.data.name}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        cursor: node.children ? 'pointer' : 'default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+      onClick={() => {
+        expandCollapseNode(node);
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+      {node.children && (
+        <Typography>{isExpanded ? 'Expanded' : 'Collapsed'}</Typography>
+      )}
+    </Paper>
+  );
+};
+
+export const ComplexContent = ({
+  node,
+  depth,
+  nodeSize,
+  expandCollapseNode,
+  onMouseDown,
+  onMouseUp
+}: ChildrenProps<ComplexData>): JSX.Element => {
+  const theme = useTheme();
+  const fillColor = cond([
+    [equals('critical'), always(theme.palette.error.main)],
+    [equals('warning'), always(theme.palette.warning.main)],
+    [T, always(theme.palette.success.main)]
+  ])(node.data.status);
+
+  if (equals(depth, 0)) {
+    return (
+      <Paper
+        sx={{
+          alignItems: 'center',
+          backgroundColor: fillColor,
+          display: 'flex',
+          flexDirection: 'column',
+          height: nodeSize.height,
+          justifyContent: 'center',
+          p: 1,
+          position: 'relative',
+          width: nodeSize.width
+        }}
+      >
+        <Typography>{node.data.name}</Typography>
+      </Paper>
+    );
+  }
+
+  if (has('count', node.data)) {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp(() => expandCollapseNode(node))}
+        >
+          {node.data.count}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,305 @@
+import { Node } from '../models';
+
+export interface SimpleData {
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export interface ComplexData {
+  count?: number;
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export const simpleData: Node<SimpleData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'A1', status: 'ok' } },
+        { data: { id: 3, name: 'A2', status: 'ok' } },
+        { data: { id: 4, name: 'A3', status: 'critical' } },
+        {
+          children: [
+            {
+              data: { id: 10, name: 'C1', status: 'warning' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 11, name: 'D1', status: 'ok' }
+                },
+                {
+                  data: { id: 12, name: 'D2', status: 'ok' }
+                },
+                {
+                  data: { id: 13, name: 'D3', status: 'ok' }
+                }
+              ],
+              data: { id: 14, name: 'D', status: 'ok' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 21, name: 'E1', status: 'critical' }
+                }
+              ],
+              data: { id: 20, name: 'E', status: 'critical' }
+            }
+          ],
+          data: { id: 3, name: 'C', status: 'critical' }
+        }
+      ],
+      data: { id: 6273286320, name: 'A', status: 'critical' }
+    },
+    { data: { id: 1, name: 'Z', status: 'ok' } },
+    {
+      children: [{ data: { id: 50, name: 'B1', status: 'warning' } }],
+      data: { id: 2, name: 'B', status: 'warning' }
+    }
+  ],
+  data: {
+    id: 0,
+    name: 'T',
+    status: 'critical'
+  }
+};
+
+export const complexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        { data: { id: 6, name: 'Indicator 2', status: 'ok' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 2', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 4', status: 'ok' }
+        }
+      ],
+      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};
+
+export const moreComplexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 11, name: 'Indicator 11', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 3', status: 'ok' }
+        },
+        { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
+        { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
+        { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
+        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
+        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
+        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
+        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
+        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
+        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
+      ],
+      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};

package/src/Graph/Tree/utils.ts

@@ -0,0 +1,49 @@
+import { equals, omit } from 'ramda';
+
+import { BaseProp, Node } from './models';
+
+interface UpdateNodeFromTreeProps<TData> {
+  callback: (tree: Node<TData>) => Partial<Node<TData>>;
+  targetNode: Node<TData>;
+  tree: Node<TData>;
+}
+
+export const updateNodeFromTree = <TData extends BaseProp>({
+  tree,
+  targetNode,
+  callback
+}: UpdateNodeFromTreeProps<TData>): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  if (
+    equals(tree.data, targetNode.data) &&
+    equals(tree.children, targetNode.children)
+  ) {
+    return {
+      ...tree,
+      ...callback(tree)
+    };
+  }
+
+  return {
+    ...tree,
+    children: tree.children?.map((child) =>
+      updateNodeFromTree({ callback, targetNode, tree: child })
+    )
+  };
+};
+
+export const cleanUpTree = <TData extends BaseProp>(
+  tree: Node<TData>
+): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  return {
+    ...omit(['isExpanded'], tree),
+    children: tree.children?.map((child) => cleanUpTree(child))
+  };
+};

package/src/Graph/common/testUtils.ts

@@ -0,0 +1,71 @@
+export const successThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};
+
+export const warningThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.4
+    }
+  ]
+};
+
+export const criticalThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.3
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.2
+    }
+  ]
+};
+
+export const rangedThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.55
+    },
+    {
+      label: 'Critical',
+      value: 0.65
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.13
+    },
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};