@centreon/ui 24.5.11 → 24.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.5.11",
+  "version": "24.5.13",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx

@@ -9,7 +9,7 @@ import { alpha, useTheme } from '@mui/material';
 import { GraphInterval, Interval } from '../../models';
 
 import { TimeShiftDirection } from './models';
-import useTimeShiftZones from './useTimeShiftZones';
+import { useTimeShiftZones } from './useTimeShiftZones';
 
 export const timeShiftZoneWidth = 50;
 

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts

@@ -11,7 +11,10 @@ interface Props {
   graphInterval: GraphInterval;
 }
 
-const useTimeShiftZones = ({ graphInterval, direction }: Props): Interval => {
+export const useTimeShiftZones = ({
+  graphInterval,
+  direction
+}: Props): Interval => {
   const shiftRatio = 2;
 
   const [start, setStart] = useState<Date>();
@@ -68,5 +71,3 @@ const useTimeShiftZones = ({ graphInterval, direction }: Props): Interval => {
 
   return { end, start } as Interval;
 };
-
-export default useTimeShiftZones;

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

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   button: {
-    height: '100%',
+    maxHeight: theme.spacing(4.5),
     padding: theme.spacing(0, 0.5)
   },
   buttonContent: {
@@ -11,11 +11,11 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex'
   },
   containerDates: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-      gap: theme.spacing(0.5)
-    }
+    display: 'flex'
+  },
+  containerDatesCondensed: {
+    flexDirection: 'column',
+    gap: theme.spacing(0.5)
   },
   date: {
     minWidth: theme.spacing(12),
@@ -40,10 +40,10 @@ const useStyles = makeStyles()((theme) => ({
     alignItems: 'center',
     columnGap: theme.spacing(0.5),
     display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('sm')]: {
-      alignItems: 'flex-start'
-    }
+    flexDirection: 'row'
+  },
+  timeContainerCondensed: {
+    alignItems: 'flex-start'
   }
 }));
 

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -17,14 +17,16 @@ import useStyles from './CompactCustomTimePeriod.styles';
 
 interface Props {
   disabled?: boolean;
+  isCondensed?: boolean;
   onClick: (event) => void;
 }
 
 const CompactCustomTimePeriod = ({
   onClick,
-  disabled = false
+  disabled = false,
+  isCondensed = false
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const { format } = useLocaleDateTimeFormat();
@@ -32,63 +34,73 @@ const CompactCustomTimePeriod = ({
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
 
   return (
-    <div>
-      <Button
-        aria-label={t(labelCompactTimePeriod) as string}
-        className={classes.button}
-        color="primary"
-        data-testid={labelCompactTimePeriod}
-        disabled={disabled}
-        variant="outlined"
-        onClick={onClick}
-      >
-        <div className={classes.buttonContent}>
-          <AccessTimeIcon />
-          <div className={classes.containerDates}>
-            <div className={classes.timeContainer}>
-              <Typography
-                className={classes.label}
-                component="div"
-                variant="caption"
-              >
-                {t(labelFrom)}:
-              </Typography>
+    <Button
+      aria-label={t(labelCompactTimePeriod) as string}
+      className={classes.button}
+      color="primary"
+      data-testid={labelCompactTimePeriod}
+      disabled={disabled}
+      variant="outlined"
+      onClick={onClick}
+    >
+      <div className={classes.buttonContent}>
+        <AccessTimeIcon />
+        <div
+          className={cx(classes.containerDates, {
+            [classes.containerDatesCondensed]: isCondensed
+          })}
+        >
+          <div
+            className={cx(classes.timeContainer, {
+              [classes.timeContainerCondensed]: isCondensed
+            })}
+          >
+            <Typography
+              className={classes.label}
+              component="div"
+              variant="caption"
+            >
+              {t(labelFrom)}:
+            </Typography>
 
-              <Typography
-                className={classes.date}
-                component="div"
-                variant="caption"
-              >
-                {format({
-                  date: customTimePeriod.start,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
-            <div className={classes.timeContainer}>
-              <Typography
-                className={classes.label}
-                component="div"
-                variant="caption"
-              >
-                {t(labelTo)}:
-              </Typography>
+            <Typography
+              className={classes.date}
+              component="div"
+              variant="caption"
+            >
+              {format({
+                date: customTimePeriod.start,
+                formatString: dateTimeFormat
+              })}
+            </Typography>
+          </div>
+          <div
+            className={cx(classes.timeContainer, {
+              [classes.timeContainerCondensed]: isCondensed
+            })}
+          >
+            <Typography
+              className={classes.label}
+              component="div"
+              variant="caption"
+            >
+              {t(labelTo)}:
+            </Typography>
 
-              <Typography
-                className={classes.date}
-                component="div"
-                variant="caption"
-              >
-                {format({
-                  date: customTimePeriod.end,
-                  formatString: dateTimeFormat
-                })}
-              </Typography>
-            </div>
+            <Typography
+              className={classes.date}
+              component="div"
+              variant="caption"
+            >
+              {format({
+                date: customTimePeriod.end,
+                formatString: dateTimeFormat
+              })}
+            </Typography>
           </div>
         </div>
-      </Button>
-    </div>
+      </div>
+    </Button>
   );
 };
 

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -14,9 +14,13 @@ import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
 
 interface Props {
   disabled?: boolean;
+  isCondensed?: boolean;
 }
 
-const CustomTimePeriod = ({ disabled = false }: Props): JSX.Element => {
+const CustomTimePeriod = ({
+  disabled = false,
+  isCondensed = false
+}: Props): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
@@ -42,6 +46,7 @@ const CustomTimePeriod = ({ disabled = false }: Props): JSX.Element => {
     <>
       <CompactCustomTimePeriod
         disabled={disabled}
+        isCondensed={isCondensed}
         onClick={onClickCompactCustomTimePeriod}
       />
       <PopoverCustomTimePeriod

package/src/TimePeriods/TimePeriods.styles.ts

@@ -5,12 +5,13 @@ interface StylesProps {
 }
 
 export const useStyles = makeStyles<StylesProps>()((theme, { disabled }) => ({
+  condensed: {
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    rowGap: theme.spacing(1)
+  },
   header: {
-    [theme.breakpoints.down('sm')]: {
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      rowGap: theme.spacing(1)
-    },
+    alignItems: 'center',
     backgroundColor: disabled ? 'transparent' : 'undefined',
     border: disabled ? 'unset' : 'undefined',
     boxShadow: disabled ? 'unset' : 'undefined',

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/index.tsx

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -10,70 +8,22 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
-import { Paper } from '@mui/material';
-
 import { ParentSize } from '..';
 
-import CustomTimePeriod from './CustomTimePeriod';
-import SelectedTimePeriod from './SelectedTimePeriod';
-import { useStyles } from './TimePeriods.styles';
-import {
-  CustomTimePeriod as CustomTimePeriodModel,
-  EndStartInterval,
-  TimePeriod as TimePeriodModel
-} from './models';
-import useTimePeriod from './useTimePeriod';
+import { WrapperTimePeriodProps } from './models';
+import TimePeriods from './TimePeriods';
 
 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<TimePeriodModel, '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
-  });
+const WrapperTimePeriods = (props: WrapperTimePeriodProps): JSX.Element => (
+  <ParentSize>
+    {({ width }): JSX.Element => {
+      return <TimePeriods width={width} {...props} />;
+    }}
+  </ParentSize>
+);
 
-  return (
-    <div>
-      <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>
-          );
-        }}
-      </ParentSize>
-    </div>
-  );
-};
-export default TimePeriod;
+export default WrapperTimePeriods;

package/src/TimePeriods/models.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import dayjs from 'dayjs';
 
 import {
@@ -95,3 +97,16 @@ 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;
+}

package/src/TimePeriods/useTimePeriod.ts

@@ -9,14 +9,13 @@ import {
   errorTimePeriodAtom,
   adjustTimePeriodDerivedAtom
 } from './timePeriodsAtoms';
-
-import { Props } from '.';
+import { WrapperTimePeriodProps } from './models';
 
 const useTimePeriod = ({
   getParameters,
   getIsError,
   adjustTimePeriodData
-}: Omit<Props, 'extraTimePeriods' | 'disabled'>): void => {
+}: Omit<WrapperTimePeriodProps, 'extraTimePeriods' | 'disabled'>): void => {
   const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
   const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);

package/src/utils/index.ts

@@ -23,3 +23,5 @@ export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';
 export * from './resourcesStatusURL';
+export * from '../Graph/LineChart/helpers';
+export * from '../Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';