@centreon/ui 24.7.2 → 24.7.4

package/src/utils/docsURL.ts

@@ -1,31 +0,0 @@
-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/index.ts

@@ -1,27 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -1,130 +0,0 @@
-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

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

package/src/utils/useFullscreen/index.ts

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

package/src/utils/useFullscreen/translatedLabels.ts

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

package/src/utils/useFullscreen/useFullscreen.ts

@@ -1,73 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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>>;
-  enabled?: boolean;
-  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,
-  enabled = true
-}: 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: {
-      enabled,
-      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
-  };
-};