@centreon/ui 24.4.21 → 24.4.22

package/src/utils/docsURL.ts

@@ -0,0 +1,31 @@
+interface OnPremDocsURL {
+  majorVersion: string;
+  minorVersion: string;
+}
+
+interface DocsURL {
+  isCloudPlatform: boolean;
+  majorVersion: string;
+  minorVersion: string;
+}
+
+export const getOnPremDocsURL = ({
+  majorVersion,
+  minorVersion
+}: OnPremDocsURL): string => {
+  return `https://docs.centreon.com/docs/${majorVersion}.${minorVersion}/alerts-notifications/resources-status/#search-bar`;
+};
+export const cloudDocsURL =
+  'https://docs.centreon.com/cloud/alerts-notifications/resources-status/#search-bar';
+
+export const getDocsURL = ({
+  isCloudPlatform,
+  majorVersion,
+  minorVersion
+}: DocsURL): string => {
+  if (isCloudPlatform) {
+    return cloudDocsURL;
+  }
+
+  return getOnPremDocsURL({ majorVersion, minorVersion });
+};

package/src/utils/getNormalizedId.ts

@@ -1,5 +1,3 @@
-const getNormalizedId = (idToNormalized: string): string => {
+export const getNormalizedId = (idToNormalized: string): string => {
   return idToNormalized?.replace(/[^A-Z0-9]+/gi, '');
 };
-
-export default getNormalizedId;

package/src/utils/index.ts

@@ -0,0 +1,22 @@
+export * from './useLocaleDateTimeFormat';
+export * from './getNormalizedId';
+export * from './statuses';
+export * from './typedMemo';
+export * from './useCopyToClipboard';
+export * from './useDebounce';
+export * from './useDeepCallback';
+export * from './useDeepMemo';
+export * from './useIntersectionObserver';
+export * from './useKeyObserver';
+export * from './useLoadImage';
+export * from './useMemoComponent';
+export * from './useThemeMode';
+export * from './useViewportIntersection';
+export * from './panelSize';
+export * from './sanitizedHTML';
+export * from './docsURL';
+export * from './useInfiniteScrollListing';
+export * from './useLicenseExpirationWarning';
+export * from './useRefreshInterval';
+export * from './centreonBaseURL';
+export * from './usePluralizedTranslation';

package/src/utils/panelSize.ts

@@ -0,0 +1,15 @@
+import { gt } from 'ramda';
+
+export enum PanelSize {
+  Small = 550,
+  Medium = 675,
+  Large = 800
+}
+
+interface PanelSizeParams {
+  currentSize: number;
+}
+
+export const togglePanelSize = ({ currentSize }: PanelSizeParams): number => {
+  return gt(currentSize, PanelSize.Medium) ? PanelSize.Small : PanelSize.Large;
+};

package/src/utils/sanitizedHTML.ts

@@ -0,0 +1,18 @@
+import sanitizeHtml, { IOptions } from 'sanitize-html';
+import ReactHtmlParser from 'react-html-parser';
+
+interface UseSanitizedHTMLProps {
+  initialContent: string;
+  sanitizeOptions?: IOptions;
+}
+
+const sanitizedHTML = ({
+  initialContent,
+  sanitizeOptions = {}
+}: UseSanitizedHTMLProps): JSX.Element => {
+  const sanitizedContent = sanitizeHtml(initialContent, sanitizeOptions);
+
+  return ReactHtmlParser(sanitizedContent);
+};
+
+export { sanitizedHTML };

package/src/utils/translatedLabel.ts

@@ -0,0 +1,2 @@
+export const labelLicenseWarning = (module, daysUntilExpiration): string =>
+  `The ${module} license will expire in ${daysUntilExpiration} days`;

package/src/utils/useCopyToClipboard.ts

@@ -10,7 +10,8 @@ interface Props {
   errorMessage: string;
   successMessage: string;
 }
-const useCopyToClipboard = ({
+
+export const useCopyToClipboard = ({
   successMessage,
   errorMessage
 }: Props): Result => {
@@ -53,5 +54,3 @@ const useCopyToClipboard = ({
 
   return { copy };
 };
-
-export default useCopyToClipboard;

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -6,12 +6,17 @@ interface Props {
   wait: number;
 }
 
-const useDebounce = ({
+export const useDebounce = ({
   functionToDebounce,
   wait,
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = functionToDebounce;
+  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -19,9 +24,7 @@ const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      functionToDebounce(...args);
+      ref.current?.(...args);
     }, wait);
   }, memoProps);
 };
-
-export default useDebounce;

package/src/utils/useDeepCallback.ts

@@ -7,11 +7,9 @@ interface UseDeepCallback<TParameters, TReturn, TMemoProps> {
   deps: Array<TMemoProps>;
 }
 
-const useDeepCallback = <TParameters, TReturn, TMemoProps>({
+export const useDeepCallback = <TParameters, TReturn, TMemoProps>({
   deps,
   callback
 }: UseDeepCallback<TParameters, TReturn, TMemoProps>): ((
   props: TParameters
 ) => TReturn) => useCallback((props) => callback(props), useDeepCompare(deps));
-
-export default useDeepCallback;

package/src/utils/useDeepMemo.ts

@@ -7,10 +7,8 @@ interface UseDeepMemo<TVariable, TMemoProps> {
   variable: TVariable;
 }
 
-const useDeepMemo = <TVariable, TMemoProps>({
+export const useDeepMemo = <TVariable, TMemoProps>({
   deps,
   variable
 }: UseDeepMemo<TVariable, TMemoProps>): TVariable =>
   useMemo(() => variable, useDeepCompare(deps));
-
-export default useDeepMemo;

package/src/utils/useInfiniteScrollListing.ts

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { equals, gte, isNil, reduce } from 'ramda';
+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';
+import { Parameters } from '../api/buildListingEndpoint/models';
+
+interface UseInfiniteScrollListing<T> {
+  elementRef: (node) => void;
+  elements: Array<T>;
+  isLoading: boolean;
+  total?: number;
+}
+
+interface UseInfiniteScrollListingProps<T> {
+  customQueryParameters?: Array<QueryParameter>;
+  decoder?: JsonDecoder.Decoder<Listing<T>>;
+  endpoint: string;
+  limit?: number;
+  pageAtom: PrimitiveAtom<number>;
+  parameters?: Parameters;
+  queryKeyName: string;
+  suspense?: boolean;
+}
+
+export const useInfiniteScrollListing = <T>({
+  queryKeyName,
+  endpoint,
+  decoder,
+  pageAtom,
+  suspense = true,
+  parameters,
+  customQueryParameters,
+  limit = 100
+}: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
+  const [maxPage, setMaxPage] = useState(1);
+
+  const elements = useRef<Array<T> | undefined>(undefined);
+
+  const [page, setPage] = useAtom(pageAtom);
+
+  const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
+    Listing<T>
+  >({
+    decoder,
+    getEndpoint: (params) =>
+      buildListingEndpoint({
+        baseEndpoint: endpoint,
+        customQueryParameters,
+        parameters: { limit, page: params?.page || page, ...parameters }
+      }),
+    getQueryKey: () => [queryKeyName, page],
+    isPaginated: true,
+    queryOptions: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      suspense: suspense && equals(page, 1)
+    }
+  });
+
+  const elementRef = useIntersectionObserver({
+    action: () => {
+      setPage((currentPage) => currentPage + 1);
+    },
+    loading: !equals(fetchStatus, 'idle'),
+    maxPage,
+    page
+  });
+
+  elements.current = useMemo(() => {
+    if (isNil(data) || !equals(fetchStatus, 'idle')) {
+      return elements.current;
+    }
+
+    return reduce<T, Array<T>>(
+      (acc, element) => [...acc, element],
+      equals(page, 1) ? [] : elements.current || [],
+      data.result
+    );
+  }, [page, data, fetchStatus]);
+
+  useEffect(() => {
+    if (isNil(data)) {
+      return;
+    }
+
+    const total = data.meta.total || 1;
+    const newMaxPage = Math.ceil(total / limit);
+
+    setMaxPage(newMaxPage);
+
+    if (gte(page, newMaxPage)) {
+      return;
+    }
+
+    prefetchNextPage({
+      getPrefetchQueryKey: (newPage) => [`dashboards`, newPage],
+      page
+    });
+  }, [data]);
+
+  useEffect(() => {
+    return () => setPage(1);
+  }, []);
+
+  return {
+    elementRef,
+    elements: elements.current || [],
+    isLoading,
+    total: data?.meta.total
+  };
+};

package/src/utils/useIntersectionObserver.ts

@@ -2,16 +2,18 @@ import { useRef, useCallback } from 'react';
 
 interface HookParam {
   action: () => void;
+  intersectionObserverOptions?: IntersectionObserverInit;
   loading: boolean;
   maxPage: number;
   page: number;
 }
 
-const useIntersectionObserver = ({
+export const useIntersectionObserver = ({
   maxPage,
   page,
   loading,
-  action
+  action,
+  intersectionObserverOptions
 }: HookParam): ((node) => void) => {
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
@@ -30,7 +32,7 @@ const useIntersectionObserver = ({
         if (entry.isIntersecting && page < maxPage) {
           action();
         }
-      });
+      }, intersectionObserverOptions);
 
       if (node && observer.current) {
         observer.current.observe(node);
@@ -41,5 +43,3 @@ const useIntersectionObserver = ({
 
   return lastElementRef;
 };
-
-export default useIntersectionObserver;

package/src/utils/useKeyObserver.tsx

@@ -4,7 +4,7 @@ interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
 }
 
-const useKeyObserver = (): UseKeyObserverProps => {
+export const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
   const pressShift = (): void => setIsShiftKeyDown(true);
@@ -34,5 +34,3 @@ const useKeyObserver = (): UseKeyObserverProps => {
     isShiftKeyDown
   };
 };
-
-export default useKeyObserver;

package/src/utils/useLicenseExpirationWarning.test.tsx

@@ -0,0 +1,148 @@
+import dayjs from 'dayjs';
+import { renderHook } from '@testing-library/react';
+
+import {
+  getFetchCall,
+  mockResponse,
+  resetMocks,
+  waitFor
+} from '../../test/testRenderer';
+import TestQueryProvider from '../api/TestQueryProvider';
+
+import { labelLicenseWarning } from './translatedLabel';
+
+import { useLicenseExpirationWarning } from '.';
+
+const getMockedResponse = (expirationDate): object => ({
+  result: {
+    module: {
+      entities: [
+        {
+          description: 'Centreon Auto Discovery',
+          id: 'centreon-autodiscovery-server',
+          label: 'Centreon',
+          license: {
+            expiration_date: expirationDate,
+            host_limit: -1,
+            host_usage: 1,
+            is_valid: true,
+            required: true
+          },
+          type: 'module',
+          version: {
+            available: '23.10.0',
+            current: '23.10.0',
+            installed: true,
+            outdated: false
+          }
+        },
+        {
+          description: 'Centreon License Manager',
+          id: 'centreon-license-manager',
+          label: 'Centreon',
+          license: {
+            required: false
+          },
+          type: 'module',
+          version: {
+            available: '23.10.0',
+            current: '23.10.0',
+            installed: true,
+            outdated: false
+          }
+        },
+        {
+          description: 'Centreon Monitoring Connectors Manager',
+          id: 'centreon-pp-manager',
+          label: 'Centreon',
+          license: {
+            required: false
+          },
+          type: 'module',
+          version: {
+            available: '23.10.0',
+            current: '23.10.0',
+            installed: true,
+            outdated: false
+          }
+        }
+      ],
+      pagination: {
+        limit: 3,
+        offset: 0,
+        total: 3
+      }
+    },
+    widget: {
+      entities: [],
+      pagination: {
+        limit: 0,
+        offset: 0,
+        total: 0
+      }
+    }
+  },
+  status: true
+});
+
+const mockRequest = ({ expirationDate }: { expirationDate }): void => {
+  resetMocks();
+  mockResponse({
+    data: getMockedResponse(expirationDate)
+  });
+};
+
+const showMessage = jest.fn();
+
+jest.mock('../Snackbar/useSnackbar', () => ({
+  __esModule: true,
+  default: jest
+    .fn()
+    .mockImplementation(() => ({ showWarningMessage: showMessage }))
+}));
+
+const initialize = (): void => {
+  renderHook(
+    () =>
+      useLicenseExpirationWarning({
+        module: 'centreon-autodiscovery-server'
+      }),
+    {
+      wrapper: TestQueryProvider
+    }
+  );
+};
+
+const currentDate = dayjs();
+
+describe('License', () => {
+  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();
+
+    waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        'internal.php?object=centreon_module&action=list'
+      );
+    });
+
+    expect(showMessage).not.toHaveBeenCalled();
+  });
+
+  it('displays a warning message when the license expires within 15 days', () => {
+    mockRequest({ expirationDate: currentDate.add(10.5, 'day') });
+    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

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+
+import dayjs from 'dayjs';
+import { path, pipe, propEq, find, lt, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { useFetchQuery, useSnackbar } from '..';
+
+import { labelLicenseWarning } from './translatedLabel';
+
+const legacyBaseEndpoint = './api/internal.php';
+const extensionsEndpoint = `${legacyBaseEndpoint}?object=centreon_module&action=list`;
+
+interface Props {
+  module: string;
+}
+
+export const useLicenseExpirationWarning = ({ module }: Props): void => {
+  const { t } = useTranslation();
+  const { showWarningMessage } = useSnackbar();
+
+  const { data } = useFetchQuery({
+    getEndpoint: () => extensionsEndpoint,
+    getQueryKey: () => [module]
+  });
+
+  const currentDate = dayjs();
+
+  const getExpirationDate = pipe(
+    path(['result', 'module', 'entities']),
+    find(propEq(module, 'id')),
+    path(['license', 'expiration_date'])
+  ) as (data) => string;
+
+  useEffect(() => {
+    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.test.tsx

@@ -10,7 +10,7 @@ import { Provider, useSetAtom } from 'jotai';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

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}`;
@@ -87,5 +90,4 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export default useLocaleDateTimeFormat;
-export { dateTimeFormat, dateFormat, timeFormat };
+export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -10,7 +10,7 @@ import { render, RenderResult } from '@testing-library/react';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useMemoComponent.ts

@@ -19,7 +19,7 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-const useMemoComponent = ({
+export const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>

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/utils/useRefreshInterval.ts

@@ -0,0 +1,39 @@
+import { useAtomValue } from 'jotai';
+import { always, cond, equals } from 'ramda';
+
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
+interface Props {
+  globalRefreshInterval?: {
+    interval: number | null;
+    type: 'global' | 'manual';
+  };
+  refreshInterval: 'default' | 'custom' | 'manual';
+  refreshIntervalCustom?: number;
+}
+
+export const useRefreshInterval = ({
+  refreshInterval,
+  refreshIntervalCustom,
+  globalRefreshInterval = {
+    interval: null,
+    type: 'global'
+  }
+}: Props): number | false => {
+  const platformInterval = useAtomValue(refreshIntervalAtom);
+
+  const refreshIntervalToUse = cond([
+    [
+      equals('default'),
+      always(
+        equals(globalRefreshInterval.type, 'manual')
+          ? false
+          : globalRefreshInterval.interval || platformInterval
+      )
+    ],
+    [equals('custom'), always(refreshIntervalCustom)],
+    [equals('manual'), always(false)]
+  ])(refreshInterval);
+
+  return refreshIntervalToUse ? (refreshIntervalToUse as number) * 1000 : false;
+};

package/src/utils/useResizeObserver.ts

@@ -0,0 +1,6 @@
+// https://github.com/ZeeCoder/use-resize-observer
+import useResizeObserver from 'use-resize-observer';
+
+export * from 'use-resize-observer';
+
+export { useResizeObserver };

package/{setupTests.js → test/setupTests.js}

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
-// import '@testing-library/jest-dom/extend-expect';
+
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';