@centreon/ui 24.4.21 → 24.4.22

package/src/TimePeriods/index.stories.tsx

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,56 @@
+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;