@centreon/ui 23.10.121 → 24.4.1-0

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/HeatMap.styles.tsx

@@ -7,6 +7,7 @@ export const useHeatMapStyles = makeStyles()((theme) => ({
   heatMapTile: {
     alignItems: 'center',
     aspectRatio: '1 / 1',
+    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     justifyContent: 'center',
     width: '100%'

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
-import { equals, gt, lt } from 'ramda';
+import { T, equals, gt, lt } from 'ramda';
 
 import { Box } from '@mui/material';
 
@@ -20,7 +20,8 @@ const ResponsiveHeatMap = <TData,>({
   tiles,
   arrowClassName,
   tooltipContent,
-  tileSizeFixed
+  tileSizeFixed,
+  displayTooltipCondition = T
 }: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
 
@@ -39,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;
     }
 
@@ -65,20 +66,29 @@ 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={tooltipContent?.({
-              backgroundColor,
-              data,
-              id,
-              isSmallestSize
-            })}
+            label={
+              displayTooltipCondition?.(data) &&
+              tooltipContent?.({
+                backgroundColor,
+                data,
+                id,
+                isSmallestSize
+              })
+            }
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>

package/src/Graph/HeatMap/model.ts

@@ -21,6 +21,7 @@ export interface HeatMapProps<TData> {
     data,
     isSmallestSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
+  displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;
   tiles: Array<Tile<TData>>;
   tooltipContent?: ({

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/RegularLines/index.tsx

@@ -55,6 +55,7 @@ const RegularLine = ({
   if (filled) {
     return (
       <Shape.AreaClosed<TimeValue>
+        data-metric={metric_id}
         fill={getFillColor({ areaColor, transparency })}
         fillRule="nonzero"
         key={metric_id}
@@ -65,7 +66,7 @@ const RegularLine = ({
     );
   }
 
-  return <Shape.LinePath<TimeValue> {...props} />;
+  return <Shape.LinePath<TimeValue> data-metric={metric_id} {...props} />;
 };
 
 export default memo(RegularLine, (prevProps, nextProps) => {

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -45,10 +45,8 @@ const StackLines = ({
     >
       {({ stacks, path: linePath }): Array<JSX.Element> => {
         return stacks.map((stack, index) => {
-          const { areaColor, transparency, lineColor, highlight } = nth(
-            index,
-            lines
-          ) as Line;
+          const { areaColor, transparency, lineColor, highlight, metric_id } =
+            nth(index, lines) as Line;
 
           return (
             <g key={`stack-${prop('key', stack)}`}>
@@ -65,6 +63,7 @@ const StackLines = ({
               )}
               <path
                 d={linePath(stack) || ''}
+                data-metric={metric_id}
                 fill={getFillColor({ areaColor, transparency })}
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

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

@@ -2,6 +2,8 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
+import { margin } from '../common';
+
 interface Props {
   hideTooltip: () => void;
   label: string;
@@ -28,7 +30,7 @@ export const ThresholdLine = ({
   const onMouseEnter = (): void =>
     showTooltip({
       tooltipData: label,
-      tooltipLeft: 0,
+      tooltipLeft: -(margin.left + margin.right),
       tooltipTop: scaledValue
     });
 

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

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
+import { equals, propEq, reject } from 'ramda';
 
 import { Line } from '../../common/timeSeries/models';
 
@@ -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);
 
@@ -51,9 +51,7 @@ const useFilterLines = ({
       return;
     }
 
-    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
-
-    setLinesGraph(sortedLines);
+    setLinesGraph(filteredLines);
   }, [lines, displayThreshold]);
 
   return { displayedLines, newLines: linesGraph ?? lines };

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

@@ -1,41 +1,17 @@
-import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
 import Typography from '@mui/material/Typography';
 
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+import { useMemoComponent } from '@centreon/ui';
 
 import { useStyles } from '../LineChart.styles';
-import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
 import { LineChartHeader } from '../models';
-import { TimeValue } from '../../common/timeSeries/models';
 
 interface Props {
-  displayTimeTick?: boolean;
   header?: LineChartHeader;
-  timeSeries: Array<TimeValue>;
   title: string;
-  xScale: ScaleLinear<number, number>;
 }
 
-const Header = ({
-  title,
-  displayTimeTick = true,
-  header,
-  timeSeries,
-  xScale
-}: Props): JSX.Element => {
+const Header = ({ title, header }: Props): JSX.Element => {
   const { classes } = useStyles();
-  const { toDateTime } = useLocaleDateTimeFormat();
-
-  const { tickAxisBottom } = useTickGraph({
-    timeSeries,
-    xScale
-  });
-  const time =
-    displayTimeTick && !isNil(tickAxisBottom)
-      ? toDateTime(tickAxisBottom)
-      : null;
 
   const displayTitle = header?.displayTitle ?? true;
 
@@ -49,16 +25,12 @@ const Header = ({
               {title}
             </Typography>
           )}
-
-          <Typography align="center" style={{ height: 20 }} variant="body1">
-            {time}
-          </Typography>
         </div>
         {header?.extraComponent}
       </div>
     ),
 
-    memoProps: [time, timeSeries, xScale, displayTimeTick, title, header]
+    memoProps: [title, header]
   });
 };
 

package/src/Graph/LineChart/Icons/Downtime.tsx

@@ -1,9 +1,9 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { SvgIconProps } from '@mui/material';
 
-import { ReactComponent as IconDowntime } from '../../../@assets/icons/downtime.icon.svg';
+import { DowntimeIcon } from '../../../Icon/DowntimeIcon';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
-  <SvgIcon component={IconDowntime} {...props} />
+  <DowntimeIcon {...props} />
 );
 
 export default Downtime;

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/AnchorPoint/useTickGraph.ts

@@ -2,13 +2,12 @@ import { useEffect, useState } from 'react';
 
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
-import { isEmpty, isNil, not } from 'ramda';
 
 import useAxisY from '../../BasicComponents/Axes/useAxisY';
 import { margin } from '../../common';
-import { getMetrics, getTimeValue } from '../../../common/timeSeries';
+import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
-import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {
   positionX?: number;
@@ -42,14 +41,13 @@ const useTickGraph = ({
   const { axisRight, axisLeft } = useAxisY({ data: { baseAxis, lines } });
 
   const mousePosition = useAtomValue(mousePositionAtom);
-  const timeValueData = useAtomValue(timeValueAtom);
 
-  const metrics = getMetrics(timeValueData as TimeValue);
-
-  const containsMetrics = not(isNil(metrics)) && not(isEmpty(metrics));
-
-  const positionX = mousePosition ? mousePosition[0] - margin.left : undefined;
-  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
+  const positionX = mousePosition
+    ? mousePosition[0] - margin.left - 4
+    : undefined;
+  const positionY = mousePosition
+    ? mousePosition[1] - margin.top + 2
+    : undefined;
 
   useEffect(() => {
     if (!mousePosition) {
@@ -62,7 +60,7 @@ const useTickGraph = ({
     const mousePositionTimeTick = mousePosition
       ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
       : 0;
-    const timeTickValue = containsMetrics
+    const timeTickValue = mousePosition
       ? new Date(mousePositionTimeTick)
       : null;