@centreon/ui 25.7.2 → 25.8.0

package/src/Graph/common/timeSeries/index.ts

@@ -20,7 +20,6 @@ import {
   includes,
   isEmpty,
   isNil,
-  isNotNil,
   keys,
   last,
   lt,
@@ -353,6 +352,19 @@ const getScaleType = (
 const hasOnlyZeroesHasValue = (graphValues: Array<number>): boolean =>
   graphValues.every((value) => equals(value, 0) || equals(value, null));
 
+const getSanitizedValues = reject(
+  (
+    value:
+      | number
+      | boolean
+      | typeof Number.POSITIVE_INFINITY
+      | typeof Number.NEGATIVE_INFINITY
+  ) =>
+    equals(value, false) ||
+    equals(value, Number.POSITIVE_INFINITY) ||
+    equals(value, Number.NEGATIVE_INFINITY)
+);
+
 const getScale = ({
   graphValues,
   height,
@@ -363,23 +375,39 @@ const getScale = ({
   scaleLogarithmicBase,
   isHorizontal,
   invert,
-  hasDisplayAsBar
+  hasDisplayAsBar,
+  hasLineFilled,
+  min,
+  max
 }): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
-  const minValue = Math.min(
-    hasDisplayAsBar && 0,
-    invert && graphValues.every(lt(0))
-      ? negate(getMax(graphValues))
-      : getMin(graphValues),
-    getMin(stackedValues),
-    Math.min(...thresholds)
-  );
-  const maxValue = Math.max(
-    getMax(graphValues),
-    getMax(stackedValues),
-    hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
-    Math.max(...thresholds)
-  );
+  const sanitizedValuesForMinimum = min
+    ? [min]
+    : getSanitizedValues([
+        invert && graphValues.every(lt(0))
+          ? negate(getMax(graphValues))
+          : getMin(graphValues),
+        !isEmpty(stackedValues) &&
+          !equals(stackedValues, [0]) &&
+          getMin(stackedValues),
+        Math.min(...thresholds)
+      ]);
+  const minValue = Math.min(...sanitizedValuesForMinimum);
+  const minValueWithMargin =
+    (hasDisplayAsBar || hasLineFilled) && minValue > 0 && !min
+      ? 0
+      : minValue - Math.abs(minValue) * 0.05;
+
+  const sanitizedValuesForMaximum = max
+    ? [max]
+    : getSanitizedValues([
+        getMax(graphValues),
+        getMax(stackedValues),
+        hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
+        Math.max(...thresholds)
+      ]);
+  const maxValue = Math.max(...sanitizedValuesForMaximum);
+  const maxValueWithMargin = maxValue + Math.abs(maxValue) * 0.05;
 
   const scaleType = getScaleType(scale);
 
@@ -387,21 +415,26 @@ const getScale = ({
   const range = [height, upperRangeValue];
 
   if (isCenteredZero) {
-    const greatestValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
+    const greatestValue = Math.max(
+      Math.abs(maxValueWithMargin),
+      Math.abs(minValueWithMargin)
+    );
 
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
       domain: [-greatestValue, greatestValue],
-      range: isHorizontal ? range : range.reverse()
+      range: isHorizontal ? range : range.reverse(),
+      clamp: min || max
     });
   }
 
-  const domain = [isLogScale ? 0.001 : minValue, maxValue];
+  const domain = [isLogScale ? 0.001 : minValueWithMargin, maxValueWithMargin];
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
     domain,
-    range: isHorizontal ? range : range.reverse()
+    range: isHorizontal ? range : range.reverse(),
+    clamp: min || max
   });
 };
 
@@ -437,11 +470,19 @@ const getYScaleUnit = ({
   scaleLogarithmicBase,
   isHorizontal = true,
   unit,
-  invert
-}: AxeScale & { invert?: boolean | string | null; unit: string }): ScaleLinear<
-  number,
-  number
-> => {
+  invert,
+  min,
+  max,
+  isBarChart,
+  boundariesUnit
+}: AxeScale & {
+  invert?: boolean | string | null;
+  unit: string;
+  max?: number;
+  min?: number;
+  boundariesUnit?: string;
+  isBarChart?: boolean;
+}): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
     equals(unit, thresholdUnit) || (!thresholdUnit && equals(firstUnit, unit));
@@ -468,11 +509,14 @@ const getYScaleUnit = ({
 
   return getScale({
     graphValues,
-    hasDisplayAsBar: dataLines.some(
-      ({ displayAs, unit: lineUnit, stackOrder }) =>
-        equals(unit, lineUnit) &&
-        equals(displayAs, 'bar') &&
-        isNotNil(stackOrder)
+    hasDisplayAsBar:
+      isBarChart ||
+      dataLines.some(
+        ({ displayAs, unit: lineUnit }) =>
+          equals(unit, lineUnit) && equals(displayAs, 'bar')
+      ),
+    hasLineFilled: dataLines.some(
+      ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
     ),
     height: valueGraphHeight,
     invert,
@@ -481,10 +525,24 @@ const getYScaleUnit = ({
     scale,
     scaleLogarithmicBase,
     stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : []
+    thresholds: shouldApplyThresholds ? thresholds : [],
+    min: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: min }),
+    max: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: max })
   });
 };
 
+const boundaryToApplyToUnit = ({
+  boundary,
+  boundariesUnit,
+  unit
+}): number | undefined => {
+  if (!boundariesUnit) {
+    return boundary;
+  }
+
+  return equals(boundariesUnit, unit) ? boundary : undefined;
+};
+
 const getYScalePerUnit = ({
   dataLines,
   dataTimeSeries,
@@ -494,8 +552,17 @@ const getYScalePerUnit = ({
   isCenteredZero,
   scale,
   scaleLogarithmicBase,
-  isHorizontal = true
-}: AxeScale): Record<string, ScaleLinear<number, number>> => {
+  isHorizontal = true,
+  isBarChart,
+  min,
+  max,
+  boundariesUnit
+}: AxeScale & {
+  min?: number;
+  max?: number;
+  isBarChart?: boolean;
+  boundariesUnit?: string;
+}): Record<string, ScaleLinear<number, number>> => {
   const units = getUnits(dataLines);
 
   const scalePerUnit = units.reduce((acc, unit) => {
@@ -514,7 +581,11 @@ const getYScalePerUnit = ({
         thresholdUnit,
         thresholds,
         unit,
-        valueGraphHeight
+        valueGraphHeight,
+        min,
+        max,
+        isBarChart,
+        boundariesUnit
       })
     };
   }, {});

package/src/Graph/common/utils.ts

@@ -20,7 +20,9 @@ import {
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
+import dayjs from 'dayjs';
 import { BarStyle } from '../BarChart/models';
+import { margin } from '../Chart/common';
 import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
 import { formatMetricValue } from './timeSeries';
@@ -256,3 +258,20 @@ export const getFormattedAxisValues = ({
     .concat(formattedThresholdValues)
     .filter((v) => v) as Array<string>;
 };
+
+interface ComputeGElementMarginLeftProps {
+  maxCharacters: number;
+  hasSecondUnit?: boolean;
+}
+
+export const computeGElementMarginLeft = ({
+  maxCharacters,
+  hasSecondUnit
+}: ComputeGElementMarginLeftProps): number =>
+  maxCharacters * 5 + (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6);
+
+export const computPixelsToShiftMouse = (xScale): number => {
+  const domain = xScale.domain();
+
+  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
+};

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

@@ -17,7 +17,7 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import { ListingModel, ListingMapModel, SelectEntry } from '../../../..';
+import { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
 import {
   ConditionsSearchParameter,
   SearchParameter
@@ -122,26 +122,31 @@ const ConnectedAutocompleteField = (
       }
     });
 
-    const getOptionResult = useCallback((
-      newOptions: ListingModel<TData> | ListingMapModel<TData>
-    ): OptionResult<TData> => {
-      if ('result' in newOptions) return {
-        result: newOptions.result || [],
-        total: newOptions.meta.total || 1,
-        limit: newOptions.meta.limit || 1,
-      };
-      if ('content' in newOptions) return {
-        result: newOptions.content || [],
-        total: newOptions.totalElements || 1,
-        limit: newOptions.size || 1,
-      };
-
-      return {
-        result: [],
-        total: 1,
-        limit: 1,
-      }
-    }, []);
+    const getOptionResult = useCallback(
+      (
+        newOptions: ListingModel<TData> | ListingMapModel<TData>
+      ): OptionResult<TData> => {
+        if ('result' in newOptions)
+          return {
+            result: newOptions.result || [],
+            total: newOptions.meta.total || 1,
+            limit: newOptions.meta.limit || 1
+          };
+        if ('content' in newOptions)
+          return {
+            result: newOptions.content || [],
+            total: newOptions.totalElements || 1,
+            limit: newOptions.size || 1
+          };
+
+        return {
+          result: [],
+          total: 1,
+          limit: 1
+        };
+      },
+      []
+    );
 
     const lastOptionRef = useIntersectionObserver({
       action: () => setPage(page + 1),

package/src/ThemeProvider/palettes.ts

@@ -297,7 +297,7 @@ export const lightPalette: PaletteOptions = {
     contrastText: '#000',
     main: '#FD9B27',
     light: '#FCC481',
-    dark: '#FC7E00',
+    dark: '#FC7E00'
   }
 };
 

package/src/api/models.ts

@@ -10,10 +10,10 @@ export interface Listing<TEntity> {
 }
 
 export interface ListingMap<TEntity> {
-    content: Array<TEntity>;
-    totalPages: number;
-    totalElements: number;
-    size: number;
-    number: number;
-    numberOfElements: number;
+  content: Array<TEntity>;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  numberOfElements: number;
 }

package/src/components/Modal/Modal.stories.tsx

@@ -4,6 +4,7 @@ import { Button } from '../Button';
 
 import { Modal } from '.';
 import '../../ThemeProvider/tailwindcss.css';
+import { basicFormWithCollapsibleGroups } from '../../Form/Form.stories';
 
 const meta: Meta<typeof Modal> = {
   argTypes: {
@@ -45,6 +46,25 @@ export const Default: Story = {
   )
 };
 
+export const WithForm: Story = {
+  args: {
+    ...Default.args
+  },
+
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>{basicFormWithCollapsibleGroups()}</Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
 export const AsDangerAction: Story = {
   args: {
     ...Default.args

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

@@ -8,7 +8,7 @@ const useStyles = makeStyles<{
 }>()((theme, props) => ({
   modal: {
     '& .MuiDialog-paper': {
-      gap: theme.spacing(2),
+      gap: theme.spacing(3),
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
@@ -65,15 +65,6 @@ const useStyles = makeStyles<{
     right: 0,
     zIndex: theme.zIndex.modal
   },
-  modalBody: {
-    '& > p': {
-      '&:first-of-type': {
-        margin: theme.spacing(0, 0, 1, 0)
-      },
-      margin: theme.spacing(1, 0, 1, 0),
-      width: '90%'
-    }
-  },
   modalCloseButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -82,19 +73,7 @@ const useStyles = makeStyles<{
     },
     top: theme.spacing(1)
   },
-  modalHeader: {
-    '& .MuiDialogTitle-root': {
-      padding: theme.spacing(0)
-    },
-    display: 'flex',
-    gap: theme.spacing(2),
-
-    justifyContent: 'space-between'
-  },
-  modalTitle: {
-    fontSize: theme.typography.h5.fontSize,
-    fontWeight: theme.typography.fontWeightBold
-  }
+  
 }));
 
 export { useStyles };

package/src/components/Modal/Modal.tsx

@@ -54,7 +54,7 @@ const Modal = ({
       TransitionProps={{
         direction: 'up'
       }}
-      className={classes.modal}
+      className={`${classes.modal} gap-6`}
       data-size={size}
       open={open}
       onClose={onClose}

package/src/components/Modal/ModalBody.tsx

@@ -1,15 +1,17 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './Modal.styles';
+import { modalBody } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
 };
 
 const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.modalBody}>{children}</div>;
+  return (
+    <div className={modalBody} data-testid="modal-body">
+      {children}
+    </div>
+  );
 };
 
 export { ModalBody };

package/src/components/Modal/ModalHeader.tsx

@@ -2,7 +2,9 @@ import { ReactElement, ReactNode } from 'react';
 
 import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 
-import { useStyles } from './Modal.styles';
+import '../../../src/ThemeProvider/tailwindcss.css';
+
+import { modalHeader } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
@@ -12,11 +14,9 @@ const ModalHeader = ({
   children,
   ...rest
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" className={classes.modalTitle} {...rest}>
+    <div className={modalHeader}>
+      <MuiDialogTitle className="p-0 font-bold text-2xl" color="primary" {...rest}>
         {children}
       </MuiDialogTitle>
     </div>

package/src/components/Modal/modal.module.css

@@ -0,0 +1,16 @@
+.modalHeader {
+  & .MuiDialogTitle-root {
+    padding: 0;
+  }
+
+  display: flex;
+  gap: var(--spacing-4);
+  justify-content: space-between;
+}
+
+.modalBody {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding-right: var(--spacing-4); /* To prevent scrollbar from overlapping content */
+}

package/src/components/Tabs/Tab.styles.ts

@@ -5,12 +5,6 @@ export const useTabsStyles = makeStyles()((theme) => ({
     bottom: 'unset'
   },
   tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing(2),
     minHeight: 0,
     minWidth: 0,

package/src/components/Tabs/Tabs.tsx

@@ -5,33 +5,53 @@ import { Tabs as MuiTabs, Tab, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';
 
+import '../../ThemeProvider/tailwindcss.css';
+
+export interface TabI {
+  label: string;
+  value: string;
+}
+
 type Props = {
-  children: Array<JSX.Element>;
+  children?: Array<JSX.Element>;
   defaultTab: string;
   tabList?: TabsProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  scrollButtons?: boolean | 'auto';
+  tabs: TabI[];
+  onChange?: (newValue: string) => void;
 };
 
 export const Tabs = ({
   children,
   defaultTab,
   tabs,
-  tabList
+  tabList,
+  variant,
+  scrollButtons = 'auto',
+  onChange
 }: Props): JSX.Element => {
   const { classes } = useTabsStyles();
 
   const [selectedTab, setSelectedTab] = useState(defaultTab);
 
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
+  const changeTab = useCallback(
+    (_, newValue: string): void => {
+      if (onChange) onChange(newValue);
+
+      setSelectedTab(newValue);
+    },
+    [onChange]
+  );
+
+  const selectedTabStyle = ' font-bold text-primary-main';
+  const defaultTabStyle = ' font-normal';
 
   return (
     <TabContext value={selectedTab}>
       <MuiTabs
+        scrollButtons={scrollButtons}
+        variant={variant}
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
@@ -43,10 +63,11 @@ export const Tabs = ({
         {tabs.map(({ value, label }) => (
           <Tab
             aria-label={label}
-            className={classes.tab}
+            className={`${classes.tab} ${selectedTab === value ? selectedTabStyle : defaultTabStyle}`}
             key={value}
             label={label}
             value={value}
+            data-testid={`tab-${value}`}
           />
         ))}
       </MuiTabs>