@centreon/ui 24.11.14 → 24.11.21

package/src/api/useGraphQuery/index.ts

@@ -0,0 +1,199 @@
+import { useRef } from 'react';
+
+import dayjs from 'dayjs';
+import {
+  equals,
+  flatten,
+  has,
+  includes,
+  isEmpty,
+  not,
+  pipe,
+  pluck
+} from 'ramda';
+
+import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
+
+import { Metric, Resource, WidgetResourceType } from './models';
+
+interface CustomTimePeriod {
+  end: string;
+  start: string;
+}
+
+interface UseMetricsQueryProps {
+  baseEndpoint: string;
+  bypassMetricsExclusion?: boolean;
+  bypassQueryParams?: boolean;
+  includeAllResources?: boolean;
+  metrics: Array<Metric>;
+  prefix?: 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 = ({
+  bypassMetricsExclusion,
+  metrics,
+  resources = [],
+  baseEndpoint,
+  timePeriod = {
+    timePeriodType: 1
+  },
+  refreshInterval = false,
+  refreshCount,
+  bypassQueryParams = false,
+  prefix
+}: 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.name)
+  );
+
+  const prefixQuery = prefix ? [prefix] : [];
+
+  const {
+    data: graphData,
+    isFetching,
+    isLoading
+  } = useFetchQuery<PerformanceGraphData>({
+    getEndpoint: () => {
+      if (bypassQueryParams) {
+        return baseEndpoint;
+      }
+
+      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: () => [
+      ...prefixQuery,
+      'graph',
+      JSON.stringify(definedMetrics),
+      JSON.stringify(resources),
+      timePeriod,
+      refreshCount || 0
+    ],
+    queryOptions: {
+      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      refetchInterval: refreshInterval,
+      suspense: false
+    },
+    useLongCache: true
+  });
+
+  const data = useRef<PerformanceGraphData | undefined>(undefined);
+  if (graphData) {
+    data.current = graphData;
+  }
+
+  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);
+            }),
+        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,20 @@
+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'
+}
+
+export interface Metric {
+  excludedMetrics: Array<number>;
+  name: string;
+}

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

@@ -1,4 +1,4 @@
-import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
+import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
 
 import TestQueryProvider from '../TestQueryProvider';
@@ -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

@@ -1,11 +1,17 @@
-import 'ulog';
-import { useMutation } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import {
+  UseMutationOptions,
+  UseMutationResult,
+  useMutation
+} from '@tanstack/react-query';
+import { includes, omit } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
-import anylogger from 'anylogger';
-import { includes } from 'ramda';
 
-import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
+import { useDeepCompare } from '../../utils';
+import { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
+import { errorLog } from '../logger';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -15,43 +21,84 @@ export enum Method {
   PUT = 'PUT'
 }
 
-export interface UseMutationQueryProps<T> {
+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;
   fetchHeaders?: HeadersInit;
-  getEndpoint: () => string;
+  getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-}
+  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 interface UseMutationQueryState<T> {
+export type UseMutationQueryState<T, TMeta> = Omit<
+  UseMutationResult<T | ResponseError>,
+  'isError' | 'mutate' | 'mutateAsync'
+> & {
   isError: boolean;
   isMutating: boolean;
-  mutate: (payload) => void;
-  mutateAsync: (payload) => Promise<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>({
+const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
   catchError,
   decoder,
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method
-}: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
+  method,
+  onMutate,
+  onError,
+  onSuccess,
+  onSettled,
+  baseEndpoint
+}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useMutation<T | ResponseError>(
-    (payload): Promise<T | ResponseError> =>
-      customFetch<T>({
+  const queryData = useMutation<
+    T | ResponseError,
+    ResponseError,
+    Variables<TMeta, T>
+  >({
+    mutationFn: (
+      variables: Variables<TMeta, T>
+    ): Promise<T | ResponseError> => {
+      const { _meta, payload } = variables || {};
+
+      return customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(),
+        endpoint: getEndpoint(_meta as TMeta),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -59,13 +106,25 @@ const useMutationQuery = <T extends object>({
         isMutation: true,
         method,
         payload
-      })
-  );
+      });
+    },
+    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;
     if (data?.isError) {
-      log.error(data.message);
+      errorLog(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar
@@ -77,13 +136,17 @@ const useMutationQuery = <T extends object>({
     }
   };
 
-  manageError();
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
+    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading,
-    mutate: queryData.mutate,
-    mutateAsync: queryData.mutateAsync
+    isMutating: queryData.isPending
   };
 };
 

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

@@ -1,6 +1,5 @@
+import { RenderHookResult, act, renderHook } from '@testing-library/react';
 import axios from 'axios';
-import anyLogger from 'anylogger';
-import { RenderHookResult, renderHook, act } from '@testing-library/react';
 
 import useRequest, { RequestResult, RequestParams } from '.';
 
@@ -77,8 +76,6 @@ describe(useRequest, () => {
       });
     });
 
-    expect(anyLogger().error).toHaveBeenCalledWith(response);
-
     expect(mockedShowErrorMessage).toHaveBeenCalledWith('failure');
   });
 

package/src/api/useRequest/index.ts

@@ -1,15 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import 'ulog';
 import axios from 'axios';
-import { pathOr, defaultTo, path, includes } from 'ramda';
-import anylogger from 'anylogger';
+import { path, defaultTo, includes, or, pathOr } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
-import useCancelTokenSource from '../useCancelTokenSource';
 import useSnackbar from '../../Snackbar/useSnackbar';
-
-const log = anylogger('API Request');
+import { errorLog, warnLog } from '../logger';
+import useCancelTokenSource from '../useCancelTokenSource';
 
 export interface RequestParams<TResult> {
   decoder?: JsonDecoder.Decoder<TResult>;
@@ -41,13 +38,16 @@ const useRequest = <TResult>({
   }, []);
 
   const showRequestErrorMessage = (error): void => {
-    log.error(error);
-    const message = defaultTo(
-      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
-      getErrorMessage
-    )(error);
+    errorLog(error.message);
+
+    const message = or(
+      pathOr(undefined, ['response', 'data', 'message'], error),
+      pathOr(defaultFailureMessage, ['response', 'data'], error)
+    );
+
+    const errorMessage = defaultTo(message, getErrorMessage?.(error));
 
-    showErrorMessage(message);
+    showErrorMessage(errorMessage as string);
   };
 
   const sendRequest = (params): Promise<TResult> => {
@@ -65,7 +65,7 @@ const useRequest = <TResult>({
       .catch((error) => {
         setSending(false);
         if (axios.isCancel(error)) {
-          log.warn(error);
+          warnLog(error);
 
           throw error;
         }

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,3 @@
+{
+  "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"
+      }
+    }
+  }
+}

package/src/base/tokens/themes/base.tokens.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 04 Jun 2023 10:14:22 GMT
+ */
+
+export const colorBlue50: string;
+export const colorBlue100: string;
+export const colorBlue200: string;
+export const colorBlue300: string;
+export const colorBlue400: string;
+export const colorBlue500: string;
+export const colorBlue600: string;
+export const colorBlue700: string;
+export const colorBlue800: string;
+export const colorBlue900: string;
+export const colorBlue950: string;
+export const colorPurple50: string;
+export const colorPurple100: string;
+export const colorPurple200: string;
+export const colorPurple300: string;
+export const colorPurple400: string;
+export const colorPurple500: string;
+export const colorPurple600: string;
+export const colorPurple700: string;
+export const colorPurple800: string;
+export const colorPurple900: string;
+export const colorPurple950: string;
+export const colorGrey50: string;
+export const colorGrey100: string;
+export const colorGrey200: string;
+export const colorGrey300: string;
+export const colorGrey400: string;
+export const colorGrey500: string;
+export const colorGrey600: string;
+export const colorGrey700: string;
+export const colorGrey800: string;
+export const colorGrey900: string;
+export const colorGrey950: string;