@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

package/src/TimePeriods/TimePeriods.cypress.spec.tsx

@@ -1,497 +0,0 @@
-import React from 'react';
-
-import { renderHook } from '@testing-library/react-hooks/dom';
-import dayjs from 'dayjs';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
-
-import { LocalizationProvider } from '@mui/x-date-pickers';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { userAtom } from '@centreon/ui-context';
-
-import DateTimePickerInput from './DateTimePickerInput';
-import useDateTimePickerAdapter from './useDateTimePickerAdapter';
-import { CustomTimePeriodProperty } from './models';
-
-dayjs.extend(timezonePlugin);
-dayjs.extend(utcPlugin);
-dayjs.extend(localizedFormatPlugin);
-
-const numberDaysInWeek = 7;
-
-const days = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday'
-];
-
-const months2023 = [
-  {
-    January: {
-      date: '2023-01-01T12:59:41.041Z',
-      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    February: {
-      date: '2023-02-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 28 },
-      numberWeeks: 5
-    }
-  },
-  {
-    March: {
-      date: '2023-03-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    April: {
-      date: '2023-04-01T12:59:41.041Z',
-      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
-      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 30 },
-      numberWeeks: 6
-    }
-  },
-  {
-    May: {
-      date: '2023-05-01T12:59:41.041Z',
-      firstDay: { day: days[1], indexDayInRowWeek: 1, value: 1 },
-      lastDay: { day: days[3], indexDayInRowWeek: 3, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    June: {
-      date: '2023-06-01T12:59:41.041Z',
-      firstDay: { day: days[4], indexDayInRowWeek: 4, value: 1 },
-      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    July: {
-      date: '2023-07-01T12:59:41.041Z',
-      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
-      lastDay: { day: days[1], indexDayInRowWeek: 1, value: 31 },
-      numberWeeks: 6
-    }
-  },
-  {
-    August: {
-      date: '2023-08-01T12:59:41.041Z',
-      firstDay: { day: days[2], indexDayInRowWeek: 2, value: 1 },
-      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    September: {
-      date: '2023-09-01T12:59:41.041Z',
-      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
-      lastDay: { day: days[6], indexDayInRowWeek: 6, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    October: {
-      date: '2023-10-01T12:59:41.041Z',
-      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    November: {
-      date: '2023-11-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    December: {
-      date: '2023-12-01T12:59:41.041Z',
-      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
-      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 31 },
-      numberWeeks: 6
-    }
-  }
-];
-
-const month2023Reverse = [
-  {
-    December: {
-      date: '2023-12-01T12:59:41.041Z',
-      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
-      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 31 },
-      numberWeeks: 6
-    }
-  },
-  {
-    November: {
-      date: '2023-11-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    October: {
-      date: '2023-10-01T12:59:41.041Z',
-      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    September: {
-      date: '2023-09-01T12:59:41.041Z',
-      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
-      lastDay: { day: days[6], indexDayInRowWeek: 6, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    August: {
-      date: '2023-08-01T12:59:41.041Z',
-      firstDay: { day: days[2], indexDayInRowWeek: 2, value: 1 },
-      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    July: {
-      date: '2023-07-01T12:59:41.041Z',
-      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
-      lastDay: { day: days[1], indexDayInRowWeek: 1, value: 31 },
-      numberWeeks: 6
-    }
-  },
-  {
-    June: {
-      date: '2023-06-01T12:59:41.041Z',
-      firstDay: { day: days[4], indexDayInRowWeek: 4, value: 1 },
-      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 30 },
-      numberWeeks: 5
-    }
-  },
-  {
-    May: {
-      date: '2023-05-01T12:59:41.041Z',
-      firstDay: { day: days[1], indexDayInRowWeek: 1, value: 1 },
-      lastDay: { day: days[3], indexDayInRowWeek: 3, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    April: {
-      date: '2023-04-01T12:59:41.041Z',
-      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
-      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 30 },
-      numberWeeks: 6
-    }
-  },
-  {
-    March: {
-      date: '2023-03-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 31 },
-      numberWeeks: 5
-    }
-  },
-  {
-    February: {
-      date: '2023-02-01T12:59:41.041Z',
-      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 28 },
-      numberWeeks: 5
-    }
-  },
-  {
-    January: {
-      date: '2023-01-01T12:59:41.041Z',
-      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
-      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
-      numberWeeks: 5
-    }
-  }
-];
-
-const testData = [
-  {
-    button: 'Next month',
-    data: months2023,
-    initialDate: '2023-01-01T12:59:41.041Z',
-    timezone: 'Europe/Paris'
-  },
-  {
-    button: 'Previous month',
-    data: month2023Reverse,
-    initialDate: '2023-12-01T12:59:41.041Z',
-    timezone: 'Europe/Paris'
-  }
-];
-
-enum ButtonCalendar {
-  NMONTH = 'Next month',
-  PMONTH = 'Previous month'
-}
-interface GetPreviousNextMonth {
-  currentMonth: string;
-  labelButton: string;
-}
-
-const getNextMonth = ({
-  currentMonth,
-  labelButton
-}: GetPreviousNextMonth): Cypress.Chainable | null => {
-  if (equals(currentMonth, 'December')) {
-    return null;
-  }
-
-  return cy.get(`[aria-label="${labelButton}"]`).click();
-};
-
-const getPreviousMonth = ({
-  currentMonth,
-  labelButton
-}: GetPreviousNextMonth): Cypress.Chainable | null => {
-  if (equals(currentMonth, 'January')) {
-    return null;
-  }
-
-  return cy.get(`[aria-label="${labelButton}"]`).click();
-};
-
-const changeDate = (): void => undefined;
-
-const setStart = undefined;
-const checkIfDuplicateExists = (arr: Array<unknown>): boolean => {
-  return new Set(arr).size !== arr.length;
-};
-
-testData.forEach((item) =>
-  describe(`DateTimePicker ${item.button}`, () => {
-    before(() => {
-      const userData = renderHook(() => useAtomValue(userAtom));
-
-      userData.result.current.timezone = item.timezone;
-      userData.result.current.locale = 'en_US';
-    });
-
-    beforeEach(() => {
-      const { result } = renderHook(() => useDateTimePickerAdapter());
-
-      const { Adapter } = result.current;
-      cy.mount({
-        Component: (
-          <LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
-            <DateTimePickerInput
-              changeDate={changeDate}
-              date={new Date(item.initialDate)}
-              property={CustomTimePeriodProperty.start}
-              setDate={setStart}
-            />
-          </LocalizationProvider>
-        )
-      });
-    });
-
-    it('checks input calendar value contains correct date', () => {
-      const { result } = renderHook(() => useLocaleDateTimeFormat());
-      const { format } = result.current;
-
-      const dateInput = format({
-        date: dayjs(item.initialDate).tz(item.timezone),
-        formatString: 'L hh:mm A'
-      });
-
-      cy.get('input').should('have.value', dateInput);
-    });
-
-    it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-      item.data.forEach((element) => {
-        const { lastDay } = Object.values(element)[0];
-
-        cy.get('[role="rowgroup"]').children().as('listWeeks');
-        cy.get('@listWeeks').children('button').as('days');
-        cy.get('@days').should('have.length', lastDay.value);
-
-        const currentMonth = Object.keys(element)[0];
-
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`does not duplicate days in any of the month in the year when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-      item.data.forEach((element) => {
-        const daysInCurrentMonth: Array<string> = [];
-        cy.get('[role="rowgroup"]').first().children().as('listWeeks');
-        cy.get('@listWeeks').children('button').as('days');
-
-        cy.get('@days')
-          .each(($day) => daysInCurrentMonth.push($day.text()))
-          .as('currentDays');
-
-        cy.get('@currentDays').then(() => {
-          const isDuplicateExist = checkIfDuplicateExists(daysInCurrentMonth);
-
-          return expect(isDuplicateExist).to.be.false;
-        });
-
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`displays the first day as the start of the week when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-
-      item.data.forEach((element) => {
-        const { firstDay, numberWeeks } = Object.values(element)[0];
-
-        cy.get('[role="rowgroup"]').children().as('listWeeks');
-
-        cy.get('@listWeeks').should('have.length', numberWeeks);
-        cy.get('@listWeeks').eq(0).as('firstWeek');
-        cy.get('@firstWeek').children().as('listDaysInFirstWeek');
-
-        cy.get('@listDaysInFirstWeek').should('have.length', numberDaysInWeek);
-        cy.get('@listDaysInFirstWeek')
-          .eq(firstDay.indexDayInRowWeek)
-          .as('firstDayInWeek');
-        cy.get('@firstDayInWeek').contains(firstDay.value);
-
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`displays the last day as the end of the week when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-
-      item.data.forEach((element) => {
-        const { lastDay, numberWeeks } = Object.values(element)[0];
-
-        cy.get('[role="rowgroup"]').children().as('listWeeks');
-
-        cy.get('@listWeeks').should('have.length', numberWeeks);
-
-        cy.get('@listWeeks')
-          .eq(numberWeeks - 1)
-          .as('lastWeek');
-
-        cy.get('@lastWeek').children().as('listDaysInLastWeek');
-        cy.get('@listDaysInLastWeek').should('have.length', numberDaysInWeek);
-
-        cy.get('@listDaysInLastWeek')
-          .eq(lastDay.indexDayInRowWeek)
-          .as('lastDayInWeek');
-        cy.get('@lastDayInWeek').contains(lastDay.value);
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`displays the month and the year in the calendar's header when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-      const { result } = renderHook(() => useLocaleDateTimeFormat());
-
-      item.data.forEach((element) => {
-        const { date } = Object.values(element)[0];
-
-        const { format } = result.current;
-        const monthAndYear = format({
-          date: dayjs(date).tz(item.timezone),
-          formatString: 'MMMM YYYY'
-        });
-        cy.contains(monthAndYear);
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`displays the correct day name on calendar's header when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-      const { result } = renderHook(() => useLocaleDateTimeFormat());
-
-      item.data.forEach((element) => {
-        const { date } = Object.values(element)[0];
-        const dateByTimeZone = dayjs(date).tz(item.timezone);
-        const firstDay = dateByTimeZone.isUTC()
-          ? dateByTimeZone.utc().startOf('month').startOf('week')
-          : dateByTimeZone.startOf('month').startOf('week');
-
-        const { format } = result.current;
-        const daysArray = [0, 1, 2, 3, 4, 5, 6].map((diff) =>
-          format({
-            date: firstDay.add(diff, 'day'),
-            formatString: 'dd'
-          })
-        );
-        daysArray.forEach((day) => cy.contains(day.toUpperCase()));
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-      });
-    });
-
-    it(`displays the calendar for the timezone ${item.timezone} when the ${item.button} button is clicked`, () => {
-      cy.get('button').click();
-
-      item.data.forEach((element) => {
-        const currentMonth = Object.keys(element)[0];
-        if (equals(item.button, ButtonCalendar.PMONTH)) {
-          getPreviousMonth({ currentMonth, labelButton: item.button });
-        } else {
-          getNextMonth({ currentMonth, labelButton: item.button });
-        }
-
-        cy.matchImageSnapshot(
-          `calendar-${item.timezone}-${
-            Object.keys(element)[0]
-          }-when-clicking-on-${item.button}`
-        );
-      });
-    });
-  })
-);

package/src/TimePeriods/helpers/index.ts

@@ -1,25 +0,0 @@
-import { find, propEq } from 'ramda';
-
-import {
-  CustomTimePeriod,
-  TimePeriod,
-  TimePeriodById,
-  lastDayPeriod
-} from '../models';
-
-export const defaultTimePeriod = lastDayPeriod;
-
-export const getTimePeriodFromNow = (
-  timePeriod: TimePeriod | null
-): CustomTimePeriod => {
-  return {
-    end: new Date(Date.now()),
-    start: new Date(timePeriod?.getStart() || 0)
-  };
-};
-
-export const getTimePeriodById = ({
-  id,
-  timePeriods
-}: TimePeriodById): TimePeriod =>
-  find<TimePeriod>(propEq('id', id))(timePeriods) as TimePeriod;

package/src/TimePeriods/index.stories.tsx

@@ -1,74 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
-import { dateFormat } from './models';
-
-import AwesomeTimePeriod from '.';
-
-const meta: Meta<typeof AwesomeTimePeriod> = {
-  component: AwesomeTimePeriod,
-  tags: ['autodocs']
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AwesomeTimePeriod>;
-
-const Template: Story = {
-  render: (args) => <AwesomeTimePeriod {...args} />
-};
-
-const args = {
-  extraTimePeriods: [
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
-      id: 'last_29_days',
-      largeName: 'last 29 days',
-      name: '29 days'
-    }
-  ]
-};
-
-const argTypes = {
-  disabled: {
-    control: 'boolean',
-    description: 'If true, the component is disabled.',
-    table: {
-      defaultValue: { summary: false },
-      type: { summary: 'boolean' }
-    }
-  },
-  extraTimePeriods: {
-    control: 'object',
-    description: 'soon',
-    table: {
-      defaultValue: { summary: '[]' },
-      type: { detail: 'extra selected time periods', summary: 'array' }
-    }
-  },
-  getIsError: {
-    description:
-      'Callback fired when The end date is smaller or equal to the start date',
-    table: {
-      category: 'Events',
-      type: { detail: '(value:boolean)=>void', summary: 'function' }
-    }
-  },
-  getStartEndParameters: {
-    description: 'Callback fired when the the user select or pick a date',
-    table: {
-      category: 'Events',
-      type: {
-        detail: '({start:isoString,end:isoString})=>void',
-        summary: 'function'
-      }
-    }
-  }
-};
-
-export const Playground: Story = {
-  ...Template,
-  argTypes,
-  args
-};

package/src/TimePeriods/index.tsx

@@ -1,77 +0,0 @@
-import { useEffect } from 'react';
-
-import { Responsive } from '@visx/visx';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import duration from 'dayjs/plugin/duration';
-import { useAtomValue } from 'jotai';
-
-import { Paper } from '@mui/material';
-
-import { useStyles } from './timePeriods.styles';
-import CustomTimePeriod from './CustomTimePeriod';
-import SelectedTimePeriod from './SelectedTimePeriod';
-import { EndStartInterval, TimePeriod } from './models';
-import {
-  customTimePeriodAtom,
-  getDatesDerivedAtom,
-  selectedTimePeriodAtom,
-  errorTimePeriodAtom
-} from './timePeriodsAtoms';
-
-dayjs.extend(isSameOrAfter);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-dayjs.extend(duration);
-
-interface Props {
-  disabled?: boolean;
-  extraTimePeriods?: Array<TimePeriod>;
-  getIsError?: (value: boolean) => void;
-  getStartEndParameters?: ({ start, end }: EndStartInterval) => void;
-}
-
-const AwesomeTimePeriod = ({
-  extraTimePeriods,
-  disabled = false,
-  getStartEndParameters,
-  getIsError
-}: Props): JSX.Element => {
-  const { classes } = useStyles({ disabled });
-
-  const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-  const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
-  const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
-
-  useEffect(() => {
-    const [start, end] = getCurrentEndStartInterval(selectedTimePeriod);
-    getStartEndParameters?.({ end, start });
-  }, [customTimePeriod, selectedTimePeriod]);
-
-  useEffect(() => {
-    getIsError?.(errorTimePeriod);
-  }, [errorTimePeriod]);
-
-  return (
-    <div>
-      <Responsive.ParentSize>
-        {({ width }): JSX.Element => {
-          return (
-            <Paper className={classes.header} style={{ width }}>
-              <SelectedTimePeriod
-                disabled={disabled}
-                extraTimePeriods={extraTimePeriods}
-                width={width}
-              />
-              <CustomTimePeriod disabled={disabled} width={width} />
-            </Paper>
-          );
-        }}
-      </Responsive.ParentSize>
-    </div>
-  );
-};
-export default AwesomeTimePeriod;