@centreon/ui 23.10.69 → 23.10.70

package/src/Graph/common/timeSeries/models.ts

@@ -0,0 +1,127 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+interface DsData {
+  ds_color_area: string;
+  ds_color_line: string;
+  ds_filled: boolean;
+  ds_invert: string | null;
+  ds_legend: string | null;
+  ds_order: string | null;
+  ds_stack: string | null;
+  ds_transparency: number;
+}
+
+export interface Metric {
+  average_value: number | null;
+  crit: number | null;
+  critical_high_threshold: number | null;
+  critical_low_threshold: number | null;
+  data: Array<number | null>;
+  ds_data?: DsData;
+  legend: string;
+  maximum_value: number | null;
+  metric: string;
+  minimum_value: number | null;
+  unit: string;
+  warning_high_threshold: number | null;
+  warning_low_threshold: number | null;
+}
+
+type TimeSeries = { timeTick: string };
+
+export type TimeValue = TimeSeries & {
+  [field: string]: number;
+};
+
+export interface Line {
+  areaColor: string;
+  average_value: number | null;
+  color: string;
+  display: boolean;
+  filled: boolean;
+  highlight?: boolean;
+  invert: string | null;
+  legend: string | null;
+  lineColor: string;
+  maximum_value: number | null;
+  metric: string;
+  minimum_value: number | null;
+  name: string;
+  stackOrder: number | null;
+  transparency: number;
+  unit: string;
+}
+
+export enum GraphOptionId {
+  displayEvents = 'displayEvents',
+  displayTooltips = 'displayTooltips'
+}
+
+export interface AdditionalDataProps<T> {
+  additionalData?: T | null;
+}
+
+export interface Xscale {
+  dataTime: Array<TimeValue>;
+  valueWidth: number;
+}
+export interface AxeScale {
+  dataLines: Array<Line>;
+  dataTimeSeries: Array<TimeValue>;
+  thresholdUnit?: string;
+  thresholds: Array<number>;
+  valueGraphHeight: number;
+}
+
+export interface GetYScaleProps {
+  hasMoreThanTwoUnits: boolean;
+  invert: string | null;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  secondUnit: string;
+  unit: string;
+}
+
+export interface LinesProps {
+  getSortedStackedLines: (lines: Array<Line>) => Array<Line>;
+  getTime: (timeValue: TimeValue) => number;
+  getUnits: (lines: Array<Line>) => Array<string>;
+  getYScale: ({
+    hasMoreThanTwoUnits,
+    unit,
+    secondUnit,
+    leftScale,
+    rightScale,
+    invert
+  }: GetYScaleProps) => ScaleLinear<number, number>;
+  graphHeight: number;
+  graphWidth: number;
+  leftScale: ScaleLinear<number, number, never>;
+  lines: Array<Line>;
+  rightScale: ScaleLinear<number, number, never>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number, never>;
+}
+
+export interface NewLines {
+  newLines: Array<Line>;
+  newSortedLines: Array<Line>;
+}
+
+export interface FormatMetricValueProps {
+  base?: number;
+  unit: string;
+  value: number | null;
+}
+
+export interface YScales {
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+}
+
+export interface TimeValueProps {
+  marginLeft?: number;
+  timeSeries: Array<TimeValue>;
+  x?: number;
+  xScale: ScaleLinear<number, number>;
+}

package/src/Graph/common/utils.ts

@@ -0,0 +1,75 @@
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
+
+import { Theme } from '@mui/material';
+
+import { Thresholds } from './models';
+
+interface GetColorFromDataAndThresholdsProps {
+  baseColor?: string;
+  data: number;
+  theme: Theme;
+  thresholds: Thresholds;
+}
+
+export const getColorFromDataAndTresholds = ({
+  data,
+  thresholds,
+  theme,
+  baseColor
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return baseColor || theme.palette.primary.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
+    [T, always(theme.palette.error.main)]
+  ])(data);
+};

package/src/Graph/index.ts

@@ -0,0 +1,4 @@
+export { default as LineChart } from './LineChart';
+export { Gauge } from './Gauge';
+export { SingleBar } from './SingleBar';
+export { Text as GraphText } from './Text';

package/src/Home.stories.mdx

@@ -1,8 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
-import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Typography, Link, Stack } from '@mui/material'
 
-import { MdxThemeProvider } from './StoryBookThemeProvider'
 
 <Meta title="Home" />
 
@@ -39,84 +37,3 @@ import { MdxThemeProvider } from './StoryBookThemeProvider'
     <Typography>20.04</Typography>
   </Link>
 </Stack>
-<br />
-
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Add stories</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <ul>
-      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
-      <li>
-        <Typography>Add a title, the component and argTypes</Typography>
-        <Typography>Example: </Typography>
-
-        ```typescript
-        export default {
-          title: 'MyComponent',
-          Component: MyComponent,
-          argTypes: {
-            propA: { control: 'text' },
-            propB: { control: 'number' },
-          },
-        };
-        ```
-
-      </li>
-      <li>
-        <Typography>Create a playground for your component</Typography>
-
-        ```typescript
-          const Template: ComponentStory<typeof MyComponent> = (args) => (
-            <MyComponent {...args} />
-          );
-
-          export const Playground = Template.bind({});
-        ```
-
-      </li> 
-      <li>
-        <Typography>Then add your story</Typography>
-
-        ```typescript
-          export const basic = Template.bind({});
-          basic.args = { propA: 'test', propB: 0 };
-        ```
-
-      </li>
-    </ul>
-  </AccordionDetails>
-</Accordion>
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Run tests</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <Typography>There are two kinds of tests in Centreon UI.</Typography>
-    <Typography>Jest + RTL: Component testing</Typography>
-    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
-    <br />
-
-    <Typography>Run all the test (Jest + Storyshots)</Typography>
-    `pnpm build:storybook && pnpm t`
-    <br />
-
-    <Typography>Run storyshots following one or more story title</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
-    <br />
-
-    <Typography>Update snapshots</Typography>
-    `pnpm build:storybook && pnpm t -- -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
-  </AccordionDetails>
-</Accordion>

package/src/Image/Image.tsx

@@ -22,6 +22,10 @@ interface Props {
 
 const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
   (_, { width, height, variant }) => ({
+    fallbackContainer: {
+      height: '100%',
+      width: '100%'
+    },
     imageContent: {
       height,
       objectFit: variant,
@@ -41,14 +45,20 @@ const ImageContent = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ height, variant, width });
   const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+
   if (!isImageLoaded) {
-    return fallback;
+    return (
+      <div className={classes.fallbackContainer} data-testid={alt}>
+        {fallback}
+      </div>
+    );
   }
 
   return (
     <img
       alt={alt}
       className={cx(classes.imageContent, className)}
+      data-testid={alt}
       src={imagePath}
     />
   );

package/src/Image/index.stories.tsx

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

package/src/Image/index.test.tsx

@@ -1,12 +1,12 @@
 import { RenderResult, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'jotai';
 
-import { render } from '../testRenderer';
-import CentreonLogoLight from '../../assets/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';
 
-jest.mock('../../assets/centreon-logo-one-line-light.svg');
+jest.mock('../../@assets/centreon-logo-one-line-light.svg');
 
 const renderImage = (): RenderResult =>
   render(

package/src/InputField/Search/PersistentTooltip.tsx

@@ -10,7 +10,8 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5)
+    right: theme.spacing(0.5),
+    top: '40%'
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
@@ -72,7 +73,11 @@ const PersistentTooltip = ({
   );
 
   return (
-    <Tooltip classes={{ tooltip: classes.tooltip }} open={open} title={title}>
+    <Tooltip
+      classes={{ tooltip: classes.tooltip }}
+      open={openTooltip || open}
+      title={title}
+    >
       <IconButton
         aria-label={labelSearchHelp}
         size="small"

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -0,0 +1,159 @@
+import {
+  Method,
+  MultiConnectedAutocompleteField,
+  TestQueryProvider
+} from '@centreon/ui';
+
+import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
+
+const optionOne = 'My Option 1';
+
+describe('Multi connected autocomplete', () => {
+  beforeEach(() => {
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.interceptAPIRequest({
+        alias: 'getListOptions',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        response: optionsData
+      });
+    });
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.interceptAPIRequest({
+        alias: 'getSearchedOption',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        query: {
+          name: 'search',
+          value: JSON.stringify({
+            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
+          })
+        },
+        response: optionData
+      });
+    });
+
+    cy.mount({
+      Component: (
+        <TestQueryProvider>
+          <div style={{ paddingTop: 20 }}>
+            <MultiConnectedAutocompleteField
+              field="host.name"
+              getEndpoint={getEndpoint}
+              label={label}
+              placeholder={placeholder}
+            />
+          </div>
+        </TestQueryProvider>
+      )
+    });
+  });
+
+  it('displays and hides the list when the user double-clicks on the input', () => {
+    cy.contains(label).should('be.visible');
+
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+
+    cy.makeSnapshot('displays the list when the user clicks on the input');
+
+    cy.get('@input').click();
+
+    cy.get('@listOptions').should('not.exist');
+
+    cy.makeSnapshot('hides the list when the user clicks on the input');
+  });
+
+  it('displays exactly one option on the list when the user types that option', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.get('@input').type(optionOne);
+
+    cy.waitForRequest('@getSearchedOption');
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionData.result.length);
+    });
+
+    cy.get('@listOptions').within(() => {
+      cy.contains(optionOne).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays all options on the list when the user searches for and selects an option', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.get('@input').type(optionOne);
+
+    cy.waitForRequest('@getSearchedOption');
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionData.result.length);
+    });
+
+    cy.get('[type="checkbox"]').check();
+    cy.get('@input')
+      .parent()
+      .within(() => {
+        cy.contains(optionOne).should('be.visible');
+
+        cy.get('[data-testid="CancelIcon"]').should('be.visible');
+      });
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionsData.result.length);
+
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+
+    cy.makeSnapshot();
+  });
+});

package/src/InputField/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -6,31 +6,12 @@ import {
   RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../testRenderer';
-import { buildListingEndpoint } from '../../../../..';
+} from '../../../../../../test/testRenderer';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import MultiConnectedAutocompleteField from '.';
-
-const baseEndpoint = 'endpoint';
-
-const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
+import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
-const label = 'Multi Connected Autocomplete';
-
-const optionsData = {
-  meta: {
-    limit: 2,
-    page: 1,
-    total: 20
-  },
-  result: [
-    { id: 0, name: 'My Option 1' },
-    { id: 1, name: 'My Option 2' }
-  ]
-};
+import MultiConnectedAutocompleteField from '.';
 
 const renderMultiAutocompleteField = (): RenderResult =>
   render(

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -0,0 +1,22 @@
+import { buildListingEndpoint } from '../../../../../..';
+
+export const baseEndpoint = './endpoint';
+
+export const getEndpoint = (parameters): string => {
+  return buildListingEndpoint({ baseEndpoint, parameters });
+};
+
+export const label = 'Multi Connected Autocomplete';
+export const placeholder = 'Type here...';
+
+export const optionsData = {
+  meta: {
+    limit: 2,
+    page: 1,
+    total: 20
+  },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' }
+  ]
+};

package/src/InputField/Select/Autocomplete/Connected/index.stories.tsx

@@ -1,5 +1,3 @@
-import withMock from 'storybook-addon-mock';
-
 import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
 import { Listing } from '../../../../api/models';
@@ -8,7 +6,6 @@ import SingleConnectedAutocompleteField from './Single';
 import MultiConnectedAutocompleteField from './Multi';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Connected'
 };
 

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -7,7 +7,7 @@ import {
   resetMocks,
   mockResponse,
   getFetchCall
-} from '../../../../testRenderer';
+} from '../../../../../test/testRenderer';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
 import TestQueryProvider from '../../../../api/TestQueryProvider';