@centreon/ui 25.10.29 → 25.10.30

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -2,31 +2,37 @@ import { useTranslation } from 'react-i18next';
 
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { CircularProgress } from '@mui/material';
 
 import { Button, Menu } from '../..';
 
+import { labelLoading } from './translatedLabels';
+
 interface NamedEntity {
   id: number | string;
   name: string;
 }
 
 type Props = {
-  create?: () => void;
+  create: () => void;
   elements: Array<NamedEntity>;
   goBack: () => void;
   isActive: (id: number | string) => boolean;
-  isDisabled?: (id: number | string) => boolean;
+  isLoading?: boolean;
   labels: {
     create: string;
     goBack: string;
   };
+  // Observed at the bottom of the list to load the next page when it is reached
+  loadMoreRef?: (node: Element | null) => void;
   navigateToElement: (id: number | string) => () => void;
 };
 
 export const PageQuickAccess = ({
   elements,
   isActive,
-  isDisabled,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
@@ -38,27 +44,40 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-            isActive={isActive(element.id)}
-            isDisabled={isDisabled?.(element.id)}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className="max-h-[50vh] overflow-y-auto"
+          data-testid="quickaccess-elements"
+        >
+          {elements?.map((element) => (
+            <Menu.Item
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+              {...(isActive(element.id) && {
+                isActive: true,
+                isDisabled: true
+              })}
+            >
+              {element.name}
+            </Menu.Item>
+          ))}
+          {loadMoreRef && <div className="h-px" ref={loadMoreRef} />}
+          {isLoading && (
+            <div className="flex justify-center py-2">
+              <CircularProgress aria-label={t(labelLoading)} size={20} />
+            </div>
+          )}
+        </div>
         <Menu.Divider key="divider" />
-        <div className="px-2 pb-2 flex gap-4">
-          <Button
-            icon={<ArrowBackIcon />}
-            iconVariant="start"
-            variant="ghost"
-            onClick={goBack}
-          >
-            {t(labels.goBack)}
-          </Button>
-          {create && (
+        <Menu.Item key="create">
+          <>
+            <Button
+              icon={<ArrowBackIcon />}
+              iconVariant="start"
+              variant="ghost"
+              onClick={goBack}
+            >
+              {t(labels.goBack)}
+            </Button>
             <Button
               icon={<AddIcon />}
               iconVariant="start"
@@ -67,8 +86,8 @@ export const PageQuickAccess = ({
             >
               {t(labels.create)}
             </Button>
-          )}
-        </div>
+          </>
+        </Menu.Item>
       </Menu.Items>
     </Menu>
   );

package/src/components/Layout/PageLayout/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelLoading = 'Loading...';

package/src/components/Menu/Button/MenuButton.styles.ts

@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  buttonIcon: {
+    '[data-is-active="true"] &': {
+      transform: 'rotate(180deg)'
+    },
+
+    fontSize: '1.25rem',
+    transition: 'transform 0.15s ease-in-out'
+  },
+  menuButton: {
+    '&:hover:not(&[data-is-active="true"])': {
+      backgroundColor: theme.palette.menu.button.background.hover,
+      color: theme.palette.menu.button.color.hover
+    },
+    '&[data-is-active="true"]': {
+      backgroundColor: theme.palette.menu.button.background.active,
+      color: theme.palette.menu.button.color.active
+    },
+    backgroundColor: theme.palette.menu.button.background.default,
+    color: theme.palette.menu.button.color.default,
+    display: 'flex',
+    height: 'unset',
+    minWidth: 'unset'
+  }
+}));

package/src/components/Menu/Button/MenuButton.tsx

@@ -5,6 +5,7 @@ import {
   Menu as MenuIcon
 } from '@mui/icons-material';
 
+import { useStyles } from './MenuButton.styles';
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
 import { Button, ButtonProps } from '../../Button';
@@ -31,6 +32,8 @@ const MenuButton = ({
   className,
   ...attr
 }: MenuButtonProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
   const onToggle = useCallback(
@@ -48,18 +51,14 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={`${isMenuOpen ? 'bg-primary-main/8 text-text-primary-main' : 'text-text-secondary'} ${className}`}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}
       onClick={onToggle}
     >
       {children || <MenuIcon />}
-      {hasArrow && (
-        <ArrowDropDownIcon
-          className={`transform-gpu transition-[rotate] ${isMenuOpen ? 'rotate-180' : 'rotate-0'}`}
-        />
-      )}
+      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
     </Button>
   );
 };

package/src/components/Menu/Menu.styles.ts

@@ -0,0 +1,68 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  menuDivider: {
+    '&, &.MuiDivider-root': {
+      borderColor: theme.palette.menu.divider.border
+    }
+  },
+  menuItem: {
+    '&, &.MuiMenuItem-root': {
+      '& > button': {
+        fontSize: '1rem',
+        justifyContent: 'flex-start'
+      },
+
+      '&:has(button)': {
+        '& > .MuiTouchRipple-root': {
+          display: 'none'
+        },
+        '&:hover:not(&[data-is-active="true"])': {
+          backgroundColor: 'unset'
+        },
+        padding: theme.spacing(0, 2)
+      },
+
+      '&:not(:has(button))': {
+        '&:hover:not(&[data-is-active="true"])': {
+          backgroundColor: theme.palette.menu.item.background.hover,
+          color: theme.palette.menu.item.color.hover
+        },
+        '&[data-is-active="true"], &.Mui-selected': {
+          '&[data-is-disabled="true"], &.Mui-disabled': {
+            opacity: 1
+          },
+          backgroundColor: theme.palette.menu.item.background.active,
+          color: theme.palette.menu.item.color.active,
+          opacity: 1
+        },
+        '&[data-is-disabled="true"], &.Mui-disabled': {
+          opacity: 0.5
+        },
+        backgroundColor: theme.palette.menu.item.background.default,
+        color: theme.palette.menu.item.color.default,
+        padding: theme.spacing(0.75, 2)
+      },
+
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      fontSize: '1rem',
+      gap: theme.spacing(2),
+      justifyContent: 'space-between',
+      minHeight: 'unset'
+    }
+  },
+  menuItems: {
+    '& > .MuiPaper-root.MuiMenu-paper': {
+      backgroundColor: theme.palette.menu.background,
+      borderRadius: '4px',
+      boxShadow: theme.shadows[8],
+      minWidth: '240px',
+      transform: `translateY(${theme.spacing(0.5)}) !important`
+    },
+    '& ul, & ul.MuiMenu-list': {
+      padding: theme.spacing(1, 0)
+    }
+  }
+}));

package/src/components/Menu/MenuDivider.tsx

@@ -2,8 +2,12 @@ import { ReactElement } from 'react';
 
 import { Divider as MuiDivider } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
+
 const MenuDivider = (): ReactElement => {
-  return <MuiDivider />;
+  const { classes } = useStyles();
+
+  return <MuiDivider className={classes.menuDivider} />;
 };
 
 export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -2,6 +2,8 @@ import { ReactElement, ReactNode } from 'react';
 
 import { MenuItem as MuiMenuItem } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
+
 type MenuItemProps = {
   children?: ReactNode;
   className?: string;
@@ -17,9 +19,11 @@ const MenuItem = ({
   isDisabled = false,
   className
 }: MenuItemProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   return (
     <MuiMenuItem
-      className={className}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Menu as MuiMenu } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
 import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
@@ -9,6 +10,8 @@ type MenuItemsProps = {
   className?: string;
 };
 const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
   const onCloseMenu = (): void => {
@@ -19,11 +22,7 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={className}
-      classes={{
-        paper:
-          'rounded-sm shadow-lg min-w-[240px] bg-background-paper border-1 border-divider'
-      }}
+      className={cx(classes.menuItems, className)}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

package/src/components/Modal/Modal.styles.ts

@@ -72,7 +72,8 @@ const useStyles = makeStyles<{
       opacity: 0.6
     },
     top: theme.spacing(1)
-  }
+  },
+  
 }));
 
 export { useStyles };

package/src/components/Modal/ModalHeader.tsx

@@ -16,11 +16,7 @@ const ModalHeader = ({
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
   return (
     <div className={modalHeader}>
-      <MuiDialogTitle
-        className="p-0 font-bold text-2xl"
-        color="primary"
-        {...rest}
-      >
+      <MuiDialogTitle className="p-0 font-bold text-2xl" color="primary" {...rest}>
         {children}
       </MuiDialogTitle>
     </div>

package/src/utils/useInfiniteScrollListing.ts

@@ -50,6 +50,15 @@ export const useInfiniteScrollListing = <T>({
 
   const [page, setPage] = useAtom(pageAtom);
 
+  // Shared by the active query and the next page prefetch, so that the
+  // prefetched page is reused instead of being requested again
+  const getQueryKey = (queryPage: number): Array<string | number> => [
+    queryKeyName,
+    queryPage,
+    JSON.stringify(parameters),
+    JSON.stringify(customQueryParameters)
+  ];
+
   const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
     Listing<T>
   >({
@@ -60,12 +69,7 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [
-      queryKeyName,
-      page,
-      JSON.stringify(parameters),
-      JSON.stringify(customQueryParameters)
-    ],
+    getQueryKey: () => getQueryKey(page),
     isPaginated: true,
     queryOptions: {
       enabled,
@@ -111,7 +115,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage) => ['dashboards', newPage],
+      getPrefetchQueryKey: getQueryKey,
       page
     });
   }, [data]);

package/src/utils/useViewportIntersection.ts

@@ -18,10 +18,9 @@ export const useViewportIntersection = (
       observer.current.disconnect();
     }
 
-    observer.current = new window.IntersectionObserver(
-      ([newEntry]) => setEntry(newEntry),
-      options
-    );
+    observer.current = new window.IntersectionObserver(([newEntry]) => {
+      setEntry(newEntry);
+    }, options);
 
     if (element) {
       observer.current.observe(element);

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -1,74 +0,0 @@
-{
-  "global": {},
-  "metrics": [
-    {
-      "metric": "count",
-      "metric_id": 1,
-      "legend": "count",
-      "displayAs": "bar",
-      "ds_data": {
-        "ds_stack": true,
-        "ds_transparency": 0,
-        "ds_filled": false,
-        "ds_color_area": "#4269d0",
-        "ds_color_line": "#4269d0"
-      },
-      "datasourceOptions": {
-        "field": null,
-        "group_by": null,
-        "op": "count-doc",
-        "query": "severity_text:\"Fatal\" OR severity_text:\"Error\"",
-        "period": 3600
-      },
-      "data": [
-        217, 270, 293, 300, 303, 295, 298, 283, 299, 299, 297, 285, 270, 248,
-        274, 292, 284, 47
-      ]
-    },
-    {
-      "metric": "count",
-      "metric_id": 2,
-      "legend": "count",
-      "displayAs": "bar",
-      "ds_data": {
-        "ds_stack": true,
-        "ds_transparency": 0,
-        "ds_filled": false,
-        "ds_color_area": "#efb118",
-        "ds_color_line": "#efb118"
-      },
-      "datasourceOptions": {
-        "field": null,
-        "group_by": null,
-        "op": "count-doc",
-        "query": "",
-        "period": 3600
-      },
-      "data": [
-        32, 825, 939, 922, 918, 939, 943, 947, 946, 909, 931, 939, 883, 907,
-        928, 904, 923, 893, 139
-      ]
-    }
-  ],
-  "times": [
-    "2025-10-04T16:19:30.000Z",
-    "2025-10-04T16:20:00.000Z",
-    "2025-10-04T16:20:30.000Z",
-    "2025-10-04T16:21:00.000Z",
-    "2025-10-04T16:21:30.000Z",
-    "2025-10-04T16:22:00.000Z",
-    "2025-10-04T16:22:30.000Z",
-    "2025-10-04T16:23:00.000Z",
-    "2025-10-04T16:23:30.000Z",
-    "2025-10-04T16:24:00.000Z",
-    "2025-10-04T16:24:30.000Z",
-    "2025-10-04T16:25:00.000Z",
-    "2025-10-04T16:25:30.000Z",
-    "2025-10-04T16:26:00.000Z",
-    "2025-10-04T16:26:30.000Z",
-    "2025-10-04T16:27:00.000Z",
-    "2025-10-04T16:27:30.000Z",
-    "2025-10-04T16:28:00.000Z",
-    "2025-10-04T16:28:30.000Z"
-  ]
-}

package/src/Graph/mockedData/pingServiceWithStackedKeys.json

@@ -1,205 +0,0 @@
-{
-  "global": {
-    "base": 1000,
-    "title": "Ping service"
-  },
-  "metrics": [
-    {
-      "metric_id": 2,
-      "metric": "Centreon-Server: pl",
-      "metric_legend": "Centreon-Server: pl",
-      "unit": "%",
-      "min": 0.0,
-      "max": 100.0,
-      "ds_data": {
-        "ds_color_line": "#F30B23",
-        "ds_color_area": "#F30B23",
-        "ds_filled": true,
-        "ds_invert": false,
-        "ds_legend": null,
-        "ds_stack": false,
-        "ds_order": 1,
-        "ds_transparency": 80.0,
-        "ds_color_line_mode": 0
-      },
-      "legend": "Centreon-Server: Packet Loss",
-      "stack": 0,
-      "warning_high_threshold": 20.0,
-      "critical_high_threshold": 50.0,
-      "warning_low_threshold": 0.0,
-      "critical_low_threshold": 0.0,
-      "ds_order": 1,
-      "data": [
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        10.0,
-        20.0,
-        null,
-        null
-      ],
-      "last_value": 0.0,
-      "minimum_value": null,
-      "maximum_value": 0.0,
-      "average_value": 0.0
-    },
-    {
-      "metric_id": 1,
-      "metric": "Centreon-Server: rta",
-      "metric_legend": "Centreon-Server: rta",
-      "unit": "ms",
-      "min": 0.0,
-      "max": null,
-      "ds_data": {
-        "ds_color_line": "#29AFEE",
-        "ds_color_area": "#29AFEE",
-        "ds_filled": true,
-        "ds_invert": false,
-        "ds_legend": null,
-        "ds_stack": true,
-        "ds_order": 1,
-        "ds_transparency": 80.0,
-        "ds_color_line_mode": 0
-      },
-      "legend": "Centreon-Server: Round-Trip Average Time",
-      "stack": 0,
-      "warning_high_threshold": 200.0,
-      "critical_high_threshold": 400.0,
-      "warning_low_threshold": 0.0,
-      "critical_low_threshold": 0.0,
-      "ds_order": 1,
-      "data": [
-        0.04508,
-        0.0242,
-        0.03592,
-        0.01304,
-        0.025,
-        0.02748,
-        0.05296,
-        0.01864,
-        0.02688,
-        0.03676,
-        0.03696,
-        null,
-        null
-      ],
-      "last_value": 0.04,
-      "minimum_value": null,
-      "maximum_value": null,
-      "average_value": 0.03
-    },
-    {
-      "metric_id": 3,
-      "metric": "Centreon-Server: rtmax",
-      "metric_legend": "Centreon-Server: rtmax",
-      "unit": "ms",
-      "min": null,
-      "max": null,
-      "ds_data": {
-        "ds_color_line": "#525256",
-        "ds_color_area": "#525256",
-        "ds_filled": false,
-        "ds_invert": false,
-        "ds_legend": null,
-        "ds_stack": true,
-        "ds_stack_key": "test",
-        "ds_order": 2,
-        "ds_transparency": 80.0,
-        "ds_color_line_mode": 0
-      },
-      "legend": "Centreon-Server: Round-Trip Maximum Time",
-      "stack": 0,
-      "warning_high_threshold": null,
-      "critical_high_threshold": null,
-      "warning_low_threshold": null,
-      "critical_low_threshold": null,
-      "ds_order": 2,
-      "data": [
-        0.11372,
-        0.05604,
-        0.08556,
-        0.02548,
-        0.05352,
-        0.05336,
-        0.109,
-        0.04112,
-        0.05504,
-        0.06812,
-        0.08644,
-        null,
-        null
-      ],
-      "last_value": 0.09,
-      "minimum_value": null,
-      "maximum_value": 0.11,
-      "average_value": null
-    },
-    {
-      "metric_id": 4,
-      "metric": "Centreon-Server: rtmin",
-      "metric_legend": "Centreon-Server: rtmin",
-      "unit": "ms",
-      "min": null,
-      "max": null,
-      "ds_data": {
-        "ds_color_line": "#191777",
-        "ds_color_area": "#191777",
-        "ds_filled": false,
-        "ds_invert": false,
-        "ds_legend": null,
-        "ds_stack": true,
-        "ds_stack_key": "test",
-        "ds_order": 2,
-        "ds_transparency": 80.0,
-        "ds_color_line_mode": 0
-      },
-      "legend": "Centreon-Server: Round-Trip Minimum Time",
-      "stack": 0,
-      "warning_high_threshold": null,
-      "critical_high_threshold": null,
-      "warning_low_threshold": null,
-      "critical_low_threshold": null,
-      "ds_order": 2,
-      "data": [
-        0.00984,
-        0.008,
-        0.00784,
-        0.00624,
-        0.00932,
-        0.01348,
-        0.01796,
-        0.0064,
-        0.01148,
-        0.01644,
-        0.01168,
-        null,
-        null
-      ],
-      "last_value": 0.01,
-      "minimum_value": 0.01,
-      "maximum_value": null,
-      "average_value": null
-    }
-  ],
-  "times": [
-    "2024-06-19T10:50:00+02:00",
-    "2024-06-19T10:55:00+02:00",
-    "2024-06-19T11:00:00+02:00",
-    "2024-06-19T11:05:00+02:00",
-    "2024-06-19T11:10:00+02:00",
-    "2024-06-19T11:15:00+02:00",
-    "2024-06-19T11:20:00+02:00",
-    "2024-06-19T11:25:00+02:00",
-    "2024-06-19T11:30:00+02:00",
-    "2024-06-19T11:35:00+02:00",
-    "2024-06-19T11:40:00+02:00",
-    "2024-06-19T11:45:00+02:00",
-    "2024-06-19T11:50:00+02:00"
-  ]
-}