@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/Text/Text.tsx

@@ -1,100 +0,0 @@
-import { isNil } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import FluidTypography from '../../Typography/FluidTypography';
-import { LineChartData, Thresholds } from '../common/models';
-import {
-  formatMetricValueWithUnit,
-  getMetricWithLatestData
-} from '../common/timeSeries';
-import { getColorFromDataAndTresholds } from '../common/utils';
-
-import { useTextStyles } from './Text.styles';
-
-export interface Props {
-  baseColor?: string;
-  data?: LineChartData;
-  displayAsRaw?: boolean;
-  labels: {
-    critical: string;
-    warning: string;
-  };
-  thresholds: Thresholds;
-}
-
-export const Text = ({
-  thresholds,
-  data,
-  displayAsRaw,
-  labels,
-  baseColor
-}: Props): JSX.Element | null => {
-  const theme = useTheme();
-  const { classes, cx } = useTextStyles();
-
-  if (isNil(data)) {
-    return null;
-  }
-
-  const metric = getMetricWithLatestData(data);
-  const metricValue = metric?.data[0] ?? 0;
-  const metricUnit = metric?.unit ?? '';
-
-  const color = getColorFromDataAndTresholds({
-    baseColor,
-    data: metricValue,
-    theme,
-    thresholds
-  });
-
-  const warningThresholdLabels = thresholds.warning.map(({ value }) =>
-    formatMetricValueWithUnit({
-      unit: metricUnit,
-      value
-    })
-  );
-
-  const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
-    formatMetricValueWithUnit({
-      unit: metricUnit,
-      value
-    })
-  );
-
-  return (
-    <div className={classes.graphText}>
-      <FluidTypography
-        max="40px"
-        pref={16}
-        sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
-        text={
-          formatMetricValueWithUnit({
-            isRaw: displayAsRaw,
-            unit: metricUnit,
-            value: metricValue
-          }) || ''
-        }
-        variant="h2"
-      />
-      {thresholds.enabled && (
-        <div className={classes.thresholds}>
-          <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/Text/index.ts

@@ -1 +0,0 @@
-export { Text } from './Text';

package/src/Graph/Tree/DescendantNodes.tsx

@@ -1,89 +0,0 @@
-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}
-          style={{ userSelect: 'none' }}
-          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

@@ -1,77 +0,0 @@
-import {
-  LinkHorizontal,
-  LinkHorizontalStep,
-  LinkHorizontalLine
-} from '@visx/shape';
-import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import { always, cond, equals, T } from 'ramda';
-
-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 getLinkComponent = cond([
-  [equals('line'), always(LinkHorizontalLine)],
-  [equals('step'), always(LinkHorizontalStep)],
-  [T, always(LinkHorizontal)]
-]);
-
-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 LinkComponent = getLinkComponent(treeLink?.type);
-
-    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 (
-      <LinkComponent
-        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

@@ -1,32 +0,0 @@
-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

@@ -1,195 +0,0 @@
-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();
-  });
-
-  it('displays the tree with step links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'step'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with line links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'line'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,160 +0,0 @@
-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 WithStepLink: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      type: 'step'
-    }
-  },
-  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),
-      type: 'line'
-    }
-  },
-  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
-};