@centreon/ui 24.4.1-MON-24235-Filter-App-token.14 → 24.4.1-MON-develop-dashboard.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-24235-Filter-App-token.14",
+  "version": "24.4.1-MON-develop-dashboard.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -28,6 +28,7 @@
   "author": {
     "name": "centreon@centreon.com"
   },
+  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonProps, DialogContentText, Typography } from '@mui/material';
+import { DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -6,23 +6,15 @@ type Props = DialogProps & {
   children?: JSX.Element;
   labelMessage?: string | null;
   labelSecondMessage?: string | null;
-  restCancelButtonProps?: ButtonProps;
-  restConfirmButtonProps?: ButtonProps;
 };
 
 const Confirm = ({
   labelMessage,
   labelSecondMessage,
   children,
-  restCancelButtonProps,
-  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => (
-  <Dialog
-    restCancelButtonProps={restCancelButtonProps}
-    restConfirmButtonProps={restConfirmButtonProps}
-    {...rest}
-  >
+  <Dialog {...rest}>
     <DialogContentText>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}

package/src/Dialog/index.tsx

@@ -9,8 +9,7 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress,
-  ButtonProps
+  CircularProgress
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -49,8 +48,6 @@ export type Props = {
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
-  restCancelButtonProps?: ButtonProps;
-  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -73,8 +70,6 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
-  restCancelButtonProps,
-  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -106,7 +101,6 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
-            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -119,7 +113,6 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
-          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

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

@@ -0,0 +1,102 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Props, Gauge } from './Gauge';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Gauge
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Gauge', () => {
+  it('does not display the gauge when there is no data', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+  });
+
+  it('displays the gauge as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
+    cy.findByTestId('1.1500000000000001-arc').should('be.visible');
+    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the gauge as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
+    cy.findByTestId('1.25-arc').should('be.visible');
+    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the gauge as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
+    cy.findByTestId('0.6399999999999999-arc').should('be.visible');
+    cy.findByTestId('0.54-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.findByTestId('0.37-arc').should('be.visible');
+    cy.findByTestId('0.09999999999999998-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the threshold tooltip when a threshold is hovered', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.findByTestId('1.1500000000000001-arc').trigger('mouseover', {
+      force: true
+    });
+
+    cy.contains('Warning').should('be.visible');
+
+    cy.findByTestId('0.15000000000000013-arc').trigger('mouseover', {
+      force: true
+    });
+
+    cy.contains('Critical').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/Gauge/Gauge.tsx

@@ -5,7 +5,7 @@ import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
 
-interface Props {
+export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

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

@@ -0,0 +1,145 @@
+import { pluck } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import EllipsisTypography from '../../Typography/EllipsisTypography';
+
+import HeatMap from './HeatMap';
+import heatMapData from './HeatMapData.json';
+import { HeatMapProps } from './model';
+
+const dataIds = pluck('id', heatMapData);
+
+interface Data {
+  counter: number;
+  host: string;
+  service: string;
+}
+
+const TileContent = ({
+  isSmallestSize,
+  data
+}: {
+  data: Data;
+  isSmallestSize: boolean;
+}): JSX.Element | false =>
+  !isSmallestSize && (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: 'common.black',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+      }}
+    >
+      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
+    </Box>
+  );
+
+const initialize = ({
+  width = '100vw',
+  height = '100vh',
+  ...args
+}: Omit<HeatMapProps<Data>, 'tiles' | 'children'> & {
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <HeatMap tiles={heatMapData} {...args}>
+          {TileContent}
+        </HeatMap>
+      </div>
+    )
+  });
+};
+
+describe('HeatMap', () => {
+  it('displays tiles', () => {
+    initialize({});
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('does not display the tooltip when the prop is not set and the tile is hovered', () => {
+    initialize({});
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.findByTestId(`tooltip-${dataIds[0]}`).should('not.exist');
+  });
+
+  it('displays the tooltip when the prop is set and the tile is hovered', () => {
+    initialize({
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays the tooltip conditionally when the prop is set and the tile is hovered', () => {
+    initialize({
+      displayTooltipCondition: ({ counter }) => counter > 100,
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'not.exist'
+    );
+
+    cy.findByTestId(dataIds[1]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-779`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays tiles with fixed size', () => {
+    initialize({ height: '200px', tileSizeFixed: true, width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('displays tiles as small when the container width is under the breakpoint', () => {
+    initialize({ height: '200px', width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display tiles as small when the contains width is 0', () => {
+    initialize({ height: '200px', width: '0px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('not.exist');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a single tile', () => {
+    initialize({ tiles: [heatMapData[0]] });
+    cy.findByTestId(dataIds[0]).should('be.visible');
+  });
+});

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -3,8 +3,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box, Typography } from '@mui/material';
 
-import EllipsisTypography from '../../Typography/EllipsisTypography';
-
 import heatMapData from './HeatMapData.json';
 
 import { HeatMap } from '.';
@@ -22,29 +20,6 @@ const meta: Meta<typeof HeatMap<Data>> = {
 export default meta;
 type Story = StoryObj<typeof HeatMap<Data>>;
 
-const TileContent = ({
-  isSmallestSize,
-  data
-}: {
-  data: Data;
-  isSmallestSize: boolean;
-}): JSX.Element | false =>
-  !isSmallestSize && (
-    <Box
-      sx={{
-        alignItems: 'center',
-        color: 'common.black',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%'
-      }}
-    >
-      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
-    </Box>
-  );
-
 const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
   return (
     <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -40,7 +40,7 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
+    if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
       return smallestTileSize;
     }
 
@@ -66,13 +66,19 @@ const ResponsiveHeatMap = <TData,>({
       }}
     >
       {tiles.map(({ backgroundColor, id, data }) => (
-        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
+        <Box
+          className={classes.heatMapTile}
+          data-testid={id}
+          key={id}
+          sx={{ backgroundColor }}
+        >
           <Tooltip
             hasCaret
             classes={{
               arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
               tooltip: classes.heatMapTooltip
             }}
+            data-testid={`tooltip-${data?.id}`}
             followCursor={false}
             label={
               displayTooltipCondition?.(data) &&

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 1.75;
+const legendItemHeightCompact = 2;
 
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -38,7 +38,7 @@ const LegendHeader = ({
 
   const getEndText = (): string => {
     if (value) {
-      return `${value}${hasUnit ? ` ${unit}` : ''}`;
+      return value;
     }
 
     return hasUnit ? ` ${unitName}` : '';

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -5,7 +5,7 @@ import { equals, find, isNil } from 'ramda';
 
 import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
-  formatMetricValue,
+  formatMetricValueWithUnit,
   getLineForMetric,
   getMetrics,
   getTimeValue
@@ -73,7 +73,7 @@ const useInteractiveValues = ({
       metric_id
     }) as Line;
 
-    const formattedValue = formatMetricValue({
+    const formattedValue = formatMetricValueWithUnit({
       base,
       unit,
       value

package/src/Graph/LineChart/index.tsx

@@ -78,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({

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

@@ -0,0 +1,121 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import SingleBar from './SingleBar';
+import { SingleBarProps } from './models';
+
+const initialize = (
+  args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <SingleBar
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Single bar', () => {
+  it('displays the single bar as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
+    cy.findByTestId('warning-line-0.4').should('be.visible');
+    cy.findByTestId('warning-line-0.4-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
+    cy.findByTestId('warning-line-0.2').should('be.visible');
+    cy.findByTestId('warning-line-0.2-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.3').should('be.visible');
+    cy.findByTestId('critical-line-0.3-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.findByTestId('warning-line-0.13').should('be.visible');
+    cy.findByTestId('warning-line-0.13-tooltip').should('be.visible');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.55').should('be.visible');
+    cy.findByTestId('critical-line-0.55-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.65').should('be.visible');
+    cy.findByTestId('critical-line-0.65-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the threshold tooltip when a threshold is hovered', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').trigger('mouseover');
+
+    cy.contains('Warning').should('be.visible');
+
+    cy.findByTestId('critical-line-1.5-tooltip').trigger('mouseover');
+
+    cy.contains('Critical').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays single bar as small when the props is set', () => {
+    initialize({ size: 'small', thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the value when the prop is set', () => {
+    initialize({ showLabels: false, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,101 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Text, Props } from './Text';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Text
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Text', () => {
+  it('displays the text as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
+    cy.contains('Warning: 0.5 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
+    cy.contains('Warning: 0.4 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
+    cy.contains('Warning: 0.2 s').should('be.visible');
+    cy.contains('Critical: 0.3 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
+    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the text', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays text with default values when the data is empty', () => {
+    initialize({
+      data: {
+        global: {},
+        metrics: [],
+        times: []
+      },
+      thresholds: successThresholds
+    });
+
+    cy.contains('0').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});