@centreon/ui 24.5.12 → 24.5.13

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,27 @@
+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';
+export * from './useResizeObserver';
+export * from './useFullscreen';
+export * from './resourcesStatusURL';
+export * from '../Graph/LineChart/helpers';
+export * from '../Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';

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/resourcesStatusURL.ts

@@ -0,0 +1,166 @@
+import {
+  always,
+  cond,
+  equals,
+  flatten,
+  groupBy,
+  identity,
+  includes,
+  map,
+  pipe,
+  T
+} from 'ramda';
+
+import { SelectEntry } from '..';
+
+import { centreonBaseURL } from './centreonBaseURL';
+
+export interface Resource {
+  resourceType: string;
+  resources: Array<SelectEntry>;
+}
+
+interface GetResourcesUrlProps {
+  allResources: Array<Resource>;
+  isForOneResource: boolean;
+  resource?;
+  states: Array<string>;
+  statuses: Array<string>;
+  type: string;
+}
+
+export const getDetailsPanelQueriers = ({ resource, type }): object => {
+  const { id, parentId, uuid } = resource;
+
+  const resourcesDetailsEndpoint = cond([
+    [
+      equals('host'),
+      always(`${centreonBaseURL}/api/latest/monitoring/resources/hosts/${id}`)
+    ],
+    [
+      equals('service'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/hosts/${parentId}/services/${id}`
+      )
+    ],
+    [
+      equals('metaservice'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/metaservices/${id}`
+      )
+    ],
+    [
+      equals('anomaly-detection'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/anomaly-detection/${id}`
+      )
+    ]
+  ])(type);
+
+  const queryParameters = {
+    id,
+    resourcesDetailsEndpoint,
+    selectedTimePeriodId: 'last_24_h',
+    tab: 'details',
+    tabParameters: {},
+    uuid
+  };
+
+  return queryParameters;
+};
+
+export const getResourcesUrl = ({
+  type,
+  statuses,
+  states,
+  allResources,
+  isForOneResource,
+  resource
+}: GetResourcesUrlProps): string => {
+  const resourcesCriterias = equals(type, 'all')
+    ? {
+        name: 'resource_types',
+        value: [
+          { id: 'service', name: 'Service' },
+          { id: 'host', name: 'Host' }
+        ]
+      }
+    : {
+        name: 'resource_types',
+        value: [
+          { id: type, name: `${type.charAt(0).toUpperCase()}${type.slice(1)}` }
+        ]
+      };
+
+  const formattedStatuses = pipe(
+    flatten,
+    map((status: string) => {
+      return {
+        id: status.toLocaleUpperCase(),
+        name: `${status.charAt(0).toUpperCase()}${status.slice(1)}`
+      };
+    })
+  )(statuses);
+
+  const formattedStates = states.map((state) => {
+    return {
+      id: state,
+      name: `${state.charAt(0).toUpperCase()}${state.slice(1)}`
+    };
+  });
+
+  const groupedResources = groupBy(
+    ({ resourceType }) => resourceType,
+    allResources
+  );
+
+  const resourcesFilters = Object.entries(groupedResources).map(
+    ([resourceType, res]) => {
+      const name = cond<Array<string>, string>([
+        [equals('host'), always('parent_name')],
+        [equals('service'), always('name')],
+        [T, identity]
+      ])(resourceType);
+
+      return {
+        name: name.replace('-', '_'),
+        value: flatten(
+          (res || []).map(({ resources: subResources }) => {
+            return subResources.map(({ name: resourceName }) => ({
+              id: includes(name, ['name', 'parent_name'])
+                ? `\\b${resourceName}\\b`
+                : resourceName,
+              name: resourceName
+            }));
+          })
+        )
+      };
+    }
+  );
+
+  const filterQueryParameter = {
+    criterias: [
+      resourcesCriterias,
+      { name: 'statuses', value: formattedStatuses },
+      { name: 'states', value: formattedStates },
+      ...resourcesFilters,
+      { name: 'search', value: '' }
+    ]
+  };
+
+  const encodedFilterParams = encodeURIComponent(
+    JSON.stringify(filterQueryParameter)
+  );
+
+  if (!isForOneResource) {
+    return `/monitoring/resources?filter=${encodedFilterParams}&fromTopCounter=true`;
+  }
+
+  const detailsPanelQueriers = getDetailsPanelQueriers({ resource, type });
+
+  const encodedDetailsParams = encodeURIComponent(
+    JSON.stringify(detailsPanelQueriers)
+  );
+
+  return `/monitoring/resources?details=${encodedDetailsParams}&filter=${encodedFilterParams}&fromTopCounter=true`;
+};

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/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -0,0 +1,130 @@
+import { Provider, createStore } from 'jotai';
+import { BrowserRouter } from 'react-router-dom';
+
+import { Button } from '@mui/material';
+
+import { useFullscreen } from './useFullscreen';
+import { router, useFullscreenListener } from './useFullscreenListener';
+
+const labelEnterFullscreen = 'Enter fullscreen';
+const labelExitFullscreen = 'Exit fullscreen';
+
+const ChildComponent = (): JSX.Element => {
+  const { toggleFullscreen, fullscreenEnabled, isFullscreenActivated } =
+    useFullscreen();
+
+  return (
+    <div
+      data-fullscreenActivated={isFullscreenActivated}
+      data-fullscreenEnabled={fullscreenEnabled}
+      id="test"
+    >
+      <Button onClick={() => toggleFullscreen(document.body)}>
+        {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
+      </Button>
+      <input id="input" />
+      <textarea id="textarea" />
+    </div>
+  );
+};
+
+const TestComponent = (): JSX.Element => {
+  useFullscreenListener();
+
+  return <ChildComponent />;
+};
+
+const initialize = (): void => {
+  const store = createStore();
+
+  const queryParameters = new Map();
+
+  cy.stub(router, 'useSearchParams', () => queryParameters);
+
+  cy.mount({
+    Component: (
+      <BrowserRouter>
+        <Provider store={store}>
+          <TestComponent />
+        </Provider>
+      </BrowserRouter>
+    )
+  });
+};
+
+describe('Fullscreen', () => {
+  it('enters fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+  });
+
+  it('exits fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+
+  it('toggles fullscreen mode when the corresponding shortcut is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+
+  ['input', 'textarea'].forEach((tag) => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
+      initialize();
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+      cy.get(`#${tag}`).focus();
+
+      cy.get('#test').realPress(['F']);
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+      cy.get(`#${tag}`).should('have.value', 'F');
+    });
+  });
+});

package/src/utils/useFullscreen/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isFullscreenActivatedAtom = atom(false);

package/src/utils/useFullscreen/index.ts

@@ -0,0 +1,2 @@
+export * from './useFullscreen';
+export * from './useFullscreenListener';

package/src/utils/useFullscreen/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelCannotEnterInFullscreen = 'Cannot enter fullscreen mode';

package/src/utils/useFullscreen/useFullscreen.ts

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { useAtom } from 'jotai';
+
+import { useSnackbar } from '../..';
+
+import { labelCannotEnterInFullscreen } from './translatedLabels';
+import { isFullscreenActivatedAtom } from './atoms';
+
+interface UseFullscreenState {
+  enterInFullscreen: (element: HTMLElement | null) => void;
+  exitFullscreen: () => void;
+  fullscreenEnabled: boolean;
+  isFullscreenActivated: boolean;
+  resetVariables: () => void;
+  toggleFullscreen: (element: HTMLElement | null) => void;
+}
+
+export const useFullscreen = (): UseFullscreenState => {
+  const { t } = useTranslation();
+
+  const { showErrorMessage } = useSnackbar();
+
+  const [isFullscreenActivated, setIsFullscreenActivated] = useAtom(
+    isFullscreenActivatedAtom
+  );
+
+  const resetVariables = (): void => {
+    setIsFullscreenActivated(false);
+  };
+
+  const enterInFullscreen = (element: HTMLElement | null): void => {
+    if (!document.fullscreenEnabled) {
+      return;
+    }
+
+    if (!element) {
+      showErrorMessage(t(labelCannotEnterInFullscreen));
+    }
+
+    element
+      ?.requestFullscreen({ navigationUI: 'show' })
+      .then(() => {
+        setIsFullscreenActivated(true);
+      })
+      .catch(() => {
+        showErrorMessage(t(labelCannotEnterInFullscreen));
+        setIsFullscreenActivated(false);
+      });
+  };
+
+  const exitFullscreen = (): void => {
+    document.exitFullscreen().then(resetVariables);
+  };
+
+  const toggleFullscreen = (element: HTMLElement | null): void => {
+    if (isFullscreenActivated || document.fullscreenElement) {
+      exitFullscreen();
+
+      return;
+    }
+
+    enterInFullscreen(element);
+  };
+
+  return {
+    enterInFullscreen,
+    exitFullscreen,
+    fullscreenEnabled: document.fullscreenEnabled,
+    isFullscreenActivated,
+    resetVariables,
+    toggleFullscreen
+  };
+};

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;
+};