@centreon/ui 24.4.19 → 24.4.21

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
-} 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<TimePeriod, '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/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: '200px',
-  text: 'Hello world',
-  width: '200px'
-};
-
-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,51 +0,0 @@
-import { useRef } from 'react';
-
-import { Typography, TypographyProps } from '@mui/material';
-
-import useFluidResizeObserver from './useFluidResizeObserver';
-
-type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
-export interface FluidTypographyProps extends CustomTypographyProps {
-  className?: string;
-  text: string;
-}
-
-const FluidTypography = ({
-  text,
-  variant = 'body1',
-  className
-}: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
-  return (
-    <div
-      ref={parentRef}
-      style={{
-        height: `${parentSize.height}px`,
-        width: `100%`
-      }}
-    >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
-    </div>
-  );
-};
-
-export default FluidTypography;

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -1,56 +0,0 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface UseFluidResizeObserver {
-  isParent?: boolean;
-  ref: MutableRefObject<HTMLElement | undefined>;
-}
-
-const useFluidResizeObserver = ({
-  ref,
-  isParent
-}: UseFluidResizeObserver): Size => {
-  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
-
-  const observer = useRef<ResizeObserver | null>(null);
-
-  const resizeObserver = useCallback(
-    (element) => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new ResizeObserver(
-        ([entry]: Array<ResizeObserverEntry>) => {
-          setSize({
-            height: entry.target?.getBoundingClientRect().height || 0,
-            width: entry.target?.getBoundingClientRect().width || 0
-          });
-        }
-      );
-
-      if (element && observer.current) {
-        observer.current.observe(element);
-      }
-    },
-    [ref.current]
-  );
-
-  useEffect(() => {
-    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
-  }, [ref.current]);
-
-  return size;
-};
-
-export default useFluidResizeObserver;