@centreon/ui 23.10.121 → 24.4.1-0

package/src/TopCounterElements/useCloseOnLegacyPage.tsx

@@ -0,0 +1,42 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import { isNil } from 'ramda';
+import { useLocation } from 'react-router-dom';
+
+interface Props {
+  setToggled: Dispatch<SetStateAction<boolean>>;
+}
+const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
+  const { pathname, search } = useLocation();
+  const isLegacyRoute = pathname.includes('main.php');
+
+  const closeSubMenu = (): void => {
+    setToggled(false);
+  };
+
+  useEffect(() => {
+    const iframe = document.getElementById(
+      'main-content'
+    ) as HTMLIFrameElement | null;
+
+    if (!isLegacyRoute || isNil(iframe)) {
+      return () => undefined;
+    }
+
+    const closeSubMenuOnLegacyPage = (): void => {
+      iframe?.contentWindow?.document?.addEventListener('click', closeSubMenu);
+    };
+
+    iframe?.addEventListener('load', closeSubMenuOnLegacyPage);
+
+    return () => {
+      iframe?.removeEventListener('load', closeSubMenuOnLegacyPage);
+      iframe?.contentWindow?.document?.removeEventListener(
+        'click',
+        closeSubMenu
+      );
+    };
+  }, [pathname, search]);
+};
+
+export default useCloseOnLegacyPage;

package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx

@@ -0,0 +1,27 @@
+import FluidTypography from '.';
+
+const initialize = ({ width, min, max, pref }): void => {
+  cy.viewport(width, 590);
+
+  cy.mount({
+    Component: (
+      <FluidTypography max={max} min={min} pref={pref} text="Unreachable" />
+    )
+  });
+};
+
+describe('FluidTypography', () => {
+  [500, 300, 150].forEach((width) => {
+    Object.entries({ max: '80px', min: '30px', pref: 10 }).forEach(
+      ([key, value]) => {
+        it(`displays the text when the viewport is ${width}px and the ${key} is ${value}`, () => {
+          initialize({ [key]: value, width });
+
+          cy.contains('Unreachable').should('be.visible');
+
+          cy.matchImageSnapshot();
+        });
+      }
+    );
+  });
+});

package/src/Typography/FluidTypography/index.stories.tsx

@@ -40,9 +40,9 @@ basic.args = {
 
 export const with200pxWidth = FluidTypographyTemplate.bind({});
 with200pxWidth.args = {
-  height: '200px',
+  height: '50%',
   text: 'Hello world',
-  width: '200px'
+  width: '50%'
 };
 
 export const with20pxHeight = FluidTypographyTemplate.bind({});

package/src/Typography/FluidTypography/index.tsx

@@ -1,49 +1,42 @@
-import { useRef } from 'react';
-
 import { Typography, TypographyProps } from '@mui/material';
 
-import useFluidResizeObserver from './useFluidResizeObserver';
-
 type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
   text: string;
 }
 
 const FluidTypography = ({
   text,
   variant = 'body1',
-  className
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19
 }: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
   return (
     <div
-      ref={parentRef}
+      className={containerClassName}
       style={{
-        height: `${parentSize.height}px`,
+        containerType: 'inline-size',
+        height: `100%`,
         width: `100%`
       }}
     >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
     </div>
   );
 };

package/src/Typography/Subtitle.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+
+import { type, equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+import { Tooltip } from '../components';
+
+interface Props {
+  children: ReactNode;
+  secondaryLabel?: string | Array<string>;
+}
+
+const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const containsSeveralSecondaryLabels = equals(type(secondaryLabel), 'Array');
+
+  return (
+    <Typography variant="subtitle1">
+      <strong>{children}</strong>
+      {secondaryLabel && (
+        <Tooltip
+          aria-label={
+            containsSeveralSecondaryLabels
+              ? secondaryLabel[0]
+              : (secondaryLabel as string)
+          }
+          followCursor={false}
+          label={
+            containsSeveralSecondaryLabels ? (
+              <>
+                {secondaryLabel.map((label) => (
+                  <p key={label}>{t(label)}</p>
+                ))}
+              </>
+            ) : (
+              t(secondaryLabel)
+            )
+          }
+          placement="right"
+        >
+          <HelpOutlineIcon
+            color="primary"
+            sx={{ ml: 1, verticalAlign: 'middle' }}
+          />
+        </Tooltip>
+      )}
+    </Typography>
+  );
+};
+
+export default Subtitle;

package/src/api/QueryProvider.tsx

@@ -7,7 +7,7 @@ const defaultCacheTime = 5 * 1_000;
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: defaultCacheTime,
+      gcTime: defaultCacheTime,
       refetchOnWindowFocus: false,
       staleTime: defaultCacheTime,
       suspense: true

package/src/api/TestQueryProvider.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 0,
+      gcTime: 0,
       retry: false
     }
   }

package/src/api/buildListingEndpoint/models.ts

@@ -52,7 +52,8 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni';
+  | '$ni'
+  | '$rg';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

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();