@centreon/ui 24.7.6 → 24.7.7

package/src/TimePeriods/TimePeriods.tsx

@@ -0,0 +1,59 @@
+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 { lt } from 'ramda';
+
+import { Paper, Theme, useMediaQuery } from '@mui/material';
+
+import CustomTimePeriod from './CustomTimePeriod';
+import SelectedTimePeriod from './SelectedTimePeriod';
+import { useStyles } from './TimePeriods.styles';
+import useTimePeriod from './useTimePeriod';
+import { WrapperTimePeriodProps } from './models';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(utcPlugin);
+dayjs.extend(timezonePlugin);
+dayjs.extend(duration);
+
+const TimePeriods = ({
+  extraTimePeriods,
+  disabled = false,
+  getParameters,
+  getIsError,
+  adjustTimePeriodData,
+  renderExternalComponent,
+  width
+}: WrapperTimePeriodProps & { width: number }): JSX.Element => {
+  const { classes, cx } = useStyles({ disabled });
+
+  useTimePeriod({
+    adjustTimePeriodData,
+    getIsError,
+    getParameters
+  });
+
+  const isCondensed =
+    useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')) ||
+    lt(width, 600);
+
+  return (
+    <Paper className={cx(classes.header, { [classes.condensed]: isCondensed })}>
+      <SelectedTimePeriod
+        disabled={disabled}
+        extraTimePeriods={extraTimePeriods}
+        width={width}
+      />
+      <CustomTimePeriod disabled={disabled} isCondensed={isCondensed} />
+      <div>{renderExternalComponent}</div>
+    </Paper>
+  );
+};
+
+export default TimePeriods;

package/src/TimePeriods/helpers/index.ts

@@ -0,0 +1,26 @@
+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),
+    timelineEventsLimit: timePeriod?.timelineEventsLimit as number
+  };
+};
+
+export const getTimePeriodById = ({
+  id,
+  timePeriods
+}: TimePeriodById): TimePeriod =>
+  find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;

package/src/TimePeriods/index.stories.tsx

@@ -0,0 +1,116 @@
+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,
+  parameters: {
+    chromatic: { disableSnapshot: true }
+  },
+  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'
+    }
+  ]
+};
+
+export const BasicTimePeriod: Story = {
+  ...Template,
+  argTypes
+};
+
+export const WithExtraTimePeriods: Story = {
+  ...Template,
+  argTypes,
+  args
+};
+
+export const WithExternalComponent: Story = {
+  ...TemplateWithExternalComponent,
+  argTypes
+};
+
+export const SimpleTimePeriod: StorySimpleTimePeriod = {
+  ...TemplateWithSimpleTimePeriod,
+  args: {
+    endDate: dayjs(Date.now()).toDate(),
+    startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
+  }
+};

package/src/TimePeriods/index.tsx

@@ -0,0 +1,37 @@
+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 { ParentSize } from '..';
+import LoadingSkeleton from '../LoadingSkeleton';
+
+import { WrapperTimePeriodProps } from './models';
+import TimePeriods from './TimePeriods';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(utcPlugin);
+dayjs.extend(timezonePlugin);
+dayjs.extend(duration);
+
+const WrapperTimePeriods = ({
+  skeletonHeight = 38,
+  ...rest
+}: WrapperTimePeriodProps): JSX.Element => (
+  <ParentSize>
+    {({ width }): JSX.Element => {
+      return !width ? (
+        <LoadingSkeleton height={skeletonHeight} variant="rectangular" />
+      ) : (
+        <TimePeriods width={width} {...rest} />
+      );
+    }}
+  </ParentSize>
+);
+
+export default WrapperTimePeriods;

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,113 @@
+import { ReactNode } from 'react';
+
+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;
+}
+
+interface Parameters extends EndStartInterval {
+  timelineEventsLimit: number;
+}
+
+export interface WrapperTimePeriodProps {
+  adjustTimePeriodData?: Omit<CustomTimePeriod, 'timelineEventsLimit'>;
+  disabled?: boolean;
+  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
+  getIsError?: (value: boolean) => void;
+  getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
+  renderExternalComponent?: ReactNode;
+  skeletonHeight?: number;
+}

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,48 @@
+import { useEffect } from 'react';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import {
+  customTimePeriodAtom,
+  getDatesDerivedAtom,
+  selectedTimePeriodAtom,
+  errorTimePeriodAtom,
+  adjustTimePeriodDerivedAtom
+} from './timePeriodsAtoms';
+import { WrapperTimePeriodProps } from './models';
+
+const useTimePeriod = ({
+  getParameters,
+  getIsError,
+  adjustTimePeriodData
+}: Omit<WrapperTimePeriodProps, '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/TopCounterElements/TopCounterLayout.tsx

@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { Badge, ClickAwayListener } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SvgIcon } from '@mui/material';
+import { Badge, ClickAwayListener } from '@mui/material';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
@@ -115,7 +115,6 @@ const TopCounterLayout = ({
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
-
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
   useCloseOnLegacyPage({ setToggled });
 

package/src/TopCounterElements/{useCloseOnLegacyPage.ts → useCloseOnLegacyPage.tsx}

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 
+import { isNil } from 'ramda';
 import { useLocation } from 'react-router-dom';
 
 interface Props {
@@ -14,9 +15,11 @@ const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
   };
 
   useEffect(() => {
-    const iframe = document.getElementById('main-content') as HTMLIFrameElement;
+    const iframe = document.getElementById(
+      'main-content'
+    ) as HTMLIFrameElement | null;
 
-    if (!isLegacyRoute) {
+    if (!isLegacyRoute || isNil(iframe)) {
       return () => undefined;
     }
 

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/FluidTypography.cypress.spec.tsx

@@ -0,0 +1,27 @@
+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();
+        });
+      }
+    );
+  });
+});