@centreon/ui 24.4.67 → 24.4.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.67",
+  "version": "24.4.68",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Tree/DescendantNodes.tsx

@@ -65,6 +65,7 @@ const DescendantNodes = <TData extends BaseProp>({
       <Group key={key} left={left} top={top}>
         <foreignObject
           height={nodeSize.height}
+          style={{ userSelect: 'none' }}
           width={nodeSize.width}
           x={-nodeSize.width / 2}
           y={-nodeSize.height / 2}

package/src/Graph/Tree/Links.tsx

@@ -1,5 +1,10 @@
-import { LinkHorizontal } from '@visx/shape';
+import {
+  LinkHorizontal,
+  LinkHorizontalStep,
+  LinkHorizontalLine
+} from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -9,6 +14,12 @@ interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;
 }
 
+const getLinkComponent = cond([
+  [equals('line'), always(LinkHorizontalLine)],
+  [equals('step'), always(LinkHorizontalStep)],
+  [T, always(LinkHorizontal)]
+]);
+
 const Links = <TData extends BaseProp>({
   links,
   treeLink
@@ -24,10 +35,12 @@ const Links = <TData extends BaseProp>({
       .descendants()
       .map((ancestor) => ancestor.data.data.id);
 
+    const LinkComponent = getLinkComponent(treeLink?.type);
+
     const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
 
     return (
-      <LinkHorizontal
+      <LinkComponent
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

package/src/Graph/Tree/Tree.cypress.spec.tsx

@@ -168,4 +168,28 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the tree with step links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'step'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the tree with line links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'line'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,6 +82,21 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
+export const WithStepLink: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      width: 90
+    },
+    tree: simpleData,
+    treeLink: {
+      type: 'step'
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -95,7 +110,8 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
+      type: 'line'
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,6 +14,8 @@ export interface BaseProp {
   name: string;
 }
 
+export type Link = 'curve' | 'line' | 'step';
+
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -48,5 +50,6 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+    type?: Link;
   };
 }

package/src/components/Zoom/Minimap.tsx

@@ -16,6 +16,7 @@ interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
     left: number;
     top: number;
   };
+  id?: number | string;
   isDraggingFromContainer: boolean;
 }
 
@@ -26,7 +27,8 @@ const Minimap = ({
   width,
   contentClientRect,
   isDraggingFromContainer,
-  diffBetweenContentAndSvg
+  diffBetweenContentAndSvg,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
@@ -82,7 +84,7 @@ const Minimap = ({
   );
 
   return (
-    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
       <rect
         className={classes.minimapBackground}
         height={finalHeight}

package/src/components/Zoom/Zoom.cypress.spec.tsx

@@ -63,7 +63,7 @@ describe('Zoom', () => {
   it('displays the minimap when the prop is set', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -72,7 +72,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom in').click();
     cy.findByTestId('zoom-content')
@@ -86,7 +86,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom out').click();
 
@@ -101,7 +101,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: 20 });
 
@@ -116,7 +116,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -131,7 +131,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
 
@@ -150,7 +150,7 @@ describe('Zoom', () => {
     initialize({ showMinimap: false });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('not.exist');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('not.exist');
 
     cy.makeSnapshot();
   });
@@ -158,7 +158,7 @@ describe('Zoom', () => {
   it('zooms in when the minimap is scrolled up', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: -20 });
 
@@ -172,7 +172,7 @@ describe('Zoom', () => {
   it('zooms out when the minimap is scrolled down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
 
     cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: 20 });
 
@@ -186,7 +186,7 @@ describe('Zoom', () => {
   it('moves the view when the mouse is hover the content with the corresponding button pressed down', () => {
     initialize({ showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('zoom-container')
@@ -205,7 +205,7 @@ describe('Zoom', () => {
   it('displays the minimap in the bottom right when the prop to the corresponding value', () => {
     initialize({ minimapPosition: 'bottom-right', showMinimap: true });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.makeSnapshot();
@@ -214,7 +214,7 @@ describe('Zoom', () => {
   it('applies a scale down on the minimap when the content is higher than the original height', () => {
     initialize({ showMinimap: true, template: ContentWithMultipleShapes });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')
@@ -232,7 +232,7 @@ describe('Zoom', () => {
       template: ContentWithMultipleShapesWithNegativeTranslations
     });
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('g[clip-path="url(#zoom-clip-0)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
 
     cy.findByTestId('minimap-interaction')

package/src/components/Zoom/Zoom.tsx

@@ -7,6 +7,7 @@ import { MinimapPosition } from './models';
 
 export interface ZoomProps {
   children: JSX.Element | (({ width, height }) => JSX.Element);
+  id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
@@ -27,7 +28,8 @@ const Zoom = ({
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
-  minimapPosition = 'top-left'
+  minimapPosition = 'top-left',
+  id = 0
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
@@ -44,6 +46,7 @@ const Zoom = ({
           {(zoom) => (
             <ZoomContent
               height={height}
+              id={id}
               minimapPosition={minimapPosition}
               showMinimap={showMinimap}
               width={width}

package/src/components/Zoom/ZoomContent.tsx

@@ -18,6 +18,7 @@ import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 export interface Props {
   children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
   height: number;
+  id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
   width: number;
@@ -30,7 +31,8 @@ const ZoomContent = ({
   height,
   children,
   showMinimap,
-  minimapPosition
+  minimapPosition,
+  id
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
   const contentRef = useRef<SVGGElement | null>(null);
@@ -92,7 +94,7 @@ const ZoomContent = ({
       >
         <RectClipPath
           height={Math.max(contentClientRect?.height || 0, height)}
-          id="zoom-clip"
+          id={`zoom-clip-${id}`}
           rx={radius}
           width={Math.max(contentClientRect?.width || 0, width)}
         />
@@ -124,6 +126,7 @@ const ZoomContent = ({
                 diffBetweenContentAndSvg || { left: 0, top: 0 }
               }
               height={height}
+              id={id}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}

package/src/utils/index.ts

@@ -22,3 +22,4 @@ export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';
+export * from './resourcesStatusURL';

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