@centreon/ui 24.5.7 → 24.5.9

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -7,6 +7,7 @@ import {
   VariationThreshold
 } from '../../../models';
 import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
@@ -16,7 +17,7 @@ import { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
-  curve: 'linear' | 'natural' | 'step';
+  curve: CurveType;
   graphHeight: number;
   timeSeries: Array<TimeValue>;
 }

package/src/Graph/LineChart/BasicComponents/Lines/index.tsx

@@ -23,9 +23,10 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
+import { CurveType } from './models';
 
 interface Props extends GlobalAreaLines {
-  curve: 'linear' | 'step' | 'natural';
+  curve: CurveType;
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;

package/src/Graph/LineChart/BasicComponents/Lines/models.ts

@@ -1,4 +1,5 @@
 import { ScaleLinear } from 'd3-scale';
+import { curveBasis } from '@visx/curve';
 
 import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { LineChartData } from '../../../common/models';
@@ -40,3 +41,5 @@ export interface Shape {
   areaStackedLines: AreaStackedLines;
   areaThreshold: AreaThreshold;
 }
+
+export type CurveType = typeof curveBasis;

package/src/Graph/LineChart/LineChart.tsx

@@ -30,6 +30,7 @@ import {
   LegendModel
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
+import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
 import { legendWidth } from './Legend/Legend.styles';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
@@ -37,7 +38,7 @@ import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphVa
 const extraMargin = 10;
 
 interface Props extends LineChartProps {
-  curve: 'linear' | 'step' | 'natural';
+  curve: CurveType;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;

package/src/Graph/LineChart/common/index.ts

@@ -1,6 +1,3 @@
-import * as Curve from '@visx/curve';
-import { always, cond, equals } from 'ramda';
-
 import { alpha } from '@mui/material';
 
 const commonTickLabelProps = {
@@ -27,16 +24,6 @@ const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const maxLinesDisplayedLegend = 11;
 
-const getCurveFactory = (
-  curve: 'linear' | 'step' | 'natural'
-): typeof Curve.curveLinear => {
-  return cond([
-    [equals('linear'), always(Curve.curveLinear)],
-    [equals('step'), always(Curve.curveStep)],
-    [equals('natural'), always(Curve.curveCatmullRom)]
-  ])(curve);
-};
-
 export {
   commonTickLabelProps,
   margin,
@@ -44,6 +31,5 @@ export {
   dateFormat,
   timeFormat,
   dateTimeFormat,
-  maxLinesDisplayedLegend,
-  getCurveFactory
+  maxLinesDisplayedLegend
 };

package/src/Graph/LineChart/index.stories.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
+import { Curve } from '@visx/visx';
 
 import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -341,7 +342,7 @@ export const LineChartWithStepCurve: Story = {
   argTypes,
   args: {
     ...argumentsData,
-    curve: 'step'
+    curve: Curve.curveStep
   }
 };
 
@@ -353,7 +354,7 @@ export const LineChartWithTimePeriod: Story = {
     start: defaultStart
   },
   parameters: {
-    chromatic: { disableSnapshot: true }
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 

package/src/Graph/LineChart/index.tsx

@@ -1,5 +1,6 @@
 import { MutableRefObject, useRef } from 'react';
 
+import { Curve } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -16,13 +17,14 @@ import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, LineChartProps, LegendModel } from './models';
 import useLineChartData from './useLineChartData';
+import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<LineChartProps> {
-  curve?: 'linear' | 'step' | 'natural';
+  curve?: CurveType;
   data?: LineChartData;
   end: string;
   legend: LegendModel;
@@ -50,7 +52,7 @@ const WrapperLineChart = ({
   annotationEvent,
   legend,
   header,
-  curve = 'linear',
+  curve = Curve.curveLinear,
   thresholds,
   thresholdUnit,
   limitLegend

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { ArcType } from './models';
-import ResponsivePie from './ResponsivePie';
+
+import { PieChart } from '.';
 
 const data = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -17,20 +18,19 @@ const dataWithBigNumbers = [
   { color: '#FF6666', label: 'Down', value: 122222 }
 ];
 
-const meta: Meta<typeof ResponsivePie> = {
-  component: ResponsivePie,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
+const meta: Meta<typeof PieChart> = {
+  component: PieChart
 };
 
 export default meta;
-type Story = StoryObj<typeof ResponsivePie>;
+type Story = StoryObj<typeof PieChart>;
 
 const Template = (args): JSX.Element => {
-  return <ResponsivePie height={350} width={350} {...args} />;
+  return (
+    <div style={{ height: '350px', width: '350px' }}>
+      <PieChart {...args} />
+    </div>
+  );
 };
 
 export const Pie: Story = {
@@ -141,7 +141,11 @@ export const DonutWithTooltip: Story = {
 };
 
 const TemplateForSmallDimensions = (args): JSX.Element => {
-  return <ResponsivePie height={130} width={130} {...args} />;
+  return (
+    <div style={{ height: '130px', width: '130px' }}>
+      <PieChart {...args} />
+    </div>
+  );
 };
 
 export const PieWithSmallDimensions: Story = {

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -93,7 +93,7 @@ const ResponsivePie = ({
       <div
         className={classes.svgWrapper}
         style={{
-          minHeight: height,
+          height,
           width: svgWrapperWidth
         }}
       >

package/src/Graph/Tree/DescendantNodes.tsx

@@ -65,7 +65,6 @@ const DescendantNodes = <TData extends BaseProp>({
       <Group key={key} left={left} top={top}>
         <foreignObject
           height={nodeSize.height}
-          style={{ userSelect: 'none' }}
           width={nodeSize.width}
           x={-nodeSize.width / 2}
           y={-nodeSize.height / 2}

package/src/Graph/Tree/Links.tsx

@@ -1,10 +1,5 @@
-import {
-  LinkHorizontal,
-  LinkHorizontalStep,
-  LinkHorizontalLine
-} from '@visx/shape';
+import { LinkHorizontal } from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -14,12 +9,6 @@ interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;
 }
 
-const getLinkComponent = cond([
-  [equals('line'), always(LinkHorizontalLine)],
-  [equals('step'), always(LinkHorizontalStep)],
-  [T, always(LinkHorizontal)]
-]);
-
 const Links = <TData extends BaseProp>({
   links,
   treeLink
@@ -35,12 +24,10 @@ const Links = <TData extends BaseProp>({
       .descendants()
       .map((ancestor) => ancestor.data.data.id);
 
-    const LinkComponent = getLinkComponent(treeLink?.type);
-
     const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
 
     return (
-      <LinkComponent
+      <LinkHorizontal
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

package/src/Graph/Tree/Tree.cypress.spec.tsx

@@ -168,28 +168,4 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays the tree with step links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'step'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with line links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'line'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,21 +82,6 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
-export const WithStepLink: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      type: 'step'
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -110,8 +95,7 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
-      type: 'line'
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,8 +14,6 @@ export interface BaseProp {
   name: string;
 }
 
-export type Link = 'curve' | 'line' | 'step';
-
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -50,6 +48,5 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
-    type?: Link;
   };
 }

package/src/Listing/Cell/index.tsx

@@ -95,6 +95,9 @@ const useStyles = makeStyles<StylesProps>()(
     caretMore: {
       transform: 'rotate3d(0,0,1,180deg)'
     },
+    fakeCaret: {
+      marginLeft: theme.spacing(3)
+    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -195,23 +198,26 @@ const Cell = ({
         props
       )}
     >
-      {displaySubItemsCaret && hasSubItems && (
-        <IconButton
-          ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            props.row.id
-          }`}
-          size="small"
-          onClick={click}
-        >
-          <ExpandMoreIcon
-            className={cx(
-              classes.caret,
-              isSubItemsExpanded ? classes.caretMore : classes.caretLess
-            )}
-            fontSize="small"
-          />
-        </IconButton>
-      )}
+      {displaySubItemsCaret &&
+        (hasSubItems ? (
+          <IconButton
+            ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+              props.row.id
+            }`}
+            size="small"
+            onClick={click}
+          >
+            <ExpandMoreIcon
+              className={cx(
+                classes.caret,
+                isSubItemsExpanded ? classes.caretMore : classes.caretLess
+              )}
+              fontSize="small"
+            />
+          </IconButton>
+        ) : (
+          <div className={classes.fakeCaret} />
+        ))}
       {children}
     </TableCell>
   );

package/src/TimePeriods/index.stories.tsx

@@ -10,9 +10,6 @@ import TimePeriod from '.';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  },
   tags: ['autodocs']
 };
 
@@ -91,20 +88,27 @@ const args = {
   ]
 };
 
+const parameters = {
+  chromatic: { diffThreshold: 0.1 }
+};
+
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args
+  args,
+  parameters
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -112,5 +116,6 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  }
+  },
+  parameters
 };

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import type { SvgIcon } from '@mui/material';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { Badge, ClickAwayListener } from '@mui/material';
+import type { SvgIcon } from '@mui/material';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
@@ -115,6 +115,7 @@ const TopCounterLayout = ({
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
+
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
   useCloseOnLegacyPage({ setToggled });
 

package/src/api/QueryProvider.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const defaultCacheTime = 5 * 1_000;
 
-export const client = new QueryClient({
+const client = new QueryClient({
   defaultOptions: {
     queries: {
       gcTime: defaultCacheTime,

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

@@ -1,5 +1,6 @@
 import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
+import anyLogger from 'anylogger';
 
 import TestQueryProvider from '../TestQueryProvider';
 
@@ -76,6 +77,8 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
     });
 
+    expect(anyLogger().error).toHaveBeenCalledWith('custom message');
+
     await waitFor(() => {
       expect(result.current.error).toStrictEqual({
         additionalInformation: {
@@ -99,6 +102,8 @@ describe('useFetchQuery', () => {
     await waitFor(() => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('error');
     });
+
+    expect(anyLogger().error).toHaveBeenCalledWith('error');
   });
 
   it('shows a default failure message via the Snackbar as fallback', async () => {

package/src/api/useFetchQuery/index.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 
+import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
@@ -8,12 +9,12 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
-import { equals, has, includes, isNil, not, omit } from 'ramda';
+import anylogger from 'anylogger';
+import { has, includes, isNil, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { errorLog } from '../logger';
 
 export interface UseFetchQueryProps<T> {
   baseEndpoint?: string;
@@ -32,7 +33,6 @@ export interface UseFetchQueryProps<T> {
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
-  useLongCache?: boolean;
 }
 
 export type UseFetchQueryState<T> = {
@@ -48,6 +48,8 @@ export interface PrefetchEndpointParams {
   page: number;
 }
 
+const log = anylogger('API Request');
+
 const useFetchQuery = <T extends object>({
   getEndpoint,
   getQueryKey,
@@ -59,18 +61,12 @@ const useFetchQuery = <T extends object>({
   queryOptions,
   httpCodesBypassErrorSnackbar = [],
   baseEndpoint,
-  doNotCancelCallsOnUnmount = false,
-  useLongCache
+  doNotCancelCallsOnUnmount = false
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const dataRef = useRef<T | undefined>(undefined);
 
   const { showErrorMessage } = useSnackbar();
 
-  const isCypressTest = equals(window.Cypress?.testingType, 'component');
-
-  const cacheOptions =
-    !isCypressTest && useLongCache ? { gcTime: 60 * 1000 } : {};
-
   const queryData = useQuery<T | ResponseError, Error>({
     queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
@@ -83,7 +79,6 @@ const useFetchQuery = <T extends object>({
         signal
       }),
     queryKey: getQueryKey(),
-    ...cacheOptions,
     ...queryOptions
   });
 
@@ -92,7 +87,7 @@ const useFetchQuery = <T extends object>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      errorLog(data.message);
+      log.error(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

package/src/api/useGraphQuery/index.ts

@@ -24,7 +24,6 @@ interface CustomTimePeriod {
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   bypassMetricsExclusion?: boolean;
-  bypassQueryParams?: boolean;
   includeAllResources?: boolean;
   metrics: Array<Metric>;
   refreshCount?: number;
@@ -91,8 +90,7 @@ const useGraphQuery = ({
     timePeriodType: 1
   },
   refreshInterval = false,
-  refreshCount,
-  bypassQueryParams = false
+  refreshCount
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -116,10 +114,6 @@ const useGraphQuery = ({
     isLoading
   } = useFetchQuery<PerformanceGraphData>({
     getEndpoint: () => {
-      if (bypassQueryParams) {
-        return baseEndpoint;
-      }
-
       const endpoint = buildListingEndpoint({
         baseEndpoint,
         parameters: {
@@ -149,8 +143,7 @@ const useGraphQuery = ({
       enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
       refetchInterval: refreshInterval,
       suspense: false
-    },
-    useLongCache: true
+    }
   });
 
   const data = useRef<PerformanceGraphData | undefined>(undefined);

package/src/api/useMutationQuery/index.ts

@@ -1,3 +1,4 @@
+import 'ulog';
 import { useEffect } from 'react';
 
 import {
@@ -6,12 +7,12 @@ import {
   UseMutationResult
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
+import anylogger from 'anylogger';
 import { includes, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { errorLog } from '../logger';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -51,6 +52,8 @@ export type UseMutationQueryProps<T, TMeta> = {
   'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
 >;
 
+const log = anylogger('API Request');
+
 export type UseMutationQueryState<T, TMeta> = Omit<
   UseMutationResult<T | ResponseError>,
   'isError' | 'mutate' | 'mutateAsync'
@@ -124,7 +127,7 @@ const useMutationQuery = <T extends object, TMeta>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      errorLog(data.message);
+      log.error(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

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

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