@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

package/src/Form/Inputs/Grid.tsx

@@ -1,39 +1,14 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { InputPropsWithoutGroup } from './models';
 
 import { Box, Typography } from '@mui/material';
 import { FormikValues, useFormikContext } from 'formik';
+import { isNotEmpty, isNotNil } from 'ramda';
 import { getInput } from '.';
 
-interface StylesProps {
-  alignItems?: string;
-  columns?: number;
-  gridTemplateColumns?: string;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { columns, gridTemplateColumns, alignItems }) => ({
-    gridFields: {
-      alignItems: alignItems || 'flex-start',
-      columnGap: theme.spacing(4),
-      display: 'grid',
-      gridTemplateColumns: gridTemplateColumns || `repeat(${columns}, 1fr)`,
-      rowGap: theme.spacing(2)
-    }
-  })
-);
-
 const Grid = ({
   grid,
   hideInput
 }: InputPropsWithoutGroup): JSX.Element | null => {
-  const { classes, cx } = useStyles({
-    alignItems: grid?.alignItems,
-    columns: grid?.columns.length,
-    gridTemplateColumns: grid?.gridTemplateColumns
-  });
-
   const { values } = useFormikContext<FormikValues>();
 
   if (hideInput?.(values) ?? false) {
@@ -43,20 +18,34 @@ const Grid = ({
   const className = grid?.className || '';
 
   return (
-    <div className={cx(classes.gridFields, className)}>
+    <div
+      className={`${className} grid gap-3`}
+      style={{
+        gridTemplateColumns: className
+          ? grid?.gridTemplateColumns || undefined
+          : grid?.gridTemplateColumns ||
+            `repeat(${grid?.columns.length || 1}, 1fr)`,
+        alignItems: grid?.alignItems || 'flex-start'
+      }}
+    >
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
+        const key =
+          isNotNil(field.label) || isNotEmpty(field.label)
+            ? field.label
+            : field.additionalLabel;
+
         if (field.hideInput?.(values) ?? false) {
           return null;
         }
 
         return (
-          <Box sx={{ width: '100%' }} key={field.fieldName}>
+          <Box sx={{ width: '100%' }} key={key}>
             {field.additionalLabel && (
               <Typography
                 sx={{ marginBottom: 0.5, color: 'primary.main' }}
-                className={cx(field?.additionalLabelClassName)}
+                className={field?.additionalLabelClassName}
                 variant="h6"
               >
                 {field.additionalLabel}

package/src/Form/Inputs/SubGroupDivider.tsx

@@ -0,0 +1,7 @@
+import Divider from '@mui/material/Divider';
+
+const SubgroupDivider = () => {
+  return <Divider className="border-dashed" />;
+};
+
+export { SubgroupDivider };

package/src/Form/Inputs/Text.tsx

@@ -127,6 +127,7 @@ const Text = ({
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}
         dataTestId={dataTestId || label}
+        data-testid-suffix={`test-${label}`}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}

package/src/Form/Inputs/index.tsx

@@ -20,6 +20,8 @@ import {
   groupBy,
   isEmpty,
   isNil,
+  isNotEmpty,
+  isNotNil,
   keys,
   last,
   not,
@@ -41,6 +43,7 @@ import Grid from './Grid';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
 import RadioInput from './Radio';
+import { SubgroupDivider } from './SubGroupDivider';
 import SwitchInput from './Switch';
 import TextInput from './Text';
 import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
@@ -80,6 +83,11 @@ export const getInput = cond<
   ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
   [equals(InputType.File) as (b: InputType) => boolean, always(File)],
+  [equals(InputType.Text) as (b: InputType) => boolean, always(TextInput)],
+  [
+    equals(InputType.Divider) as (b: InputType) => boolean,
+    always(SubgroupDivider)
+  ],
   [T, always(TextInput)]
 ]);
 
@@ -114,9 +122,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
   inputs: {
     display: 'flex',
     flexDirection: 'column',
-    marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2),
-    marginBottom: theme.spacing(1)
+    margin: theme.spacing(2, 0),
+    rowGap: theme.spacing(2)
   }
 }));
 
@@ -203,6 +210,7 @@ const Inputs = ({
           ? find(propEq(groupName, 'name'), groups)
           : ({} as Group);
 
+        const hasGroupDivider = !groups[index]?.isDividerHidden;
         const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
@@ -217,22 +225,19 @@ const Inputs = ({
               >
                 <div className={classes.inputs}>
                   {groupedInputs.map((inputProps) => {
+                    const key =
+                      isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
+                        ? inputProps.label
+                        : inputProps.additionalLabel;
+
                     if (isLoading) {
-                      return (
-                        <LoadingSkeleton
-                          input={inputProps}
-                          key={inputProps.label}
-                        />
-                      );
+                      return <LoadingSkeleton input={inputProps} key={key} />;
                     }
 
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div
-                        className={classes.inputWrapper}
-                        key={inputProps.label}
-                      >
+                      <div className={classes.inputWrapper} key={key}>
                         {inputProps.additionalLabel && (
                           <Typography
                             className={cx(
@@ -253,17 +258,19 @@ const Inputs = ({
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
-              <Divider
-                flexItem
-                className={classes.divider}
-                orientation={
-                  equals(groupDirection, GroupDirection.Horizontal)
-                    ? 'vertical'
-                    : 'horizontal'
-                }
-              />
-            )}
+            {hasGroupDivider &&
+              hasGroupTitle &&
+              not(equals(lastGroup, groupName as string)) && (
+                <Divider
+                  flexItem
+                  className={classes.divider}
+                  orientation={
+                    equals(groupDirection, GroupDirection.Horizontal)
+                      ? 'vertical'
+                      : 'horizontal'
+                  }
+                />
+              )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -4,6 +4,7 @@ import { SvgIconProps, TypographyProps } from '@mui/material';
 
 import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
+import { QueryParameter } from '../../queryParameters/models';
 
 export enum InputType {
   Switch = 0,
@@ -20,7 +21,8 @@ export enum InputType {
   Checkbox = 11,
   CheckboxGroup = 12,
   List = 13,
-  File = 14
+  File = 14,
+  Divider = 15
 }
 
 interface FieldsTableGetRequiredProps {
@@ -55,10 +57,14 @@ export interface InputProps {
   };
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
+    customQueryParameters: Array<QueryParameter>;
     chipColor?: string;
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
+    disableSelectAll?: boolean;
+    limitTags?: number;
+    decoder?;
   };
   file?: {
     multiple?: boolean;
@@ -133,4 +139,5 @@ export interface Group {
   name: string;
   order: number;
   titleAttributes?: TypographyProps;
+  isDividerHidden?: boolean;
 }

package/src/Form/Section/FormSection.tsx

@@ -0,0 +1,34 @@
+import { Box, TabsProps } from '@mui/material';
+import { isNil } from 'ramda';
+import { useMemo } from 'react';
+import { Tabs } from '../../components/Tabs';
+import { Group } from '../Inputs/models';
+import { groupToTab } from './PanelTabs';
+import { useNavigateToSection } from './navigateToSection';
+
+export interface FormSectionProps extends TabsProps {
+  groups?: Group[];
+}
+
+const FormSection = ({ groups }: FormSectionProps) => {
+  if (isNil(groups) || groups.length < 4) {
+    return null;
+  }
+
+  const navigateToSection = useNavigateToSection();
+  const tabMemo = useMemo(() => groupToTab(groups), [groups]);
+
+  return (
+    <Box className="sticky top-0 bg-background-paper z-100">
+      <Tabs
+        variant="scrollable"
+        scrollButtons={false}
+        tabs={tabMemo}
+        defaultTab={tabMemo[0].value}
+        onChange={navigateToSection}
+      />
+    </Box>
+  );
+};
+
+export { FormSection };

package/src/Form/Section/PanelTabs.tsx

@@ -0,0 +1,13 @@
+import { prop, sortBy } from 'ramda';
+import { TabI } from 'src/components/Tabs/Tabs';
+import { Group } from '../Inputs/models';
+
+const groupToTab = (groups: Array<Group>): Array<TabI> => {
+  const sortedGroups = sortBy(prop('order'), groups);
+
+  return sortedGroups.map((group) => {
+    return { value: group.name, label: group.name };
+  });
+};
+
+export { groupToTab };

package/src/Form/Section/navigateToSection.ts

@@ -0,0 +1,9 @@
+export const useNavigateToSection = () => {
+  return (sectionName: string) => {
+    const section = document.querySelector(
+      `[data-section-group-form-id="${sectionName}"]`
+    );
+
+    section?.scrollIntoView({ behavior: 'smooth' });
+  };
+};

package/src/Form/storiesData.tsx

@@ -157,12 +157,16 @@ export const basicFormGroups: Array<Group> = [
   {
     EndIcon: () => <HelpOutlineIcon />,
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
+    name: 'Third group',
+    order: 3
+  },
+  {
     name: 'Second group',
     order: 2
   },
   {
-    name: 'Third group',
-    order: 3
+    name: 'Fourth group',
+    order: 4
   }
 ];
 
@@ -215,6 +219,12 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
+  {
+    fieldName: 'div',
+    group: 'First group',
+    label: 'divider',
+    type: InputType.Divider
+  },
   {
     additionalLabel: 'Notifications',
     fieldName: '',
@@ -226,12 +236,12 @@ export const basicFormInputs: Array<InputProps> = [
             direction: 'horizontal'
           },
           fieldName: 'notifications.channels',
-          label: 'channels',
+          label: 'mail',
           type: InputType.Checkbox
         },
         {
           fieldName: 'notifications.includeServices',
-          label: 'Iclude services',
+          label: 'Include services for this host',
           type: InputType.Checkbox
         },
         {

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

@@ -4,10 +4,12 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
+import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -30,10 +32,20 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle
+  barStyle,
+  min,
+  max
 }: Pick<
   BarChartProps,
-  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'
+  | 'data'
+  | 'legend'
+  | 'axis'
+  | 'barStyle'
+  | 'orientation'
+  | 'tooltip'
+  | 'start'
+  | 'min'
+  | 'max'
 >): void => {
   cy.adjustViewport();
 
@@ -47,6 +59,8 @@ const initialize = ({
           legend={legend}
           orientation={orientation ?? 'horizontal'}
           tooltip={tooltip}
+          min={min}
+          max={max}
           {...defaultArgs}
         />
       </div>
@@ -138,8 +152,6 @@ describe('Bar chart', () => {
       cy.contains(':40 AM').should('be.visible');
 
       cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data centered in zero`, () => {
@@ -250,8 +262,6 @@ describe('Bar chart', () => {
     cy.contains('0.11 ms').should('be.visible');
 
     cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-    cy.makeSnapshot();
   });
 
   it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
@@ -291,4 +301,34 @@ describe('Bar chart', () => {
     cy.contains('05/31/2023').should('be.visible');
     cy.contains('06/07/2023').should('be.visible');
   });
+
+  it('displays the bar chart according to min and max boundaries', () => {
+    initialize({
+      data: dataLastWeek,
+      min: -0.05,
+      max: 1
+    });
+
+    cy.contains('05/31/2023').should('be.visible');
+    cy.contains('06/07/2023').should('be.visible');
+    cy.contains('1 s').should('be.visible');
+    cy.contains('1%').should('be.visible');
+  });
+
+  it('displays the stacked bar chart correctly when a point is missing compare to the time serie', () => {
+    initialize({ data: dataMissingPoint });
+
+    cy.findByTestId('stacked-bar-2-0-139').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the stacked bar chart with bars stacked together', () => {
+    initialize({ data: dataPingServiceLinesStackKeys });
+
+    cy.findByTestId('stacked-bar-3-0-0.05336').should('be.visible');
+    cy.findByTestId('stacked-bar-4-0-0.06684').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -5,7 +5,10 @@ import { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
 
+import { ClickAwayListener } from '@mui/material';
+import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -250,3 +253,60 @@ export const mixedStackedVertical: Story = {
   },
   render: Template
 };
+
+export const mixedStackedMinMax: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceMixedStacked,
+    min: 10,
+    max: 20
+  },
+  render: Template
+};
+
+const LegendSecondaryClick = (args) => {
+  const [position, setPosition] = useState<Array<[number, number]> | null>(
+    null
+  );
+
+  return (
+    <>
+      <Template
+        {...args}
+        legend={{
+          secondaryClick: ({ position }) => setPosition(position)
+        }}
+      />
+      {position && (
+        <ClickAwayListener onClickAway={() => setPosition(null)}>
+          <div
+            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
+            style={{ left: position?.[0], top: position?.[1] }}
+            open={Boolean(position)}
+            onClose={() => setPosition(null)}
+          >
+            menu
+          </div>
+        </ClickAwayListener>
+      )}
+    </>
+  );
+};
+
+export const withLegendSecondaryClick: Story = {
+  args: defaultArgs,
+  render: (args) => (
+    <LegendSecondaryClick
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};
+
+export const stackKey: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStackeKey
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -12,12 +10,14 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
-import { ParentSize } from '../../ParentSize';
+import Loading from '../../LoadingSkeleton';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
 import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
 
+import { ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
 import { BarStyle } from './models';
 
@@ -27,7 +27,20 @@ dayjs.extend(timezonePlugin);
 
 export interface BarChartProps
   extends Partial<
-    Pick<LineChartProps, 'tooltip' | 'legend' | 'height' | 'axis' | 'header'>
+    Pick<
+      LineChartProps,
+      | 'tooltip'
+      | 'legend'
+      | 'height'
+      | 'axis'
+      | 'header'
+      | 'min'
+      | 'max'
+      | 'boundariesUnit'
+      | 'timeShiftZones'
+      | 'zoomPreview'
+      | 'annotationEvent'
+    >
   > {
   barStyle?: BarStyle;
   data?: LineChartData;
@@ -59,10 +72,16 @@ const BarChart = ({
     opacity: 1,
     radius: 0.2
   },
-  skipIntersectionObserver
-}: BarChartProps): JSX.Element => {
-  const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit,
+  zoomPreview,
+  timeShiftZones,
+  annotationEvent
+}: BarChartProps): ReactElement => {
+  const { adjustedData } = useChartData({ data, end, start, min, max });
+  const { ref, width, height: responsiveHeight } = useResizeObserver();
 
   if (loading && !adjustedData) {
     return (
@@ -75,30 +94,35 @@ const BarChart = ({
 
   return (
     <Provider>
-      <Box
-        ref={lineChartRef}
-        sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
-      >
-        <ParentSize>
-          {({ height: responsiveHeight, width }) => (
-            <ResponsiveBarChart
-              axis={axis}
-              barStyle={barStyle}
-              graphData={adjustedData}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              orientation={orientation}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              tooltip={tooltip}
-              width={width}
-              skipIntersectionObserver={skipIntersectionObserver}
-            />
-          )}
-        </ParentSize>
+      <Box ref={ref} sx={{ height: '100%', overflow: 'hidden', width: '100%' }}>
+        {!responsiveHeight ? (
+          <Loading height={height || '100%'} width={width} />
+        ) : (
+          <ResponsiveBarChart
+            axis={axis}
+            barStyle={barStyle}
+            graphData={adjustedData}
+            graphRef={ref}
+            header={header}
+            height={height || responsiveHeight || 0}
+            legend={legend}
+            limitLegend={limitLegend}
+            orientation={orientation}
+            thresholdUnit={thresholdUnit}
+            thresholds={thresholds}
+            tooltip={tooltip}
+            width={width || 0}
+            skipIntersectionObserver={skipIntersectionObserver}
+            min={min}
+            max={max}
+            boundariesUnit={boundariesUnit}
+            zoomPreview={zoomPreview}
+            timeShiftZones={timeShiftZones}
+            annotationEvent={annotationEvent}
+            start={start}
+            end={end}
+          />
+        )}
       </Box>
     </Provider>
   );