@centreon/ui 24.8.2 → 24.8.3

package/src/Graph/mockedData/pingServiceLinesBarsStacked.json

@@ -0,0 +1,253 @@
+{
+    "global": {
+        "base": 1000,
+        "title": "Ping service"
+    },
+    "metrics": [
+        {
+            "metric_id": 2,
+            "metric": "Centreon-Server: pl",
+            "metric_legend": "Centreon-Server: pl",
+            "unit": "B",
+            "min": 0.0,
+            "max": 100.0,
+            "ds_data": {
+                "ds_color_line": "#F30B23",
+                "ds_color_area": "#F30B23",
+                "ds_filled": true,
+                "ds_invert": false,
+                "ds_legend": null,
+                "ds_stack": true,
+                "ds_order": 1,
+                "ds_transparency": 80.0,
+                "ds_color_line_mode": 0
+            },
+            "displayAs": "bar",
+            "legend": "Centreon-Server: Packet Loss",
+            "stack": 0,
+            "warning_high_threshold": 20.0,
+            "critical_high_threshold": 50.0,
+            "warning_low_threshold": 0.0,
+            "critical_low_threshold": 0.0,
+            "ds_order": 1,
+            "data": [
+                1243.0,
+                3562.0,
+                3532.0,
+                9843.0,
+                3332.0,
+                6576.0,
+                5647.0,
+                8763.0,
+                7487.0,
+                4783.0,
+                6835.0,
+                null,
+                null
+            ],
+            "last_value": 0.0,
+            "minimum_value": null,
+            "maximum_value": 0.0,
+            "average_value": 0.0
+        },
+        {
+            "metric_id": 10,
+            "metric": "Space used",
+            "metric_legend": "Space used",
+            "unit": "B",
+            "min": 0.0,
+            "max": 100.0,
+            "ds_data": {
+                "ds_color_line": "#654321",
+                "ds_color_area": "#654321",
+                "ds_filled": true,
+                "ds_invert": false,
+                "ds_legend": null,
+                "ds_stack": true,
+                "ds_order": 1,
+                "ds_transparency": 80.0,
+                "ds_color_line_mode": 0
+            },
+            "displayAs": "bar",
+            "legend": "Space used",
+            "stack": 0,
+            "warning_high_threshold": 20.0,
+            "critical_high_threshold": 50.0,
+            "warning_low_threshold": 0.0,
+            "critical_low_threshold": 0.0,
+            "ds_order": 1,
+            "data": [
+                7277.536221378278,
+                1070.9229992641347,
+                5417.157870751178,
+                7650.368581547736,
+                3062.1382654626154,
+                6896.485403855089,
+                6016.271762192416,
+                592.4173666516415,
+                9130.151161464735,
+                2556.376532531991,
+                8085.328518673757,
+                6283.734720996918,
+                5617.226479531896
+            ],
+            "last_value": 0.0,
+            "minimum_value": null,
+            "maximum_value": 0.0,
+            "average_value": 0.0
+        },
+        {
+            "metric_id": 1,
+            "metric": "Centreon-Server: rta",
+            "metric_legend": "Centreon-Server: rta",
+            "unit": "ms",
+            "min": 0.0,
+            "max": null,
+            "ds_data": {
+                "ds_color_line": "#29AFEE",
+                "ds_color_area": "#29AFEE",
+                "ds_filled": true,
+                "ds_invert": false,
+                "ds_legend": null,
+                "ds_stack": true,
+                "ds_order": 1,
+                "ds_transparency": 80.0,
+                "ds_color_line_mode": 0
+            },
+            "displayAs": "line",
+            "legend": "Centreon-Server: Round-Trip Average Time",
+            "stack": 0,
+            "warning_high_threshold": 200.0,
+            "critical_high_threshold": 400.0,
+            "warning_low_threshold": 0.0,
+            "critical_low_threshold": 0.0,
+            "ds_order": 1,
+            "data": [
+                0.04508,
+                0.0242,
+                0.03592,
+                0.01304,
+                0.025,
+                0.02748,
+                0.05296,
+                0.01864,
+                0.02688,
+                0.03676,
+                0.03696,
+                null,
+                null
+            ],
+            "last_value": 0.04,
+            "minimum_value": null,
+            "maximum_value": null,
+            "average_value": 0.03
+        },
+        {
+            "metric_id": 3,
+            "metric": "Centreon-Server: rtmax",
+            "metric_legend": "Centreon-Server: rtmax",
+            "unit": "ms",
+            "min": null,
+            "max": null,
+            "ds_data": {
+                "ds_color_line": "#525256",
+                "ds_color_area": "#525256",
+                "ds_filled": false,
+                "ds_invert": true,
+                "ds_legend": null,
+                "ds_stack": true,
+                "ds_order": 2,
+                "ds_transparency": 80.0,
+                "ds_color_line_mode": 0
+            },
+            "displayAs": "line",
+            "legend": "Centreon-Server: Round-Trip Maximum Time",
+            "stack": 0,
+            "warning_high_threshold": null,
+            "critical_high_threshold": null,
+            "warning_low_threshold": null,
+            "critical_low_threshold": null,
+            "ds_order": 2,
+            "data": [
+                0.11372,
+                0.05604,
+                0.08556,
+                0.02548,
+                0.05352,
+                0.05336,
+                0.109,
+                0.04112,
+                0.05504,
+                0.06812,
+                0.08644,
+                null,
+                null
+            ],
+            "last_value": 0.09,
+            "minimum_value": null,
+            "maximum_value": 0.11,
+            "average_value": null
+        },
+        {
+            "metric_id": 4,
+            "metric": "Centreon-Server: rtmin",
+            "metric_legend": "Centreon-Server: rtmin",
+            "unit": "ms",
+            "min": null,
+            "max": null,
+            "ds_data": {
+                "ds_color_line": "#191777",
+                "ds_color_area": "#191777",
+                "ds_filled": false,
+                "ds_invert": false,
+                "ds_legend": null,
+                "ds_stack": true,
+                "ds_order": 2,
+                "ds_transparency": 80.0,
+                "ds_color_line_mode": 0
+            },
+            "displayAs": "line",
+            "legend": "Centreon-Server: Round-Trip Minimum Time",
+            "stack": 0,
+            "warning_high_threshold": null,
+            "critical_high_threshold": null,
+            "warning_low_threshold": null,
+            "critical_low_threshold": null,
+            "ds_order": 2,
+            "data": [
+                0.00984,
+                0.008,
+                0.00784,
+                0.00624,
+                0.00932,
+                0.01348,
+                0.01796,
+                0.0064,
+                0.01148,
+                0.01644,
+                0.01168,
+                null,
+                null
+            ],
+            "last_value": 0.01,
+            "minimum_value": 0.01,
+            "maximum_value": null,
+            "average_value": null
+        }
+    ],
+    "times": [
+        "2024-06-19T10:50:00+02:00",
+        "2024-06-19T10:55:00+02:00",
+        "2024-06-19T11:00:00+02:00",
+        "2024-06-19T11:05:00+02:00",
+        "2024-06-19T11:10:00+02:00",
+        "2024-06-19T11:15:00+02:00",
+        "2024-06-19T11:20:00+02:00",
+        "2024-06-19T11:25:00+02:00",
+        "2024-06-19T11:30:00+02:00",
+        "2024-06-19T11:35:00+02:00",
+        "2024-06-19T11:40:00+02:00",
+        "2024-06-19T11:45:00+02:00",
+        "2024-06-19T11:50:00+02:00"
+    ]
+}

package/src/Graph/mockedData/pingServiceMixedStacked.json

@@ -4,6 +4,51 @@
     "title": "Ping service"
   },
   "metrics": [
+    {
+      "metric_id": 10,
+      "metric": "Space used",
+      "metric_legend": "Space used",
+      "unit": "B",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#654321",
+        "ds_color_area": "#654321",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Space used",
+      "stack": 1,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        7277.536221378278,
+        1070.9229992641347,
+        5417.157870751178,
+        7650.368581547736,
+        3062.1382654626154,
+        6896.485403855089,
+        6016.271762192416,
+        592.4173666516415,
+        9130.151161464735,
+        2556.376532531991,
+        8085.328518673757,
+        6283.734720996918,
+        5617.226479531896
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
     {
       "metric_id": 2,
       "metric": "Centreon-Server: pl",
@@ -200,4 +245,4 @@
     "2024-06-19T11:45:00+02:00",
     "2024-06-19T11:50:00+02:00"
   ]
-}
+}

package/src/Graph/mockedData/pingServiceStacked.json

@@ -49,6 +49,51 @@
       "maximum_value": 0.0,
       "average_value": 0.0
     },
+    {
+      "metric_id": 10,
+      "metric": "Space used",
+      "metric_legend": "Space used",
+      "unit": "B",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#654321",
+        "ds_color_area": "#654321",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Space used",
+      "stack": 1,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 2,
+      "data": [
+        7277.536221378278,
+        1070.9229992641347,
+        5417.157870751178,
+        7650.368581547736,
+        3062.1382654626154,
+        6896.485403855089,
+        6016.271762192416,
+        592.4173666516415,
+        9130.151161464735,
+        2556.376532531991,
+        8085.328518673757,
+        6283.734720996918,
+        5617.226479531896
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
     {
       "metric_id": 1,
       "metric": "Centreon-Server: rta",
@@ -200,4 +245,4 @@
     "2024-06-19T11:45:00+02:00",
     "2024-06-19T11:50:00+02:00"
   ]
-}
+}

package/src/Typography/EllipsisTypography.tsx

@@ -1,8 +1,11 @@
 import { Box, Typography, TypographyProps } from '@mui/material';
 
-const EllipsisTypography = (props: TypographyProps): JSX.Element => {
+const EllipsisTypography = ({
+  containerClassname,
+  ...props
+}: TypographyProps & { containerClassname?: string }): JSX.Element => {
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box className={containerClassname} sx={{ width: '100%' }}>
       <Typography
         sx={{
           overflow: 'hidden',

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -131,15 +131,6 @@ describe('Access rights', () => {
 
     cy.findByTestId(`remove-Kathy Schmitt`).click();
 
-    cy.findByTestId(`remove-Kathy Schmitt`).should(
-      'have.attr',
-      'data-removed',
-      'true'
-    );
-    cy.contains(labels.list.removed).should('be.visible');
-
-    cy.findByTestId(`remove-Kathy Schmitt`).click();
-
     cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
@@ -175,6 +166,7 @@ describe('Access rights', () => {
   it('submits the new acces rights list with the updated contact', () => {
     const { save } = initialize({});
 
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
     cy.findByTestId(`role-Kathy Schmitt`).parent().click();
 
     cy.get('li[data-value="editor"]').click();
@@ -263,7 +255,7 @@ describe('Access rights', () => {
 
     cy.findByTestId('role-Entity Group 10').should('have.value', 'editor');
     cy.contains(labels.list.added).should('be.visible');
-    cy.contains('1 added').should('be.visible');
+    cy.contains('2 added').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -276,7 +268,7 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContactGroups');
 
-    cy.contains('Entity Group 10').click();
+    cy.contains('Entity Group 11').click();
     cy.findByTestId('add_role').parent().click();
     cy.get('li[data-value="editor"]').click();
     cy.findByTestId('add').click();
@@ -288,7 +280,7 @@ describe('Access rights', () => {
 
     cy.findByTestId('remove-Linda Schultz').click();
 
-    cy.contains('1 added | 1 updated | 1 removed').should('be.visible');
+    cy.contains('3 added | 1 updated | 1 removed').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -301,10 +293,10 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContacts');
 
-    cy.contains('Entity 10').click();
+    cy.contains('Entity 11').click();
     cy.findByLabelText(labels.add.autocompleteContact).should(
       'have.value',
-      'Entity  10'
+      'Entity  11'
     );
 
     cy.contains(labels.add.contactGroup).click();
@@ -324,18 +316,18 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContacts');
 
-    cy.contains('Entity 10').click();
+    cy.contains('Entity 11').click();
 
     cy.findByTestId('add').click();
 
-    cy.contains('Entity 10').should('be.visible');
+    cy.contains('Entity 11').should('be.visible');
 
     cy.contains(labels.list.added).should('be.visible');
 
-    cy.findByTestId('remove-Entity 10').click();
+    cy.findByTestId('remove-Entity 11').click();
 
-    cy.contains('Entity 10').should('not.exist');
-    cy.contains(labels.list.added).should('not.exist');
+    cy.contains('Entity 11').should('not.exist');
+    cy.contains('3 Added').should('not.exist');
 
     cy.makeSnapshot();
   });
@@ -347,7 +339,7 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContacts');
 
-    cy.contains('Entity 10').click();
+    cy.contains('Entity 11').click();
 
     cy.findByTestId('add_role').parent().click();
     cy.get('li[data-value="editor"]').click();
@@ -356,7 +348,7 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContacts');
 
-    cy.contains('Entity 11').click();
+    cy.contains('Entity 12').click();
 
     cy.findByTestId('add_role').should('have.value', 'viewer');
 
@@ -371,13 +363,13 @@ describe('Access rights', () => {
 
     cy.waitForRequest('@getContacts');
 
-    cy.contains('Entity 10').click();
+    cy.contains('Entity 11').click();
 
     cy.findByTestId('add').click();
 
-    cy.contains('Entity 10').should('be.visible');
+    cy.contains('Entity 11').should('be.visible');
 
-    cy.findByTestId('role-Entity 10').should('have.value', 'viewer');
+    cy.findByTestId('role-Entity 11').should('have.value', 'viewer');
     cy.contains(labels.list.added)
       .should('be.visible')
       .then(() => {

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -3,7 +3,7 @@ import { http, HttpResponse } from 'msw';
 
 import { SnackbarProvider } from '../../..';
 
-import AccessRightsForm from './AccessRights';
+import { AccessRights } from './AccessRights';
 import {
   accessRightsWithStates,
   buildResult,
@@ -13,8 +13,8 @@ import {
   roles
 } from './storiesData';
 
-const meta: Meta<typeof AccessRightsForm> = {
-  component: AccessRightsForm,
+const meta: Meta<typeof AccessRights> = {
+  component: AccessRights,
   parameters: {
     msw: {
       handlers: [
@@ -31,12 +31,12 @@ const meta: Meta<typeof AccessRightsForm> = {
 
 const Template = (args): JSX.Element => (
   <SnackbarProvider>
-    <AccessRightsForm {...args} />
+    <AccessRights {...args} />
   </SnackbarProvider>
 );
 
 export default meta;
-type Story = StoryObj<typeof AccessRightsForm>;
+type Story = StoryObj<typeof AccessRights>;
 
 export const Default: Story = {
   args: {

package/src/components/Form/AccessRights/AccessRights.tsx

@@ -23,7 +23,7 @@ interface Props {
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
 
-export const AccessRights = ({
+export const AccessRightsContent = ({
   initialValues,
   roles,
   endpoints,
@@ -54,8 +54,8 @@ export const AccessRights = ({
   );
 };
 
-export default (props: Props): JSX.Element => (
+export const AccessRights = (props: Props): JSX.Element => (
   <Provider>
-    <AccessRights {...props} />
+    <AccessRightsContent {...props} />
   </Provider>
 );

package/src/components/Form/index.ts

@@ -1,4 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export { default as AccessRights } from './AccessRights/AccessRights';
-export { default as AccessRightsV2 } from './AccessRights/AccessRights';
+export { AccessRights } from './AccessRights/AccessRights';
+export { AccessRights as AccessRightsV2 } from './AccessRights/AccessRights';

package/src/utils/index.ts

@@ -23,6 +23,6 @@ export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';
 export * from './resourcesStatusURL';
-export * from '../Graph/LineChart/helpers';
-export * from '../Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
+export * from '../Graph/Chart/helpers';
+export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
 export * from '../TimePeriods/helpers';

package/src/Graph/BarChart/SingleBar.tsx

@@ -1,62 +0,0 @@
-import { memo } from 'react';
-
-import { equals, pick } from 'ramda';
-
-import { useSingleBar, UseSingleBarProps } from './useSingleBar';
-import { BarStyle } from './models';
-
-const SingleBar = ({
-  lines,
-  secondUnit,
-  bar,
-  leftScale,
-  rightScale,
-  size,
-  isCenteredZero,
-  isHorizontal,
-  isTooltipHidden,
-  barStyle
-}: UseSingleBarProps & {
-  barStyle: BarStyle;
-}): JSX.Element => {
-  const { barLength, barPadding, listeners } = useSingleBar({
-    bar,
-    isCenteredZero,
-    isHorizontal,
-    isTooltipHidden,
-    leftScale,
-    lines,
-    rightScale,
-    secondUnit,
-    size
-  });
-
-  return (
-    <rect
-      data-testid={`single-bar-${bar.key}-${bar.index}-${bar.value}`}
-      fill={bar.color}
-      height={Math.ceil(isHorizontal ? barLength : bar.height)}
-      opacity={barStyle.opacity}
-      rx={(isHorizontal ? bar.width : bar.height) * barStyle.radius}
-      width={Math.ceil(isHorizontal ? bar.width : barLength)}
-      x={isHorizontal ? bar.x : barPadding}
-      y={isHorizontal ? barPadding : bar.y}
-      {...listeners}
-    />
-  );
-};
-
-const propsToMemoize = [
-  'bar',
-  'lines',
-  'secondUnit',
-  'size',
-  'isCenteredZero',
-  'isHorizontal',
-  'isTooltipHidden',
-  'barStyle'
-];
-
-export default memo(SingleBar, (prevProps, nextProps) =>
-  equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
-);