@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-test-code-coverage.0

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

package/src/utils/useInfiniteScrollListing.ts

@@ -24,6 +24,7 @@ interface UseInfiniteScrollListing<T> {
 interface UseInfiniteScrollListingProps<T> {
   customQueryParameters?: Array<QueryParameter>;
   decoder?: JsonDecoder.Decoder<Listing<T>>;
+  enabled?: boolean;
   endpoint: string;
   limit?: number;
   pageAtom: PrimitiveAtom<number>;
@@ -40,7 +41,8 @@ export const useInfiniteScrollListing = <T>({
   suspense = true,
   parameters,
   customQueryParameters,
-  limit = 100
+  limit = 100,
+  enabled = true
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -61,6 +63,7 @@ export const useInfiniteScrollListing = <T>({
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
+      enabled,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       suspense: suspense && equals(page, 1)

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;