@centreon/ui 24.4.71 → 24.4.73

package/src/TimePeriods/index.stories.tsx

@@ -1,121 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
-import Switch from '@mui/material/Switch';
-
-import { dateFormat } from './models';
-import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
-
-import TimePeriod from '.';
-
-const meta: Meta<typeof TimePeriod> = {
-  component: TimePeriod,
-  tags: ['autodocs']
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimePeriod>;
-
-type StorySimpleTimePeriod = StoryObj<typeof SimpleCustomTimePeriod>;
-
-const Template: Story = {
-  render: (args) => <TimePeriod {...args} />
-};
-
-const TemplateWithSimpleTimePeriod: StorySimpleTimePeriod = {
-  render: (args) => <SimpleCustomTimePeriod {...args} />
-};
-
-const TemplateWithExternalComponent: Story = {
-  render: (args) => (
-    <TimePeriod {...args} renderExternalComponent={<Switch />} />
-  )
-};
-
-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'
-      }
-    }
-  }
-};
-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'
-    },
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(5, 'day').toDate(),
-      id: 'last_5_days',
-      largeName: 'last 5 days',
-      name: '5 days'
-    }
-  ]
-};
-
-const parameters = {
-  chromatic: { diffThreshold: 0.1 }
-};
-
-export const BasicTimePeriod: Story = {
-  ...Template,
-  argTypes,
-  parameters
-};
-
-export const WithExtraTimePeriods: Story = {
-  ...Template,
-  argTypes,
-  args,
-  parameters
-};
-
-export const WithExternalComponent: Story = {
-  ...TemplateWithExternalComponent,
-  argTypes,
-  parameters
-};
-
-export const SimpleTimePeriod: StorySimpleTimePeriod = {
-  ...TemplateWithSimpleTimePeriod,
-  args: {
-    endDate: dayjs(Date.now()).toDate(),
-    startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  },
-  parameters
-};

package/src/TimePeriods/index.tsx

@@ -1,79 +0,0 @@
-import { ReactNode } from 'react';
-
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import duration from 'dayjs/plugin/duration';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-
-import { Paper } from '@mui/material';
-
-import { ParentSize } from '..';
-
-import CustomTimePeriod from './CustomTimePeriod';
-import SelectedTimePeriod from './SelectedTimePeriod';
-import { useStyles } from './TimePeriods.styles';
-import {
-  CustomTimePeriod as CustomTimePeriodModel,
-  EndStartInterval,
-  TimePeriod as TimePeriodModel
-} from './models';
-import useTimePeriod from './useTimePeriod';
-
-dayjs.extend(isSameOrAfter);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-dayjs.extend(duration);
-interface Parameters extends EndStartInterval {
-  timelineEventsLimit: number;
-}
-export interface Props {
-  adjustTimePeriodData?: Omit<CustomTimePeriodModel, 'timelineEventsLimit'>;
-  disabled?: boolean;
-  extraTimePeriods?: Array<Omit<TimePeriodModel, 'timelineEventsLimit'>>;
-  getIsError?: (value: boolean) => void;
-  getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
-  renderExternalComponent?: ReactNode;
-}
-
-const TimePeriod = ({
-  extraTimePeriods,
-  disabled = false,
-  getParameters,
-  getIsError,
-  adjustTimePeriodData,
-  renderExternalComponent
-}: Props): JSX.Element => {
-  const { classes } = useStyles({ disabled });
-
-  useTimePeriod({
-    adjustTimePeriodData,
-    getIsError,
-    getParameters
-  });
-
-  return (
-    <div>
-      <ParentSize>
-        {({ width }): JSX.Element => {
-          return (
-            <Paper className={classes.header} style={{ width }}>
-              <SelectedTimePeriod
-                disabled={disabled}
-                extraTimePeriods={extraTimePeriods}
-                width={width}
-              />
-              <CustomTimePeriod disabled={disabled} />
-              <div>{renderExternalComponent}</div>
-            </Paper>
-          );
-        }}
-      </ParentSize>
-    </div>
-  );
-};
-export default TimePeriod;

package/src/TimePeriods/mockedData.ts

@@ -1,12 +0,0 @@
-import { ListingVariant } from '@centreon/ui-context';
-
-export const retrievedUser = {
-  alias: 'Admin alias',
-  default_page: '/monitoring/resources',
-  is_export_button_enabled: true,
-  isExportButtonEnabled: true,
-  locale: 'fr_FR.UTF8',
-  name: 'Admin',
-  use_deprecated_pages: false,
-  user_interface_density: ListingVariant.compact
-};

package/src/TimePeriods/models.ts

@@ -1,97 +0,0 @@
-import dayjs from 'dayjs';
-
-import {
-  labelLastDay,
-  label1Day,
-  label7Days,
-  label31Days,
-  labelLast7Days,
-  labelLast31Days
-} from './translatedLabels';
-
-export const dateFormat = 'L';
-export const timeFormat = 'LT';
-export const dateTimeFormat = `${dateFormat} ${timeFormat}`;
-
-export enum CustomTimePeriodProperty {
-  end = 'end',
-  start = 'start'
-}
-
-export interface TimePeriod {
-  dateTimeFormat: string;
-  getStart: () => Date;
-  id: string;
-  largeName: string;
-  name: string;
-  timelineEventsLimit: number;
-}
-
-export const lastDayPeriod: TimePeriod = {
-  dateTimeFormat: timeFormat,
-  getStart: (): Date => dayjs(Date.now()).subtract(24, 'hour').toDate(),
-  id: 'last_24_h',
-  largeName: labelLastDay,
-  name: label1Day,
-  timelineEventsLimit: 20
-};
-
-export const last7Days: TimePeriod = {
-  dateTimeFormat: dateFormat,
-  getStart: (): Date => dayjs(Date.now()).subtract(7, 'day').toDate(),
-  id: 'last_7_days',
-  largeName: labelLast7Days,
-  name: label7Days,
-  timelineEventsLimit: 100
-};
-
-export const last31Days: TimePeriod = {
-  dateTimeFormat: dateFormat,
-  getStart: (): Date => dayjs(Date.now()).subtract(31, 'day').toDate(),
-  id: 'last_31_days',
-  largeName: labelLast31Days,
-  name: label31Days,
-  timelineEventsLimit: 500
-};
-
-export const timePeriods: Array<TimePeriod> = [
-  lastDayPeriod,
-  last7Days,
-  last31Days
-];
-
-export interface TimePeriodById {
-  id: string;
-  timePeriods: Array<TimePeriod>;
-}
-
-export interface CustomTimePeriod {
-  end: Date;
-  start: Date;
-  timelineEventsLimit: number;
-}
-
-export interface DateTimePickerInputModel {
-  changeDate: (props) => void;
-  date: Date | null;
-  disabled?: boolean;
-  maxDate?: Date;
-  minDate?: Date;
-  property: CustomTimePeriodProperty;
-}
-
-export interface TimeLineAxisTickFormat extends CustomTimePeriod {
-  timeLineLimit: number;
-  xAxisTickFormat: string;
-}
-
-export interface GraphQueryParametersProps {
-  endDate?: Date;
-  startDate?: Date;
-  timePeriod?: TimePeriod | null;
-}
-
-export interface EndStartInterval {
-  end: string;
-  start: string;
-}

package/src/TimePeriods/timePeriodsAtoms.ts

@@ -1,102 +0,0 @@
-import dayjs from 'dayjs';
-import { atom } from 'jotai';
-import { always, cond, gte, isNil, T } from 'ramda';
-
-import {
-  defaultTimePeriod,
-  getTimePeriodById,
-  getTimePeriodFromNow
-} from './helpers';
-import { CustomTimePeriod, TimePeriod, TimePeriodById } from './models';
-
-export const selectedTimePeriodAtom = atom<TimePeriod | null>(
-  defaultTimePeriod
-);
-
-const defaultCustomTimePeriod = getTimePeriodFromNow(defaultTimePeriod);
-
-export const customTimePeriodAtom = atom(defaultCustomTimePeriod);
-
-export const errorTimePeriodAtom = atom(false);
-
-export const getNewCustomTimePeriod = ({
-  start,
-  end
-}: Omit<CustomTimePeriod, 'timelineEventsLimit'>): CustomTimePeriod => {
-  const customTimePeriodInDay = dayjs
-    .duration(dayjs(end).diff(dayjs(start)))
-    .asDays();
-
-  const timelineEventsLimit = cond<number, number>([
-    [gte(1), always(20)],
-    [gte(7), always(100)],
-    [T, always(500)]
-  ])(customTimePeriodInDay) as number;
-
-  return {
-    end,
-    start,
-    timelineEventsLimit
-  };
-};
-
-export const changeSelectedTimePeriodDerivedAtom = atom(
-  null,
-  (_, set, { id, timePeriods }: TimePeriodById) => {
-    const timePeriod = getTimePeriodById({ id, timePeriods });
-
-    set(selectedTimePeriodAtom, timePeriod);
-
-    const newCustomTimePeriod = getTimePeriodFromNow(timePeriod);
-
-    set(customTimePeriodAtom, newCustomTimePeriod);
-  }
-);
-
-export const changeCustomTimePeriodDerivedAtom = atom(
-  null,
-  (get, set, { date, property }) => {
-    const customTimePeriod = get(customTimePeriodAtom);
-
-    const newCustomTimePeriod = getNewCustomTimePeriod({
-      ...customTimePeriod,
-      [property]: date
-    });
-
-    set(customTimePeriodAtom, newCustomTimePeriod);
-    set(selectedTimePeriodAtom, null);
-  }
-);
-
-export const getDatesDerivedAtom = atom(
-  (get) =>
-    (timePeriod?: TimePeriod | null): [string, string, number] => {
-      const customTimePeriod = get(customTimePeriodAtom);
-
-      if (isNil(timePeriod)) {
-        return [
-          customTimePeriod.start.toISOString(),
-          customTimePeriod.end.toISOString(),
-          customTimePeriod.timelineEventsLimit
-        ];
-      }
-
-      return [
-        timePeriod.getStart().toISOString(),
-        new Date(Date.now()).toISOString(),
-        timePeriod.timelineEventsLimit
-      ];
-    }
-);
-
-export const adjustTimePeriodDerivedAtom = atom(
-  null,
-  (
-    _,
-    set,
-    adjustTimePeriodProps: Omit<CustomTimePeriod, 'timelineEventsLimit'>
-  ) => {
-    set(customTimePeriodAtom, getNewCustomTimePeriod(adjustTimePeriodProps));
-    set(selectedTimePeriodAtom, null);
-  }
-);

package/src/TimePeriods/translatedLabels.ts

@@ -1,9 +0,0 @@
-export const label1Day = '1 day';
-export const label7Days = '7 days';
-export const label31Days = '31 days';
-export const labelLastDay = 'Last day';
-export const labelLast7Days = 'Last 7 days';
-export const labelLast31Days = 'Last 31 days';
-export const labelFrom = 'From';
-export const labelTo = 'To';
-export const labelCompactTimePeriod = 'Compact time period';

package/src/TimePeriods/useSortTimePeriods.ts

@@ -1,31 +0,0 @@
-import dayjs from 'dayjs';
-import { T, always, cond, gte } from 'ramda';
-
-import { getTimePeriodFromNow } from './helpers';
-import { TimePeriod } from './models';
-
-const useSortTimePeriods = (
-  timePeriods: Array<TimePeriod>
-): Array<TimePeriod> => {
-  const adjustedTimePeriods = timePeriods.map((item) => {
-    const { end, start } = getTimePeriodFromNow(item);
-
-    const numberOfDays = dayjs.duration(dayjs(end).diff(dayjs(start))).asDays();
-
-    const timelineEventsLimit = cond<number, number>([
-      [gte(1), always(20)],
-      [gte(7), always(100)],
-      [T, always(500)]
-    ])(numberOfDays) as number;
-
-    return { item: { ...item, timelineEventsLimit }, numberOfDays };
-  });
-
-  const sortedTimePeriods = adjustedTimePeriods.sort(
-    (a, b) => a.numberOfDays - b.numberOfDays
-  );
-
-  return sortedTimePeriods.map((element) => element.item);
-};
-
-export default useSortTimePeriods;

package/src/TimePeriods/useTimePeriod.ts

@@ -1,49 +0,0 @@
-import { useEffect } from 'react';
-
-import { useAtomValue, useSetAtom } from 'jotai';
-
-import {
-  customTimePeriodAtom,
-  getDatesDerivedAtom,
-  selectedTimePeriodAtom,
-  errorTimePeriodAtom,
-  adjustTimePeriodDerivedAtom
-} from './timePeriodsAtoms';
-
-import { Props } from '.';
-
-const useTimePeriod = ({
-  getParameters,
-  getIsError,
-  adjustTimePeriodData
-}: Omit<Props, 'extraTimePeriods' | 'disabled'>): void => {
-  const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-  const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
-  const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
-  const adjustTimeTimePeriod = useSetAtom(adjustTimePeriodDerivedAtom);
-
-  useEffect(() => {
-    if (!adjustTimePeriodData) {
-      return;
-    }
-
-    adjustTimeTimePeriod(adjustTimePeriodData);
-  }, [adjustTimePeriodData?.start, adjustTimePeriodData?.end]);
-
-  useEffect(() => {
-    const [start, end, timelineEventsLimit] =
-      getCurrentEndStartInterval(selectedTimePeriod);
-
-    getParameters?.({ end, start, timelineEventsLimit });
-  }, [customTimePeriod.start, customTimePeriod.end, selectedTimePeriod]);
-
-  useEffect(() => {
-    if (!errorTimePeriod) {
-      return;
-    }
-    getIsError?.(errorTimePeriod);
-  }, [errorTimePeriod]);
-};
-
-export default useTimePeriod;

package/src/Typography/EllipsisTypography.tsx

@@ -1,18 +0,0 @@
-import { Box, Typography, TypographyProps } from '@mui/material';
-
-const EllipsisTypography = (props: TypographyProps): JSX.Element => {
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Typography
-        sx={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
-        }}
-        {...props}
-      />
-    </Box>
-  );
-};
-
-export default EllipsisTypography;

package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx

@@ -1,27 +0,0 @@
-import FluidTypography from '.';
-
-const initialize = ({ width, min, max, pref }): void => {
-  cy.viewport(width, 590);
-
-  cy.mount({
-    Component: (
-      <FluidTypography max={max} min={min} pref={pref} text="Unreachable" />
-    )
-  });
-};
-
-describe('FluidTypography', () => {
-  [500, 300, 150].forEach((width) => {
-    Object.entries({ max: '80px', min: '30px', pref: 10 }).forEach(
-      ([key, value]) => {
-        it(`displays the text when the viewport is ${width}px and the ${key} is ${value}`, () => {
-          initialize({ [key]: value, width });
-
-          cy.contains('Unreachable').should('be.visible');
-
-          cy.matchImageSnapshot();
-        });
-      }
-    );
-  });
-});

package/src/Typography/FluidTypography/index.stories.tsx

@@ -1,63 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-
-import { Box } from '@mui/material';
-
-import FluidTypography, { FluidTypographyProps } from '.';
-
-interface Props extends FluidTypographyProps {
-  height?: string | number;
-  width?: string | number;
-}
-
-const FluidTypographyTemplate = ({
-  width = '900px',
-  height = '700px',
-  text,
-  variant
-}: Props): JSX.Element => {
-  return (
-    <Box sx={{ height, width }}>
-      <FluidTypography text={text} variant={variant} />
-    </Box>
-  );
-};
-
-export default {
-  argTypes: {
-    height: { control: 'text' },
-    text: { control: 'text' },
-    variant: { control: 'text' },
-    width: { control: 'text' }
-  },
-  component: FluidTypographyTemplate,
-  title: 'Fluid Typography'
-} as ComponentMeta<typeof FluidTypographyTemplate>;
-
-export const basic = FluidTypographyTemplate.bind({});
-basic.args = {
-  text: 'Hello world'
-};
-
-export const with200pxWidth = FluidTypographyTemplate.bind({});
-with200pxWidth.args = {
-  height: '50%',
-  text: 'Hello world',
-  width: '50%'
-};
-
-export const with20pxHeight = FluidTypographyTemplate.bind({});
-with20pxHeight.args = {
-  height: '20px',
-  text: 'Hello world'
-};
-
-export const withLongText = FluidTypographyTemplate.bind({});
-withLongText.args = {
-  text: 'This is a very long text becaaaaaaause it has a lot to sayyyyy !!!!!!!!'
-};
-
-export const withHeading5Variant = FluidTypographyTemplate.bind({});
-withHeading5Variant.args = {
-  text: 'Hello world',
-  variant: 'h5'
-};

package/src/Typography/FluidTypography/index.tsx

@@ -1,44 +0,0 @@
-import { Typography, TypographyProps } from '@mui/material';
-
-type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
-export interface FluidTypographyProps extends CustomTypographyProps {
-  className?: string;
-  containerClassName?: string;
-  max?: string;
-  min?: string;
-  pref?: number;
-  text: string;
-}
-
-const FluidTypography = ({
-  text,
-  variant = 'body1',
-  className,
-  containerClassName,
-  min = '10px',
-  max = '1000px',
-  pref = 19
-}: FluidTypographyProps): JSX.Element => {
-  return (
-    <div
-      className={containerClassName}
-      style={{
-        containerType: 'inline-size',
-        height: `100%`,
-        width: `100%`
-      }}
-    >
-      <Typography
-        className={className}
-        sx={{
-          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
-        }}
-        variant={variant}
-      >
-        {text}
-      </Typography>
-    </div>
-  );
-};
-
-export default FluidTypography;