@centreon/ui 24.7.7 → 24.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.7.7",
+  "version": "24.7.9",
   "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"
@@ -53,55 +53,55 @@
     "@cypress/webpack-dev-server": "^3.10.0",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.54.5",
-    "@modern-js/storybook": "^2.54.5",
-    "@simonsmith/cypress-image-snapshot": "^9.0.3",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
+    "@modern-js/prod-server": "^2.56.0",
+    "@modern-js/storybook": "^2.56.0",
+    "@simonsmith/cypress-image-snapshot": "^9.1.0",
+    "@storybook/addon-a11y": "^8.2.5",
+    "@storybook/addon-docs": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-themes": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/manager-api": "^8.2.5",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/preview-api": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/react-vite": "^8.2.5",
+    "@storybook/test": "^8.2.5",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.5",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.7",
-    "@types/ramda": "^0.30.0",
+    "@types/ramda": "^0.30.1",
     "@types/react": "^18.3.3",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "axios-mock-adapter": "^1.22.0",
     "chai": "^5.1.1",
-    "cypress": "^13.13.0",
+    "cypress": "^13.13.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "2.3.1",
-    "msw-storybook-addon": "^2.0.2",
-    "puppeteer": "^22.12.1",
+    "msw": "2.3.2",
+    "msw-storybook-addon": "^2.0.3",
+    "puppeteer": "^22.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "speed-measure-vite-plugin": "^1.0.1",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.5",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
-    "style-dictionary": "^4.0.0",
+    "style-dictionary": "^4.0.1",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^5.3.3",
+    "vite": "^5.3.4",
     "vite-plugin-istanbul": "^6.0.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-turbosnap": "^1.0.3"
@@ -115,8 +115,8 @@
     "@lexical/rich-text": "^0.16.1",
     "@lexical/selection": "^0.16.1",
     "@lexical/utils": "^0.16.1",
-    "@mui/material": "^5.15.21",
-    "@react-spring/web": "^9.7.3",
+    "@mui/material": "^5.16.4",
+    "@react-spring/web": "^9.7.4",
     "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^3.3.0",
     "@visx/event": "^3.3.0",
@@ -133,7 +133,7 @@
     "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "humanize-duration": "^3.32.1",
     "lexical": "^0.16.1",
     "notistack": "^3.0.1",
@@ -142,7 +142,7 @@
     "react-grid-layout": "^1.4.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5",
     "sanitize-html": "^2.13.0",
     "ulog": "^2.0.0-beta.19"

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.1'
+const PACKAGE_VERSION = '2.3.2'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

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}>
@@ -63,7 +65,6 @@ describe('Dashboard', () => {
     cy.get('[data-widget-skeleton="a"]').should('not.exist');
     cy.get('[data-widget-skeleton="b"]').should('not.exist');
     cy.get('[data-widget-skeleton="c"]').should('not.exist');
-    cy.get('[data-widget-skeleton="d"]').should('exist');
 
     cy.makeSnapshot();
   });

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/HeatMap/HeatMap.stories.tsx

@@ -55,17 +55,10 @@ const Template = (args): JSX.Element => {
   return <HeatMap {...args} arrowClassName={classes.arrow} />;
 };
 
-const TileContent = ({
-  data,
-  backgroundColor
-}: {
-  backgroundColor: string;
-  data: Data;
-}): JSX.Element => (
+const TileContent = ({ data }: { data: Data }): JSX.Element => (
   <div
     style={{
       alignItems: 'center',
-      backgroundColor,
       display: 'flex',
       height: '100%',
       justifyContent: 'center'

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -13,8 +13,9 @@ export const useHeatMapStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   heatMapTileContent: {
-    height: `calc(100% - ${theme.spacing(1)})`,
-    width: `calc(100% - ${theme.spacing(1)})`
+    height: '100%',
+    position: 'relative',
+    width: '100%'
   },
   heatMapTooltip: {
     backgroundColor: theme.palette.background.paper,

package/src/Graph/LineChart/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 
 import { useTheme } from '@mui/material';
 
-import IconDowntime from '../../../Icons/Downtime';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
 import { Args } from '../models';
+import { DowntimeIcon } from '../../../../../Icon';
 
 const DowntimeAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();
@@ -15,7 +15,7 @@ const DowntimeAnnotations = (props: Args): JSX.Element => {
 
   return (
     <EventAnnotations
-      Icon={IconDowntime}
+      Icon={DowntimeIcon}
       ariaLabel={t(labelDowntime)}
       color={color}
       type="downtime"

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,27 +391,31 @@ 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();
     });
 
     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 +425,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 +434,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 +443,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/Icon/AcnowledgementIcon.tsx

@@ -0,0 +1,8 @@
+import { Person } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const AcknowledgementIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Person} dataTestId="AcknowledgementIcon" {...props} />
+);

package/src/Icon/BaseIcon.tsx

@@ -0,0 +1,32 @@
+import { has } from 'ramda';
+
+import { SvgIcon, SvgIconProps, SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+interface Props extends SvgIconProps {
+  Icon: JSX.Element | OverridableComponent<SvgIconTypeMap>;
+  dataTestId?: string;
+}
+
+const BaseIcon = ({ Icon, dataTestId, ...props }: Props): JSX.Element => {
+  if (!has('key', Icon)) {
+    const Component = Icon as (props: SvgIconProps) => JSX.Element;
+
+    return (
+      <SvgIcon
+        data-testid={dataTestId || (Icon as () => JSX.Element).name}
+        {...props}
+      >
+        <Component />
+      </SvgIcon>
+    );
+  }
+
+  return (
+    <SvgIcon data-testid={dataTestId} {...props}>
+      {Icon as JSX.Element}
+    </SvgIcon>
+  );
+};
+
+export default BaseIcon;

package/src/Icon/DowntimeIcon.tsx

@@ -0,0 +1,14 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M7.6215 5.243C7.9422 5.243 8.2557 5.1479 8.52236 4.96972C8.78901 4.79155 8.99685 4.53831 9.11958 4.24202C9.2423 3.94573 9.27441 3.6197 9.21185 3.30516C9.14928 2.99062 8.99485 2.70169 8.76808 2.47492C8.54131 2.24815 8.25238 2.09372 7.93784 2.03116C7.6233 1.96859 7.29727 2.0007 7.00098 2.12343C6.70469 2.24616 6.45145 2.45399 6.27327 2.72065C6.0951 2.9873 6 3.30079 6 3.6215C6 4.05155 6.17084 4.46398 6.47493 4.76807C6.77902 5.07216 7.19145 5.243 7.6215 5.243Z" />
+    <path d="M17.8192 12.3739C17.743 12.1905 17.6143 12.0338 17.4492 11.9235C17.2841 11.8132 17.0901 11.7541 16.8915 11.7538C16.8915 11.7538 14.9107 11.4903 14.3232 11.8736C14.0659 12.083 13.8556 12.3442 13.706 12.6403L10.396 12.1161C10.142 11.2785 9.05429 8.10738 9.05429 8.10738L8.24354 6.81076C8.09994 6.57117 7.89855 6.37142 7.6578 6.22979C7.41705 6.08815 7.14463 6.00914 6.86545 6C6.64749 6.01064 6.43062 6.03754 6.21666 6.0805L2 7.86971V11.68H2.23096L4.36037 12.0174L2.81746 19.7866H4.52041L5.979 13.3006L7.68196 14.9221V19.7866H9.30345V13.706L8.16304 12.6183L13.3649 13.4415L10.4094 19.9725L20.928 19.8671L17.8192 12.3739ZM8.03845 9.87167C8.03845 9.87167 8.59142 11.1712 8.88179 11.8736L7.67525 11.682L8.03845 9.87167ZM3.62437 11.0408V8.921L5.08295 8.35368L4.52137 11.1827L3.62437 11.0408Z" />
+  </g>
+);
+
+export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+);

package/src/Icon/HostIcon.tsx

@@ -0,0 +1,8 @@
+import { Dns } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const HostIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Dns} dataTestId="HostIcon" {...props} />
+);

package/src/Icon/ServiceIcon.tsx

@@ -0,0 +1,8 @@
+import { Grain } from '@mui/icons-material';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const ServiceIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={Grain} dataTestId="ServiceIcon" {...props} />
+);

package/src/Icon/index.ts

@@ -0,0 +1,4 @@
+export { HostIcon } from './HostIcon';
+export { ServiceIcon } from './ServiceIcon';
+export { DowntimeIcon } from './DowntimeIcon';
+export { AcknowledgementIcon } from './AcnowledgementIcon';

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/index.ts

@@ -166,3 +166,4 @@ export * from './ParentSize';
 export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export * from './Icon';

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';

package/src/@assets/icons/downtime.icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{opacity:1;}</style></defs><g transform="translate(-94.852 -137.365)"><rect class="a" width="24" height="24" transform="translate(94.852 137.365)"/><g class="b" transform="translate(97.108 140.129)"><path d="M103.476,143.64a1.692,1.692,0,1,0-1.692-1.692A1.692,1.692,0,0,0,103.476,143.64Z" transform="translate(-97.132 -140.255)"/><path d="M114.266,150.2a1.05,1.05,0,0,0-.968-.647s-2.067-.275-2.68.125a2.464,2.464,0,0,0-.644.8l-3.454-.547c-.265-.874-1.4-4.183-1.4-4.183l-.846-1.353a1.743,1.743,0,0,0-1.438-.846,4.571,4.571,0,0,0-.677.084l-4.4,1.867v3.976H98l2.222.352-1.61,8.107h1.777l1.522-6.768,1.777,1.692v5.076h1.692v-6.345l-1.19-1.135,5.428.859-3.084,6.815,10.976-.11Zm-10.206-2.611s.577,1.356.88,2.089l-1.259-.2Zm-4.606,1.22v-2.212l1.522-.592-.586,2.952Z" transform="translate(-97.762 -139.74)"/></g></g></svg>

package/src/Graph/LineChart/Icons/Downtime.tsx

@@ -1,9 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
-
-import IconDowntime from '../../../@assets/icons/downtime.icon.svg';
-
-const Downtime = (props: SvgIconProps): JSX.Element => (
-  <SvgIcon component={IconDowntime} {...props} />
-);
-
-export default Downtime;