@centreon/ui 24.4.2 → 24.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.2",
+  "version": "24.4.4",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -7,6 +7,7 @@ export const useHeatMapStyles = makeStyles()((theme) => ({
   heatMapTile: {
     alignItems: 'center',
     aspectRatio: '1 / 1',
+    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     justifyContent: 'center',
     width: '100%'

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
-import { equals, gt, lt } from 'ramda';
+import { T, equals, gt, lt } from 'ramda';
 
 import { Box } from '@mui/material';
 
@@ -20,7 +20,8 @@ const ResponsiveHeatMap = <TData,>({
   tiles,
   arrowClassName,
   tooltipContent,
-  tileSizeFixed
+  tileSizeFixed,
+  displayTooltipCondition = T
 }: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
 
@@ -73,12 +74,15 @@ const ResponsiveHeatMap = <TData,>({
               tooltip: classes.heatMapTooltip
             }}
             followCursor={false}
-            label={tooltipContent?.({
-              backgroundColor,
-              data,
-              id,
-              isSmallestSize
-            })}
+            label={
+              displayTooltipCondition?.(data) &&
+              tooltipContent?.({
+                backgroundColor,
+                data,
+                id,
+                isSmallestSize
+              })
+            }
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>

package/src/Graph/HeatMap/model.ts

@@ -21,6 +21,7 @@ export interface HeatMapProps<TData> {
     data,
     isSmallestSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
+  displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;
   tiles: Array<Tile<TData>>;
   tooltipContent?: ({

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
+import { equals, propEq, reject } from 'ramda';
 
 import { Line } from '../../common/timeSeries/models';
 
@@ -51,9 +51,7 @@ const useFilterLines = ({
       return;
     }
 
-    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
-
-    setLinesGraph(sortedLines);
+    setLinesGraph(filteredLines);
   }, [lines, displayThreshold]);
 
   return { displayedLines, newLines: linesGraph ?? lines };

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

@@ -1,19 +1,19 @@
 import { Typography } from '@mui/material';
 
-import { useStyles } from './Legend.styles';
+import { useLegendValueStyles } from './Legend.styles';
 
 interface Props {
   value?: string | null;
 }
 
 const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useStyles({});
+  const { classes } = useLegendValueStyles({});
   if (!value) {
     return null;
   }
 
   return (
-    <Typography className={classes.legendValue} variant="h6">
+    <Typography className={classes.text} variant="h6">
       {value}
     </Typography>
   );

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -6,66 +6,112 @@ interface MakeStylesProps {
   limitLegendRows?: boolean;
 }
 
+export const legendWidth = 21;
+const legendItemHeight = 5.25;
+const legendItemHeightCompact = 1.75;
+
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
     item: {
-      display: 'grid',
-      gridTemplateColumns: 'min-content minmax(50px, 1fr)',
-      marginBottom: theme.spacing(1)
+      minWidth: theme.spacing(legendWidth)
     },
     items: {
+      '&[data-mode="compact"]': {
+        gridAutoRows: theme.spacing(legendItemHeightCompact),
+        height: limitLegendRows
+          ? theme.spacing(legendItemHeightCompact * 2 + 1.5)
+          : 'unset'
+      },
+      columnGap: theme.spacing(3),
       display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, max-content))',
-      marginLeft: theme.spacing(0.5),
-      maxHeight: limitLegendRows ? theme.spacing(14) : 'unset',
+      gridAutoRows: theme.spacing(legendItemHeight),
+      gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(legendWidth)})`,
+      maxHeight: limitLegendRows
+        ? theme.spacing(legendItemHeight * 2 + 1)
+        : 'unset',
       overflowY: 'auto',
+      rowGap: theme.spacing(1),
       width: '100%'
     },
     legend: {
       marginLeft: margin.left,
       marginRight: margin.right,
-      maxHeight: theme.spacing(24),
-      overflowX: 'hidden',
-      overflowY: 'auto'
+      overflow: 'hidden'
     },
-    legendData: {
-      display: 'flex',
-      flexDirection: 'column'
+    minMaxAvgContainer: {
+      columnGap: theme.spacing(0.5),
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, min-content)',
+      whiteSpace: 'nowrap'
     },
-    legendName: {
+    normal: {
+      color: theme.palette.text.primary
+    },
+    toggable: {
+      cursor: 'pointer'
+    }
+  })
+);
+
+interface StylesProps {
+  color?: string;
+}
+
+export const useLegendHeaderStyles = makeStyles<StylesProps>()(
+  (theme, { color }) => ({
+    container: {
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'start',
-      marginRight: theme.spacing(0.5),
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      gap: theme.spacing(0.5),
+      width: '100%'
     },
-    legendUnit: {
-      justifyContent: 'start',
-      marginLeft: 'auto',
-      marginRight: theme.spacing(0.5),
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+    disabled: {
+      color: theme.palette.text.disabled
     },
-    legendValue: {
-      fontWeight: theme.typography.body1.fontWeight
+    icon: {
+      backgroundColor: color,
+      borderRadius: theme.shape.borderRadius,
+      height: theme.spacing(1.5),
+      minWidth: theme.spacing(1.5),
+      width: theme.spacing(1.5)
+    },
+    legendName: {
+      '&[data-mode="compact"]': {
+        maxWidth: theme.spacing(legendWidth * 0.5)
+      },
+      maxWidth: theme.spacing(legendWidth * 0.75)
+    },
+    markerAndLegendName: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.spacing(0.5)
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),
       display: 'grid',
-      gridAutoRows: theme.spacing(2),
       gridTemplateColumns: 'repeat(2, min-content)',
       whiteSpace: 'nowrap'
     },
-    minMaxAvgValue: { fontWeight: 600 },
-    normal: {
-      color: theme.palette.text.primary
-    },
-    toggable: {
-      cursor: 'pointer'
+    text: {
+      fontWeight: theme.typography.fontWeightMedium,
+      lineHeight: 1
     }
   })
 );
+
+export const useLegendContentStyles = makeStyles()((theme) => ({
+  minMaxAvgValue: { fontWeight: theme.typography.fontWeightMedium },
+  text: {
+    lineHeight: 0.9
+  }
+}));
+
+export const useLegendValueStyles = makeStyles()({
+  text: {
+    lineHeight: 1.4
+  }
+});

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

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Typography } from '@mui/material';
 
-import { useStyles } from './Legend.styles';
+import { useLegendContentStyles } from './Legend.styles';
 
 interface Props {
   data: string;
@@ -10,15 +10,21 @@ interface Props {
 }
 
 const LegendContent = ({ data, label }: Props): JSX.Element => {
-  const { classes } = useStyles({});
+  const { classes, cx } = useLegendContentStyles();
 
   const { t } = useTranslation();
 
   return (
-    <div data-testid={label}>
-      <Typography variant="caption">{t(label)}: </Typography>
-      <Typography className={classes.minMaxAvgValue} variant="caption">
-        {data}
+    <div className={classes.text} data-testid={label}>
+      <Typography className={classes.text} component="span" variant="caption">
+        {t(label)}:{' '}
+        <Typography
+          className={cx(classes.minMaxAvgValue, classes.text)}
+          component="span"
+          variant="caption"
+        >
+          {data}
+        </Typography>
       </Typography>
     </div>
   );

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

@@ -1,43 +1,91 @@
 import { includes, isEmpty, split } from 'ramda';
 
-import { Tooltip, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
+import { EllipsisTypography, formatMetricValue } from '../../..';
 import { Line } from '../../common/timeSeries/models';
+import { Tooltip } from '../../../components';
 
-import { useStyles } from './Legend.styles';
+import { useLegendHeaderStyles } from './Legend.styles';
+import { LegendDisplayMode } from './models';
+import LegendContent from './LegendContent';
 
 interface Props {
+  color: string;
+  disabled?: boolean;
   line: Line;
+  minMaxAvg?;
+  value?: string | null;
 }
 
-const LegendHeader = ({ line }: Props): JSX.Element => {
-  const { classes } = useStyles({});
+const LegendHeader = ({
+  line,
+  color,
+  disabled,
+  value,
+  minMaxAvg
+}: Props): JSX.Element => {
+  const { classes, cx } = useLegendHeaderStyles({ color });
+
   const { unit, name, legend } = line;
 
   const legendName = legend || name;
-  const unitName = ` (${unit})`;
+  const hasUnit = !isEmpty(unit);
+  const unitName = `(${unit})`;
   const metricName = includes('#', legendName)
     ? split('#')(legendName)[1]
     : legendName;
 
+  const getEndText = (): string => {
+    if (value) {
+      return `${value}${hasUnit ? ` ${unit}` : ''}`;
+    }
+
+    return hasUnit ? ` ${unitName}` : '';
+  };
+
   return (
-    <div className={classes.legendName}>
-      <Tooltip placement="top" title={legendName + unitName}>
-        <Typography
-          className={classes.legendName}
-          component="p"
-          variant="caption"
-        >
-          {metricName}
-        </Typography>
-      </Tooltip>
-      <Typography
-        className={classes.legendUnit}
-        component="p"
-        variant="caption"
+    <div className={classes.container}>
+      <Tooltip
+        followCursor={false}
+        label={
+          minMaxAvg ? (
+            <div>
+              <Typography>{`${legendName} ${unitName}`}</Typography>
+              <div className={classes.minMaxAvgContainer}>
+                {minMaxAvg.map(({ label, value: subValue }) => (
+                  <LegendContent
+                    data={formatMetricValue({
+                      unit: line.unit,
+                      value: subValue
+                    })}
+                    key={label}
+                    label={label}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : (
+            `${legendName} ${unitName}`
+          )
+        }
+        placement="top"
       >
-        {!isEmpty(line?.unit) && `(${line.unit})`}
-      </Typography>
+        <div className={classes.markerAndLegendName}>
+          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
+          <EllipsisTypography
+            className={cx(classes.text, classes.legendName)}
+            data-mode={
+              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
+            }
+          >
+            {metricName}
+          </EllipsisTypography>
+        </div>
+      </Tooltip>
+      {hasUnit && (
+        <Typography className={classes.text}>{getEndText()}</Typography>
+      )}
     </div>
   );
 };

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

@@ -16,8 +16,7 @@ import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtom
 import InteractiveValue from './InteractiveValue';
 import { useStyles } from './Legend.styles';
 import LegendHeader from './LegendHeader';
-import LegendMarker from './Marker';
-import { GetMetricValueProps } from './models';
+import { GetMetricValueProps, LegendDisplayMode } from './models';
 import useInteractiveValues from './useInteractiveValues';
 import useLegend from './useLegend';
 import LegendContent from './LegendContent';
@@ -29,6 +28,7 @@ interface Props {
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
+  shouldDisplayLegendInCompactMode: boolean;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
   xScale;
@@ -43,7 +43,8 @@ const MainLegend = ({
   renderExtraComponent,
   displayAnchor = true,
   setLinesGraph,
-  xScale
+  xScale,
+  shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
@@ -85,9 +86,13 @@ const MainLegend = ({
     selectMetricLine(metric_id);
   };
 
+  const mode = shouldDisplayLegendInCompactMode
+    ? LegendDisplayMode.Compact
+    : LegendDisplayMode.Normal;
+
   return (
     <div className={classes.legend}>
-      <div className={classes.items}>
+      <div className={classes.items} data-mode={mode}>
         {displayedLines.map((line) => {
           const { color, display, highlight, metric_id } = line;
 
@@ -126,22 +131,37 @@ const MainLegend = ({
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
             >
-              <LegendMarker color={markerColor} disabled={!display} />
-              <div className={classes.legendData}>
-                <LegendHeader line={line} />
-                {displayAnchor && <InteractiveValue value={interactiveValue} />}
-                {!interactiveValue && (
-                  <div className={classes.minMaxAvgContainer}>
-                    {minMaxAvg.map(({ label, value }) => (
-                      <LegendContent
-                        data={getMetricValue({ unit: line.unit, value })}
-                        key={label}
-                        label={label}
-                      />
-                    ))}
-                  </div>
-                )}
-              </div>
+              <LegendHeader
+                color={markerColor}
+                disabled={!display}
+                line={line}
+                minMaxAvg={
+                  shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
+                }
+                value={
+                  shouldDisplayLegendInCompactMode
+                    ? interactiveValue
+                    : undefined
+                }
+              />
+              {!shouldDisplayLegendInCompactMode && (
+                <div>
+                  {displayAnchor && (
+                    <InteractiveValue value={interactiveValue} />
+                  )}
+                  {!interactiveValue && (
+                    <div className={classes.minMaxAvgContainer}>
+                      {minMaxAvg.map(({ label, value }) => (
+                        <LegendContent
+                          data={getMetricValue({ unit: line.unit, value })}
+                          key={label}
+                          label={label}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
             </Box>
           );
         })}
@@ -152,8 +172,15 @@ const MainLegend = ({
 };
 
 const Legend = (props: Props): JSX.Element => {
-  const { toggable, limitLegendRows, timeSeries, lines, base, displayAnchor } =
-    props;
+  const {
+    toggable,
+    limitLegendRows,
+    timeSeries,
+    lines,
+    base,
+    displayAnchor,
+    shouldDisplayLegendInCompactMode
+  } = props;
   const timeValue = useAtomValue(timeValueAtom);
 
   return useMemoComponent({
@@ -165,7 +192,8 @@ const Legend = (props: Props): JSX.Element => {
       base,
       toggable,
       limitLegendRows,
-      displayAnchor
+      displayAnchor,
+      shouldDisplayLegendInCompactMode
     ]
   });
 };

package/src/Graph/LineChart/Legend/models.ts

@@ -9,3 +9,8 @@ export interface GetMetricValueProps {
   unit: string;
   value: number | null;
 }
+
+export enum LegendDisplayMode {
+  Compact = 'compact',
+  Normal = 'normal'
+}

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -32,20 +32,19 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
     find(propEq(metric_id, 'metric_id'), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
-    const line = getLineByMetric(metric_id);
+    const data = lines.map((line) => ({
+      ...line,
+      display: equals(line.metric_id, metric_id) ? !line.display : line.display
+    }));
 
-    setLinesGraph([
-      ...reject(propEq(metric_id, 'metric_id'), lines),
-      { ...line, display: !line.display }
-    ]);
+    setLinesGraph(data);
   };
 
   const highlightLine = (metric_id): void => {
-    const fadedLines = map((line) => ({ ...line, highlight: false }), lines);
-    const data = [
-      ...reject(propEq(metric_id, 'metric_id'), fadedLines),
-      { ...getLineByMetric(metric_id), highlight: true }
-    ];
+    const data = lines.map((line) => ({
+      ...line,
+      highlight: equals(line.metric_id, metric_id)
+    }));
 
     setLinesGraph(data);
   };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,7 +1,7 @@
 import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
-import { flatten, isNil, pluck } from 'ramda';
+import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
@@ -33,6 +33,7 @@ import {
 import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
+import { legendWidth } from './Legend/Legend.styles';
 
 const extraMargin = 10;
 
@@ -161,6 +162,15 @@ const LineChart = ({
   const displayLegend = legend?.display ?? true;
   const displayTooltip = !isNil(tooltip?.renderComponent);
 
+  const legendItemsWidth = reduce(
+    (acc) => acc + legendWidth * 8 + 24,
+    0,
+    displayedLines
+  );
+
+  const shouldDisplayLegendInCompactMode =
+    lte(graphWidth, 808) && gt(legendItemsWidth, graphWidth);
+
   if (!isInViewport) {
     return (
       <Skeleton
@@ -294,6 +304,7 @@ const LineChart = ({
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}
+            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
             timeSeries={timeSeries}
             xScale={xScale}
           />

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -17,6 +17,7 @@ const renderMultiAutocompleteField = (): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -45,6 +45,7 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -32,6 +32,7 @@ import useFetchQuery from '../../../../api/useFetchQuery';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
+  baseEndpoint?: string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -60,6 +61,7 @@ const ConnectedAutocompleteField = (
     displayOptionThumbnail,
     queryKey,
     allowUniqOption,
+    baseEndpoint,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -87,6 +89,7 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
       ListingModel<TData>
     >({
+      baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({

package/src/InputField/Text/index.tsx

@@ -80,6 +80,7 @@ export type Props = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
+  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
@@ -112,6 +113,7 @@ const TextField = forwardRef(
       autoSizeCustomPadding,
       defaultValue,
       required = false,
+      containerClassName,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -142,7 +144,10 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
+      <Box
+        className={containerClassName}
+        sx={{ width: autoSize ? 'auto' : '100%' }}
+      >
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}

package/src/ThemeProvider/palettes.ts

@@ -143,7 +143,7 @@ declare module '@mui/material/Badge' {
 export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
+    acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -153,7 +153,7 @@ export const lightPalette: PaletteOptions = {
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
+    inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -283,7 +283,7 @@ export const lightPalette: PaletteOptions = {
 export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
+    acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -293,7 +293,7 @@ export const darkPalette: PaletteOptions = {
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
     inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
+    inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },

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;
@@ -57,13 +58,17 @@ 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>({
     queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -96,6 +101,7 @@ const useFetchQuery = <T extends object>({
     queryClient.prefetchQuery({
       queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -137,6 +143,7 @@ const useFetchQuery = <T extends object>({
     return queryClient.fetchQuery({
       queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
@@ -154,6 +161,10 @@ const useFetchQuery = <T extends object>({
     [queryData.data]
   );
 
+  if (!isNil(data)) {
+    dataRef.current = data;
+  }
+
   const errorData = queryData.data as ResponseError | undefined;
 
   useEffect(() => {
@@ -171,7 +182,7 @@ const useFetchQuery = <T extends object>({
 
   return {
     ...omit(['data', 'error'], queryData),
-    data,
+    data: dataRef.current,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,

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;
@@ -68,7 +69,8 @@ const useMutationQuery = <T extends object, TMeta>({
   method,
   onMutate,
   onError,
-  onSuccess
+  onSuccess,
+  baseEndpoint
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
@@ -83,6 +85,7 @@ const useMutationQuery = <T extends object, TMeta>({
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,

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;