@centreon/ui 24.7.2 → 24.7.4

package/src/Form/Inputs/List/List.styles.ts

@@ -1,29 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useListStyles = makeStyles()((theme) => ({
-  content: {
-    '& [data-dragging="false"]': {
-      cursor: 'grab'
-    },
-    '& [data-dragging="true"]': {
-      cursor: 'grabbing'
-    },
-    alignItems: 'center',
-    borderBottom: `1px dashed ${theme.palette.action.disabledBackground}`,
-    display: 'flex',
-    flexDirection: 'row',
-    padding: theme.spacing(1, 0)
-  },
-  innerContent: {
-    flexGrow: 1
-  },
-  items: {
-    maxHeight: theme.spacing(16),
-    overflowY: 'auto'
-  },
-  list: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1)
-  }
-}));

package/src/Form/Inputs/List/List.tsx

@@ -1,58 +0,0 @@
-import { ComponentType } from 'react';
-
-import { closestCenter } from '@dnd-kit/core';
-import { verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useTranslation } from 'react-i18next';
-
-import { InputPropsWithoutGroup } from '../models';
-import { SortableItems, Subtitle } from '../../..';
-
-import { useList } from './useList';
-import { useListStyles } from './List.styles';
-import Content, { ContentProps } from './Content';
-
-const List = ({
-  list,
-  fieldName
-}: InputPropsWithoutGroup): JSX.Element | null => {
-  const { t } = useTranslation();
-  const { classes } = useListStyles();
-
-  const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
-
-  const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
-    AddItem: ComponentType<{ addItem }>;
-    SortContent: ComponentType;
-    addItemLabel?: string;
-    itemProps: Array<string>;
-    sortLabel?: string;
-  };
-
-  return (
-    <div className={classes.list}>
-      {addItemLabel && <Subtitle>{t(addItemLabel)}</Subtitle>}
-      <AddItem addItem={addItem} />
-      {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
-      <div className={classes.items}>
-        <SortableItems
-          updateSortableItemsOnItemsChange
-          // eslint-disable-next-line react/no-unstable-nested-components
-          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
-            <Content {...props} deleteItem={deleteItem}>
-              <SortContent {...props} />
-            </Content>
-          )}
-          collisionDetection={closestCenter}
-          itemProps={itemProps}
-          items={sortedList}
-          sortingStrategy={verticalListSortingStrategy}
-          onDragEnd={({ items }): void => {
-            sortList(items);
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default List;

package/src/Form/Inputs/List/useList.ts

@@ -1,81 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import {
-  append,
-  equals,
-  inc,
-  isEmpty,
-  pluck,
-  prop,
-  reject,
-  sortBy
-} from 'ramda';
-
-import { SelectEntry } from '../../..';
-
-interface UseListState {
-  addItem: (newItem: SelectEntry) => void;
-  deleteItem: (id: string) => () => void;
-  sortList: (items: Array<string>) => void;
-  sortedList: Array<unknown>;
-}
-
-export const useList = ({ fieldName }): UseListState => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-  const maxOrder = useRef(0);
-
-  const list = values[fieldName];
-
-  const sortedList = useMemo(
-    () =>
-      sortBy(prop('order'), list).map(({ id, ...props }) => ({
-        id: `${id}`,
-        ...props
-      })),
-    [list]
-  );
-
-  const addItem = (newItem: SelectEntry): void => {
-    setFieldValue(
-      fieldName,
-      append(
-        {
-          ...newItem,
-          id: (newItem as SelectEntry).id as number,
-          order: inc(maxOrder.current)
-        },
-        list
-      )
-    );
-  };
-
-  const deleteItem = (id: string) => (): void => {
-    const newItems = reject((item) => equals(Number(id), item.id))(list);
-
-    setFieldValue(fieldName, newItems);
-  };
-
-  const sortList = (items: Array<string>): void => {
-    const newOrderedList = items.map((itemId, idx) => {
-      const item = sortedList.find(({ id }) => equals(id, itemId));
-
-      return {
-        ...item,
-        id: Number(item?.id),
-        order: inc(idx)
-      };
-    });
-
-    setFieldValue(fieldName, newOrderedList);
-  };
-
-  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
-
-  return {
-    addItem,
-    deleteItem,
-    sortList,
-    sortedList
-  };
-};

package/src/Form/index.ts

@@ -1 +0,0 @@
-export * from './Form';

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

@@ -1,316 +0,0 @@
-import dayjs from 'dayjs';
-import { equals } from 'ramda';
-
-import dataPingService from '../mockedData/pingService.json';
-import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
-
-import BarChart, { BarChartProps } from './BarChart';
-
-const defaultStart = new Date(
-  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
-).toISOString();
-
-const defaultEnd = new Date(Date.now()).toISOString();
-
-const defaultArgs = {
-  end: defaultEnd,
-  height: 500,
-  loading: false,
-  start: defaultStart
-};
-
-const initialize = ({
-  data = dataPingService,
-  legend,
-  tooltip,
-  axis,
-  orientation,
-  barStyle
-}: Pick<
-  BarChartProps,
-  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip'
->): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100%', width: '100%' }}>
-        <BarChart
-          axis={axis}
-          barStyle={barStyle}
-          data={data}
-          legend={legend}
-          orientation={orientation ?? 'horizontal'}
-          tooltip={tooltip}
-          {...defaultArgs}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Bar chart', () => {
-  ['horizontal', 'vertical'].forEach((orientation) => {
-    it(`displays the bar chart ${orientation}ly`, () => {
-      initialize({ orientation });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '295');
-      } else {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '863');
-      }
-
-      cy.makeSnapshot();
-    });
-
-    it(`displays the bar chart ${orientation}ly centered in zero`, () => {
-      initialize({ axis: { isCenteredZero: true }, orientation });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '171');
-      } else {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '432');
-      }
-
-      cy.makeSnapshot();
-    });
-
-    it(`displays the stacked bar chart ${orientation}ly`, () => {
-      initialize({ data: dataPingServiceStacked, orientation });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'height')
-          .should('equals', '187');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'width')
-          .should('equals', '546');
-      }
-
-      cy.makeSnapshot();
-    });
-
-    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
-      initialize({ data: dataPingServiceMixedStacked, orientation });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '265');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '773');
-      }
-
-      cy.makeSnapshot();
-    });
-
-    it(`displays the stacked bar chart ${orientation}ly centered in zero`, () => {
-      initialize({
-        axis: { isCenteredZero: true },
-        data: dataPingServiceStacked,
-        orientation
-      });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'height')
-          .should('equals', '94');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'width')
-          .should('equals', '273');
-      }
-
-      cy.makeSnapshot();
-    });
-
-    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data centered in zero`, () => {
-      initialize({
-        axis: { isCenteredZero: true },
-        data: dataPingServiceMixedStacked,
-        orientation
-      });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '133');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '387');
-      }
-    });
-
-    it(`displays bar chart ${orientation}ly with a custom style`, () => {
-      initialize({
-        barStyle: { opacity: 0.5, radius: 0.5 },
-        data: dataPingServiceMixedStacked,
-        orientation
-      });
-
-      cy.contains('0 ms').should('be.visible');
-      cy.contains('20').should('be.visible');
-      cy.contains(':40 AM').should('be.visible');
-
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '265');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '773');
-      }
-    });
-  });
-
-  it('displays a tooltip when a single bar is hovered', () => {
-    initialize({
-      orientation: 'horizontal'
-    });
-
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('single-bar-3-2-0.11372').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('single-bar-3-2-0.08644')
-      .should('have.attr', 'height')
-      .should('equals', '295');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display a tooltip when a bar is hovered and a props is set', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'hidden',
-        sortOrder: 'descending'
-      }
-    });
-
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('not.exist');
-
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a tooltip when a stacked bar is hovered', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'all',
-        sortOrder: 'ascending'
-      }
-    });
-
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-    cy.contains('0.02 ms').should('be.visible');
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'single',
-        sortOrder: 'descending'
-      }
-    });
-
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -1,213 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
-import { LineChartData } from '../common/models';
-import dataPingService from '../mockedData/pingService.json';
-import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
-
-import BarChart from './BarChart';
-
-const meta: Meta<typeof BarChart> = {
-  component: BarChart
-};
-export default meta;
-
-type Story = StoryObj<typeof BarChart>;
-
-const defaultStart = new Date(
-  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
-).toISOString();
-
-const defaultEnd = new Date(Date.now()).toISOString();
-
-const defaultArgs = {
-  end: defaultEnd,
-  height: 500,
-  loading: false,
-  start: defaultStart
-};
-
-const Template = (args): JSX.Element => (
-  <BarChart data={dataPingService as unknown as LineChartData} {...args} />
-);
-
-export const Default: Story = {
-  args: defaultArgs,
-  render: Template
-};
-
-export const withCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    }
-  },
-  render: Template
-};
-
-export const vertical: Story = {
-  args: {
-    ...defaultArgs,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const verticalCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const stacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked
-  },
-  render: Template
-};
-
-export const stackedVertical: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const stackedCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    data: dataPingServiceStacked
-  },
-  render: Template
-};
-
-export const stackedVerticalCenteredZero: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    data: dataPingServiceStacked,
-    height: 800,
-    orientation: 'vertical'
-  },
-  render: Template
-};
-
-export const thresholds: Story = {
-  args: {
-    ...defaultArgs,
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const thresholdsVertical: Story = {
-  args: {
-    ...defaultArgs,
-    axis: {
-      isCenteredZero: true
-    },
-    orientation: 'vertical',
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const thresholdStacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceStacked,
-    thresholdUnit: 'ms',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 0.1
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 0.05
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const customBarStyle: Story = {
-  args: {
-    ...defaultArgs,
-    barStyle: {
-      opacity: 0.5,
-      radius: 0.5
-    }
-  },
-  render: Template
-};
-
-export const mixedStacked: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceMixedStacked
-  },
-  render: Template
-};
-
-export const mixedStackedVertical: Story = {
-  args: {
-    ...defaultArgs,
-    data: dataPingServiceMixedStacked,
-    orientation: 'vertical'
-  },
-  render: Template
-};