@centreon/ui 24.11.14 → 24.11.21

package/src/Form/index.ts

@@ -0,0 +1 @@
+export * from './Form';

package/src/Form/storiesData.tsx

@@ -1,13 +1,14 @@
 import { FormikValues, useFormikContext } from 'formik';
-import * as Yup from 'yup';
 import { equals, prop } from 'ramda';
 
-import { Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import MailIcon from '@mui/icons-material/MailOutline';
+import { Typography } from '@mui/material';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
 
+import { array, boolean, mixed, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -42,48 +43,43 @@ export interface BasicForm {
   sports: Array<SelectEntry>;
 }
 
-const selectEntryValidationSchema = Yup.object().shape({
-  id: Yup.number().required('Required'),
-  name: Yup.string().required('Required')
+const selectEntryValidationSchema = object().shape({
+  id: number().required('Required'),
+  name: string().required('Required')
 });
 
-export const basicFormValidationSchema = Yup.object().shape({
-  active: Yup.boolean().required('Active is required'),
-  activeSortableFieldsTable: Yup.boolean().required(
+export const basicFormValidationSchema = object().shape({
+  active: boolean().required('Active is required'),
+  activeSortableFieldsTable: boolean().required(
     'Active Sortable FieldsTable is required'
   ),
-  animals: Yup.array().of(selectEntryValidationSchema.required('Required')),
-  anotherText: Yup.string(),
-  certificate: Yup.string(),
+  animals: array().of(selectEntryValidationSchema.required('Required')),
+  anotherText: string(),
+  certificate: string(),
   class: selectEntryValidationSchema.nullable().required('Required'),
-  custom: Yup.string().required('Custom is required'),
-  email: Yup.string().email('Invalid email').required('Email is required'),
+  custom: string().required('Custom is required'),
+  email: string().email('Invalid email').required('Email is required'),
   group: selectEntryValidationSchema.nullable().required('Required'),
-  inviteUsers: Yup.array().of(
-    Yup.object({
-      email: Yup.string()
-        .email('Invalid user email')
-        .required('Email is required'),
+  inviteUsers: array().of(
+    object({
+      email: string().email('Invalid user email').required('Email is required'),
       role: selectEntryValidationSchema
     })
   ),
-  inviteUsers2: Yup.array().of(Yup.string().email('Invalid user email')),
-  isForced: Yup.boolean().required('Is forced is required'),
-  language: Yup.string().required('Language is required'),
-  name: Yup.string().required('Name is required'),
-  password: Yup.string().required('Password is required'),
-  roleMapping: Yup.array().of(
-    Yup.object({
+  inviteUsers2: array().of(string().email('Invalid user email')),
+  isForced: boolean().required('Is forced is required'),
+  language: string().required('Language is required'),
+  name: string().required('Name is required'),
+  password: string().required('Password is required'),
+  roleMapping: array().of(
+    object({
       role: selectEntryValidationSchema,
-      value: Yup.string().required('Role value is required')
+      value: string().required('Role value is required')
     })
   ),
-  scopes: Yup.array().of(
-    Yup.string().min(3, '3 characters min').required('Required')
-  ),
-  sports: Yup.array()
-    .of(selectEntryValidationSchema.required('Required'))
-    .min(2, 'Choose at least 2 sports')
+  scopes: array().of(string().min(3, '3 characters min').required('Required')),
+  sports: array().of(selectEntryValidationSchema.required('Required')),
+  file: mixed()
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -115,6 +111,11 @@ export const basicFormInitialValues = {
   isForced: false,
   language: 'French',
   name: '',
+  notifications: {
+    channels: { Icon: MailIcon, checked: true, label: 'mail' },
+    hostevents: ['ok', 'warning'],
+    includeServices: { checked: true, label: 'Include services for this host' }
+  },
   password: '',
   roleMapping: [
     {
@@ -134,7 +135,8 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: []
+  sports: [],
+  file: null
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -157,6 +159,10 @@ export const basicFormGroups: Array<Group> = [
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Second group',
     order: 2
+  },
+  {
+    name: 'Third group',
+    order: 3
   }
 ];
 
@@ -171,6 +177,10 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
+    text: {
+      endAdornment: <MailIcon />,
+      placeholder: 'Your email here'
+    },
     type: InputType.Text
   },
   {
@@ -205,6 +215,41 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
+  {
+    additionalLabel: 'Notifications',
+    fieldName: '',
+    grid: {
+      alignItems: 'center',
+      columns: [
+        {
+          checkbox: {
+            direction: 'horizontal'
+          },
+          fieldName: 'notifications.channels',
+          label: 'channels',
+          type: InputType.Checkbox
+        },
+        {
+          fieldName: 'notifications.includeServices',
+          label: 'Iclude services',
+          type: InputType.Checkbox
+        },
+        {
+          checkbox: {
+            direction: 'horizontal',
+            labelPlacement: 'top',
+            options: ['ok', 'warning', 'critical', 'unknown']
+          },
+          fieldName: 'notifications.hostevents',
+          label: 'host events',
+          type: InputType.CheckboxGroup
+        }
+      ]
+    },
+    group: 'Third group',
+    label: 'Notifications',
+    type: InputType.Grid
+  },
   {
     fieldName: 'anotherText',
     group: 'First group',
@@ -401,6 +446,16 @@ export const basicFormInputs: Array<InputProps> = [
       multilineRows: 4
     },
     type: InputType.Text
+  },
+  {
+    fieldName: 'file',
+    group: 'First group',
+    label: 'File',
+    type: InputType.File,
+    file: {
+      accept: 'image/*',
+      multiple: true
+    }
   }
 ];
 

package/src/Form/translatedLabels.ts

@@ -5,3 +5,4 @@ export const labelSaved = 'Saved';
 export const labelReset = 'Reset';
 export const labelDisplayThePassword = 'Display the password';
 export const labelHideThePassword = 'Hide the password';
+export const labelDropOrSelectAFile = 'Drop or select a file';

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

@@ -0,0 +1,294 @@
+import { renderHook } from '@testing-library/react';
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
+
+import { userAtom } from '@centreon/ui-context';
+
+import dataLastWeek from '../mockedData/lastWeek.json';
+import dataPingService from '../mockedData/pingService.json';
+import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
+import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+
+import BarChart, { BarChartProps } from './BarChart';
+
+const defaultStart = new Date(
+  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
+).toISOString();
+
+const defaultEnd = new Date(Date.now()).toISOString();
+
+const defaultArgs = {
+  end: defaultEnd,
+  height: 500,
+  loading: false,
+  start: defaultStart
+};
+
+const initialize = ({
+  data = dataPingService,
+  legend,
+  tooltip,
+  axis,
+  orientation,
+  barStyle
+}: Pick<
+  BarChartProps,
+  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'
+>): void => {
+  cy.adjustViewport();
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100%', width: '100%' }}>
+        <BarChart
+          axis={axis}
+          barStyle={barStyle}
+          data={data}
+          legend={legend}
+          orientation={orientation ?? 'horizontal'}
+          tooltip={tooltip}
+          {...defaultArgs}
+        />
+      </div>
+    )
+  });
+
+  cy.viewport('macbook-13');
+};
+
+const checkWidth = (orientation): void => {
+  if (orientation === 'vertical') {
+    cy.get('g[class*="visx-rows"] > line')
+      .eq(0)
+      .should('have.attr', 'x2')
+      .and('equal', '1135');
+
+    return;
+  }
+  cy.get('g[class*="visx-rows"] > line')
+    .eq(0)
+    .should('have.attr', 'x2')
+    .and('equal', '1170');
+};
+
+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';
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays the bar chart ${orientation}ly centered in zero`, () => {
+      initialize({ axis: { isCenteredZero: true }, orientation });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays the stacked bar chart ${orientation}ly`, () => {
+      initialize({ data: dataPingServiceStacked, orientation });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
+      initialize({ data: dataPingServiceMixedStacked, orientation });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+    });
+
+    it(`displays the stacked bar chart ${orientation}ly centered in zero`, () => {
+      initialize({
+        axis: { isCenteredZero: true },
+        data: dataPingServiceStacked,
+        orientation
+      });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data centered in zero`, () => {
+      initialize({
+        axis: { isCenteredZero: true },
+        data: dataPingServiceMixedStacked,
+        orientation
+      });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+    });
+
+    it(`displays bar chart ${orientation}ly with a custom style`, () => {
+      initialize({
+        barStyle: { opacity: 0.5, radius: 0.5 },
+        data: dataPingServiceMixedStacked,
+        orientation
+      });
+
+      checkWidth(orientation);
+      cy.contains('0 ms').should('be.visible');
+      cy.contains('20').should('be.visible');
+      cy.contains(':40 AM').should('be.visible');
+
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+    });
+  });
+
+  it('displays a tooltip when a single bar is hovered', () => {
+    initialize({
+      orientation: 'horizontal'
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('7.47 KB').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display a tooltip when a bar is hovered and a props is set', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'hidden',
+        sortOrder: 'descending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('not.exist');
+
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip when a stacked bar is hovered', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'ascending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+    cy.contains('0.02 ms').should('be.visible');
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'single',
+        sortOrder: 'descending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the bottom axis correctly when data starts from several days ago', () => {
+    initialize({
+      data: dataLastWeek,
+      orientation: 'horizontal'
+    });
+
+    cy.contains('05/31/2023').should('be.visible');
+    cy.contains('06/07/2023').should('be.visible');
+  });
+});

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -0,0 +1,213 @@
+import { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
+
+import { LineChartData } from '../common/models';
+import dataPingService from '../mockedData/pingService.json';
+import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
+import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+
+import BarChart from './BarChart';
+
+const meta: Meta<typeof BarChart> = {
+  component: BarChart
+};
+export default meta;
+
+type Story = StoryObj<typeof BarChart>;
+
+const defaultStart = new Date(
+  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
+).toISOString();
+
+const defaultEnd = new Date(Date.now()).toISOString();
+
+const defaultArgs = {
+  end: defaultEnd,
+  height: 500,
+  loading: false,
+  start: defaultStart
+};
+
+const Template = (args): JSX.Element => (
+  <BarChart data={dataPingService as unknown as LineChartData} {...args} />
+);
+
+export const Default: Story = {
+  args: defaultArgs,
+  render: Template
+};
+
+export const withCenteredZero: Story = {
+  args: {
+    ...defaultArgs,
+    axis: {
+      isCenteredZero: true
+    }
+  },
+  render: Template
+};
+
+export const vertical: Story = {
+  args: {
+    ...defaultArgs,
+    height: 800,
+    orientation: 'vertical'
+  },
+  render: Template
+};
+
+export const verticalCenteredZero: Story = {
+  args: {
+    ...defaultArgs,
+    axis: {
+      isCenteredZero: true
+    },
+    height: 800,
+    orientation: 'vertical'
+  },
+  render: Template
+};
+
+export const stacked: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStacked
+  },
+  render: Template
+};
+
+export const stackedVertical: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStacked,
+    height: 800,
+    orientation: 'vertical'
+  },
+  render: Template
+};
+
+export const stackedCenteredZero: Story = {
+  args: {
+    ...defaultArgs,
+    axis: {
+      isCenteredZero: true
+    },
+    data: dataPingServiceStacked
+  },
+  render: Template
+};
+
+export const stackedVerticalCenteredZero: Story = {
+  args: {
+    ...defaultArgs,
+    axis: {
+      isCenteredZero: true
+    },
+    data: dataPingServiceStacked,
+    height: 800,
+    orientation: 'vertical'
+  },
+  render: Template
+};
+
+export const thresholds: Story = {
+  args: {
+    ...defaultArgs,
+    thresholdUnit: 'ms',
+    thresholds: {
+      critical: [
+        {
+          label: 'critical 1',
+          value: 0.1
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning 1',
+          value: 0.05
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const thresholdsVertical: Story = {
+  args: {
+    ...defaultArgs,
+    axis: {
+      isCenteredZero: true
+    },
+    orientation: 'vertical',
+    thresholdUnit: 'ms',
+    thresholds: {
+      critical: [
+        {
+          label: 'critical 1',
+          value: 0.1
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning 1',
+          value: 0.05
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const thresholdStacked: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStacked,
+    thresholdUnit: 'ms',
+    thresholds: {
+      critical: [
+        {
+          label: 'critical 1',
+          value: 0.1
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning 1',
+          value: 0.05
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const customBarStyle: Story = {
+  args: {
+    ...defaultArgs,
+    barStyle: {
+      opacity: 0.5,
+      radius: 0.5
+    }
+  },
+  render: Template
+};
+
+export const mixedStacked: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceMixedStacked
+  },
+  render: Template
+};
+
+export const mixedStackedVertical: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceMixedStacked,
+    orientation: 'vertical'
+  },
+  render: Template
+};