@centreon/ui 24.9.4 → 24.9.6

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,58 +0,0 @@
-import { Thresholds as ThresholdsModel } from '../common/models';
-
-import { ThresholdLine } from './ThresholdLine';
-
-export const groupMargin = 25;
-
-interface Props {
-  barHeight: number;
-  hideTooltip: () => void;
-  isSmall: boolean;
-  showTooltip: (args) => void;
-  size: 'small' | 'medium';
-  thresholds: ThresholdsModel;
-  xScale: (value: number) => number;
-}
-
-const Thresholds = ({
-  xScale,
-  thresholds,
-  showTooltip,
-  hideTooltip,
-  size,
-  barHeight,
-  isSmall
-}: Props): JSX.Element => (
-  <>
-    {thresholds.warning.map(({ value, label }) => (
-      <ThresholdLine
-        barHeight={barHeight}
-        hideTooltip={hideTooltip}
-        isSmall={isSmall}
-        key={`warning-${value.toString()}`}
-        label={label}
-        showTooltip={showTooltip}
-        size={size}
-        thresholdType="warning"
-        value={value}
-        xScale={xScale}
-      />
-    ))}
-    {thresholds.critical.map(({ value, label }) => (
-      <ThresholdLine
-        barHeight={barHeight}
-        hideTooltip={hideTooltip}
-        isSmall={isSmall}
-        key={`critical-${value.toString()}`}
-        label={label}
-        showTooltip={showTooltip}
-        size={size}
-        thresholdType="critical"
-        value={value}
-        xScale={xScale}
-      />
-    ))}
-  </>
-);
-
-export default Thresholds;

package/src/Graph/SingleBar/index.ts

@@ -1 +0,0 @@
-export { default as SingleBar } from './SingleBar';

package/src/Graph/SingleBar/models.ts

@@ -1,10 +0,0 @@
-import { LineChartData, Thresholds } from '../common/models';
-
-export interface SingleBarProps {
-  baseColor?: string;
-  data?: LineChartData;
-  displayAsRaw?: boolean;
-  showLabels?: boolean;
-  size?: 'medium' | 'small';
-  thresholds: Thresholds;
-}

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

@@ -1,101 +0,0 @@
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-import dataLastWeek from '../mockedData/lastWeek.json';
-
-import { Props, Text } 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.stories.tsx

@@ -1,155 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import dataLastWeek from '../mockedData/lastWeek.json';
-
-import { Text } from '.';
-
-const meta: Meta<typeof Text> = {
-  component: Text
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
-    <Text {...props} />
-  </div>
-);
-
-const SmallTemplate = (props): JSX.Element => (
-  <div style={{ height: '100px', width: '200px' }}>
-    <Text {...props} />
-  </div>
-);
-
-export const success: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const warning: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.4
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const critical: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.3
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.2
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const rawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const smallDisplay: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: SmallTemplate
-};

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

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

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 { Group } from '@visx/group';
-import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
-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 { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import {
-  LinkHorizontal,
-  LinkHorizontalLine,
-  LinkHorizontalStep
-} from '@visx/shape';
-import { T, always, cond, equals } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import { BaseProp, Node, TreeProps } 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 { Tree } from './Tree';
-import { BaseProp, TreeProps } from './models';
-
-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>
-  );
-};