@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

package/src/TimePeriods/models.ts

@@ -1,103 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-import dayjs from 'dayjs';
-
-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 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 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;
-}
-
-export interface DateTimePickerInputModel {
-  changeDate: (props) => void;
-  date: Date | dayjs.Dayjs | null;
-  disabled?: boolean;
-  maxDate?: Date | dayjs.Dayjs;
-  minDate?: Date | dayjs.Dayjs;
-  onClosePicker?: (isClosed: boolean) => void;
-  property: CustomTimePeriodProperty;
-  setDate: Dispatch<SetStateAction<Date | null>>;
-}
-
-export interface GetNewCustomTimePeriodProps {
-  end: Date;
-  start: Date;
-}
-
-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/timePeriods.styles.ts

@@ -1,20 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-interface StylesProps {
-  disabled: boolean;
-}
-
-export const useStyles = makeStyles<StylesProps>()((theme, { disabled }) => ({
-  header: {
-    alignItems: 'center',
-    backgroundColor: disabled ? 'transparent' : 'undefined',
-    border: disabled ? 'unset' : 'undefined',
-    boxShadow: disabled ? 'unset' : 'undefined',
-    columnGap: theme.spacing(2),
-    display: 'grid',
-    gridTemplateColumns: `repeat(4, auto)`,
-    gridTemplateRows: '1fr',
-    justifyContent: 'center',
-    padding: theme.spacing(1, 0.5)
-  }
-}));

package/src/TimePeriods/timePeriodsAtoms.ts

@@ -1,113 +0,0 @@
-import { atom } from 'jotai';
-import { isNil, not, pipe } from 'ramda';
-
-import {
-  defaultTimePeriod,
-  getTimePeriodById,
-  getTimePeriodFromNow
-} from './helpers';
-import {
-  GraphQueryParametersProps,
-  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 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 = {
-      ...customTimePeriod,
-      [property]: date
-    };
-
-    set(customTimePeriodAtom, newCustomTimePeriod);
-    set(selectedTimePeriodAtom, null);
-  }
-);
-
-export const getDatesDerivedAtom = atom(
-  (get) =>
-    (timePeriod?: TimePeriod | null): [string, string] => {
-      const customTimePeriod = get(customTimePeriodAtom);
-
-      if (isNil(timePeriod)) {
-        return [
-          customTimePeriod.start.toISOString(),
-          customTimePeriod.end.toISOString()
-        ];
-      }
-
-      return [
-        timePeriod.getStart().toISOString(),
-        new Date(Date.now()).toISOString()
-      ];
-    }
-);
-
-export const graphQueryParametersDerivedAtom = atom(
-  (get) =>
-    ({ timePeriod, startDate, endDate }: GraphQueryParametersProps): string => {
-      const getDates = get(getDatesDerivedAtom);
-
-      if (pipe(isNil, not)(timePeriod)) {
-        const [start, end] = getDates(timePeriod);
-
-        return `?start=${start}&end=${end}`;
-      }
-
-      return `?start=${startDate?.toISOString()}&end=${endDate?.toISOString()}`;
-    }
-);
-
-// a deplacer le timelinelimit vers le graph
-
-// export const getNewTimeLineLimitAndAxisTickFormat = ({
-//   start,
-//   end
-// }: GetNewCustomTimePeriodProps): TimeLineAxisTickFormat => {
-//   const customTimePeriodInDay = dayjs
-//     .duration(dayjs(end).diff(dayjs(start)))
-//     .asDays();
-
-//   const xAxisTickFormat = gte(customTimePeriodInDay, 2)
-//     ? dateFormat
-//     : timeFormat;
-
-//   const timelineLimit = cond<number, number>([
-//     [gte(1), always(20)],
-//     [gte(7), always(100)],
-//     [T, always(500)]
-//   ])(customTimePeriodInDay);
-
-//   return {
-//     end,
-//     start,
-//     timelineLimit,
-//     xAxisTickFormat
-//   };
-// };

package/src/TimePeriods/useDateTimePickerAdapter.ts

@@ -1,329 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { useCallback } from 'react';
-
-import DayjsAdapter from '@date-io/dayjs';
-import dayjs from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals, isNil, not, pipe } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { userAtom } from '@centreon/ui-context';
-
-interface UseDateTimePickerAdapterProps {
-  Adapter;
-  formatKeyboardValue: (value?: string) => string | undefined;
-  getDestinationAndConfiguredTimezoneOffset: (
-    destinationTimezone?: string
-  ) => number;
-}
-
-enum DSTState {
-  SUMMER,
-  WINTER,
-  NODST
-}
-
-interface ToTimezonedDateProps {
-  date: Date;
-  timeZone?: string;
-}
-
-const isSummerDate = equals(DSTState.SUMMER);
-
-const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
-  const { timezone, locale } = useAtomValue(userAtom);
-  const { format } = useLocaleDateTimeFormat();
-
-  const normalizedLocale = locale.substring(0, 2);
-
-  const toTimezonedDate = ({
-    date,
-    timeZone = undefined
-  }: ToTimezonedDateProps): Date => {
-    if (isNil(timeZone)) {
-      return new Date(date.toLocaleString('en-US'));
-    }
-
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-  };
-
-  const getDestinationAndConfiguredTimezoneOffset = (
-    destinationTimezone?: string
-  ): number => {
-    const now = new Date();
-    const currentTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: destinationTimezone
-    });
-    const destinationTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: timezone
-    });
-
-    return Math.floor(
-      (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
-        60 /
-        60 /
-        1000
-    );
-  };
-
-  const getDSTState = useCallback(
-    (date: dayjs.Dayjs): DSTState => {
-      const currentYear = toTimezonedDate({
-        date: new Date(),
-        timeZone: timezone
-      }).getFullYear();
-
-      const january = dayjs(new Date(currentYear, 0, 1))
-        .tz(timezone)
-        .utcOffset();
-      const july = dayjs(new Date(currentYear, 6, 1)).tz(timezone).utcOffset();
-
-      if (equals(january, july)) {
-        return DSTState.NODST;
-      }
-
-      return july === date.utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
-    },
-    [timezone]
-  );
-
-  const formatKeyboardValue = (value?: string): string | undefined => {
-    if (equals(normalizedLocale, 'en') || isNil(value)) {
-      return value;
-    }
-    const month = value.substring(0, 2);
-    const day = value.substring(3, 5);
-
-    const newValue = `${day}/${month}/${value.substring(6, 16)}`;
-
-    return newValue;
-  };
-
-  interface Chunk {
-    array: Array<unknown>;
-    size: number;
-  }
-  class Adapter extends DayjsAdapter {
-    public formatByString = (value, formatKey: string): string => {
-      return format({
-        date: value.tz(timezone),
-        formatString: formatKey
-      });
-    };
-
-    public isEqual = (value, comparing): boolean => {
-      if (value === null && comparing === null) {
-        return true;
-      }
-
-      return equals(
-        format({ date: value, formatString: 'LT' }),
-        format({ date: comparing, formatString: 'LT' })
-      );
-    };
-
-    public format = (date: dayjs.Dayjs, formatKey: string): string => {
-      return this.formatByString(
-        date.tz(timezone, true),
-        this.formats[formatKey]
-      );
-    };
-
-    public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).startOf('week').utc();
-      }
-
-      return date.tz(timezone).startOf('week');
-    };
-
-    public getHours = (date): number => {
-      return date.tz(timezone).get('hour');
-    };
-
-    public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
-      const dateDSTState = getDSTState(date.tz(timezone));
-
-      const isNotASummerDate = pipe(isSummerDate, not)(dateDSTState);
-      const isInUTC = equals(
-        getDestinationAndConfiguredTimezoneOffset('UTC'),
-        0
-      );
-
-      if ((isInUTC && isNotASummerDate) || equals('UTC', timezone)) {
-        return date
-          .tz(timezone)
-          .set('hour', count - getDestinationAndConfiguredTimezoneOffset());
-      }
-
-      return date.tz(timezone).set('hour', count);
-    };
-
-    public isSameHour = (
-      date: dayjs.Dayjs,
-      comparing: dayjs.Dayjs
-    ): boolean => {
-      return date.tz(timezone).isSame(comparing.tz(timezone), 'hour');
-    };
-
-    public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
-      const isSameYearAndMonth = this.isSameYear(date, comparing)
-        ? this.isSameMonth(date, comparing)
-        : false;
-
-      return (
-        isSameYearAndMonth &&
-        date.tz(timezone).isSame(comparing.tz(timezone), 'day')
-      );
-    };
-
-    public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).startOf('day') as dayjs.Dayjs;
-    };
-
-    public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).endOf('day') as dayjs.Dayjs;
-    };
-
-    public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).utc();
-      }
-
-      return date.tz(timezone);
-    };
-
-    public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.endOf('month') as dayjs.Dayjs;
-    };
-
-    public isSameMonth = (
-      date: dayjs.Dayjs,
-      comparing: dayjs.Dayjs
-    ): boolean => {
-      return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
-    };
-
-    public getMonth = (date: dayjs.Dayjs): number => {
-      return date.month();
-    };
-
-    public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isAfter(value.endOf('month'));
-    };
-
-    public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isBefore(value.startOf('month'));
-    };
-
-    public getDaysInMonth = (date: dayjs.Dayjs): number => {
-      return date.tz(timezone).daysInMonth();
-    };
-
-    public getWeekdays = (): Array<string> => {
-      const start = dayjs().locale(locale).tz(timezone).startOf('week');
-
-      return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
-        this.formatByString(start.add(diff, 'day'), 'dd')
-      );
-    };
-
-    public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
-      if (!array.length) {
-        return [];
-      }
-      const head = array.slice(0, size);
-      const tail = array.slice(size);
-
-      return [head, ...this.getChunkFromArray({ array: tail, size })];
-    };
-
-    public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
-      const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
-
-      const startOfWeek = date.startOf('month').startOf('week');
-      const endOfWeek = date.endOf('month').endOf('week');
-
-      const start = startOfWeek.endOf('day');
-
-      const end = endOfWeek.endOf('day');
-      const customStart = isMorning
-        ? startOfWeek.startOf('day')
-        : startOfWeek.endOf('day');
-
-      const customEnd = isMorning
-        ? endOfWeek.startOf('day')
-        : endOfWeek.endOf('day');
-
-      const currentStart = start.isUTC()
-        ? start.tz(timezone, true)
-        : customStart;
-      const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
-
-      const numberOfDaysInCurrentMonth = currentEnd.diff(
-        currentStart,
-        'd',
-        true
-      );
-
-      const daysOfMonthWithTimezone = [
-        ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
-      ].reduce(
-        (acc, _, currentIndex) => {
-          if (acc[currentIndex].isUTC()) {
-            const newCurrent = acc[currentIndex]
-              .utc()
-              .add(1, 'day')
-              .tz(timezone, true);
-
-            return [...acc, newCurrent];
-          }
-
-          const newCurrent = acc[currentIndex].add(1, 'day');
-
-          return [...acc, newCurrent];
-        },
-        [currentStart]
-      );
-
-      const weeksArray = this.getChunkFromArray({
-        array: daysOfMonthWithTimezone,
-        size: 7
-      });
-
-      return weeksArray as Array<Array<dayjs.Dayjs>>;
-    };
-
-    public mergeDateAndTime = (
-      date: dayjs.Dayjs,
-      time: dayjs.Dayjs
-    ): dayjs.Dayjs => {
-      const dateWithTimezone = date.tz(timezone).startOf('day');
-      const timeWithTimezone = time.tz(timezone);
-
-      const dateDSTState = getDSTState(dateWithTimezone);
-
-      if (not(equals(dateDSTState, DSTState.SUMMER))) {
-        return dateWithTimezone
-          .add(timeWithTimezone.hour(), 'hour')
-          .add(timeWithTimezone.minute(), 'minute')
-          .add(timeWithTimezone.second(), 'second');
-      }
-
-      return dateWithTimezone
-        .hour(timeWithTimezone.hour())
-        .minute(timeWithTimezone.minute())
-        .second(timeWithTimezone.second());
-    };
-  }
-
-  return {
-    Adapter,
-    formatKeyboardValue,
-    getDestinationAndConfiguredTimezoneOffset
-  };
-};
-
-export default useDateTimePickerAdapter;

package/src/TimePeriods/useSortTimePeriods.ts

@@ -1,24 +0,0 @@
-import dayjs from 'dayjs';
-
-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();
-
-    return { item, numberOfDays };
-  });
-
-  const sortedTimePeriods = adjustedTimePeriods.sort(
-    (a, b) => a.numberOfDays - b.numberOfDays
-  );
-
-  return sortedTimePeriods.map((element) => element.item);
-};
-
-export default useSortTimePeriods;