@centreon/ui 23.10.121 → 24.4.1-0

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+
+import { equals, includes } from 'ramda';
+import { useSearchParams } from 'react-router-dom';
+
+import { useDeepCompare } from '../useMemoComponent';
+
+import { useFullscreen } from './useFullscreen';
+
+export const router = {
+  useSearchParams
+};
+
+export const useFullscreenListener = (): boolean => {
+  const { toggleFullscreen, resetVariables, isFullscreenActivated } =
+    useFullscreen();
+
+  const toggle = (event: KeyboardEvent): void => {
+    if (
+      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
+      equals(
+        document.activeElement?.getAttribute('data-lexical-editor'),
+        'true'
+      ) ||
+      equals(document.activeElement?.getAttribute('contenteditable'), 'true') ||
+      !equals(event.code, 'KeyF')
+    ) {
+      return;
+    }
+
+    toggleFullscreen(document.querySelector('body'));
+  };
+
+  const changeFullscreen = (): void => {
+    if (document.fullscreenElement) {
+      return;
+    }
+
+    resetVariables();
+  };
+
+  useEffect(
+    () => {
+      document.addEventListener('fullscreenchange', changeFullscreen);
+
+      return () => {
+        document.removeEventListener('fullscreenchange', changeFullscreen);
+      };
+    },
+    useDeepCompare([document.fullscreenElement])
+  );
+
+  useEffect(() => {
+    window.addEventListener('keypress', toggle);
+
+    return () => {
+      window.removeEventListener('keypress', toggle);
+    };
+  }, [isFullscreenActivated]);
+
+  return isFullscreenActivated;
+};

package/src/utils/useInfiniteScrollListing.ts

@@ -5,33 +5,44 @@ import { PrimitiveAtom, useAtom } from 'jotai';
 import { JsonDecoder } from 'ts.data.json';
 
 import {
+  QueryParameter,
   buildListingEndpoint,
   useFetchQuery,
   useIntersectionObserver
 } from '@centreon/ui';
 
 import type { Listing } from '../api/models';
-
-const limit = 100;
+import { Parameters } from '../api/buildListingEndpoint/models';
 
 interface UseInfiniteScrollListing<T> {
   elementRef: (node) => void;
   elements: Array<T>;
   isLoading: boolean;
+  total?: number;
 }
 
 interface UseInfiniteScrollListingProps<T> {
-  decoder: JsonDecoder.Decoder<Listing<T>>;
+  customQueryParameters?: Array<QueryParameter>;
+  decoder?: JsonDecoder.Decoder<Listing<T>>;
+  enabled?: boolean;
   endpoint: string;
+  limit?: number;
   pageAtom: PrimitiveAtom<number>;
+  parameters?: Parameters;
   queryKeyName: string;
+  suspense?: boolean;
 }
 
 export const useInfiniteScrollListing = <T>({
   queryKeyName,
   endpoint,
   decoder,
-  pageAtom
+  pageAtom,
+  suspense = true,
+  parameters,
+  customQueryParameters,
+  limit = 100,
+  enabled = true
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -46,14 +57,21 @@ export const useInfiniteScrollListing = <T>({
     getEndpoint: (params) =>
       buildListingEndpoint({
         baseEndpoint: endpoint,
-        parameters: { limit, page: params?.page || page }
+        customQueryParameters,
+        parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [queryKeyName, page],
+    getQueryKey: () => [
+      queryKeyName,
+      page,
+      JSON.stringify(parameters),
+      JSON.stringify(customQueryParameters)
+    ],
     isPaginated: true,
     queryOptions: {
+      enabled,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      suspense: equals(page, 1)
+      suspense: suspense && equals(page, 1)
     }
   });
 
@@ -98,9 +116,14 @@ export const useInfiniteScrollListing = <T>({
     });
   }, [data]);
 
+  useEffect(() => {
+    return () => setPage(1);
+  }, []);
+
   return {
     elementRef,
     elements: elements.current || [],
-    isLoading
+    isLoading,
+    total: data?.meta.total
   };
 };

package/src/utils/{useLicenseExpirationWarning.cypress.spec.tsx → useLicenseExpirationWarning.test.tsx}

@@ -1,6 +1,13 @@
 import dayjs from 'dayjs';
+import { renderHook } from '@testing-library/react';
 
-import { TestQueryProvider, Method, SnackbarProvider } from '@centreon/ui';
+import {
+  getFetchCall,
+  mockResponse,
+  resetMocks,
+  waitFor
+} from '../../test/testRenderer';
+import TestQueryProvider from '../api/TestQueryProvider';
 
 import { labelLicenseWarning } from './translatedLabel';
 
@@ -79,59 +86,63 @@ const getMockedResponse = (expirationDate): object => ({
 });
 
 const mockRequest = ({ expirationDate }: { expirationDate }): void => {
-  cy.interceptAPIRequest({
-    alias: 'getLicenseInformations',
-    method: Method.GET,
-    path: '**internal.php?object=centreon_module&action=list',
-    response: getMockedResponse(expirationDate)
+  resetMocks();
+  mockResponse({
+    data: getMockedResponse(expirationDate)
   });
 };
 
-const TestComponent = (): JSX.Element => {
-  useLicenseExpirationWarning({
-    module: 'centreon-autodiscovery-server'
-  });
+const showMessage = jest.fn();
 
-  return <div />;
-};
-
-const TestWithQueryProvider = (): JSX.Element => {
-  return (
-    <TestQueryProvider>
-      <SnackbarProvider>
-        <TestComponent />
-      </SnackbarProvider>
-    </TestQueryProvider>
-  );
-};
+jest.mock('../Snackbar/useSnackbar', () => ({
+  __esModule: true,
+  default: jest
+    .fn()
+    .mockImplementation(() => ({ showWarningMessage: showMessage }))
+}));
 
 const initialize = (): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: <TestWithQueryProvider />
-  });
+  renderHook(
+    () =>
+      useLicenseExpirationWarning({
+        module: 'centreon-autodiscovery-server'
+      }),
+    {
+      wrapper: TestQueryProvider
+    }
+  );
 };
 
 const currentDate = dayjs();
 
 describe('License', () => {
-  beforeEach(initialize);
-
   it('does not display any warning message when the license expires in more than 15 days from the current date', () => {
     mockRequest({ expirationDate: currentDate.add(20, 'day') });
+    initialize();
 
-    cy.waitForRequest('@getLicenseInformations');
+    waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        'internal.php?object=centreon_module&action=list'
+      );
+    });
 
-    cy.findByText(
-      labelLicenseWarning('centreon-autodiscovery-server', 20)
-    ).should('not.exist');
+    expect(showMessage).not.toHaveBeenCalled();
   });
+
   it('displays a warning message when the license expires within 15 days', () => {
     mockRequest({ expirationDate: currentDate.add(10.5, 'day') });
-
-    cy.findByText(labelLicenseWarning('centreon-autodiscovery-server', 10));
-
-    cy.makeSnapshot();
+    initialize();
+
+    waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        'internal.php?object=centreon_module&action=list'
+      );
+    });
+
+    waitFor(() => {
+      expect(showMessage).toHaveBeenCalledWith(
+        labelLicenseWarning('centreon-autodiscovery-server', 10)
+      );
+    });
   });
 });

package/src/utils/useLicenseExpirationWarning.ts

@@ -19,7 +19,7 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
   const { t } = useTranslation();
   const { showWarningMessage } = useSnackbar();
 
-  const { fetchQuery } = useFetchQuery({
+  const { data } = useFetchQuery({
     getEndpoint: () => extensionsEndpoint,
     getQueryKey: () => [module]
   });
@@ -28,25 +28,25 @@ export const useLicenseExpirationWarning = ({ module }: Props): void => {
 
   const getExpirationDate = pipe(
     path(['result', 'module', 'entities']),
-    find(propEq('id', module)),
+    find(propEq(module, 'id')),
     path(['license', 'expiration_date'])
   ) as (data) => string;
 
   useEffect(() => {
-    fetchQuery().then((response) => {
-      const expirationDate = getExpirationDate(response);
-      if (isNil(expirationDate)) {
-        return;
-      }
-
-      const daysUntilExpiration = dayjs(expirationDate).diff(
-        currentDate,
-        'day'
-      );
-
-      if (lt(daysUntilExpiration, 15)) {
-        showWarningMessage(t(labelLicenseWarning(module, daysUntilExpiration)));
-      }
-    });
-  }, []);
+    if (isNil(data)) {
+      return;
+    }
+
+    const expirationDate = getExpirationDate(data);
+
+    if (isNil(expirationDate)) {
+      return;
+    }
+
+    const daysUntilExpiration = dayjs(expirationDate).diff(currentDate, 'day');
+
+    if (lt(daysUntilExpiration, 15)) {
+      showWarningMessage(t(labelLicenseWarning(module, daysUntilExpiration)));
+    }
+  }, [data]);
 };

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
@@ -20,6 +21,8 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
+dayjs.extend(localizedFormat);
+
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;

package/src/utils/usePluralizedTranslation.ts

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import pluralize from 'pluralize';
+
+interface TProps {
+  count: number;
+  label: string;
+}
+
+export const usePluralizedTranslation = (): {
+  pluralizedT: (props: TProps) => string;
+} => {
+  const translation = useTranslation();
+
+  const pluralizedT = ({ label, count }: TProps): string => {
+    return pluralize(translation.t(label), count);
+  };
+
+  return {
+    pluralizedT
+  };
+};

package/src/@assets/icons/downtime.icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{opacity:1;}</style></defs><g transform="translate(-94.852 -137.365)"><rect class="a" width="24" height="24" transform="translate(94.852 137.365)"/><g class="b" transform="translate(97.108 140.129)"><path d="M103.476,143.64a1.692,1.692,0,1,0-1.692-1.692A1.692,1.692,0,0,0,103.476,143.64Z" transform="translate(-97.132 -140.255)"/><path d="M114.266,150.2a1.05,1.05,0,0,0-.968-.647s-2.067-.275-2.68.125a2.464,2.464,0,0,0-.644.8l-3.454-.547c-.265-.874-1.4-4.183-1.4-4.183l-.846-1.353a1.743,1.743,0,0,0-1.438-.846,4.571,4.571,0,0,0-.677.084l-4.4,1.867v3.976H98l2.222.352-1.61,8.107h1.777l1.522-6.768,1.777,1.692v5.076h1.692v-6.345l-1.19-1.135,5.428.859-3.084,6.815,10.976-.11Zm-10.206-2.611s.577,1.356.88,2.089l-1.259-.2Zm-4.606,1.22v-2.212l1.522-.592-.586,2.952Z" transform="translate(-97.762 -139.74)"/></g></g></svg>

package/src/Graph/LineChart/BasicComponents/LoadingProgress.tsx

@@ -1,46 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { CircularProgress, alpha } from '@mui/material';
-
-interface StyleProps {
-  height: number;
-  width: number;
-}
-
-const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
-  graphLoader: {
-    alignItems: 'center',
-    backgroundColor: alpha(theme.palette.common.white, 0.5),
-    display: 'flex',
-    height,
-    justifyContent: 'center',
-    position: 'absolute',
-    width
-  }
-}));
-
-interface LoadingProgress {
-  display: boolean;
-  height: number;
-  width: number;
-}
-
-const LoadingProgress = ({
-  display,
-  height,
-  width
-}: LoadingProgress): JSX.Element | null => {
-  const { classes } = useStyles({ height, width });
-
-  if (!display) {
-    return null;
-  }
-
-  return (
-    <div className={classes.graphLoader}>
-      <CircularProgress />
-    </div>
-  );
-};
-
-export default LoadingProgress;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx

@@ -1,96 +0,0 @@
-import { Tooltip } from '@visx/visx';
-
-import { Typography, useTheme } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { TooltipAnchorModel } from './models';
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const theme = useTheme();
-
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-
-  const cardStyles = {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(0.25, 0.5)
-  };
-
-  return (
-    <>
-      {tooltipDataAxisX && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisX}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)'
-          }}
-          top={0}
-        >
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYLeft && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYLeft}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%) translateY(-100%)'
-          }}
-          top={tooltipTopAxisYLeft}
-        >
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYRight && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYRight}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)  translateY(-80%)'
-          }}
-          top={tooltipTopAxisYRight}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Tooltip.Tooltip>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -1,107 +0,0 @@
-import { useEffect } from 'react';
-
-import { Tooltip } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { margin, timeFormat } from '../../common/index';
-
-import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
-import useTickGraph from './useTickGraph';
-
-const useTooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
-  const { format } = useLocaleDateTimeFormat();
-
-  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
-    useTickGraph({
-      baseAxis,
-      leftScale,
-      lines,
-      rightScale,
-      timeSeries,
-      xScale
-    });
-
-  const {
-    showTooltip: showTooltipAxisYLeft,
-    tooltipData: tooltipDataAxisYLeft,
-    tooltipLeft: tooltipLeftAxisYLeft,
-    tooltipTop: tooltipTopAxisYLeft
-  } = Tooltip.useTooltip();
-  const {
-    showTooltip: showTooltipAxisX,
-    tooltipData: tooltipDataAxisX,
-    tooltipLeft: tooltipLeftAxisX,
-    tooltipTop: tooltipTopAxisX
-  } = Tooltip.useTooltip();
-
-  const {
-    showTooltip: showTooltipAxisYRight,
-    tooltipData: tooltipDataAxisYRight,
-    tooltipLeft: tooltipLeftAxisYRight,
-    tooltipTop: tooltipTopAxisYRight
-  } = Tooltip.useTooltip();
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisBottom) {
-      return;
-    }
-
-    const dataAxisX = format({
-      date: tickAxisBottom,
-      formatString: timeFormat
-    });
-
-    showTooltipAxisX({
-      tooltipData: dataAxisX,
-      tooltipLeft: positionX + margin.left,
-      tooltipTop: graphHeight + margin.top
-    });
-  }, [positionX, positionY, tickAxisBottom]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisLeft) {
-      return;
-    }
-    showTooltipAxisYLeft({
-      tooltipData: tickAxisLeft,
-      tooltipLeft: margin.left,
-      tooltipTop: positionY + margin.top
-    });
-  }, [tickAxisLeft, positionX, positionY]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisRight) {
-      return;
-    }
-    showTooltipAxisYRight({
-      tooltipData: tickAxisRight,
-      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
-      tooltipTop: positionY + margin.top
-    });
-  }, [positionX, positionY, tickAxisRight]);
-
-  return {
-    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
-    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
-    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  } as UseTooltipAnchorPointResult;
-};
-
-export default useTooltipAnchorPoint;

package/src/Graph/LineChart/Legend/InteractiveValue.tsx

@@ -1,22 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useStyles } from './Legend.styles';
-
-interface Props {
-  value?: string | null;
-}
-
-const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useStyles({});
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <Typography className={classes.legendValue} variant="h6">
-      {value}
-    </Typography>
-  );
-};
-
-export default InteractiveValue;

package/src/Graph/LineChart/Legend/Marker.tsx

@@ -1,43 +0,0 @@
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-export enum LegendMarkerVariant {
-  'dot',
-  'bar'
-}
-
-interface StylesProps {
-  color?: string;
-  variant: LegendMarkerVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { color, variant }) => ({
-  disabled: {
-    color: theme.palette.text.disabled
-  },
-  icon: {
-    backgroundColor: color,
-    borderRadius: equals(LegendMarkerVariant.dot, variant) ? '50%' : 0,
-    height: equals(LegendMarkerVariant.dot, variant) ? 9 : '100%',
-    marginRight: theme.spacing(0.5),
-    width: 9
-  }
-}));
-
-interface Props {
-  color: string;
-  disabled?: boolean;
-  variant?: LegendMarkerVariant;
-}
-
-const LegendMarker = ({
-  disabled,
-  color,
-  variant = LegendMarkerVariant.bar
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ color, variant });
-
-  return <div className={cx(classes.icon, { [classes.disabled]: disabled })} />;
-};
-
-export default LegendMarker;