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

package/src/Graph/useGraphData.ts

@@ -1,117 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useAtom } from 'jotai';
-import { find, propEq } from 'ramda';
-
-import { getData, useRequest } from '@centreon/ui';
-
-import { zoomParametersAtom } from './InteractionWithGraph/ZoomPreview/zoomPreviewAtoms';
-import { adjustGraphData } from './helpers';
-import { Data, GraphData, GraphParameters } from './models';
-
-interface QueryParameter {
-  endTime: string;
-  startTime: string;
-}
-
-interface GraphDataResult {
-  data?: Data;
-  loading: boolean;
-}
-interface Props extends GraphParameters {
-  baseUrl: string;
-}
-
-const useGraphData = ({ baseUrl, start, end }: Props): GraphDataResult => {
-  const [data, setData] = useState<Data>();
-
-  const { sendRequest: sendGetGraphDataRequest, sending: loading } =
-    useRequest<GraphData>({
-      request: getData
-    });
-
-  const [zoomParameters, setZoomParameters] = useAtom(zoomParametersAtom);
-
-  const prepareData = ({ response, queryParameters }): void => {
-    const { timeSeries } = adjustGraphData(response);
-    const baseAxis = response.global.base;
-    const { title } = response.global;
-
-    const newLineData = adjustGraphData(response).lines;
-
-    if (response?.lines) {
-      const newLines = newLineData.map((line) => ({
-        ...line,
-        display:
-          find(propEq('name', line.name), response.lines)?.display ?? true
-      }));
-
-      setData({
-        baseAxis,
-        lines: newLines,
-        queryParameters,
-        timeSeries,
-        title
-      });
-
-      return;
-    }
-
-    setData({
-      baseAxis,
-      lines: newLineData,
-      queryParameters,
-      timeSeries,
-      title
-    });
-  };
-
-  const getQueryParameters = ({ startTime, endTime }: QueryParameter): string =>
-    `?start=${startTime}&end=${endTime}`;
-
-  const getParameters = (): GraphParameters => {
-    const beginning = zoomParameters ? zoomParameters.start : start;
-    const ending = zoomParameters ? zoomParameters.end : end;
-
-    return { end: ending, start: beginning };
-  };
-
-  const queryParameters = zoomParameters
-    ? getQueryParameters({
-        endTime: zoomParameters.end,
-        startTime: zoomParameters.start
-      })
-    : getQueryParameters({ endTime: end, startTime: start });
-  useEffect(() => {
-    if (!end || !start || !baseUrl) {
-      return;
-    }
-
-    const endpoint = `${baseUrl}${queryParameters}`;
-
-    sendGetGraphDataRequest({
-      endpoint
-    }).then((response) => {
-      prepareData({ queryParameters: getParameters(), response });
-    });
-  }, [baseUrl, start, end]);
-
-  useEffect(() => {
-    if (!zoomParameters) {
-      return;
-    }
-
-    const endpoint = `${baseUrl}${queryParameters}`;
-
-    sendGetGraphDataRequest({
-      endpoint
-    }).then((response) => {
-      prepareData({ queryParameters: getParameters(), response });
-      setZoomParameters(null);
-    });
-  }, [zoomParameters]);
-
-  return { data, loading };
-};
-
-export default useGraphData;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -1,57 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    height: '100%',
-    minWidth: 120,
-    padding: theme.spacing(0, 0.5)
-  },
-  buttonContent: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
-  },
-  compactFromTo: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(0.5, 0, 0.5, 0)
-  },
-  date: {
-    display: 'flex'
-  },
-  dateLabel: {
-    display: 'flex',
-    flex: 1,
-    paddingRight: 4
-  },
-  error: {
-    textAlign: 'center'
-  },
-  fromTo: {
-    alignItems: 'center',
-    columnGap: theme.spacing(0.5),
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, auto)'
-  },
-  minimalPickers: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
-  },
-  picker: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  },
-  timeContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row'
-  }
-}));
-
-export default useStyles;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,78 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { lt } from 'ramda';
-
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Button, Typography, useTheme } from '@mui/material';
-
-import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { customTimePeriodAtom } from '../timePeriodsAtoms';
-
-import useStyles from './CompactCustomTimePeriod.styles';
-
-interface Props {
-  disabled?: boolean;
-  onClick: (event) => void;
-  width: number;
-}
-
-const CompactCustomTimePeriod = ({
-  width,
-  onClick,
-  disabled = false
-}: Props): JSX.Element => {
-  const theme = useTheme();
-  const { classes } = useStyles();
-
-  const { format } = useLocaleDateTimeFormat();
-
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-
-  const isCompact = lt(width, theme.breakpoints.values.sm);
-
-  return (
-    <Button
-      aria-label="Compact time period"
-      className={classes.button}
-      color="primary"
-      data-testid="Compact time period"
-      disabled={disabled}
-      variant="outlined"
-      onClick={onClick}
-    >
-      <div className={classes.buttonContent}>
-        <AccessTimeIcon />
-        <div className={isCompact ? classes.compactFromTo : classes.fromTo}>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">From:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
-                {format({
-                  date: customTimePeriod.start,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
-          </div>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">To:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
-                {format({
-                  date: customTimePeriod.end,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Button>
-  );
-};
-
-export default CompactCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx

@@ -1,14 +0,0 @@
-import { FormHelperText } from '@mui/material';
-
-interface Props {
-  message: string;
-  style: string;
-}
-
-const ErrorText = ({ message, style }: Props): JSX.Element => (
-  <FormHelperText error className={style}>
-    {message}
-  </FormHelperText>
-);
-
-export default ErrorText;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -1,169 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
-import { equals } from 'ramda';
-
-import { Typography } from '@mui/material';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-
-import { userAtom } from '@centreon/ui-context';
-
-import DateTimePickerInput from '../../DateTimePickerInput';
-import {
-  CustomTimePeriodProperty,
-  DateTimePickerInputModel
-} from '../../models';
-import useDateTimePickerAdapter from '../../useDateTimePickerAdapter';
-import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-
-import ErrorText from './ErrorText';
-import { PickersData, PickersStartEndDateDirection } from './models';
-import { PickersStartEndDateModel } from './usePickersStartEndDate';
-
-const useStyles = makeStyles()((theme) => ({
-  error: {
-    textAlign: 'center'
-  },
-  horizontalDirection: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: 0
-  },
-  horizontalError: {
-    textAlign: 'left'
-  },
-  row: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
-  },
-  verticalDirection: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  }
-}));
-
-interface PropsPickersDateWithLabel extends DateTimePickerInputModel {
-  direction?: PickersStartEndDateDirection;
-  label: string;
-}
-
-const PickerDateWithLabel = ({
-  label,
-  changeDate,
-  maxDate,
-  minDate,
-  property,
-  onClosePicker,
-  disabled,
-  date,
-  setDate,
-  direction = PickersStartEndDateDirection.column
-}: PropsPickersDateWithLabel): JSX.Element => {
-  const { classes, cx } = useStyles();
-  const isRow = equals(direction, PickersStartEndDateDirection.row);
-
-  return (
-    <div aria-label={label} className={cx({ [classes.row]: isRow })}>
-      <Typography component={isRow ? 'div' : 'p'}>{label}</Typography>
-      <DateTimePickerInput
-        changeDate={changeDate}
-        date={date}
-        disabled={disabled}
-        maxDate={maxDate}
-        minDate={minDate}
-        property={property}
-        setDate={setDate}
-        onClosePicker={onClosePicker}
-      />
-    </div>
-  );
-};
-
-interface DisabledPicker {
-  isDisabledEndPicker?: boolean;
-  isDisabledStartPicker?: boolean;
-}
-type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
-
-interface Props extends PickersDate, PickersStartEndDateModel {
-  direction?: PickersStartEndDateDirection;
-  disabled?: DisabledPicker;
-}
-
-const PickersStartEndDate = ({
-  startDate,
-  endDate,
-  disabled,
-  changeDate,
-  rangeStartDate,
-  rangeEndDate,
-  direction = PickersStartEndDateDirection.column
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-  const { Adapter } = useDateTimePickerAdapter();
-
-  const { locale } = useAtomValue(userAtom);
-  const error = useAtomValue(errorTimePeriodAtom);
-
-  const { start, setStart } = startDate;
-  const { end, setEnd } = endDate;
-
-  const maxStart = rangeStartDate?.max;
-  const minStart = rangeStartDate?.min;
-  const maxEnd = rangeEndDate?.max;
-  const minEnd = rangeEndDate?.min;
-
-  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
-    ? classes.verticalDirection
-    : classes.horizontalDirection;
-
-  const isHorizontalDirection = equals(
-    direction,
-    PickersStartEndDateDirection.row
-  );
-
-  return (
-    <LocalizationProvider dateAdapter={Adapter} locale={locale.substring(0, 2)}>
-      <div className={styleContainer}>
-        <PickerDateWithLabel
-          changeDate={changeDate}
-          date={start}
-          direction={direction}
-          disabled={disabled?.isDisabledStartPicker}
-          label="From"
-          maxDate={maxStart}
-          minDate={minStart}
-          property={CustomTimePeriodProperty.start}
-          setDate={setStart}
-        />
-        <PickerDateWithLabel
-          changeDate={changeDate}
-          date={end}
-          direction={direction}
-          disabled={disabled?.isDisabledEndPicker}
-          label="To"
-          maxDate={maxEnd}
-          minDate={minEnd}
-          property={CustomTimePeriodProperty.end}
-          setDate={setEnd}
-        />
-      </div>
-
-      {error && (
-        <ErrorText
-          message="The end date must be greater than the start date"
-          style={cx(classes.error, {
-            [classes.horizontalError]: isHorizontalDirection
-          })}
-        />
-      )}
-    </LocalizationProvider>
-  );
-};
-
-export default PickersStartEndDate;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx

@@ -1,76 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Popover } from '@mui/material';
-
-import {
-  PickersData,
-  PopoverData,
-  defaultAnchorOrigin,
-  defaultTransformOrigin
-} from './models';
-import usePickersStartEndDate from './usePickersStartEndDate';
-import PickersStartEndDate from './PickersStartEndDate';
-
-const useStyles = makeStyles()((theme) => ({
-  paper: {
-    '& .MuiPopover-paper': {
-      minWidth: 250,
-      padding: theme.spacing(1)
-    }
-  }
-}));
-
-interface Props {
-  pickersData: PickersData;
-  popoverData: PopoverData;
-}
-
-const PopoverCustomTimePeriod = ({
-  popoverData,
-  pickersData
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { open, onClose } = popoverData;
-  const { acceptDate, customTimePeriod } = pickersData;
-
-  const { startDate, endDate, changeDate } = usePickersStartEndDate({
-    acceptDate,
-    customTimePeriod
-  });
-
-  const anchorEl = popoverData?.anchorEl;
-  const anchorPosition = popoverData?.anchorPosition;
-  const anchorOrigin = popoverData?.anchorOrigin;
-  const transformOrigin = popoverData?.transformOrigin;
-  const anchorReference = anchorPosition ? 'anchorPosition' : 'anchorEl';
-
-  const disabled = {
-    isDisabledEndPicker: pickersData?.isDisabledEndPicker,
-    isDisabledStartPicker: pickersData?.isDisabledStartPicker
-  };
-
-  return (
-    <Popover
-      anchorEl={anchorEl}
-      anchorOrigin={anchorOrigin ?? defaultAnchorOrigin}
-      anchorPosition={anchorPosition}
-      anchorReference={anchorReference}
-      className={classes.paper}
-      open={open}
-      transformOrigin={transformOrigin ?? defaultTransformOrigin}
-      onClose={onClose}
-    >
-      <PickersStartEndDate
-        changeDate={changeDate}
-        disabled={disabled}
-        endDate={endDate}
-        rangeEndDate={pickersData?.rangeEndDate}
-        rangeStartDate={pickersData?.rangeStartDate}
-        startDate={startDate}
-      />
-    </Popover>
-  );
-};
-
-export default PopoverCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -1,61 +0,0 @@
-import { PopoverOrigin, PopoverPosition } from '@mui/material';
-
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
-
-interface RangeDate {
-  max?: Date;
-  min?: Date;
-}
-
-export interface AcceptDateProps {
-  date: Date;
-  property: CustomTimePeriodProperty;
-}
-
-export interface PickersData {
-  acceptDate: (props: AcceptDateProps) => void;
-  customTimePeriod: CustomTimePeriod;
-  getError?: (value: boolean) => void;
-  isDisabledEndPicker?: boolean;
-  isDisabledStartPicker?: boolean;
-  onCloseEndPicker?: (isClosed: boolean) => void;
-  onCloseStartPicker?: (isClosed: boolean) => void;
-  rangeEndDate?: RangeDate;
-  rangeStartDate?: RangeDate;
-}
-
-export interface PopoverData {
-  anchorEl?: HTMLButtonElement;
-  anchorOrigin?: PopoverOrigin;
-  anchorPosition?: PopoverPosition;
-  onClose?: () => void;
-  open: boolean;
-  transformOrigin?: PopoverOrigin;
-}
-
-export enum OriginHorizontalEnum {
-  center = 'center',
-  left = 'left',
-  right = 'right'
-}
-
-export enum OriginVerticalEnum {
-  bottom = 'bottom',
-  center = 'center',
-  top = 'top'
-}
-
-export const defaultAnchorOrigin = {
-  horizontal: OriginHorizontalEnum.center,
-  vertical: OriginVerticalEnum.top
-};
-
-export const defaultTransformOrigin = {
-  horizontal: OriginHorizontalEnum.center,
-  vertical: OriginVerticalEnum.top
-};
-
-export enum PickersStartEndDateDirection {
-  column = 'column',
-  row = 'row'
-}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts

@@ -1,91 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-import dayjs from 'dayjs';
-import { and, cond, equals, isNil } from 'ramda';
-import { useSetAtom } from 'jotai';
-
-import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
-
-import { AcceptDateProps } from './models';
-
-interface StartDate {
-  setStart: Dispatch<SetStateAction<Date | null>>;
-  start: Date | null;
-}
-interface EndDate {
-  end: Date | null;
-  setEnd: Dispatch<SetStateAction<Date | null>>;
-}
-
-export interface PickersStartEndDateModel {
-  changeDate: (props: AcceptDateProps) => void;
-  endDate: EndDate;
-  startDate: StartDate;
-}
-interface Props {
-  acceptDate: (props: AcceptDateProps) => void;
-  customTimePeriod: CustomTimePeriod;
-}
-
-const usePickersStartEndDate = ({
-  customTimePeriod,
-  acceptDate
-}: Props): PickersStartEndDateModel => {
-  const [start, setStart] = useState<Date | null>(
-    !isNil(customTimePeriod) ? customTimePeriod.start : null
-  );
-  const [end, setEnd] = useState<Date | null>(
-    !isNil(customTimePeriod) ? customTimePeriod.end : null
-  );
-
-  const setError = useSetAtom(errorTimePeriodAtom);
-
-  const isInvalidDate = ({ startDate, endDate }): boolean =>
-    dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');
-
-  const changeDate = ({ property, date }): void => {
-    const currentDate = customTimePeriod[property];
-    cond([
-      [equals(CustomTimePeriodProperty?.start), (): void => setStart(date)],
-      [equals(CustomTimePeriodProperty?.end), (): void => setEnd(date)]
-    ])(property);
-
-    if (dayjs(date).isSame(dayjs(currentDate)) || !dayjs(date).isValid()) {
-      return;
-    }
-
-    acceptDate({
-      date,
-      property
-    });
-  };
-
-  useEffect(() => {
-    if (
-      and(
-        dayjs(customTimePeriod.start).isSame(dayjs(start), 'minute'),
-        dayjs(customTimePeriod.end).isSame(dayjs(end), 'minute')
-      )
-    ) {
-      return;
-    }
-    setStart(customTimePeriod.start);
-    setEnd(customTimePeriod.end);
-  }, [customTimePeriod.start, customTimePeriod.end]);
-
-  useEffect(() => {
-    if (!end || !start) {
-      return;
-    }
-    setError(isInvalidDate({ endDate: end, startDate: start }));
-  }, [end, start]);
-
-  return {
-    changeDate,
-    endDate: { end, setEnd },
-    startDate: { setStart, start }
-  };
-};
-
-export default usePickersStartEndDate;