@centreon/ui 23.10.121 → 24.4.0

package/src/components/Zoom/localPoint.ts

@@ -0,0 +1,51 @@
+import type {
+  FocusEvent as ReactFocusEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent
+} from 'react';
+
+import { Point } from '@visx/point';
+
+type EventType =
+  | MouseEvent
+  | TouchEvent
+  | FocusEvent
+  | ReactFocusEvent
+  | ReactMouseEvent
+  | ReactTouchEvent;
+
+type PointCoords = Pick<Point, 'x' | 'y'>;
+
+const DEFAULT_POINT = { x: 0, y: 0 };
+
+const isTouchEvent = (event?: EventType): event is TouchEvent =>
+  !!event && 'changedTouches' in event;
+
+export const isMouseEvent = (event?: EventType): event is MouseEvent =>
+  !!event && 'clientX' in event;
+
+const getXAndYFromEvent = (event?: EventType): PointCoords => {
+  if (!event) return { ...DEFAULT_POINT };
+
+  if (isTouchEvent(event)) {
+    return event.changedTouches.length > 0
+      ? {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY
+        }
+      : { ...DEFAULT_POINT };
+  }
+
+  if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  return { ...DEFAULT_POINT };
+};
+
+export const localPoint = (event: EventType): PointCoords | null => {
+  return getXAndYFromEvent(event);
+};

package/src/components/Zoom/models.ts

@@ -0,0 +1,25 @@
+export interface ZoomState {
+  transformMatrix: {
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    translateX: number;
+    translateY: number;
+  };
+}
+
+export type MinimapPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface ChildrenProps extends ZoomState {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+  height: number;
+  width: number;
+}

package/src/components/Zoom/useMinimap.ts

@@ -0,0 +1,156 @@
+import { useCallback, useState } from 'react';
+
+import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, gt, isNil, pick } from 'ramda';
+import { Point } from '@visx/point';
+
+import { ZoomState } from './models';
+
+export interface UseMinimapProps {
+  height: number;
+  isDraggingFromContainer: boolean;
+  minimapScale: number;
+  scale: number;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+interface UseMinimapState {
+  dragEnd: (e) => void;
+  dragStart: (e) => void;
+  move: (e) => void;
+  transformTo: (e) => void;
+  zoomInOut: (e) => void;
+}
+
+export const useMinimap = ({
+  width,
+  height,
+  zoom,
+  minimapScale,
+  isDraggingFromContainer,
+  scale
+}: UseMinimapProps): UseMinimapState => {
+  const [startPoint, setStartPoint] = useState<Pick<Point, 'x' | 'y'> | null>(
+    null
+  );
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+
+  const getMatrixPoint = useCallback(
+    (event, newScale?: number): { x: number; y: number } => {
+      const hasScale = scale > 1;
+      const point = {
+        x: event.nativeEvent.offsetX * (1 / minimapScale),
+        y: event.nativeEvent.offsetY * (1 / minimapScale)
+      };
+
+      const dx = -(
+        point.x * (newScale || zoom.transformMatrix.scaleX) -
+        width / 2
+      );
+      const dy = -(
+        point.y * (newScale || zoom.transformMatrix.scaleY) -
+        height / 2
+      );
+
+      return {
+        x: !hasScale ? dx : dx * scale - width / 2,
+        y: !hasScale ? dy : dy * scale - height / 2
+      };
+    },
+    [zoom.transformMatrix, scale, width, height, minimapScale]
+  );
+
+  const transformTo = useCallback(
+    (e): void => {
+      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: x,
+        translateY: y
+      });
+    },
+    [zoom.transformMatrix, scale]
+  );
+
+  const dragStart = (e): void => {
+    if (
+      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
+      isDraggingFromContainer
+    ) {
+      return;
+    }
+    setStartPoint(getMatrixPoint(e));
+    setStartTranslate(pick(['translateX', 'translateY'], zoom.transformMatrix));
+  };
+
+  const dragEnd = (): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  };
+
+  const move = useCallback(
+    (e): void => {
+      if (!startPoint || !startTranslate) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+
+      const diffX = startPoint.x - x;
+      const diffY = startPoint.y - y;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: startTranslate.translateX - diffX,
+        translateY: startTranslate.translateY - diffY
+      });
+    },
+
+    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
+  );
+
+  const zoomInOut = useCallback(
+    (e): void => {
+      const isZoomIn = gt(0, e.deltaY);
+
+      const newScaleX = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+
+      const newScaleY = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+      const { x, y } = getMatrixPoint(e, newScaleX);
+
+      const diffX = x - zoom.transformMatrix.translateX;
+      const diffY = y - zoom.transformMatrix.translateY;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        scaleX: newScaleX,
+        scaleY: newScaleY,
+        translateX: zoom.transformMatrix.translateX + diffX / 4,
+        translateY: zoom.transformMatrix.translateY + diffY / 4
+      });
+    },
+    [
+      zoom.transformMatrix,
+      width,
+      height,
+      isDraggingFromContainer,
+      scale,
+      startPoint
+    ]
+  );
+
+  return {
+    dragEnd,
+    dragStart,
+    move,
+    transformTo,
+    zoomInOut
+  };
+};

package/src/components/Zoom/useZoom.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+
+import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, isNil } from 'ramda';
+
+import { localPoint } from './localPoint';
+import { ZoomState } from './models';
+
+const isLeftMouseButtonClicked = (e): boolean =>
+  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
+
+interface UseZoomState {
+  dragEnd: () => void;
+  dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+  isDragging: boolean;
+  move: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+}
+
+export const useZoom = (): UseZoomState => {
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
+
+  const dragStart = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!isLeftMouseButtonClicked(e)) {
+          return;
+        }
+        const { translateX, translateY } = zoom.transformMatrix;
+        setStartPoint(localPoint(e) || null);
+        setStartTranslate({ translateX, translateY });
+      },
+    []
+  );
+
+  const move = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!startPoint || !startTranslate) {
+          return;
+        }
+        const currentPoint = localPoint(e);
+        const dx = currentPoint
+          ? -(startPoint.x - currentPoint.x)
+          : -startPoint.x;
+        const dy = currentPoint
+          ? -(startPoint.y - currentPoint.y)
+          : -startPoint.y;
+
+        const translateX = startTranslate.translateX + dx;
+        const translateY = startTranslate.translateY + dy;
+        zoom.setTranslate({
+          translateX,
+          translateY
+        });
+      },
+    [startPoint, startTranslate]
+  );
+  const dragEnd = useCallback((): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  }, []);
+
+  return {
+    dragEnd,
+    dragStart,
+    isDragging: Boolean(startPoint && startTranslate),
+    move
+  };
+};

package/src/components/Zoom/utils.ts

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+
+interface Props {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+}
+
+export const applyTranformStylesForZoom = ({
+  contentClientRect
+}: Props): CSSProperties => {
+  const contentRect = {
+    height: contentClientRect?.height || 1,
+    width: contentClientRect?.width || 1
+  };
+  const isPortrait = contentRect.height > contentRect.width;
+  const sizes = isPortrait ? ['width', 'height'] : ['height', 'width'];
+  const sizeScale = contentRect[sizes[0]] / contentRect[sizes[1]];
+
+  const lengthToUse = isPortrait
+    ? contentRect[sizes[1]] - contentRect[sizes[0]]
+    : contentRect[sizes[0]];
+
+  const t = sizeScale > 0.85 && isPortrait ? sizeScale * 4 : sizeScale / 2;
+  const xScaleFactor = sizeScale > 0.7 && !isPortrait ? 10 : 6;
+
+  return {
+    transform: `translate(-${isPortrait ? 0 : contentRect.width * (sizeScale / xScaleFactor)}px, -${lengthToUse * (isPortrait ? t + 0.08 : t / 2)}px)`
+  };
+};
+
+// DO NOT REMOVE: As the component is in work in progress, please this code in case we need
+// const getAdditionalPadding = (): number => {
+//   if (additionalScale > 0.05) {
+//     return 0;
+//   }
+
+//   const padding =
+//     additionalScale > 0.012
+//       ? (1 / additionalScale) * (1 / zoom.transformMatrix.scaleY)
+//       : 1 / additionalScale / zoom.transformMatrix.scaleY;
+
+//   if (additionalScale < 0.009) {
+//     const tweakScale = scaleLinear({
+//       clamp: true,
+//       domain: [0.009, 0.002],
+//       range: [1, 8]
+//     });
+
+//     return padding - padding / tweakScale(additionalScale);
+//   }
+
+//   return padding;
+// };

package/src/components/index.ts

@@ -11,3 +11,4 @@ export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
+export { default as Zoom } from './Zoom/Zoom';

package/src/index.ts

@@ -23,6 +23,7 @@ export { default as RegexpHelpTooltip } from './InputField/Search/RegexpHelpTool
 
 export { default as TextField } from './InputField/Text';
 export type { Props as TextFieldProps } from './InputField/Text';
+export { default as NumberField } from './InputField/Number/Number';
 
 export type { SelectEntry } from './InputField/Select';
 export { default as SelectField } from './InputField/Select';
@@ -162,4 +163,9 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
+export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';
+export { default as Subtitle } from './Typography/Subtitle';
+export { default as TablePagination } from './Listing/ActionBar/Pagination';
+export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { DowntimeIcon } from './Icon/DowntimeIcon';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs } from 'ramda';
+import { fromPairs, startsWith } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,6 +25,10 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
+      if (startsWith('/', value)) {
+        return [key, value];
+      }
+
       return [key, JSON.parse(value)];
     }
   );

package/src/utils/index.ts

@@ -1,22 +1,25 @@
-export * from './useLocaleDateTimeFormat';
-export * from './getNormalizedId';
-export * from './statuses';
-export * from './typedMemo';
-export * from './useCopyToClipboard';
-export * from './useDateTimePickerAdapter';
-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 './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 './useLocale';

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

@@ -0,0 +1,133 @@
+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.contains(labelEnterFullscreen).click();
+    cy.contains(labelExitFullscreen).click();
+
+    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';