@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/TimePeriods/index.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
+
+import Switch from '@mui/material/Switch';
+
+import { dateFormat } from './models';
+
+import TimePeriod from '.';
+
+const meta: Meta<typeof TimePeriod> = {
+  component: TimePeriod,
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePeriod>;
+
+const Template: Story = {
+  render: (args) => <TimePeriod {...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'
+    }
+  ]
+};
+
+export const BasicTimePeriod: Story = {
+  ...Template,
+  argTypes
+};
+
+export const WithExtraTimePeriods: Story = {
+  ...Template,
+  argTypes,
+  args
+};
+
+export const WithExternalComponent: Story = {
+  ...TemplateWithExternalComponent,
+  argTypes
+};

package/src/TimePeriods/index.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+
+import { Responsive } from '@visx/visx';
+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 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>
+      <Responsive.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>
+          );
+        }}
+      </Responsive.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/api/TestQueryProvider.tsx

@@ -5,8 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 0,
-      retry: false
+      cacheTime: 0
     }
   }
 });

package/src/api/useFetchQuery/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import 'ulog';
 import {
@@ -30,13 +30,14 @@ export interface UseFetchQueryProps<T> {
   >;
 }
 
-export type UseFetchQueryState<T> = {
+export interface UseFetchQueryState<T>
+  extends Omit<QueryObserverBaseResult, 'data'> {
   data?: T;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data'>;
+}
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -154,11 +155,9 @@ const useFetchQuery = <T extends object>({
     );
   };
 
-  const data = useMemo(
-    () =>
-      not(has('isError', queryData.data)) ? (queryData.data as T) : undefined,
-    [queryData.data]
-  );
+  const data = not(has('isError', queryData.data))
+    ? (queryData.data as T)
+    : undefined;
 
   const errorData = queryData.data as ResponseError | undefined;
 

package/src/api/useMutationQuery/index.ts

@@ -1,11 +1,7 @@
 import 'ulog';
 import { useEffect } from 'react';
 
-import {
-  useMutation,
-  UseMutationOptions,
-  UseMutationResult
-} from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
 import { includes } from 'ramda';
@@ -21,7 +17,7 @@ export enum Method {
   PUT = 'PUT'
 }
 
-export type UseMutationQueryProps<T> = {
+export interface UseMutationQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -29,14 +25,16 @@ export type UseMutationQueryProps<T> = {
   getEndpoint: (payload) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-} & Omit<UseMutationOptions<T>, 'mutationFn'>;
+}
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = {
+export interface UseMutationQueryState<T> {
   isError: boolean;
   isMutating: boolean;
-} & UseMutationResult<T | ResponseError>;
+  mutate: (payload) => void;
+  mutateAsync: (payload) => Promise<T | ResponseError>;
+}
 
 const useMutationQuery = <T extends object>({
   getEndpoint,
@@ -86,9 +84,10 @@ const useMutationQuery = <T extends object>({
   }, [queryData.data]);
 
   return {
-    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading
+    isMutating: queryData.isLoading,
+    mutate: queryData.mutate,
+    mutateAsync: queryData.mutateAsync
   };
 };
 

package/src/components/Button/Button.styles.ts

@@ -2,20 +2,9 @@ import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   button: {
-    '&[data-size="medium"]': {
-      fontSize: '16px',
-      height: 'unset',
-      lineHeight: '24px'
-    },
-
     '&[data-size="small"]': {
-      '&[data-variant="primary"], &[data-variant="secondary"]': {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      },
-      fontSize: '14px',
-      height: 'unset',
-      lineHeight: '22px'
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2)
     },
 
     '&[data-variant="primary"]:not(:disabled)': {
@@ -34,10 +23,7 @@ const useStyles = makeStyles()((theme) => ({
 
       borderColor: theme.palette.primary.main,
       color: theme.palette.primary.main
-    },
-
-    textWrap: 'noWrap',
-    transition: 'unset'
+    }
   }
 }));
 

package/src/components/Button/Button.tsx

@@ -16,15 +16,13 @@ const muiVariantMap: Record<
   secondary: 'outlined'
 };
 
-export type ButtonProps = {
+type ButtonProps = {
   children: ReactNode;
-  className?: string;
   disabled?: boolean;
   icon?: string | ReactNode;
   iconVariant?: 'none' | 'start' | 'end';
   isDanger?: boolean;
   onClick?: (e) => void;
-  ref?: React.Ref<HTMLButtonElement>;
   size?: 'small' | 'medium' | 'large';
   type?: 'button' | 'submit' | 'reset';
   variant?: 'primary' | 'secondary' | 'ghost';
@@ -41,10 +39,9 @@ const Button = ({
   disabled = false,
   onClick,
   isDanger = false,
-  className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   const MuiOverrideProps = useMemo(
     () => ({
@@ -57,7 +54,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={cx(classes.button, className)}
+      className={classes.button}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/Button/Icon/IconButton.styles.ts

@@ -1,14 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()((theme) => ({
-  iconButton: {
-    '&[data-size="small"]': {
-      '& > svg, & > .MuiSvgIcon-root': {
-        fontSize: '1.125rem'
-      },
-      padding: theme.spacing(0.75)
-    }
-  }
+const useStyles = makeStyles()(() => ({
+  iconButton: {}
 }));
 
 export { useStyles };

package/src/components/DataTable/DataTable.stories.tsx

@@ -40,12 +40,3 @@ export const AsEmptyState: Story = {
     isEmpty: true
   }
 };
-
-export const withFixedHeightContainer: Story = {
-  args: { ...Default.args },
-  render: (args) => (
-    <div style={{ height: '400px' }}>
-      <DataTable {...args} />
-    </div>
-  )
-};