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

package/src/Graph/mockedData/pingServiceWithStackedKeys.json

@@ -0,0 +1,205 @@
+{
+  "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"
+  ]
+}

package/src/Icon/RegexIcon.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material';
+import { ReactElement } from 'react';
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g transform="translate(2 2)">
+    <path
+      d="M19.468,8.107,17.2,6.8l2.264-1.307a.8.8,0,0,0-.8-1.386L16.4,5.414V2.8a.8.8,0,1,0-1.6,0V5.414L12.54,4.107a.8.8,0,1,0-.8,1.386L14,6.8,11.74,8.107a.8.8,0,1,0,.8,1.386L14.8,8.186V10.8a.8.8,0,1,0,1.6,0V8.186l2.264,1.307a.789.789,0,0,0,.4.107.8.8,0,0,0,.4-1.493"
+      transform="translate(-1.868)"
+    />
+    <path
+      d="M5.2,20.4a3.2,3.2,0,1,1,3.2-3.2,3.2,3.2,0,0,1-3.2,3.2m0-4.8a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6"
+      transform="translate(0 -2.4)"
+    />
+  </g>
+);
+
+export const RegexIcon = (props: SvgIconProps): ReactElement => (
+  <BaseIcon {...props} Icon={icon} dataTestId="RegexIcon" />
+);

package/src/Icon/index.ts

@@ -8,3 +8,4 @@ export { HostGroupIcon } from './HostGroupIcon';
 export { ServiceGroupIcon } from './ServiceGroupIcon';
 export { MetaServiceIcon } from './MetaServiceIcon';
 export { ContainerIcon } from './ContainerIcon';
+export { RegexIcon } from './RegexIcon';

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -4,12 +4,40 @@ import {
   TestQueryProvider
 } from '@centreon/ui';
 
+import i18next from 'i18next';
+import { useState } from 'react';
+import { initReactI18next } from 'react-i18next';
+import { labelSelectAll, labelUnSelectAll } from '../../../../translatedLabels';
 import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
 
 const optionOne = 'My Option 1';
 
+const Component = () => {
+  const [values, setValues] = useState([]);
+  return (
+    <TestQueryProvider>
+      <div style={{ paddingTop: 20 }}>
+        <MultiConnectedAutocompleteField
+          field="host.name"
+          getEndpoint={getEndpoint}
+          label={label}
+          placeholder={placeholder}
+          value={values}
+          onChange={(_, item) => setValues(item)}
+          disableSelectAll={false}
+        />
+      </div>
+    </TestQueryProvider>
+  );
+};
+
 describe('Multi connected autocomplete', () => {
   beforeEach(() => {
+    i18next.use(initReactI18next).init({
+      lng: 'en',
+      resources: {}
+    });
+
     cy.fixture('inputField/listOptions').then((optionsData) => {
       cy.interceptAPIRequest({
         alias: 'getListOptions',
@@ -35,18 +63,7 @@ describe('Multi connected autocomplete', () => {
     });
 
     cy.mount({
-      Component: (
-        <TestQueryProvider>
-          <div style={{ paddingTop: 20 }}>
-            <MultiConnectedAutocompleteField
-              field="host.name"
-              getEndpoint={getEndpoint}
-              label={label}
-              placeholder={placeholder}
-            />
-          </div>
-        </TestQueryProvider>
-      )
+      Component: <Component />
     });
   });
 
@@ -98,7 +115,7 @@ describe('Multi connected autocomplete', () => {
     cy.waitForRequest('@getSearchedOption');
 
     cy.fixture('inputField/searchedOption').then(() => {
-      cy.get('@listOptions').find('li').should('have.length', 5);
+      cy.get('@listOptions').find('li').should('have.length', 6);
     });
 
     cy.get('[type="checkbox"]').eq(0).check();
@@ -115,7 +132,7 @@ describe('Multi connected autocomplete', () => {
     cy.fixture('inputField/listOptions').then((optionsData) => {
       cy.get('@listOptions')
         .find('li')
-        .should('have.length', optionsData.result.length);
+        .should('have.length', optionsData.result.length + 1);
 
       cy.get('@listOptions').within(() => {
         optionsData.result.forEach((option) => {
@@ -124,4 +141,41 @@ describe('Multi connected autocomplete', () => {
       });
     });
   });
+
+  it('checks all options when Select all button is clicked', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.contains('5 element(s) found');
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.contains(labelSelectAll).click();
+
+    cy.contains(labelUnSelectAll).should('be.visible');
+
+    cy.get('[data-testid="CancelIcon"]').should('have.length', 5);
+
+    cy.makeSnapshot('checks all options when Select all button is clicked');
+  });
+
+  it('unchecks all options when unSelect all button is clicked', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.contains('5 element(s) found');
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.contains(labelSelectAll).click();
+    cy.contains(labelUnSelectAll).click();
+
+    cy.contains(labelSelectAll).should('be.visible');
+
+    cy.get('[data-testid="CancelIcon"]').should('have.length', 0);
+
+    cy.makeSnapshot('unchecks all options when unSelect all button is clicked');
+  });
 });

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -17,7 +17,7 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import { ListingModel, SelectEntry } from '../../../..';
+import { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
 import {
   ConditionsSearchParameter,
   SearchParameter
@@ -30,6 +30,12 @@ import {
 } from '../../../../utils';
 import Option from '../../Option';
 
+interface OptionResult<T> {
+  result: Array<T>;
+  limit: number;
+  total: number;
+}
+
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
@@ -37,7 +43,8 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   exclusionOptionProperty?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
-  getRenderedOptionText: (option: TData) => string;
+  decoder?;
+  getRenderedOptionText?: (option: TData) => ReactElement | string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
@@ -46,12 +53,13 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
 }
 
 const ConnectedAutocompleteField = (
-  AutocompleteField: (props) => JSX.Element,
+  AutocompleteField: (props) => ReactElement,
   multiple: boolean
-): ((props) => JSX.Element) => {
+): ((props) => ReactElement) => {
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
+    decoder,
     field,
     labelKey,
     open,
@@ -66,7 +74,7 @@ const ConnectedAutocompleteField = (
     changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
-    Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
+    Omit<AutocompleteFieldProps, 'options'>): ReactElement => {
     const [options, setOptions] = useState<Array<TData>>([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(initialPage);
@@ -88,9 +96,10 @@ const ConnectedAutocompleteField = (
 
     const theme = useTheme();
 
-    const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
-      ListingModel<TData>
+    const { fetchQuery, isFetching, prefetchNextPage, data } = useFetchQuery<
+      ListingModel<TData> | ListingMapModel<TData>
     >({
+      decoder,
       baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
@@ -113,6 +122,32 @@ 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 lastOptionRef = useIntersectionObserver({
       action: () => setPage(page + 1),
       loading: isFetching,
@@ -186,7 +221,7 @@ const ConnectedAutocompleteField = (
       debounce(event.target.value);
     };
 
-    const renderOptions = (renderProps, option, { selected }): JSX.Element => {
+    const renderOptions = (renderProps, option, { selected }): ReactElement => {
       const { value } = props;
 
       const lastValue = Array.isArray(value) ? last(value) : value;
@@ -242,12 +277,14 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const { result, limit, total } = getOptionResult(newOptions);
+
         const formattedList = changeIdValue
-          ? newOptions.result.map((item) => ({
+          ? result.map((item) => ({
               ...item,
               id: changeIdValue(item)
             }))
-          : newOptions.result;
+          : result;
 
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
           const list = formattedList.map((item) =>
@@ -261,9 +298,6 @@ const ConnectedAutocompleteField = (
 
         setOptions(moreOptions.concat(formattedList as Array<TData>));
 
-        const total = prop('total', newOptions.meta) || 1;
-        const limit = prop('limit', newOptions.meta) || 1;
-
         const newMaxPage = Math.ceil(total / limit);
 
         setMaxPage(newMaxPage);
@@ -322,6 +356,7 @@ const ConnectedAutocompleteField = (
 
     return (
       <AutocompleteField
+        total={data?.meta?.total || data?.totalElements || 1}
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         options={

package/src/InputField/Select/Autocomplete/Multi/Listbox.tsx

@@ -0,0 +1,78 @@
+import { ListSubheader, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../../../components/Button';
+import { useListboxStyles } from './Multi.styles';
+
+import {
+  labelElementsFound,
+  labelSelectAll,
+  labelUnSelectAll
+} from '../../../translatedLabels';
+
+const CustomListbox = ({
+  children,
+  label,
+  labelTotal,
+  handleSelectAllToggle,
+  ...props
+}) => {
+  const { classes } = useListboxStyles();
+
+  return (
+    <ul {...props}>
+      <ListSubheader sx={{ padding: 0 }}>
+        <div className={classes.lisSubHeader}>
+          <Typography variant="body2">{labelTotal}</Typography>
+          <Button variant="ghost" size="small" onClick={handleSelectAllToggle}>
+            {label}
+          </Button>
+        </div>
+      </ListSubheader>
+      <div className={classes.dropdown}>{children}</div>
+    </ul>
+  );
+};
+
+const ListboxComponent = ({
+  disableSelectAll,
+  options,
+  isOptionSelected,
+  onChange,
+  total
+}) => {
+  if (disableSelectAll) {
+    return;
+  }
+
+  return (listboxProps): JSX.Element | undefined => {
+    const { t } = useTranslation();
+
+    const allSelected =
+      options.length > 0 && options.every((opt) => isOptionSelected(opt));
+
+    const handleSelectAllToggle = (): void => {
+      const syntheticEvent = {} as React.SyntheticEvent;
+
+      if (allSelected) {
+        onChange?.(syntheticEvent, [], 'selectOption');
+
+        return;
+      }
+
+      onChange?.(syntheticEvent, options, 'selectOption');
+    };
+
+    return (
+      <CustomListbox
+        {...listboxProps}
+        label={t(allSelected ? labelUnSelectAll : labelSelectAll)}
+        handleSelectAllToggle={handleSelectAllToggle}
+        labelTotal={t(labelElementsFound, {
+          total: total || options.length
+        })}
+      />
+    );
+  };
+};
+
+export default ListboxComponent;

package/src/InputField/Select/Autocomplete/Multi/Multi.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  deleteIcon: {
+    height: theme.spacing(1.5),
+    width: theme.spacing(1.5)
+  },
+  tag: {
+    fontSize: theme.typography.caption.fontSize
+  }
+}));
+
+export const useListboxStyles = makeStyles()((theme) => ({
+  lisSubHeader: {
+    width: '100%',
+    background: theme.palette.background.default,
+    padding: theme.spacing(0.5, 1, 0.5, 1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  dropdown: {
+    width: '100%',
+    background: theme.palette.background.paper
+  }
+}));