@centreon/ui 23.10.121 → 24.4.0

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/index.ts

@@ -30,7 +30,7 @@ const patchData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .patch(endpoint, data, {
+      .patch(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -40,7 +40,7 @@ const postData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .post(endpoint, data, {
+      .post(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -50,7 +50,7 @@ const putData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .put(endpoint, data, {
+      .put(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })

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,22 +10,26 @@ 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;
+  doNotCancelCallsOnUnmount?: boolean;
   fetchHeaders?: HeadersInit;
   getEndpoint: (params?: PrefetchEndpointParams) => string;
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: Omit<
+  queryOptions?: {
+    suspense?: boolean;
+  } & Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
@@ -33,11 +37,12 @@ export interface UseFetchQueryProps<T> {
 
 export type UseFetchQueryState<T> = {
   data?: T;
+  error: Omit<ResponseError, 'isError'> | null;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data'>;
+} & Omit<QueryObserverBaseResult, 'data' | 'error'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -54,14 +59,18 @@ const useFetchQuery = <T extends object>({
   fetchHeaders,
   isPaginated,
   queryOptions,
-  httpCodesBypassErrorSnackbar = []
+  httpCodesBypassErrorSnackbar = [],
+  baseEndpoint,
+  doNotCancelCallsOnUnmount = false
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
+  const dataRef = useRef<T | undefined>(undefined);
+
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>(
-    getQueryKey(),
-    ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>({
+    queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -69,10 +78,9 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    {
-      ...queryOptions
-    }
-  );
+    queryKey: getQueryKey(),
+    ...queryOptions
+  });
 
   const queryClient = useQueryClient();
 
@@ -92,18 +100,19 @@ const useFetchQuery = <T extends object>({
   };
 
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery(
-      queryKey,
-      ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey
+    });
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -133,18 +142,19 @@ const useFetchQuery = <T extends object>({
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery(
-      getQueryKey(),
-      ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey: getQueryKey()
+    });
   };
 
   const data = useMemo(
@@ -153,21 +163,32 @@ const useFetchQuery = <T extends object>({
     [queryData.data]
   );
 
+  if (!isNil(data)) {
+    dataRef.current = data;
+  }
+
   const errorData = queryData.data as ResponseError | undefined;
 
   useEffect(() => {
     return (): void => {
-      queryClient.cancelQueries(getQueryKey());
+      if (doNotCancelCallsOnUnmount) {
+        return;
+      }
+
+      queryClient.cancelQueries({ queryKey: getQueryKey() });
     };
   }, []);
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
-    ...omit(['data'], queryData),
-    data,
+    ...omit(['data', 'error'], queryData),
+    data: dataRef.current,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,

package/src/api/useGraphQuery/index.ts

@@ -1,11 +1,20 @@
 import { useRef } from 'react';
 
-import { equals, has, isEmpty, pluck } from 'ramda';
+import {
+  equals,
+  flatten,
+  has,
+  includes,
+  isEmpty,
+  not,
+  pipe,
+  pluck
+} from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
 
-import { Resource, WidgetResourceType } from './models';
+import { Metric, Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -14,7 +23,9 @@ interface CustomTimePeriod {
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
-  metrics: Array<string>;
+  bypassMetricsExclusion?: boolean;
+  includeAllResources?: boolean;
+  metrics: Array<Metric>;
   refreshCount?: number;
   refreshInterval?: number | false;
   resources?: Array<Resource>;
@@ -71,6 +82,7 @@ const areResourcesFullfilled = (value: Array<Resource>): boolean =>
   );
 
 const useGraphQuery = ({
+  bypassMetricsExclusion,
   metrics,
   resources = [],
   baseEndpoint,
@@ -93,7 +105,7 @@ const useGraphQuery = ({
 
   const definedMetrics = metrics.filter((metric) => metric);
   const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric)
+    encodeURIComponent(metric.name)
   );
 
   const {
@@ -145,7 +157,16 @@ const useGraphQuery = ({
           base: data.current.base,
           title: ''
         },
-        metrics: data.current.metrics,
+        metrics: bypassMetricsExclusion
+          ? data.current.metrics
+          : data.current.metrics.filter(({ metric_id }) => {
+              return pipe(
+                pluck('excludedMetrics'),
+                flatten,
+                includes(metric_id),
+                not
+              )(metrics);
+            }),
         times: data.current.times
       }
     : undefined;

package/src/api/useGraphQuery/models.ts

@@ -13,3 +13,8 @@ export enum WidgetResourceType {
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }
+
+export interface Metric {
+  excludedMetrics: Array<number>;
+  name: string;
+}

package/src/api/useMutationQuery/index.test.ts

@@ -48,7 +48,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(false);
@@ -64,7 +64,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -85,7 +85,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -109,7 +109,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();

package/src/api/useMutationQuery/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes } from 'ramda';
+import { includes, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -22,7 +22,13 @@ export enum Method {
   PUT = 'PUT'
 }
 
+interface Variables<TMeta, T> {
+  _meta?: TMeta;
+  payload?: T;
+}
+
 export type UseMutationQueryProps<T, TMeta> = {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -30,14 +36,39 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
+  onError?: (
+    error: ResponseError,
+    variables: Variables<TMeta, T>,
+    context: unknown
+  ) => unknown;
+  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
+  onSuccess?: (
+    data: ResponseError | T,
+    variables: Variables<TMeta, T>,
+    context: unknown
+  ) => unknown;
+} & Omit<
+  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
+>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = {
+export type UseMutationQueryState<T, TMeta> = Omit<
+  UseMutationResult<T | ResponseError>,
+  'isError' | 'mutate' | 'mutateAsync'
+> & {
   isError: boolean;
   isMutating: boolean;
-} & UseMutationResult<T | ResponseError>;
+  mutate: (variables: Variables<TMeta, T>) => ResponseError | T;
+  mutateAsync: (
+    variables: Variables<TMeta, T>,
+    rest?: Pick<
+      UseMutationQueryProps<T, TMeta>,
+      'onError' | 'onMutate' | 'onSettled' | 'onSuccess'
+    >
+  ) => Promise<ResponseError | T>;
+};
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -49,19 +80,24 @@ const useMutationQuery = <T extends object, TMeta>({
   method,
   onMutate,
   onError,
-  onSuccess
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+  onSuccess,
+  onSettled,
+  baseEndpoint
+}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
-    T & { _meta: TMeta }
-  >(
-    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
+    Variables<TMeta, T>
+  >({
+    mutationFn: (
+      variables: Variables<TMeta, T>
+    ): Promise<T | ResponseError> => {
+      const { _meta, payload } = variables || {};
 
       return customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -75,12 +111,18 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    {
-      onError,
-      onMutate,
-      onSuccess
+    onError,
+    onMutate,
+    onSettled,
+    onSuccess: (data, variables, context) => {
+      if (data?.isError) {
+        onError?.(data, variables, context);
+
+        return;
+      }
+      onSuccess?.(data, variables, context);
     }
-  );
+  });
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -97,14 +139,17 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
-    ...queryData,
+    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading
+    isMutating: queryData.isPending
   };
 };
 

package/src/components/Button/Icon/IconButton.tsx

@@ -1,6 +1,9 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import { IconButton as MuiIconButton } from '@mui/material';
+import {
+  IconButton as MuiIconButton,
+  IconButtonProps as MuiIconButtonProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
@@ -23,7 +26,8 @@ type IconButtonProps = {
   size?: 'small' | 'medium' | 'large';
   variant?: 'primary' | 'secondary' | 'ghost';
 } & AriaLabelingAttributes &
-  DataTestAttributes;
+  DataTestAttributes &
+  MuiIconButtonProps;
 
 /**
  * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)

package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx

@@ -0,0 +1,76 @@
+import { CollapsibleItem, Props } from './CollapsibleItem';
+
+const title = 'Title';
+
+const customizedTitle = <div>Customized title</div>;
+
+const initialize = (props: Omit<Props, 'children'>): void => {
+  cy.mount({
+    Component: <CollapsibleItem {...props}>Content</CollapsibleItem>
+  });
+};
+
+describe('CollapsibleItem', () => {
+  it('displays the component collapsed by default', () => {
+    initialize({ title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('not.be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component expanded when the corresponding prop is set to true', () => {
+    initialize({ defaultExpanded: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('be.visible');
+    cy.get('div[aria-expanded="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a customized title', () => {
+    initialize({ title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and expanded when the icon is clicked', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.get('div[aria-expanded="false"]').click();
+
+    cy.get('div[aria-expanded="true"]').should('exist');
+    cy.contains('Content').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and a customized title', () => {
+    initialize({ compact: true, title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Checkbox, Typography } from '@mui/material';
+
 import { CollapsibleItem } from './CollapsibleItem';
 
 const meta: Meta<typeof CollapsibleItem> = {
@@ -23,3 +25,27 @@ export const ExpandedByDefault: Story = {
     title: 'Title'
   }
 };
+
+export const customizedTitle: Story = {
+  args: {
+    children: 'Label',
+    defaultExpanded: false,
+    title: <Typography>Title</Typography>
+  }
+};
+
+export const customizedTitleAndCompact: Story = {
+  args: {
+    children: 'Label',
+    compact: true,
+    defaultExpanded: false,
+    title: (
+      <div
+        style={{ alignItems: 'center', display: 'flex', flexDirection: 'row' }}
+      >
+        <Checkbox size="small" />
+        <Typography>Title compact</Typography>
+      </div>
+    )
+  }
+};