@centreon/ui 24.7.7 → 24.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.7.7",
+  "version": "24.7.8",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -12,7 +12,7 @@
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:run:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
+    "cypress:run:updateSnapshot": "cypress run --component --browser=electron --env updateSnapshots=true",
     "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"

package/src/Dashboard/Dashboard.cypress.spec.tsx

@@ -41,6 +41,8 @@ const dashboardLayout: Array<CustomLayout> = [
 ];
 
 const initialize = (): void => {
+  cy.adjustViewport();
+
   cy.mount({
     Component: (
       <DashboardLayout.Layout layout={dashboardLayout}>

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

@@ -1,9 +1,13 @@
+import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
 import { equals } from 'ramda';
 
+import { userAtom } from '@centreon/ui-context';
+
 import dataPingService from '../mockedData/pingService.json';
-import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
+import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -31,6 +35,8 @@ const initialize = ({
   BarChartProps,
   'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip'
 >): void => {
+  cy.adjustViewport();
+
   cy.mount({
     Component: (
       <div style={{ height: '100%', width: '100%' }}>
@@ -54,6 +60,8 @@ describe('Bar chart', () => {
   ['horizontal', 'vertical'].forEach((orientation) => {
     it(`displays the bar chart ${orientation}ly`, () => {
       initialize({ orientation });
+      const userData = renderHook(() => useAtomValue(userAtom));
+      userData.result.current.locale = 'en';
 
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');

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

@@ -1,3 +1,7 @@
+import { createStore, Provider } from 'jotai';
+
+import { userAtom } from '@centreon/ui-context';
+
 import { LineChartData } from '../common/models';
 import dataLastDay from '../mockedData/lastDay.json';
 import dataLastDayWithNullValues from '../mockedData/lastDayWithNullValues.json';
@@ -14,6 +18,20 @@ interface Props
   data?: LineChartData;
 }
 
+const checkLegendInformation = (): void => {
+  cy.contains('hitratio').should('be.visible');
+  cy.contains('querytime').should('be.visible');
+  cy.contains('connTime').should('be.visible');
+  cy.contains('Min: 70.31').should('be.visible');
+  cy.contains('Min: 0.03').should('be.visible');
+  cy.contains('Max: 88.03').should('be.visible');
+  cy.contains('Max: 0.98').should('be.visible');
+  cy.contains('Max: 0.97').should('be.visible');
+  cy.contains('Avg: 78.07').should('be.visible');
+  cy.contains('Avg: 0.5').should('be.visible');
+  cy.contains('Avg: 0.51').should('be.visible');
+};
+
 const initialize = ({
   data = dataLastDay,
   tooltip,
@@ -21,16 +39,28 @@ const initialize = ({
   axis,
   lineStyle
 }: Props): void => {
+  cy.adjustViewport();
+
+  const store = createStore();
+  store.set(userAtom, {
+    alias: 'admin',
+    locale: 'en',
+    name: 'admin',
+    timezone: 'Europe/Paris'
+  });
+
   cy.mount({
     Component: (
-      <WrapperLineChart
-        {...argumentsData}
-        axis={axis}
-        data={data as unknown as LineChartData}
-        legend={legend}
-        lineStyle={lineStyle}
-        tooltip={tooltip}
-      />
+      <Provider store={store}>
+        <WrapperLineChart
+          {...argumentsData}
+          axis={axis}
+          data={data as unknown as LineChartData}
+          legend={legend}
+          lineStyle={lineStyle}
+          tooltip={tooltip}
+        />
+      </Provider>
     )
   });
 
@@ -227,18 +257,20 @@ describe('Line chart', () => {
       cy.get('[data-display-side="false"]').should('exist');
       cy.get('[data-as-list="true"]').should('exist');
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.makeSnapshot();
     });
 
     it('displays the legend on the left side of the graph when the corresponding prop is set', () => {
-      initialize({ legend: { mode: 'grid', placement: 'left' } });
+      initialize({
+        legend: { mode: 'grid', placement: 'left' }
+      });
 
       cy.get('[data-display-side="true"]').should('exist');
       cy.get('[data-as-list="true"]').should('exist');
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -249,7 +281,7 @@ describe('Line chart', () => {
       cy.get('[data-display-side="true"]').should('exist');
       cy.get('[data-as-list="true"]').should('exist');
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -259,7 +291,7 @@ describe('Line chart', () => {
     it('does not display axis borders when the prop is set', () => {
       initialize({ axis: { showBorder: false } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.get('line[class*="visx-axis-line"]')
         .eq(0)
@@ -280,7 +312,7 @@ describe('Line chart', () => {
     it('does not display grids when the prop is set', () => {
       initialize({ axis: { showGridLines: false } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.get('g[class="visx-group visx-rows"]').should('not.exist');
       cy.get('g[class="visx-group visx-columns"]').should('not.exist');
@@ -291,7 +323,7 @@ describe('Line chart', () => {
     it('displays only horizontal lines when the prop is set', () => {
       initialize({ axis: { gridLinesType: 'horizontal' } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.get('g[class="visx-group visx-rows"]').should('be.visible');
       cy.get('g[class="visx-group visx-columns"]').should('not.exist');
@@ -302,7 +334,7 @@ describe('Line chart', () => {
     it('displays only vertical lines when the prop is set', () => {
       initialize({ axis: { gridLinesType: 'vertical' } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.get('g[class="visx-group visx-rows"]').should('not.exist');
       cy.get('g[class="visx-group visx-columns"]').should('be.visible');
@@ -313,7 +345,7 @@ describe('Line chart', () => {
     it('rotates the tick label when the props is set', () => {
       initialize({ axis: { yAxisTickLabelRotation: -35 } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.get('text[transform="rotate(-35, -2, 388)"]').should('be.visible');
 
@@ -323,7 +355,7 @@ describe('Line chart', () => {
     it('displays as centered to zero when the prop is set', () => {
       initialize({ axis: { isCenteredZero: true } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
 
       cy.contains('0.9').should('be.visible');
       cy.contains('-0.9').should('be.visible');
@@ -336,7 +368,10 @@ describe('Line chart', () => {
     it('displays the curve in a natural style when the prop is set', () => {
       initialize({ lineStyle: { curve: 'natural' } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
+      cy.get('[data-metric="13536"]').should('be.visible');
+      cy.get('[data-metric="13534"]').should('be.visible');
+      cy.get('[data-metric="13535"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -344,7 +379,11 @@ describe('Line chart', () => {
     it('displays the curve in a step style when the prop is set', () => {
       initialize({ lineStyle: { curve: 'step' } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
+      cy.get('[data-metric="13536"]').should('be.visible');
+      cy.get('[data-metric="13534"]').should('be.visible');
+      cy.get('[data-metric="13535"]').should('be.visible');
+      checkLegendInformation();
 
       cy.makeSnapshot();
     });
@@ -352,18 +391,24 @@ describe('Line chart', () => {
     it('shows the area when the prop is set', () => {
       initialize({ lineStyle: { showArea: true } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('path[fill="rgba(102, 153, 204, 0.19999999999999996)"]').should(
         'be.visible'
       );
 
+      cy.get('[data-metric="13536"]').should('be.visible');
+      cy.get('[data-metric="13534"]').should('be.visible');
+      cy.get('[data-metric="13535"]').should('be.visible');
+
+      checkLegendInformation();
+
       cy.makeSnapshot();
     });
 
     it('shows the area with a custom transparency when props are set', () => {
       initialize({ lineStyle: { areaTransparency: 20, showArea: true } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('path[fill="rgba(102, 153, 204, 0.8)"]').should('be.visible');
 
       cy.makeSnapshot();
@@ -372,7 +417,7 @@ describe('Line chart', () => {
     it('shows points when the prop is set', () => {
       initialize({ lineStyle: { showPoints: true } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('circle[cx="4.0625"]').should('be.visible');
       cy.get('circle[cy="163.69430856642046"]').should('be.visible');
 
@@ -382,7 +427,7 @@ describe('Line chart', () => {
     it('displays lines with a custom line width when the prop is set', () => {
       initialize({ lineStyle: { lineWidth: 6 } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('path[stroke-width="6"]').should('have.length', 3);
 
       cy.makeSnapshot();
@@ -391,7 +436,7 @@ describe('Line chart', () => {
     it('displays lines with dots width when the prop is set', () => {
       initialize({ lineStyle: { dotOffset: 10, lineWidth: 4 } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('path[stroke-width="4"]')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '4 10');
@@ -400,7 +445,7 @@ describe('Line chart', () => {
     it('displays lines with dots width when the prop is set', () => {
       initialize({ lineStyle: { dashLength: 5, dashOffset: 8 } });
 
-      cy.contains('9:00 AM').should('be.visible');
+      cy.contains('8:00 AM').should('be.visible');
       cy.get('path[stroke-width="2"]')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 8');

package/src/Graph/LineChart/models.ts

@@ -142,6 +142,7 @@ export interface VariationThreshold {
 }
 
 export interface BasicThreshold {
+  id?: string;
   type: ThresholdType.basic;
 }
 

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

@@ -35,6 +35,8 @@ const initializeStandaloneTree = ({
   treeLink,
   children = SimpleContent
 }: InitializeProps): void => {
+  cy.adjustViewport();
+
   cy.mount({
     Component: (
       <div style={{ height: '99vh' }}>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -1,17 +1,18 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { useAtomValue } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+import { makeStyles } from 'tss-react/mui';
 
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { isInvalidDate } from '../../helpers';
 import DateTimePickerInput from '../../DateTimePickerInput';
 import {
   CustomTimePeriodProperty,
@@ -20,8 +21,10 @@ import {
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
 import ErrorText from './ErrorText';
-import { PickersData, PickersStartEndDateDirection } from './models';
-import { PickersStartEndDateModel } from './usePickersStartEndDate';
+import {
+  PickersStartEndDateDirection,
+  PickersStartEndDateProps
+} from './models';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -37,9 +40,6 @@ const useStyles = makeStyles()((theme) => ({
     justifyItems: 'center',
     padding: 0
   },
-  horizontalError: {
-    textAlign: 'left'
-  },
   row: {
     alignItems: 'center',
     display: 'flex',
@@ -89,17 +89,6 @@ const PickerDateWithLabel = ({
   );
 };
 
-interface DisabledPicker {
-  isDisabledEndPicker?: boolean;
-  isDisabledStartPicker?: boolean;
-}
-type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
-
-interface Props extends PickersDate, PickersStartEndDateModel {
-  direction?: PickersStartEndDateDirection;
-  disabled?: DisabledPicker;
-}
-
 const PickersStartEndDate = ({
   startDate,
   endDate,
@@ -108,11 +97,12 @@ const PickersStartEndDate = ({
   rangeStartDate,
   rangeEndDate,
   direction = PickersStartEndDateDirection.column
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+}: PickersStartEndDateProps): JSX.Element => {
+  const { classes } = useStyles();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
+  const isError = error || isInvalidDate({ endDate, startDate });
 
   const maxStart = rangeStartDate?.max || endDate;
   const minStart = rangeStartDate?.min;
@@ -123,11 +113,6 @@ const PickersStartEndDate = ({
     ? classes.verticalDirection
     : classes.horizontalDirection;
 
-  const isHorizontalDirection = equals(
-    direction,
-    PickersStartEndDateDirection.row
-  );
-
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
@@ -156,12 +141,10 @@ const PickersStartEndDate = ({
         />
       </div>
 
-      {error && (
+      {isError && (
         <ErrorText
           message="The end date must be greater than the start date"
-          style={cx(classes.error, {
-            [classes.horizontalError]: isHorizontalDirection
-          })}
+          style={classes.error}
         />
       )}
     </LocalizationProvider>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -2,6 +2,8 @@ import { PopoverOrigin, PopoverPosition } from '@mui/material';
 
 import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
 
+import { PickersStartEndDateModel } from './usePickersStartEndDate';
+
 interface RangeDate {
   max?: Date;
   min?: Date;
@@ -57,3 +59,16 @@ export enum PickersStartEndDateDirection {
   column = 'column',
   row = 'row'
 }
+
+interface DisabledPicker {
+  isDisabledEndPicker?: boolean;
+  isDisabledStartPicker?: boolean;
+}
+type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
+
+export interface PickersStartEndDateProps
+  extends PickersDate,
+    PickersStartEndDateModel {
+  direction?: PickersStartEndDateDirection;
+  disabled?: DisabledPicker;
+}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 import { useSetAtom } from 'jotai';
 import { and, cond, equals, isNil } from 'ramda';
 
+import { isInvalidDate } from '../../helpers';
 import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
@@ -32,9 +33,6 @@ const usePickersStartEndDate = ({
 
   const setError = useSetAtom(errorTimePeriodAtom);
 
-  const isInvalidDate = ({ startDate, endDate }): boolean =>
-    dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');
-
   const changeDate = ({ property, date }): void => {
     const currentDate = customTimePeriod[property];
     cond([

package/src/TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod.tsx

@@ -1,7 +1,8 @@
 import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
 import {
   AcceptDateProps,
-  PickersStartEndDateDirection
+  PickersStartEndDateDirection,
+  PickersStartEndDateProps
 } from './PopoverCustomTimePeriod/models';
 
 interface Props {
@@ -13,14 +14,19 @@ interface Props {
 const SimpleCustomTimePeriod = ({
   startDate,
   endDate,
-  changeDate
-}: Props): JSX.Element => {
+  changeDate,
+  ...rest
+}: Props &
+  Partial<
+    Omit<PickersStartEndDateProps, 'startDate' | 'endDate' | 'changeDate'>
+  >): JSX.Element => {
   return (
     <PickersStartEndDate
       changeDate={changeDate}
       direction={PickersStartEndDateDirection.row}
       endDate={endDate}
       startDate={startDate}
+      {...rest}
     />
   );
 };

package/src/TimePeriods/helpers/index.ts

@@ -1,4 +1,5 @@
 import { find, propEq } from 'ramda';
+import dayjs from 'dayjs';
 
 import {
   CustomTimePeriod,
@@ -24,3 +25,6 @@ export const getTimePeriodById = ({
   timePeriods
 }: TimePeriodById): TimePeriod =>
   find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;
+
+export const isInvalidDate = ({ startDate, endDate }): boolean =>
+  dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');

package/src/components/Modal/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import { DialogTitle as MuiDialogTitle } from '@mui/material';
+import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 
 import { useStyles } from './Modal.styles';
 
@@ -8,12 +8,17 @@ export type ModalHeaderProps = {
   children?: ReactNode;
 };
 
-const ModalHeader = ({ children }: ModalHeaderProps): ReactElement => {
+const ModalHeader = ({
+  children,
+  ...rest
+}: ModalHeaderProps & DialogTitleProps): ReactElement => {
   const { classes } = useStyles();
 
   return (
     <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary">{children}</MuiDialogTitle>
+      <MuiDialogTitle color="primary" {...rest}>
+        {children}
+      </MuiDialogTitle>
     </div>
   );
 };

package/src/utils/index.ts

@@ -25,3 +25,4 @@ export * from './useFullscreen';
 export * from './resourcesStatusURL';
 export * from '../Graph/LineChart/helpers';
 export * from '../Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
+export * from '../TimePeriods/helpers';