@centreon/ui 24.4.59 → 24.4.61

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/Legend/Legend.tsx

@@ -0,0 +1,21 @@
+import { LegendOrdinal } from '@visx/legend';
+import { scaleOrdinal } from '@visx/scale';
+
+import { LegendProps } from './models';
+
+const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
+  const legendScale = scaleOrdinal({
+    domain: scale.domain,
+    range: scale.range
+  });
+
+  return (
+    <LegendOrdinal
+      direction={direction}
+      labelMargin="0 16px 0 0"
+      scale={legendScale}
+    />
+  );
+};
+
+export default Legend;

package/src/Graph/Legend/index.ts

@@ -0,0 +1 @@
+export { default as Legend } from './Legend';

package/src/Graph/Legend/models.ts

@@ -0,0 +1,11 @@
+export type LegendDirection = 'row' | 'column';
+
+export interface LegendScale {
+  domain: Array<number | string>;
+  range: Array<string>;
+}
+
+export interface LegendProps {
+  direction?: LegendDirection;
+  scale: LegendScale;
+}

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { isEmpty, isNil } from 'ramda';
 
-import { Circle } from './models';
+import { Circle as CircleModel } from './models';
 import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({
@@ -11,7 +11,7 @@ const Circle = ({
   timeSeries,
   getX,
   getCountDisplayedCircles
-}: Circle): JSX.Element | null => {
+}: CircleModel): JSX.Element | null => {
   const coordinates = useCoordinateCircle({
     getCountDisplayedCircles,
     getX,

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -2,7 +2,7 @@ import { equals, isNil } from 'ramda';
 
 import { getUnits, getYScale } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
-import { Thresholds } from '../../common/models';
+import { Thresholds as ThresholdsModel } from '../../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -13,7 +13,7 @@ interface Props {
   rightScale: (value: number) => number;
   showTooltip: (props) => void;
   thresholdUnit?: string;
-  thresholds: Thresholds;
+  thresholds: ThresholdsModel;
   width: number;
 }
 

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -28,7 +28,7 @@ const useFilterLines = ({
   linesGraph,
   setLinesGraph
 }: UseFilterLines): Result => {
-  const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
+  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -2,7 +2,7 @@ import { Shape } from '@visx/visx';
 
 import { grey } from '@mui/material/colors';
 
-import { GuidingLines } from './models';
+import { GuidingLines as GuidingLinesModel } from './models';
 import useTickGraph from './useTickGraph';
 
 const GuidingLines = ({
@@ -10,7 +10,7 @@ const GuidingLines = ({
   xScale,
   graphHeight,
   graphWidth
-}: GuidingLines): JSX.Element | null => {
+}: GuidingLinesModel): JSX.Element | null => {
   const { positionX, positionY } = useTickGraph({
     timeSeries,
     xScale

package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -26,7 +26,7 @@ const EventAnnotations = ({
   color,
   annotationHoveredId
 }: Props): JSX.Element => {
-  const events = filter(propEq('type', type), data);
+  const events = filter(propEq(type, 'type'), data);
 
   return (
     <>

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/Legend/useLegend.ts

@@ -27,9 +27,9 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq('display', false), lines);
+  const displayedLines = reject(propEq(false, 'display'), lines);
   const getLineByMetric = (metric_id: number): Line =>
-    find(propEq('metric_id', metric_id), lines) as Line;
+    find(propEq(metric_id, 'metric_id'), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
     const data = lines.map((line) => ({
@@ -92,7 +92,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
+      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

package/src/Graph/LineChart/helpers/doc.ts

@@ -69,21 +69,24 @@ export const getDescription = ({ sections }: Description): string => {
       })}<br></details>`;
     }
 
-    const formattedProps = props.reduce((accumulator, currentValue, index) => {
-      const key = Object.keys(currentValue)[0];
-      const { description, type } = currentValue[key];
-      const body = `${accumulator} ${getBodyDescription({
-        description,
-        key,
-        type
-      })}`;
+    const formattedProps = props.reduce(
+      (accumulator, currentValue, index) => {
+        const key = Object.keys(currentValue)[0];
+        const { description, type } = currentValue[key];
+        const body = `${accumulator} ${getBodyDescription({
+          description,
+          key,
+          type
+        })}`;
 
-      if (!equals(index, props.length - 1)) {
-        return body;
-      }
+        if (!equals(index, props.length - 1)) {
+          return body;
+        }
 
-      return `${body}</details>`;
-    }, getInitialValue({ section: name, type: item?.type }));
+        return `${body}</details>`;
+      },
+      getInitialValue({ section: name, type: item?.type })
+    );
 
     return formattedProps as string;
   });

package/src/Graph/LineChart/helpers/index.ts

@@ -14,7 +14,7 @@ import { LineChartData } from '../../common/models';
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq('display', false), sortedLines);
+  const displayedLines = reject(propEq(false, 'display'), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

package/src/Graph/LineChart/index.stories.tsx

@@ -39,8 +39,7 @@ import { Interval, ThresholdType, TooltipData } from './models';
 import WrapperLineChart from './index';
 
 const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart,
-  tags: ['autodocs']
+  component: WrapperLineChart
 };
 export default meta;
 
@@ -353,6 +352,9 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 

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/PieChart/PieChart.cypress.spec.tsx

@@ -0,0 +1,169 @@
+import numeral from 'numeral';
+
+import PieChart from './PieChart';
+import { ArcType, PieProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithNullValues = [
+  { color: '#88B922', label: 'Ok', value: 0 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '500px',
+  height = '500px',
+  data = defaultData,
+  ...args
+}: Omit<PieProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <PieChart {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Pie chart', () => {
+  it('renders pie chart correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('pieChart')
+      .should('have.css', 'width', '300px')
+      .and('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a donut when variant is set to "donut"', () => {
+    initialize({ variant: 'donut' });
+    cy.get('[data-variant="donut"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a pie when variant is set to "pie"', () => {
+    initialize({ variant: 'pie' });
+    cy.get('[data-variant="pie"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+  it('conditionally displays values on arcs based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on arcs in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts outer radius when chart dimensions are too small', () => {
+    initialize({
+      displayLegend: false,
+      height: '120px',
+      title: 'hosts',
+      variant: 'donut',
+      width: '120px'
+    });
+
+    cy.get('[data-variant="donut"]').should('have.css', 'width', '100px');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a message "No Data Available" when all values are null', () => {
+    initialize({ data: dataWithNullValues, title: 'host' });
+
+    cy.contains('No Data Available');
+
+    cy.makeSnapshot();
+  });
+});