@centreon/ui 24.10.12 → 24.10.13

package/src/Listing/useStyleTable.ts

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNil, pick, type } from 'ramda';
+import { equals, isEmpty, isNil, pick, type, update } from 'ramda';
 import { CSSObject } from 'tss-react';
 
 import { Theme } from '@mui/material';
@@ -12,14 +12,11 @@ import { Column, TableStyleAtom as Style } from './models';
 import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 
 interface TableStyle {
-  checkable?: boolean;
-  currentVisibleColumns?: Array<Column>;
   listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
   dataStyle: Style;
-  getGridTemplateColumn: string;
 }
 
 const isCompactMode = equals<ListingVariant | undefined>(
@@ -40,35 +37,11 @@ export const getTextStyleByViewMode = ({
     theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
-const useStyleTable = ({
-  checkable,
-  currentVisibleColumns,
-  listingVariant
-}: TableStyle): TableStyleState => {
+const useStyleTable = ({ listingVariant }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
-  const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
-
-    const columnTemplate = currentVisibleColumns
-      ?.filter((column) => column)
-      ?.map(({ width, shortLabel }) => {
-        if (!isNil(shortLabel)) {
-          return 'min-content';
-        }
-        if (isNil(width)) {
-          return 'auto';
-        }
-
-        return equals(type(width), 'Number') ? `${width}px` : width;
-      })
-      .join(' ');
-
-    return `${checkbox}${columnTemplate}`;
-  };
-
   useEffect(() => {
     if (listingVariant) {
       updateStyleTable({ listingVariant });
@@ -76,9 +49,62 @@ const useStyleTable = ({
   }, [listingVariant]);
 
   return {
-    dataStyle,
-    getGridTemplateColumn: getGridTemplateColumn()
+    dataStyle
   };
 };
 
 export default useStyleTable;
+
+interface UseColumnStyleProps {
+  checkable?: boolean;
+  currentVisibleColumns?: Array<Column>;
+}
+
+export const useColumnStyle = ({
+  checkable,
+  currentVisibleColumns
+}: UseColumnStyleProps): string => {
+  const gridTemplateColumn = useMemo((): string => {
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
+
+    const columnTemplate: Array<string> =
+      currentVisibleColumns
+        ?.filter((column) => column)
+        ?.map(({ width, shortLabel }) => {
+          if (!isNil(shortLabel)) {
+            return 'min-content';
+          }
+          if (isNil(width)) {
+            return 'auto';
+          }
+
+          return (
+            equals(type(width), 'Number') ? `${width}px` : width
+          ) as string;
+        }) || [];
+
+    const hasOnlyContainerResponsiveColumns =
+      !isEmpty(columnTemplate) &&
+      columnTemplate.every(
+        (width: string) =>
+          width.includes('auto') ||
+          width.includes('fr') ||
+          width.includes('%') ||
+          width.includes('px')
+      );
+
+    if (!hasOnlyContainerResponsiveColumns) {
+      const fixedColumnTemplate = update(
+        columnTemplate.length - 1,
+        'auto',
+        columnTemplate
+      );
+
+      return `${checkbox}${fixedColumnTemplate.join(' ')}`;
+    }
+
+    return `${checkbox}${columnTemplate.join(' ')}`;
+  }, [checkable, currentVisibleColumns]);
+
+  return gridTemplateColumn;
+};

package/src/MultiSelectEntries/index.tsx

@@ -134,6 +134,8 @@ const MultiSelectEntries = ({
         [classes.container]: true
       } as CxArg)}
       ref={hoverRef as Ref<HTMLDivElement>}
+      role="button"
+      tabIndex={0}
       onClick={onClick}
       onKeyDown={onClick}
     >

package/src/PopoverMenu/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '@mui/material';
 import type { PopperProps } from '@mui/material/Popper';
 
-import { equals, type } from 'ramda';
 import { IconButton } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -30,9 +29,8 @@ interface PopoverData {
 
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element | JSX.Element;
+  children: (props?) => JSX.Element;
   className?: string;
-  tooltipClassName?: string;
   dataTestId?: string;
   getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
@@ -54,7 +52,6 @@ const PopoverMenu = ({
   className,
   dataTestId,
   getPopoverData,
-  tooltipClassName,
   popperProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -116,11 +113,7 @@ const PopoverMenu = ({
             onResizeCapture={(): undefined => undefined}
             {...popperProps}
           >
-            <Paper className={tooltipClassName}>
-              {equals(type(children), 'Function')
-                ? children({ close })
-                : children}
-            </Paper>
+            <Paper>{children({ close })}</Paper>
           </Popper>
         </ClickAwayListener>
       )}

package/src/SortableItems/index.tsx

@@ -185,7 +185,6 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     >
       <SortableContext items={sortableItemsIds} strategy={sortingStrategy}>
         <RootComponent>
-          {/* biome-ignore lint: */}
           <>
             {sortableItemsIds.map((sortableItemId, index) => {
               const item = getItemById(sortableItemId) as

package/src/ThemeProvider/index.tsx

@@ -261,7 +261,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
             {
               backgroundColor: theme.palette.background.default,
               border: 'none',
-              borderRadius: `${theme.shape.borderRadius}px`,
+              borderRadius: 0,
               boxShadow: theme.shadows[3]
             }
         })

package/src/ThemeProvider/palettes.ts

@@ -27,6 +27,8 @@ declare module '@mui/material/styles/createPalette' {
     acknowledgedBackground: string;
     inDowntime: string;
     inDowntimeBackground: string;
+    inFlapping: string;
+    inFlappingBackground: string;
   }
 }
 
@@ -159,6 +161,8 @@ export const lightPalette: PaletteOptions = {
   action: {
     acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
+    inFlapping: '#064A3F',
+    inFlappingBackground: '#D8F3EF',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -299,6 +303,8 @@ export const darkPalette: PaletteOptions = {
   action: {
     acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
+    inFlapping: '#D8F3EF',
+    inFlappingBackground: '#064A3F',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -10,8 +10,6 @@ import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import { userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import { isInvalidDate } from '../../helpers';
 import {
@@ -20,6 +18,7 @@ import {
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
+import { useLocale } from '../../../utils';
 import ErrorText from './ErrorText';
 import {
   PickersStartEndDateDirection,
@@ -100,7 +99,7 @@ const PickersStartEndDate = ({
 }: PickersStartEndDateProps): JSX.Element => {
   const { classes } = useStyles();
 
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
 

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -13,6 +13,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../utils';
 import { CustomTimePeriodProperty } from './models';
 
 interface ChangeDateProps {
@@ -50,6 +51,7 @@ const DateTimePickerInput = ({
     '@media (min-width: 1024px) or (pointer: fine)';
 
   const user = useAtomValue(userAtom);
+  const localeToUse = useLocale();
 
   const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
@@ -72,7 +74,7 @@ const DateTimePickerInput = ({
 
   return (
     <LocalizationProvider
-      adapterLocale={(locale ?? user.locale).substring(0, 2)}
+      adapterLocale={(locale ?? localeToUse).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -93,8 +93,14 @@ const getConditionsSearchQueryParameterValue = (
       equals(listField, field)
     );
 
+    const globalOperator = filteredItems.every(({ operator }) =>
+      equals(operator, filteredItems[0].operator)
+    )
+      ? filteredItems[0].operator || '$or'
+      : '$or';
+
     return {
-      $or: flatten(
+      [globalOperator]: flatten(
         filteredItems.map(({ value, values }) => {
           if (!isNil(value)) {
             return [

package/src/api/buildListingEndpoint/models.ts

@@ -63,6 +63,7 @@ export interface ConditionsSearchParameter {
   field: string;
   value?: unknown;
   values?: ConditionValue;
+  operator?: '$and' | '$or';
 }
 
 type SearchPatterns = Array<{ [field: string]: { $rg: string } }>;

package/src/api/customFetch.ts

@@ -55,10 +55,13 @@ export const customFetch = <T>({
       ? `${baseEndpoint}${endpoint}`
       : endpoint;
 
+  const isFormData = payload instanceof FormData;
+
   const options = isMutation
     ? {
         ...defaultOptions,
-        body: payload instanceof FormData ? payload : JSON.stringify(payload)
+        body: isFormData ? payload : JSON.stringify(payload),
+        headers: isFormData ? undefined : headers
       }
     : defaultOptions;
 

package/src/api/models.ts

@@ -8,3 +8,12 @@ export interface Listing<TEntity> {
   meta: ListingMeta;
   result: Array<TEntity>;
 }
+
+export interface ListingMap<TEntity> {
+  content: Array<TEntity>;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  numberOfElements: number;
+}

package/src/api/useGraphQuery/index.ts

@@ -36,6 +36,7 @@ interface UseMetricsQueryProps {
     start?: string | null;
     timePeriodType: number;
   };
+  isEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -46,6 +47,12 @@ interface UseMetricsQueryState {
   start: string;
 }
 
+interface FormatLegend {
+  host?: string | null;
+  service?: string | null;
+  metric: string;
+}
+
 const getStartEndFromTimePeriod = (
   timePeriod: number
 ): { end: string; start: string } => {
@@ -74,7 +81,8 @@ export const resourceTypeQueryParameter = {
   [WidgetResourceType.hostGroup]: 'hostgroup.id',
   [WidgetResourceType.serviceCategory]: 'servicecategory.id',
   [WidgetResourceType.serviceGroup]: 'servicegroup.id',
-  [WidgetResourceType.service]: 'service.name'
+  [WidgetResourceType.service]: 'service.name',
+  [WidgetResourceType.metaService]: 'metaservice.id'
 };
 
 const areResourcesFullfilled = (value: Array<Resource>): boolean =>
@@ -94,7 +102,8 @@ const useGraphQuery = ({
   refreshInterval = false,
   refreshCount,
   bypassQueryParams = false,
-  prefix
+  prefix,
+  isEnabled = true
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -108,9 +117,9 @@ const useGraphQuery = ({
     : getStartEndFromTimePeriod(timePeriodToUse as number);
 
   const definedMetrics = metrics.filter((metric) => metric);
-  const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric.name)
-  );
+  const formattedDefinedMetrics = definedMetrics
+    .map((metric) => `metric_names[]=${encodeURIComponent(metric.name)}`)
+    .join('&');
 
   const prefixQuery = prefix ? [prefix] : [];
 
@@ -129,7 +138,9 @@ const useGraphQuery = ({
         parameters: {
           search: {
             lists: resources.map((resource) => ({
-              field: resourceTypeQueryParameter[resource.resourceType],
+              field: equals(resource.resourceType, 'hostgroup')
+                ? resourceTypeQueryParameter[WidgetResourceType.hostGroup]
+                : resourceTypeQueryParameter[resource.resourceType],
               values: equals(resource.resourceType, 'service')
                 ? pluck('name', resource.resources)
                 : pluck('id', resource.resources)
@@ -138,9 +149,7 @@ const useGraphQuery = ({
         }
       });
 
-      return `${endpoint}&start=${startAndEnd.start}&end=${
-        startAndEnd.end
-      }&metric_names=[${formattedDefinedMetrics.join(',')}]`;
+      return `${endpoint}&start=${startAndEnd.start}&end=${startAndEnd.end}&${formattedDefinedMetrics}`;
     },
     getQueryKey: () => [
       ...prefixQuery,
@@ -151,7 +160,10 @@ const useGraphQuery = ({
       refreshCount || 0
     ],
     queryOptions: {
-      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      enabled:
+        areResourcesFullfilled(resources) &&
+        !isEmpty(definedMetrics) &&
+        isEnabled,
       refetchInterval: refreshInterval,
       suspense: false
     },
@@ -163,22 +175,107 @@ const useGraphQuery = ({
     data.current = graphData;
   }
 
+  const getCurrentMetrics = () => {
+    if (!data.current) {
+      return undefined;
+    }
+
+    return bypassMetricsExclusion
+      ? data.current.metrics
+      : data.current.metrics.filter(({ metric_id }) => {
+          return pipe(
+            pluck('excludedMetrics'),
+            flatten,
+            includes(metric_id),
+            not
+          )(metrics);
+        });
+  };
+
+  const formatLegend = ({
+    host = null,
+    service = null,
+    metric
+  }: FormatLegend) => {
+    if (!host && !service) {
+      return metric;
+    }
+
+    if (!host) {
+      return `${service}: ${metric}`;
+    }
+
+    if (!service) {
+      return `${host}: ${metric}`;
+    }
+
+    return `${host} ${service}: ${metric}`;
+  };
+
+  const getFormattedMetrics = () => {
+    const metrics = getCurrentMetrics();
+
+    if (equals(metrics?.length, 1)) {
+      return metrics?.map((line) => {
+        const formattedLegend = formatLegend({
+          host: line?.host_name,
+          service: line?.service_name,
+          metric: line?.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      });
+    }
+
+    return metrics?.map((line) => {
+      const areHostNameRedundant = metrics.every(({ host_name }) =>
+        equals(host_name, line.host_name)
+      );
+      const areServiceNameRedundant = metrics.every(({ service_name }) =>
+        equals(service_name, line.service_name)
+      );
+
+      if (areHostNameRedundant && areServiceNameRedundant) {
+        const formattedLegend = formatLegend({ metric: line.metric });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areHostNameRedundant) {
+        const formattedLegend = formatLegend({
+          service: line.service_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areServiceNameRedundant) {
+        const formattedLegend = formatLegend({
+          host: line.host_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      const formattedLegend = formatLegend({
+        host: line.host_name,
+        service: line.service_name,
+        metric: line.metric
+      });
+
+      return { ...line, legend: formattedLegend };
+    });
+  };
+
   const formattedGraphData = data.current
     ? {
         global: {
           base: data.current.base,
           title: ''
         },
-        metrics: bypassMetricsExclusion
-          ? data.current.metrics
-          : data.current.metrics.filter(({ metric_id }) => {
-              return pipe(
-                pluck('excludedMetrics'),
-                flatten,
-                includes(metric_id),
-                not
-              )(metrics);
-            }),
+        metrics: getFormattedMetrics(),
         times: data.current.times
       }
     : undefined;

package/src/api/useGraphQuery/models.ts

@@ -10,6 +10,7 @@ export enum WidgetResourceType {
   hostCategory = 'host-category',
   hostGroup = 'host-group',
   service = 'service',
+  metaService = 'meta-service',
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }

package/src/api/useMutationQuery/index.ts

@@ -100,7 +100,7 @@ const useMutationQuery = <T extends object, TMeta>({
         defaultFailureMessage,
         endpoint: getEndpoint(_meta as TMeta),
         headers: new Headers({
-          'Content-Type': 'application/x-www-form-urlencoded',
+          'Content-Type': 'application/json',
           ...fetchHeaders
         }),
         isMutation: true,

package/src/components/DataTable/DataTable.styles.ts

@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
       },
       display: 'grid',
       gridGap: theme.spacing(2.5),
-      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
+      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(53)})`
     },
     '&[data-variant="listing"]': {
       height: '100%'

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -21,7 +21,8 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   description: {
-    maxWidth: '65%'
+    maxWidth: '65%',
+    textAlign: 'center'
   }
 }));
 

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -19,12 +19,14 @@ type ListEmptyStateProps = {
     description?: string;
   };
   onCreate?: () => void;
+  buttonCreateTestId?: string;
 };
 
 const DataTableEmptyState = ({
   labels,
   onCreate,
-  canCreate = true
+  canCreate = true,
+  buttonCreateTestId
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -47,6 +49,7 @@ const DataTableEmptyState = ({
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
+            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -6,6 +6,16 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
+  cardActions: {
+    backgroundColor: theme.palette.background.paper,
+    bottom: 0,
+    position: 'absolute',
+    width: '100%'
+  },
+  cardContent: {
+    padding: theme.spacing(2),
+    zIndex: 1
+  },
   dataTableItem: {
     '& .MuiCardActionArea-root': {
       alignItems: 'flex-start',
@@ -22,16 +32,32 @@ const useStyles = makeStyles()((theme) => ({
       display: 'flex',
       justifyContent: 'space-between'
     },
+    '&:hover img[alt*="thumbnail"]': {
+      transform: 'scale(1.1)',
+      transformOrigin: 'center'
+    },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: '186px',
+    height: '250px',
     justifyContent: 'space-between',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',
       margin: '0'
-    }
+    },
+    position: 'relative'
+  },
+  description: {
+    maxHeight: '42px',
+    overflow: 'hidden'
+  },
+  thumbnail: {
+    height: theme.spacing(10.25),
+    objectFit: 'cover',
+    objectPosition: 'top',
+    transition: 'transform 150ms ease-out',
+    width: '100%'
   }
 }));