@centreon/ui 24.4.1-sync-release-34022.0 → 24.4.1-test-code-coverage.0

package/src/Graph/PieChart/useResponsivePie.ts

@@ -0,0 +1,81 @@
+import { equals, pluck, reject } from 'ramda';
+
+import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
+
+import { ArcType } from './models';
+
+interface ResponsivePieProps {
+  data: Array<ArcType>;
+  defaultInnerRadius: number;
+  height: number;
+  legendRef;
+  titleRef;
+  unit: 'percentage' | 'number';
+  width: number;
+}
+
+interface ResponsivePieState {
+  half: number;
+  innerRadius: number;
+  isContainsExactlyOneNonZeroValue: boolean;
+  legendScale: LegendScale;
+  svgContainerSize: number;
+  svgSize: number;
+  svgWrapperWidth: number;
+  total: number;
+}
+export const useResponsivePie = ({
+  titleRef,
+  legendRef,
+  height,
+  width,
+  data,
+  unit,
+  defaultInnerRadius
+}: ResponsivePieProps): ResponsivePieState => {
+  const heightOfTitle = titleRef.current?.offsetHeight || 0;
+  const widthOfLegend = legendRef.current?.offsetWidth || 0;
+
+  const horizontalGap = widthOfLegend > 0 ? 16 : 0;
+  const verticalGap = heightOfTitle > 0 ? 8 : 0;
+
+  const svgContainerSize = Math.min(
+    height - heightOfTitle - verticalGap,
+    width - widthOfLegend - horizontalGap
+  );
+  const svgWrapperWidth = svgContainerSize;
+
+  const outerRadius = Math.min(32, svgContainerSize / 6);
+
+  const svgSize = svgContainerSize - outerRadius;
+
+  const half = svgSize / 2;
+
+  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
+
+  const innerRadius = Math.min(defaultInnerRadius, svgSize / 5);
+
+  const legendScale = {
+    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+    range: pluck('color', data)
+  };
+
+  const values = pluck('value', data);
+
+  const isContainsExactlyOneNonZeroValue = equals(
+    reject((value) => equals(value, 0), values).length,
+    1
+  );
+
+  return {
+    half,
+    innerRadius,
+    isContainsExactlyOneNonZeroValue,
+    legendScale,
+    svgContainerSize,
+    svgSize,
+    svgWrapperWidth,
+    total
+  };
+};

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

@@ -0,0 +1,121 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import SingleBar from './SingleBar';
+import { SingleBarProps } from './models';
+
+const initialize = (
+  args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <SingleBar
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Single bar', () => {
+  it('displays the single bar as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
+    cy.findByTestId('warning-line-0.4').should('be.visible');
+    cy.findByTestId('warning-line-0.4-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
+    cy.findByTestId('warning-line-0.2').should('be.visible');
+    cy.findByTestId('warning-line-0.2-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.3').should('be.visible');
+    cy.findByTestId('critical-line-0.3-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.findByTestId('warning-line-0.13').should('be.visible');
+    cy.findByTestId('warning-line-0.13-tooltip').should('be.visible');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.55').should('be.visible');
+    cy.findByTestId('critical-line-0.55-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.65').should('be.visible');
+    cy.findByTestId('critical-line-0.65-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the threshold tooltip when a threshold is hovered', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').trigger('mouseover');
+
+    cy.contains('Warning').should('be.visible');
+
+    cy.findByTestId('critical-line-1.5-tooltip').trigger('mouseover');
+
+    cy.contains('Critical').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays single bar as small when the props is set', () => {
+    initialize({ size: 'small', thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the value when the prop is set', () => {
+    initialize({ showLabels: false, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,101 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Text, Props } from './Text';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Text
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Text', () => {
+  it('displays the text as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
+    cy.contains('Warning: 0.5 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
+    cy.contains('Warning: 0.4 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
+    cy.contains('Warning: 0.2 s').should('be.visible');
+    cy.contains('Critical: 0.3 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
+    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the text', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays text with default values when the data is empty', () => {
+    initialize({
+      data: {
+        global: {},
+        metrics: [],
+        times: []
+      },
+      thresholds: successThresholds
+    });
+
+    cy.contains('0').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

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,89 @@
+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

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

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