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

package/src/TimePeriods/models.ts

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

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

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

@@ -0,0 +1,329 @@
+/* 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

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