@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/mockedData/zoomPreview.json

@@ -1,46 +1,20 @@
 {
   "global": {
-    "title": "oracle-shared-spool-ratio graph on srv-oracle-users",
-    "start": "2023-06-01T23:54:23+02:00",
-    "end": "2023-06-02T11:29:24+02:00",
-    "vertical-label": "Value",
     "base": 1000,
-    "width": 550,
+    "end": "2023-06-02T11:29:24+02:00",
     "height": 140,
+    "multiple_services": false,
     "scaled": 0,
-    "multiple_services": false
+    "start": "2023-06-01T23:54:23+02:00",
+    "title": "oracle-shared-spool-ratio graph on srv-oracle-users",
+    "vertical-label": "Value",
+    "width": 550
   },
   "metrics": [
     {
-      "index_id": 4811,
-      "metric_id": 11758,
-      "metric": "connTime",
-      "metric_legend": "connTime",
-      "unit": "s",
-      "hidden": 0,
-      "min": null,
-      "max": null,
-      "virtual": 0,
-      "ds_data": {
-        "ds_min": "1",
-        "ds_max": "1",
-        "ds_minmax_int": "0",
-        "ds_last": "1",
-        "ds_average": "1",
-        "ds_total": "0",
-        "ds_tickness": 1,
-        "ds_color_line_mode": "1",
-        "ds_color_line": "#ff99cc"
-      },
-      "legend": "connTime",
-      "stack": 0,
-      "warn": null,
-      "warn_low": null,
+      "average_value": 0.45,
       "crit": null,
       "crit_low": null,
-      "ds_color_area_warn": "#ff9a13",
-      "ds_color_area_crit": "#e00b3d",
-      "ds_order": 0,
       "data": [
         0.56718666667, 0.30173333333, 0.25002666667, 0.49318666667,
         0.38298666667, 0.73857333333, 0.12757333333, 0.87394666667, 0.25628,
@@ -70,42 +44,42 @@
         0.25928, 0.028996666667, 0.55647333333, 0.53334333333, 0.070596666667,
         0.37599666667, 0.55636666667, 0.92541, 0.54608333333, 0.40597, 0.78954
       ],
-      "prints": [["Last:0.79"], ["Min:0.03"], ["Max:0.97"], ["Average:0.45"]],
-      "last_value": 0.79,
-      "minimum_value": 0.03,
-      "maximum_value": 0.97,
-      "average_value": 0.45
-    },
-    {
-      "index_id": 4811,
-      "metric_id": 11757,
-      "metric": "querytime",
-      "metric_legend": "querytime",
-      "unit": "s",
-      "hidden": 0,
-      "min": null,
-      "max": null,
-      "virtual": 0,
+      "ds_color_area_crit": "#e00b3d",
+      "ds_color_area_warn": "#ff9a13",
       "ds_data": {
-        "ds_min": "1",
+        "ds_average": "1",
+        "ds_color_line": "#ff99cc",
+        "ds_color_line_mode": "1",
+        "ds_last": "1",
         "ds_max": "1",
+        "ds_min": "1",
         "ds_minmax_int": "0",
-        "ds_last": "1",
-        "ds_average": "1",
-        "ds_total": "0",
         "ds_tickness": 1,
-        "ds_color_line_mode": "1",
-        "ds_color_line": "#6666ff"
+        "ds_total": "0"
       },
-      "legend": "querytime",
+      "ds_order": 0,
+      "hidden": 0,
+      "index_id": 4811,
+      "last_value": 0.79,
+      "legend": "connTime",
+      "max": null,
+      "maximum_value": 0.97,
+      "metric": "connTime",
+      "metric_id": 11758,
+      "metric_legend": "connTime",
+      "min": null,
+      "minimum_value": 0.03,
+      "prints": [["Last:0.79"], ["Min:0.03"], ["Max:0.97"], ["Average:0.45"]],
       "stack": 0,
+      "unit": "s",
+      "virtual": 0,
       "warn": null,
-      "warn_low": null,
+      "warn_low": null
+    },
+    {
+      "average_value": 0.45,
       "crit": null,
       "crit_low": null,
-      "ds_color_area_warn": "#ff9a13",
-      "ds_color_area_crit": "#e00b3d",
-      "ds_order": 0,
       "data": [
         0.21217333333, 0.87482666667, 0.37050666667, 0.22261333333,
         0.27658666667, 0.89249333333, 0.42810666667, 0.17090666667, 0.19776,
@@ -137,60 +111,42 @@
         0.72795333333, 0.67562666667, 0.97103666667, 0.065476666667,
         0.35148666667, 0.81253666667
       ],
-      "prints": [["Last:0.81"], ["Min:0.01"], ["Max:0.97"], ["Average:0.45"]],
-      "last_value": 0.81,
-      "minimum_value": 0.01,
-      "maximum_value": 0.97,
-      "average_value": 0.45
-    },
-    {
-      "index_id": 4811,
-      "metric_id": 11756,
-      "metric": "used",
-      "metric_legend": "used",
-      "unit": "%",
-      "hidden": 0,
-      "min": null,
-      "max": null,
-      "virtual": 0,
+      "ds_color_area_crit": "#e00b3d",
+      "ds_color_area_warn": "#ff9a13",
       "ds_data": {
-        "compo_id": 8,
-        "host_id": null,
-        "service_id": null,
-        "name": "Used",
-        "ds_order": 1,
-        "ds_hidecurve": null,
-        "ds_name": "used",
-        "ds_color_line": "#2B28D7",
-        "ds_color_line_mode": "0",
-        "ds_color_area": "#050AF9",
-        "ds_color_area_warn": null,
-        "ds_color_area_crit": null,
-        "ds_filled": "1",
-        "ds_max": null,
-        "ds_min": null,
-        "ds_minmax_int": "0",
         "ds_average": "1",
+        "ds_color_line": "#6666ff",
+        "ds_color_line_mode": "1",
         "ds_last": "1",
-        "ds_total": "0",
+        "ds_max": "1",
+        "ds_min": "1",
+        "ds_minmax_int": "0",
         "ds_tickness": 1,
-        "ds_transparency": "80",
-        "ds_invert": null,
-        "ds_legend": null,
-        "ds_jumpline": "0",
-        "ds_stack": null,
-        "default_tpl1": null,
-        "comment": null
+        "ds_total": "0"
       },
-      "legend": "used",
+      "ds_order": 0,
+      "hidden": 0,
+      "index_id": 4811,
+      "last_value": 0.81,
+      "legend": "querytime",
+      "max": null,
+      "maximum_value": 0.97,
+      "metric": "querytime",
+      "metric_id": 11757,
+      "metric_legend": "querytime",
+      "min": null,
+      "minimum_value": 0.01,
+      "prints": [["Last:0.81"], ["Min:0.01"], ["Max:0.97"], ["Average:0.45"]],
       "stack": 0,
+      "unit": "s",
+      "virtual": 0,
       "warn": null,
-      "warn_low": null,
+      "warn_low": null
+    },
+    {
+      "average_value": 93.26,
       "crit": null,
       "crit_low": null,
-      "ds_color_area_warn": "#ff9a13",
-      "ds_color_area_crit": "#e00b3d",
-      "ds_order": 1,
       "data": [
         91.596026667, 90.088853333, 89.076053333, 90.53204, 90.893426667,
         89.506986667, 90.81108, 90.729013333, 92.19964, 93.897066667,
@@ -220,11 +176,55 @@
         90.305483333, 90.81863, 92.16478, 93.21469, 93.78806, 92.083266667,
         92.926106667, 91.584036667
       ],
-      "prints": [["Last:91.58"], ["Average:93.26"]],
+      "ds_color_area_crit": "#e00b3d",
+      "ds_color_area_warn": "#ff9a13",
+      "ds_data": {
+        "comment": null,
+        "compo_id": 8,
+        "default_tpl1": null,
+        "ds_average": "1",
+        "ds_color_area": "#050AF9",
+        "ds_color_area_crit": null,
+        "ds_color_area_warn": null,
+        "ds_color_line": "#2B28D7",
+        "ds_color_line_mode": "0",
+        "ds_filled": "1",
+        "ds_hidecurve": null,
+        "ds_invert": null,
+        "ds_jumpline": "0",
+        "ds_last": "1",
+        "ds_legend": null,
+        "ds_max": null,
+        "ds_min": null,
+        "ds_minmax_int": "0",
+        "ds_name": "used",
+        "ds_order": 1,
+        "ds_stack": null,
+        "ds_tickness": 1,
+        "ds_total": "0",
+        "ds_transparency": "80",
+        "host_id": null,
+        "name": "Used",
+        "service_id": null
+      },
+      "ds_order": 1,
+      "hidden": 0,
+      "index_id": 4811,
       "last_value": 91.58,
-      "minimum_value": null,
+      "legend": "used",
+      "max": null,
       "maximum_value": null,
-      "average_value": 93.26
+      "metric": "used",
+      "metric_id": 11756,
+      "metric_legend": "used",
+      "min": null,
+      "minimum_value": null,
+      "prints": [["Last:91.58"], ["Average:93.26"]],
+      "stack": 0,
+      "unit": "%",
+      "virtual": 0,
+      "warn": null,
+      "warn_low": null
     }
   ],
   "times": [

package/src/Icon/AcknowledgementIcon.tsx

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

package/src/Icon/BaseIcon.tsx

@@ -1,7 +1,7 @@
-import { has } from 'ramda';
+import { SvgIcon, type SvgIconProps, type SvgIconTypeMap } from '@mui/material';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
 
-import { SvgIcon, SvgIconProps, SvgIconTypeMap } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { has } from 'ramda';
 
 interface Props extends SvgIconProps {
   Icon: JSX.Element | OverridableComponent<SvgIconTypeMap>;

package/src/Icon/BusinessActivityIcon.tsx

@@ -1,12 +1,12 @@
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import { SvgIconProps } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 
 export const BusinessActivityIcon = (props: SvgIconProps): JSX.Element => (
   <BaseIcon
-    Icon={AccountTreeIcon}
     dataTestId="BusinessActivityIcon"
+    Icon={AccountTreeIcon}
     {...props}
   />
 );

package/src/Icon/ContainerIcon.tsx

@@ -1,4 +1,4 @@
-import { SvgIconProps } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 

package/src/Icon/DowntimeIcon.tsx

@@ -1,4 +1,4 @@
-import { SvgIconProps } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 
@@ -13,8 +13,8 @@ export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
   <BaseIcon
     {...props}
     dataTestId="DowntimeIcon"
-    Icon={icon}
     height="24"
+    Icon={icon}
     viewBox="0 0 24 24"
     width="24"
   />

package/src/Icon/FlappingIcon.tsx

@@ -1,4 +1,4 @@
-import { SvgIconProps } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 
@@ -14,8 +14,8 @@ export const FlappingIcon = (props: SvgIconProps): JSX.Element => (
   <BaseIcon
     {...props}
     dataTestId="FlappingIcon"
-    Icon={icon}
     height="24"
+    Icon={icon}
     viewBox="0 0 24 24"
     width="24"
   />

package/src/Icon/HostGroupIcon.tsx

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

package/src/Icon/HostIcon.tsx

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

package/src/Icon/IconAttach/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import Icon from '.';
 
@@ -21,8 +21,8 @@ export const normal = (): JSX.Element => (
   <Icon
     defaultImage=""
     imgSource=""
+    onClick={(): void => undefined}
     title="Attach"
     uploadedImage=""
-    onClick={(): void => undefined}
   />
 );

package/src/Icon/MetaServiceIcon.tsx

@@ -1,12 +1,12 @@
 import SettingsInputSvideoIcon from '@mui/icons-material/SettingsInputSvideo';
-import { SvgIconProps } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 
 export const MetaServiceIcon = (props: SvgIconProps): JSX.Element => (
   <BaseIcon
-    Icon={SettingsInputSvideoIcon}
     dataTestId="MetaServiceIcon"
+    Icon={SettingsInputSvideoIcon}
     {...props}
   />
 );

package/src/Icon/RegexIcon.tsx

@@ -1,5 +1,7 @@
-import { SvgIconProps } from '@mui/material';
-import { ReactElement } from 'react';
+import type { SvgIconProps } from '@mui/material';
+
+import type { ReactElement } from 'react';
+
 import BaseIcon from './BaseIcon';
 
 const icon = (
@@ -16,5 +18,5 @@ const icon = (
 );
 
 export const RegexIcon = (props: SvgIconProps): ReactElement => (
-  <BaseIcon {...props} Icon={icon} dataTestId="RegexIcon" />
+  <BaseIcon {...props} dataTestId="RegexIcon" Icon={icon} />
 );

package/src/Icon/ServiceGroupIcon.tsx

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

package/src/Icon/ServiceIcon.tsx

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

package/src/Icon/index.ts

@@ -1,11 +1,11 @@
-export { DowntimeIcon } from './DowntimeIcon';
-export { FlappingIcon } from './FlappingIcon';
 export { AcknowledgementIcon } from './AcknowledgementIcon';
-export { HostIcon } from './HostIcon';
-export { ServiceIcon } from './ServiceIcon';
 export { BusinessActivityIcon } from './BusinessActivityIcon';
+export { ContainerIcon } from './ContainerIcon';
+export { DowntimeIcon } from './DowntimeIcon';
+export { FlappingIcon } from './FlappingIcon';
 export { HostGroupIcon } from './HostGroupIcon';
-export { ServiceGroupIcon } from './ServiceGroupIcon';
+export { HostIcon } from './HostIcon';
 export { MetaServiceIcon } from './MetaServiceIcon';
-export { ContainerIcon } from './ContainerIcon';
 export { RegexIcon } from './RegexIcon';
+export { ServiceGroupIcon } from './ServiceGroupIcon';
+export { ServiceIcon } from './ServiceIcon';

package/src/Image/Image.tsx

@@ -1,6 +1,5 @@
-import { memo } from 'react';
-
 import { equals, isNil } from 'ramda';
+import { memo } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { useLoadImage } from './useLoadImage';

package/src/Image/index.stories.tsx

@@ -1,9 +1,8 @@
-import { ComponentStory } from '@storybook/react';
+import type { ComponentStory } from '@storybook/react';
 
 import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
-
 import Image, { ImageVariant } from './Image';
 
 export default {

package/src/Image/index.test.tsx

@@ -1,53 +1,53 @@
-import { RenderResult, screen, waitFor } from '@testing-library/react';
-import { Provider } from 'jotai';
+import { type RenderResult, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
 
-import { render } from '../../test/testRenderer';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import { render } from "../../test/testRenderer";
+import CentreonLogoLight from "../@assets/brand/centreon-logo-one-line-light.svg";
 
-import Image from './Image';
+import Image from "./Image";
 
-jest.mock('../../@assets/centreon-logo-one-line-light.svg');
+jest.mock("../../@assets/centreon-logo-one-line-light.svg");
 
 const renderImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath={CentreonLogoLight}
-      />
-    </Provider>
-  );
+	render(
+		<Provider>
+			<Image
+				alt="test"
+				fallback={<p>Loading...</p>}
+				imagePath={CentreonLogoLight}
+			/>
+		</Provider>,
+	);
 
 const renderNotFoundImage = (): RenderResult =>
-  render(
-    <Provider>
-      <Image
-        alt="test"
-        fallback={<p>Loading...</p>}
-        imagePath="another_image"
-      />
-    </Provider>
-  );
-
-describe('useLoadImage', () => {
-  it('displays the loaded image', async () => {
-    renderImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
-
-  it('displays a not found image', async () => {
-    renderNotFoundImage();
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByAltText('test')).toBeInTheDocument();
-    });
-  });
+	render(
+		<Provider>
+			<Image
+				alt="test"
+				fallback={<p>Loading...</p>}
+				imagePath="another_image"
+			/>
+		</Provider>,
+	);
+
+describe("useLoadImage", () => {
+	it("displays the loaded image", async () => {
+		renderImage();
+
+		expect(screen.getByText("Loading...")).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByAltText("test")).toBeInTheDocument();
+		});
+	});
+
+	it("displays a not found image", async () => {
+		renderNotFoundImage();
+
+		expect(screen.getByText("Loading...")).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByAltText("test")).toBeInTheDocument();
+		});
+	});
 });

package/src/Image/useLoadImage.ts

@@ -1,4 +1,4 @@
-import { SetStateAction, useAtom } from 'jotai';
+import { type SetStateAction, useAtom } from 'jotai';
 import { isEmpty, isNil, prop } from 'ramda';
 
 import { imagesAtom } from './atoms';

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -1,4 +1,4 @@
-import NumberField, { NumberProps } from './Number';
+import NumberField, { type NumberProps } from './Number';
 
 const initialize = (props: NumberProps): void => {
   cy.mount({
@@ -68,14 +68,14 @@ describe('Number field', () => {
     initialize({
       dataTestId: 'test',
       defaultValue: 25,
+      onChange: cy.stub(),
       textFieldSlotsAndSlotProps: {
         slotProps: {
           htmlInput: {
             min: 2
           }
         }
-      },
-      onChange: cy.stub()
+      }
     });
 
     cy.get('input').should('have.value', '25');