@centreon/ui 23.10.69 → 23.10.71

package/src/Wizard/WizardContent.tsx

@@ -7,11 +7,10 @@ import { makeStyles } from 'tss-react/mui';
 import { WizardContentProps } from './models';
 import ActionsBar from './ActionsBar';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()(() => ({
   content: {
     height: '100%',
-    overflow: 'auto',
-    padding: theme.spacing(2, 3, 1, 3)
+    overflow: 'auto'
   },
   form: {
     display: 'flex',

package/src/Wizard/index.stories.tsx

@@ -201,29 +201,16 @@ export const threeStepsWithCustomConfirmDialogLabels = (): JSX.Element => (
   />
 );
 
-const FirstStep = ({
-  disableNextOnSendingRequests
-}: StepComponentProps): JSX.Element => {
-  useEffect(() => {
-    disableNextOnSendingRequests([true, false, true]);
-    setTimeout(() => {
-      disableNextOnSendingRequests([false, false, false]);
-    }, 1500);
-  }, []);
-
-  return (
-    <Typography align="center" variant="h5">
-      Sending request...
-    </Typography>
-  );
-};
-
 export const twoStepsWithSendingRequest = (): JSX.Element => (
   <Wizard
     open
     steps={[
       {
-        Component: FirstStep,
+        Component: (): JSX.Element => (
+          <Typography align="center" variant="h5">
+            Sending request...
+          </Typography>
+        ),
         skipFormChangeCheck: true,
         stepName: 'First step'
       },

package/src/Wizard/index.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   screen,
   RenderResult
-} from '../testRenderer';
+} from '../../test/testRenderer';
 
 import { StepComponentProps } from './models';
 

package/src/Wizard/index.tsx

@@ -37,7 +37,9 @@ const Wizard = ({
   open,
   onClose = undefined,
   confirmDialogLabels = undefined,
-  actionsBarLabels = actionsBarLabelsDefaultValues
+  actionsBarLabels = actionsBarLabelsDefaultValues,
+  displayConfirmDialog,
+  ...rest
 }: WizardProps): JSX.Element => {
   const { classes } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
@@ -78,9 +80,18 @@ const Wizard = ({
     bag.setSubmitting(false);
   };
 
+  const controlDisplayConfirmationDialog = (): void => {
+    if (!equals(displayConfirmDialog, false)) {
+      setOpenConfirm(displayConfirmDialog ?? true);
+
+      return;
+    }
+    onClose?.();
+  };
+
   const handleClose = (_, reason): void => {
     if (equals(reason, 'backdropClick')) {
-      setOpenConfirm(true);
+      controlDisplayConfirmationDialog();
 
       return;
     }
@@ -89,7 +100,6 @@ const Wizard = ({
 
   const handleCloseConfirm = (confirm): void => {
     setOpenConfirm(false);
-
     if (!confirm) {
       return;
     }
@@ -106,9 +116,11 @@ const Wizard = ({
         classes={{
           paper: fullHeight ? classes.fullHeight : undefined
         }}
+        data-testid="Dialog"
         maxWidth={width}
         open={open}
         onClose={handleClose}
+        {...rest}
       >
         <Stepper currentStep={currentStep} steps={steps} />
         <Formik

package/src/Wizard/models.ts

@@ -1,5 +1,7 @@
 import { FormikValues, FormikErrors, FormikHelpers } from 'formik';
 
+import { DialogProps } from '@mui/material';
+
 export interface StepComponentProps {
   disableNextOnSendingRequests: (sendingRequests: Array<boolean>) => void;
 }
@@ -38,9 +40,13 @@ interface ConfirmDialogLabels {
   labelTitle: string;
 }
 
+type ValueOf<T> = T[keyof T];
+
 export interface WizardProps {
+  [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
   confirmDialogLabels?: ConfirmDialogLabels;
+  displayConfirmDialog?: boolean;
   fullHeight?: boolean;
   initialValues?: FormikValues;
   onClose?: () => void;

package/src/api/TestQueryProvider.tsx

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

package/src/api/customFetch.ts

@@ -10,6 +10,7 @@ interface ApiErrorResponse {
 
 export interface ResponseError {
   additionalInformation?;
+  data?;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -82,6 +83,15 @@ export const customFetch = <T>({
             };
           }
 
+          if (equals(response.status, 207)) {
+            return {
+              data: data.results,
+              isError: false,
+              message: '',
+              statusCode: response.status
+            };
+          }
+
           if (decoder) {
             return decoder.decodeToPromise(data).catch((error: string) => {
               catchError({

package/src/api/useFetchQuery/index.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import 'ulog';
 import {
@@ -30,14 +30,13 @@ export interface UseFetchQueryProps<T> {
   >;
 }
 
-export interface UseFetchQueryState<T>
-  extends Omit<QueryObserverBaseResult, 'data'> {
+export type UseFetchQueryState<T> = {
   data?: T;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-}
+} & Omit<QueryObserverBaseResult, 'data'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -91,14 +90,6 @@ const useFetchQuery = <T extends object>({
     }
   };
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  manageError();
-
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
     queryClient.prefetchQuery(
       queryKey,
@@ -155,12 +146,24 @@ const useFetchQuery = <T extends object>({
     );
   };
 
-  const data = not(has('isError', queryData.data))
-    ? (queryData.data as T)
-    : undefined;
+  const data = useMemo(
+    () =>
+      not(has('isError', queryData.data)) ? (queryData.data as T) : undefined,
+    [queryData.data]
+  );
 
   const errorData = queryData.data as ResponseError | undefined;
 
+  useEffect(() => {
+    return (): void => {
+      queryClient.cancelQueries(getQueryKey());
+    };
+  }, []);
+
+  useEffect(() => {
+    manageError();
+  }, [queryData.data]);
+
   return {
     ...omit(['data'], queryData),
     data,

package/src/api/useGraphQuery/index.ts

@@ -0,0 +1,126 @@
+import { equals, flatten, has, isEmpty, join, pipe, pluck } from 'ramda';
+import dayjs from 'dayjs';
+
+import { LineChartData, useFetchQuery } from '../..';
+
+import { ServiceMetric } from './models';
+
+interface CustomTimePeriod {
+  end: string;
+  start: string;
+}
+
+interface UseMetricsQueryProps {
+  baseEndpoint: string;
+  metrics: Array<ServiceMetric>;
+  refreshInterval?: number | false;
+  timePeriod?: {
+    end?: string | null;
+    start?: string | null;
+    timePeriodType: number;
+  };
+}
+
+interface UseMetricsQueryState {
+  end: string;
+  graphData: LineChartData | undefined;
+  isGraphLoading: boolean;
+  isMetricIdsEmpty: boolean;
+  start: string;
+}
+
+const getStartEndFromTimePeriod = (
+  timePeriod: number
+): { end: string; start: string } => {
+  return {
+    end: dayjs().toISOString(),
+    start: dayjs().subtract(timePeriod, 'hour').toISOString()
+  };
+};
+
+const isCustomTimePeriod = (
+  timePeriod:
+    | number
+    | {
+        end?: string | null;
+        start?: string | null;
+      }
+): boolean => has('end', timePeriod) && has('start', timePeriod);
+
+interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
+  base: number;
+}
+
+const useGraphQuery = ({
+  metrics,
+  baseEndpoint,
+  timePeriod = {
+    timePeriodType: 1
+  },
+  refreshInterval = false
+}: UseMetricsQueryProps): UseMetricsQueryState => {
+  const metricIds = pipe(
+    pluck('metrics'),
+    flatten,
+    pluck('id'),
+    join(',')
+  )(metrics);
+
+  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
+    ? {
+        end: timePeriod.end,
+        start: timePeriod.start
+      }
+    : timePeriod?.timePeriodType;
+
+  const {
+    data: graphData,
+    isFetching,
+    isLoading
+  } = useFetchQuery<PerformanceGraphData>({
+    getEndpoint: () => {
+      if (isCustomTimePeriod(timePeriodToUse)) {
+        return `${baseEndpoint}?metricIds=[${metricIds}]&start=${
+          (timePeriodToUse as CustomTimePeriod).start
+        }&end=${(timePeriodToUse as CustomTimePeriod).end}`;
+      }
+
+      const { end, start } = getStartEndFromTimePeriod(
+        timePeriodToUse as number
+      );
+
+      return `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`;
+    },
+    getQueryKey: () => ['graph', metricIds, timePeriod],
+    queryOptions: {
+      enabled: !isEmpty(metricIds),
+      refetchInterval: refreshInterval,
+      suspense: false
+    }
+  });
+
+  const formattedGraphData = graphData
+    ? {
+        global: {
+          base: graphData.base,
+          title: ''
+        },
+        metrics: graphData.metrics,
+        times: graphData.times
+      }
+    : undefined;
+
+  const { end, start } = isCustomTimePeriod(timePeriodToUse)
+    ? (timePeriodToUse as CustomTimePeriod)
+    : getStartEndFromTimePeriod(timePeriodToUse as number);
+
+  return {
+    end,
+    graphData: formattedGraphData,
+    isGraphLoading: isFetching || (isLoading && !isEmpty(metricIds)),
+    isMetricIdsEmpty: isEmpty(metricIds),
+    start
+  };
+};
+
+export default useGraphQuery;

package/src/api/useGraphQuery/models.ts

@@ -0,0 +1,12 @@
+interface NamedEntity {
+  id: number;
+  name: string;
+}
+
+interface Metric extends NamedEntity {
+  unit: string;
+}
+
+export interface ServiceMetric extends NamedEntity {
+  metrics: Array<Metric>;
+}

package/src/api/useMutationQuery/index.ts

@@ -1,5 +1,11 @@
 import 'ulog';
-import { useMutation } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import {
+  useMutation,
+  UseMutationOptions,
+  UseMutationResult
+} from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
 import { includes } from 'ramda';
@@ -15,24 +21,22 @@ export enum Method {
   PUT = 'PUT'
 }
 
-export interface UseMutationQueryProps<T> {
+export type UseMutationQueryProps<T> = {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
   fetchHeaders?: HeadersInit;
-  getEndpoint: () => string;
+  getEndpoint: (_meta?: Record<string, unknown> | unknown) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-}
+} & Omit<UseMutationOptions<T>, 'mutationFn'>;
 
 const log = anylogger('API Request');
 
-export interface UseMutationQueryState<T> {
+export type UseMutationQueryState<T> = {
   isError: boolean;
   isMutating: boolean;
-  mutate: (payload) => void;
-  mutateAsync: (payload) => Promise<T | ResponseError>;
-}
+} & UseMutationResult<T | ResponseError>;
 
 const useMutationQuery = <T extends object>({
   getEndpoint,
@@ -41,17 +45,22 @@ const useMutationQuery = <T extends object>({
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method
+  method,
+  onMutate,
+  onError
 }: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<T | ResponseError>(
-    (payload): Promise<T | ResponseError> =>
-      customFetch<T>({
+    // @ts-expect-error useMutation / useMutationQuery is not typed correctly
+    (_payload: Record<string, unknown> | null): Promise<T | ResponseError> => {
+      const { _meta, ...payload } = _payload || {};
+
+      return customFetch<T>({
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(),
+        endpoint: getEndpoint(_meta),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -59,7 +68,12 @@ const useMutationQuery = <T extends object>({
         isMutation: true,
         method,
         payload
-      })
+      });
+    },
+    {
+      onError,
+      onMutate
+    }
   );
 
   const manageError = (): void => {
@@ -77,13 +91,14 @@ const useMutationQuery = <T extends object>({
     }
   };
 
-  manageError();
+  useEffect(() => {
+    manageError();
+  }, [queryData.data]);
 
   return {
+    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading,
-    mutate: queryData.mutate,
-    mutateAsync: queryData.mutateAsync
+    isMutating: queryData.isLoading
   };
 };
 

package/src/api/useRequest/index.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import 'ulog';
 import axios from 'axios';
-import { pathOr, defaultTo, path, includes } from 'ramda';
+import { pathOr, defaultTo, path, includes, or } from 'ramda';
 import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
@@ -42,12 +42,15 @@ const useRequest = <TResult>({
 
   const showRequestErrorMessage = (error): void => {
     log.error(error);
-    const message = defaultTo(
-      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
-      getErrorMessage
-    )(error);
 
-    showErrorMessage(message);
+    const message = or(
+      pathOr(undefined, ['response', 'data', 'message'], error),
+      pathOr(defaultFailureMessage, ['response', 'data'], error)
+    );
+
+    const errorMessage = defaultTo(message, getErrorMessage?.(error));
+
+    showErrorMessage(errorMessage as string);
   };
 
   const sendRequest = (params): Promise<TResult> => {

package/src/base/tokens/README.md

@@ -0,0 +1,3 @@
+`// TODO`
+
+- [ ] integrate design tokens with MUI ThemeProvider

package/src/base/tokens/source/$metadata.json

@@ -0,0 +1,5 @@
+{
+  "tokenSetOrder": [
+    "base"
+  ]
+}

package/src/base/tokens/source/base.json

@@ -0,0 +1,142 @@
+{
+  "color": {
+    "blue": {
+      "50": {
+        "value": "#ECF4FD",
+        "type": "color"
+      },
+      "100": {
+        "value": "#D2E4F9",
+        "type": "color"
+      },
+      "200": {
+        "value": "#9EC4F0",
+        "type": "color"
+      },
+      "300": {
+        "value": "#6DA4E4",
+        "type": "color"
+      },
+      "400": {
+        "value": "#3e85d5",
+        "type": "color"
+      },
+      "500": {
+        "value": "#2e68aa",
+        "type": "color"
+      },
+      "600": {
+        "value": "#205593",
+        "type": "color"
+      },
+      "700": {
+        "value": "#164274",
+        "type": "color"
+      },
+      "800": {
+        "value": "#0d2e54",
+        "type": "color"
+      },
+      "900": {
+        "value": "#071d37",
+        "type": "color"
+      },
+      "950": {
+        "value": "#031326",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "50": {
+        "value": "#F8F1F9",
+        "type": "color"
+      },
+      "100": {
+        "value": "#F0DEF2",
+        "type": "color"
+      },
+      "200": {
+        "value": "#DDAFE4",
+        "type": "color"
+      },
+      "300": {
+        "value": "#CE81DA",
+        "type": "color"
+      },
+      "400": {
+        "value": "#c151d2",
+        "type": "color"
+      },
+      "500": {
+        "value": "#ac28c1",
+        "type": "color"
+      },
+      "600": {
+        "value": "#872796",
+        "type": "color"
+      },
+      "700": {
+        "value": "#682172",
+        "type": "color"
+      },
+      "800": {
+        "value": "#491b50",
+        "type": "color"
+      },
+      "900": {
+        "value": "#29112c",
+        "type": "color"
+      },
+      "950": {
+        "value": "#1a0d1c",
+        "type": "color"
+      }
+    },
+    "grey": {
+      "50": {
+        "value": "#f9fafb",
+        "type": "color"
+      },
+      "100": {
+        "value": "#eaedf0",
+        "type": "color"
+      },
+      "200": {
+        "value": "#cad0d8",
+        "type": "color"
+      },
+      "300": {
+        "value": "#aab4c0",
+        "type": "color"
+      },
+      "400": {
+        "value": "#8c98a6",
+        "type": "color"
+      },
+      "500": {
+        "value": "#6f7b8a",
+        "type": "color"
+      },
+      "600": {
+        "value": "#596573",
+        "type": "color"
+      },
+      "700": {
+        "value": "#434e5b",
+        "type": "color"
+      },
+      "800": {
+        "value": "#2f3741",
+        "type": "color"
+      },
+      "900": {
+        "value": "#1b2127",
+        "type": "color"
+      },
+      "950": {
+        "value": "#101418",
+        "type": "color"
+      }
+    }
+  }
+}