@centreon/ui 23.10.109 → 23.10.110

package/src/Wizard/ActionsBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '../testRenderer';
+import { render, screen, fireEvent } from '../../test/testRenderer';
 
 import ActionsBar from './ActionsBar';
 

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

@@ -29,6 +29,7 @@ const actionsBarLabelsDefaultValues = {
 };
 
 const Wizard = ({
+  classNameDialogContent,
   steps,
   onSubmit = undefined,
   initialValues = {},
@@ -37,9 +38,11 @@ const Wizard = ({
   open,
   onClose = undefined,
   confirmDialogLabels = undefined,
-  actionsBarLabels = actionsBarLabelsDefaultValues
+  actionsBarLabels = actionsBarLabelsDefaultValues,
+  displayConfirmDialog,
+  ...rest
 }: WizardProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
   const [sendingRequest, setSendingRequest] = useState(false);
   const [openConfirm, setOpenConfirm] = useState(false);
@@ -78,9 +81,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 +101,6 @@ const Wizard = ({
 
   const handleCloseConfirm = (confirm): void => {
     setOpenConfirm(false);
-
     if (!confirm) {
       return;
     }
@@ -106,9 +117,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
@@ -119,7 +132,9 @@ const Wizard = ({
           validationSchema={validationSchema}
           onSubmit={submit}
         >
-          <DialogContent className={classes.dialogContent}>
+          <DialogContent
+            className={cx(classes.dialogContent, classNameDialogContent)}
+          >
             <WizardContent
               actionsBarLabels={actionsBarLabels}
               currentStep={currentStep}

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,14 @@ interface ConfirmDialogLabels {
   labelTitle: string;
 }
 
+type ValueOf<T> = T[keyof T];
+
 export interface WizardProps {
+  [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
+  classNameDialogContent?: string;
   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/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -5,9 +5,10 @@ import {
   prop,
   head,
   toPairs,
-  pipe,
-  map,
-  flatten
+  flatten,
+  pluck,
+  uniq,
+  equals
 } from 'ramda';
 
 import {
@@ -21,7 +22,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -83,32 +84,42 @@ const getConditionsSearchQueryParameterValue = (
     return undefined;
   }
 
-  const toIndividualOperatorValues = ({
-    field,
-    values,
-    value
-  }: ConditionsSearchParameter): Array<Record<string, unknown>> => {
-    if (!isNil(value)) {
-      return [
-        {
-          [field]: value
-        }
-      ];
-    }
-
-    return toPairs(values || {}).map(([operator, operatorValue]) => ({
-      [field]: {
-        [operator]: operatorValue
-      }
-    }));
+  const fields = uniq(pluck('field', conditions));
+
+  const toIndividualOperatorValues = (
+    listField: string
+  ): { $or: Array<Record<string, unknown>> } => {
+    const filteredItems = conditions.filter(({ field }) =>
+      equals(listField, field)
+    );
+
+    return {
+      $or: flatten(
+        filteredItems.map(({ value, values }) => {
+          if (!isNil(value)) {
+            return [
+              {
+                [listField]: value
+              }
+            ];
+          }
+
+          return toPairs(values || {}).map(([operator, operatorValue]) => ({
+            [listField]: {
+              [operator]: operatorValue
+            }
+          }));
+        })
+      )
+    };
   };
 
   return {
-    $and: pipe(map(toIndividualOperatorValues), flatten)(conditions)
+    $and: fields.map(toIndividualOperatorValues)
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +145,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

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

@@ -115,7 +115,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValues)).toContain(
-      '&search={"$and":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}'
+      '&search={"$and":[{"$or":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}]}'
     );
 
     const endpointWithValue = buildListingEndpoint({
@@ -134,7 +134,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValue)).toContain(
-      '&search={"$and":[{"is_activated":true}]}'
+      '&search={"$and":[{"$or":[{"is_activated":true}]}]}'
     );
   });
 });

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/buildListingEndpoint/models.ts

@@ -18,7 +18,6 @@ export interface Parameters {
   search?: SearchParameter;
   sort?: SortQueryParameterValue;
 }
-
 export interface SearchParameter {
   conditions?: Array<ConditionsSearchParameter>;
   lists?: Array<ListsSearchParameter>;

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 {
@@ -14,6 +14,7 @@ import { has, includes, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
+import { useDeepCompare } from '../../utils';
 
 export interface UseFetchQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
@@ -30,14 +31,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 +91,6 @@ const useFetchQuery = <T extends object>({
     }
   };
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  manageError();
-
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
     queryClient.prefetchQuery(
       queryKey,
@@ -155,12 +147,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();
+  }, useDeepCompare([queryData.data]));
+
   return {
     ...omit(['data'], queryData),
     data,

package/src/api/useGraphQuery/index.ts

@@ -0,0 +1,166 @@
+import { useRef } from 'react';
+
+import { equals, has, isEmpty, pluck } from 'ramda';
+import dayjs from 'dayjs';
+
+import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
+
+import { Resource, WidgetResourceType } from './models';
+
+interface CustomTimePeriod {
+  end: string;
+  start: string;
+}
+
+interface UseMetricsQueryProps {
+  baseEndpoint: string;
+  metrics: Array<string>;
+  refreshCount?: number;
+  refreshInterval?: number | false;
+  resources?: Array<Resource>;
+  timePeriod?: {
+    end?: string | null;
+    start?: string | null;
+    timePeriodType: number;
+  };
+}
+
+interface UseMetricsQueryState {
+  end: string;
+  graphData: LineChartData | undefined;
+  isGraphLoading: boolean;
+  isMetricsEmpty: 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;
+}
+
+export const resourceTypeQueryParameter = {
+  [WidgetResourceType.host]: 'host.id',
+  [WidgetResourceType.hostCategory]: 'hostcategory.id',
+  [WidgetResourceType.hostGroup]: 'hostgroup.id',
+  [WidgetResourceType.serviceCategory]: 'servicecategory.id',
+  [WidgetResourceType.serviceGroup]: 'servicegroup.id',
+  [WidgetResourceType.service]: 'service.name'
+};
+
+const areResourcesFullfilled = (value: Array<Resource>): boolean =>
+  value?.every(
+    ({ resourceType, resources }) =>
+      !isEmpty(resourceType) && !isEmpty(resources)
+  );
+
+const useGraphQuery = ({
+  metrics,
+  resources = [],
+  baseEndpoint,
+  timePeriod = {
+    timePeriodType: 1
+  },
+  refreshInterval = false,
+  refreshCount
+}: UseMetricsQueryProps): UseMetricsQueryState => {
+  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
+    ? {
+        end: timePeriod.end,
+        start: timePeriod.start
+      }
+    : timePeriod?.timePeriodType;
+
+  const startAndEnd = isCustomTimePeriod(timePeriodToUse)
+    ? (timePeriodToUse as CustomTimePeriod)
+    : getStartEndFromTimePeriod(timePeriodToUse as number);
+
+  const definedMetrics = metrics.filter((metric) => metric);
+  const formattedDefinedMetrics = definedMetrics.map((metric) =>
+    encodeURIComponent(metric)
+  );
+
+  const {
+    data: graphData,
+    isFetching,
+    isLoading
+  } = useFetchQuery<PerformanceGraphData>({
+    getEndpoint: () => {
+      const endpoint = buildListingEndpoint({
+        baseEndpoint,
+        parameters: {
+          search: {
+            lists: resources.map((resource) => ({
+              field: resourceTypeQueryParameter[resource.resourceType],
+              values: equals(resource.resourceType, 'service')
+                ? pluck('name', resource.resources)
+                : pluck('id', resource.resources)
+            }))
+          }
+        }
+      });
+
+      return `${endpoint}&start=${startAndEnd.start}&end=${
+        startAndEnd.end
+      }&metric_names=[${formattedDefinedMetrics.join(',')}]`;
+    },
+    getQueryKey: () => [
+      'graph',
+      JSON.stringify(definedMetrics),
+      JSON.stringify(resources),
+      timePeriod,
+      refreshCount || 0
+    ],
+    queryOptions: {
+      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      refetchInterval: refreshInterval,
+      suspense: false
+    }
+  });
+
+  const data = useRef<PerformanceGraphData | undefined>(undefined);
+  if (graphData) {
+    data.current = graphData;
+  }
+
+  const formattedGraphData = data.current
+    ? {
+        global: {
+          base: data.current.base,
+          title: ''
+        },
+        metrics: data.current.metrics,
+        times: data.current.times
+      }
+    : undefined;
+
+  const { end, start } = isCustomTimePeriod(timePeriodToUse)
+    ? (timePeriodToUse as CustomTimePeriod)
+    : getStartEndFromTimePeriod(timePeriodToUse as number);
+
+  return {
+    end,
+    graphData: formattedGraphData,
+    isGraphLoading: isFetching || (isLoading && !isEmpty(definedMetrics)),
+    isMetricsEmpty: isEmpty(definedMetrics),
+    start
+  };
+};
+
+export default useGraphQuery;

package/src/api/useGraphQuery/models.ts

@@ -0,0 +1,15 @@
+import { SelectEntry } from '../..';
+
+export interface Resource {
+  resourceType: string;
+  resources: Array<SelectEntry>;
+}
+
+export enum WidgetResourceType {
+  host = 'host',
+  hostCategory = 'host-category',
+  hostGroup = 'host-group',
+  service = 'service',
+  serviceCategory = 'service-category',
+  serviceGroup = 'service-group'
+}