@centreon/ui 23.10.1-sync-dev-23-10-x-develop-oss.0 → 23.10.1-sync-release-33038.0

package/src/Typography/EllipsisTypography.tsx

@@ -0,0 +1,18 @@
+import { Box, Typography, TypographyProps } from '@mui/material';
+
+const EllipsisTypography = (props: TypographyProps): JSX.Element => {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Typography
+        sx={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }}
+        {...props}
+      />
+    </Box>
+  );
+};
+
+export default EllipsisTypography;

package/src/api/buildListingEndpoint/models.ts

@@ -52,7 +52,8 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni';
+  | '$ni'
+  | '$rg';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals } from 'ramda';
+import { equals, isNil, startsWith } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -22,6 +22,7 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -42,10 +43,18 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET'
+  method = 'GET',
+  baseEndpoint = './api/latest'
 }: CustomFetchProps<T>): Promise<T | ResponseError> => {
   const defaultOptions = { headers, method, signal };
 
+  const formattedEndpoint =
+    !isNil(baseEndpoint) &&
+    !startsWith(baseEndpoint, endpoint) &&
+    !startsWith('./api/internal.php', endpoint)
+      ? `${baseEndpoint}${endpoint}`
+      : endpoint;
+
   const options = isMutation
     ? {
         ...defaultOptions,
@@ -53,7 +62,7 @@ export const customFetch = <T>({
       }
     : defaultOptions;
 
-  return fetch(endpoint, options)
+  return fetch(formattedEndpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {

package/src/api/useFetchQuery/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import 'ulog';
 import {
@@ -10,13 +10,14 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { has, includes, not, omit } from 'ramda';
+import { has, includes, isNil, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
 
 export interface UseFetchQueryProps<T> {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -54,14 +55,18 @@ const useFetchQuery = <T extends object>({
   fetchHeaders,
   isPaginated,
   queryOptions,
-  httpCodesBypassErrorSnackbar = []
+  httpCodesBypassErrorSnackbar = [],
+  baseEndpoint
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
+  const dataRef = useRef<T | undefined>(undefined);
+
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useQuery<T | ResponseError, Error>(
     getQueryKey(),
     ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -96,6 +101,7 @@ const useFetchQuery = <T extends object>({
       queryKey,
       ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -137,6 +143,7 @@ const useFetchQuery = <T extends object>({
       getQueryKey(),
       ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -153,6 +160,10 @@ const useFetchQuery = <T extends object>({
     [queryData.data]
   );
 
+  if (!isNil(data)) {
+    dataRef.current = data;
+  }
+
   const errorData = queryData.data as ResponseError | undefined;
 
   useEffect(() => {
@@ -166,8 +177,8 @@ const useFetchQuery = <T extends object>({
   }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['data'], queryData),
-    data,
+    ...omit(['data', 'error'], queryData),
+    data: dataRef.current,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,

package/src/api/useGraphQuery/index.ts

@@ -92,6 +92,9 @@ const useGraphQuery = ({
     : getStartEndFromTimePeriod(timePeriodToUse as number);
 
   const definedMetrics = metrics.filter((metric) => metric);
+  const formattedDefinedMetrics = definedMetrics.map((metric) =>
+    encodeURIComponent(metric)
+  );
 
   const {
     data: graphData,
@@ -115,7 +118,7 @@ const useGraphQuery = ({
 
       return `${endpoint}&start=${startAndEnd.start}&end=${
         startAndEnd.end
-      }&metric_names=[${definedMetrics.join(',')}]`;
+      }&metric_names=[${formattedDefinedMetrics.join(',')}]`;
     },
     getQueryKey: () => [
       'graph',

package/src/api/useMutationQuery/index.ts

@@ -23,6 +23,7 @@ export enum Method {
 }
 
 export type UseMutationQueryProps<T, TMeta> = {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -49,7 +50,8 @@ const useMutationQuery = <T extends object, TMeta>({
   method,
   onMutate,
   onError,
-  onSuccess
+  onSuccess,
+  baseEndpoint
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
@@ -62,6 +64,7 @@ const useMutationQuery = <T extends object, TMeta>({
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -1,5 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
+import { alpha } from '@mui/system';
+
 const useStyles = makeStyles()((theme) => ({
   header: {
     alignItems: 'flex-start',
@@ -22,7 +24,7 @@ const useStyles = makeStyles()((theme) => ({
     padding: theme.spacing(0, 0, 1.5, 0)
   },
   pageHeader: {
-    alignItems: 'flex-start',
+    alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.header.page.border}`,
     display: 'flex',
     gap: theme.spacing(4),
@@ -53,6 +55,31 @@ const useStyles = makeStyles()((theme) => ({
     position: 'relative',
     transform: `translateY(-${theme.spacing(0.25)})`
   },
+  pageHeaderMessage: {
+    alignItems: 'center',
+    color: theme.palette.warning.main,
+    display: 'flex',
+    gap: theme.spacing(1)
+  },
+  pageHeaderMessageIcon: {
+    alignItems: 'center',
+    background: theme.palette.warning.main,
+    borderRadius: '50%',
+    color: theme.palette.common.white,
+    display: 'flex',
+    height: theme.spacing(2.5),
+    justifyContent: 'center',
+    width: theme.spacing(2.5)
+  },
+  pageHeaderMessageIconWrapper: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.warning.main, 0.7),
+    borderRadius: '50%',
+    display: 'flex',
+    height: theme.spacing(3.5),
+    justifyContent: 'center',
+    width: theme.spacing(3.5)
+  },
   pageHeaderTitle: {
     '& > *': {
       display: 'grid'

package/src/components/Header/PageHeader/PageHeaderMessage.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+
+import { Box, Typography } from '@mui/material';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMessageProps = {
+  message: string;
+};
+
+const PageHeaderMessage = ({
+  message
+}: PageHeaderMessageProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <Box className={classes.pageHeaderMessage}>
+      {message && (
+        <>
+          <Box className={classes.pageHeaderMessageIconWrapper}>
+            <Box className={classes.pageHeaderMessageIcon}>!</Box>
+          </Box>
+          <Typography aria-label="page header message" variant="h6">
+            {message}
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export { PageHeaderMessage };

package/src/components/Header/PageHeader/index.ts

@@ -3,10 +3,12 @@ import { PageHeaderMain } from './PageHeaderMain';
 import { PageHeaderMenu } from './PageHeaderMenu';
 import { PageHeaderTitle } from './PageHeaderTitle';
 import { PageHeaderActions } from './PageHeaderActions';
+import { PageHeaderMessage } from './PageHeaderMessage';
 
 export const PageHeader = Object.assign(PageHeaderRoot, {
   Actions: PageHeaderActions,
   Main: PageHeaderMain,
   Menu: PageHeaderMenu,
+  Message: PageHeaderMessage,
   Title: PageHeaderTitle
 });

package/src/components/ItemComposition/Item.tsx

@@ -26,7 +26,7 @@ export const Item = ({
   return (
     <div className={classes.itemContainer}>
       <div className={cx(classes.itemContent, className)}>{children}</div>
-      {!deleteButtonHidden && (
+      <div className={cx({ [classes.visibilityHiden]: deleteButtonHidden })}>
         <IconButton
           aria-label={labelDelete}
           data-testid={labelDelete}
@@ -35,7 +35,7 @@ export const Item = ({
           variant="ghost"
           onClick={onDeleteItem}
         />
-      )}
+      </div>
     </div>
   );
 };

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -22,5 +22,8 @@ export const useItemStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     width: '100%'
+  },
+  visibilityHiden: {
+    visibility: 'hidden'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -7,6 +7,7 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 type Props = {
+  IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
@@ -19,7 +20,8 @@ export const ItemComposition = ({
   children,
   labelAdd,
   addbuttonDisabled,
-  addButtonHidden
+  addButtonHidden,
+  IconAdd
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
@@ -31,7 +33,7 @@ export const ItemComposition = ({
           aria-label={labelAdd}
           data-testid={labelAdd}
           disabled={addbuttonDisabled}
-          icon={<AddIcon />}
+          icon={IconAdd || <AddIcon />}
           iconVariant="start"
           size="small"
           variant="ghost"

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

@@ -15,6 +15,7 @@ import { useStyles } from './MenuButton.styles';
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
+  className?: string;
   hasArrow?: boolean;
   isOpen?: boolean;
   onClick?: (args: { isOpen: boolean }) => void;
@@ -29,9 +30,10 @@ const MenuButton = ({
   size = 'small',
   variant = 'ghost',
   ariaLabel,
+  className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
@@ -50,7 +52,7 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={classes.menuButton}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}

package/src/components/Menu/MenuItem.tsx

@@ -6,6 +6,7 @@ import { useStyles } from './Menu.styles';
 
 type MenuItemProps = {
   children?: ReactNode;
+  className?: string;
   isActive?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
@@ -15,13 +16,14 @@ const MenuItem = ({
   children,
   onClick,
   isActive = false,
-  isDisabled = false
+  isDisabled = false,
+  className
 }: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return (
     <MuiMenuItem
-      className={classes.menuItem}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -7,9 +7,10 @@ import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
   children?: ReactNode | Array<ReactNode>;
+  className?: string;
 };
-const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
-  const { classes } = useStyles();
+const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
@@ -21,7 +22,7 @@ const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={classes.menuItems}
+      className={cx(classes.menuItems, className)}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

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

@@ -24,9 +24,9 @@ const useStyles = makeStyles<{
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
       bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
       left: props?.left ?? 0,
       margin: 0,
-      maxHeight: 'unset',
       maxWidth: 'unset',
       position: 'absolute',
       right: props?.right ?? 0,
@@ -50,11 +50,13 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     bottom: 0,
+    bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'sticky'
+    position: 'fixed',
+    right: theme.spacing(2)
   },
   modalBody: {
     '& > p': {

package/src/index.ts

@@ -154,6 +154,7 @@ export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
+export { default as EllipsisTypography } from './Typography/EllipsisTypography';
 export * from './Dashboard';
 export * from './Graph';
 export type { LineChartData } from './Graph/common/models';
@@ -162,3 +163,6 @@ export * from './Graph/common/timeSeries';
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
 export * from './ParentSize';
+
+export { default as TablePagination } from './Listing/ActionBar/Pagination';
+export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';

package/src/utils/useInfiniteScrollListing.ts

@@ -5,33 +5,42 @@ 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';
-
-const limit = 100;
+import { Parameters } from '../api/buildListingEndpoint/models';
 
 interface UseInfiniteScrollListing<T> {
   elementRef: (node) => void;
   elements: Array<T>;
   isLoading: boolean;
+  total?: number;
 }
 
 interface UseInfiniteScrollListingProps<T> {
-  decoder: JsonDecoder.Decoder<Listing<T>>;
+  customQueryParameters?: Array<QueryParameter>;
+  decoder?: JsonDecoder.Decoder<Listing<T>>;
   endpoint: string;
+  limit?: number;
   pageAtom: PrimitiveAtom<number>;
+  parameters?: Parameters;
   queryKeyName: string;
+  suspense?: boolean;
 }
 
 export const useInfiniteScrollListing = <T>({
   queryKeyName,
   endpoint,
   decoder,
-  pageAtom
+  pageAtom,
+  suspense = true,
+  parameters,
+  customQueryParameters,
+  limit = 100
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -46,14 +55,15 @@ export const useInfiniteScrollListing = <T>({
     getEndpoint: (params) =>
       buildListingEndpoint({
         baseEndpoint: endpoint,
-        parameters: { limit, page: params?.page || page }
+        customQueryParameters,
+        parameters: { limit, page: params?.page || page, ...parameters }
       }),
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      suspense: equals(page, 1)
+      suspense: suspense && equals(page, 1)
     }
   });
 
@@ -98,9 +108,14 @@ export const useInfiniteScrollListing = <T>({
     });
   }, [data]);
 
+  useEffect(() => {
+    return () => setPage(1);
+  }, []);
+
   return {
     elementRef,
     elements: elements.current || [],
-    isLoading
+    isLoading,
+    total: data?.meta.total
   };
 };

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import humanizeDuration from 'humanize-duration';
 import { useAtomValue } from 'jotai';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { userAtom } from '@centreon/ui-context';
 
@@ -20,6 +21,8 @@ export interface LocaleDateTimeFormat {
   toTime: (date: Date | string) => string;
 }
 
+dayjs.extend(localizedFormat);
+
 const dateFormat = 'L';
 const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;

package/src/Graph/LineChart/Legend/Marker.tsx

@@ -1,43 +0,0 @@
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-export enum LegendMarkerVariant {
-  'dot',
-  'bar'
-}
-
-interface StylesProps {
-  color?: string;
-  variant: LegendMarkerVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { color, variant }) => ({
-  disabled: {
-    color: theme.palette.text.disabled
-  },
-  icon: {
-    backgroundColor: color,
-    borderRadius: equals(LegendMarkerVariant.dot, variant) ? '50%' : 0,
-    height: equals(LegendMarkerVariant.dot, variant) ? 9 : '100%',
-    marginRight: theme.spacing(0.5),
-    width: 9
-  }
-}));
-
-interface Props {
-  color: string;
-  disabled?: boolean;
-  variant?: LegendMarkerVariant;
-}
-
-const LegendMarker = ({
-  disabled,
-  color,
-  variant = LegendMarkerVariant.bar
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ color, variant });
-
-  return <div className={cx(classes.icon, { [classes.disabled]: disabled })} />;
-};
-
-export default LegendMarker;