@centreon/ui 25.3.4 → 25.4.0-MON-191119-npm-develop.0

package/src/Graph/Text/Text.tsx

@@ -10,6 +10,8 @@ import {
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 
+import { type ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { useTextStyles } from './Text.styles';
 
 export interface Props {
@@ -21,6 +23,8 @@ export interface Props {
     warning: string;
   };
   thresholds: Thresholds;
+  prefThresholds?: number;
+  minThresholds?: string;
 }
 
 export const Text = ({
@@ -28,10 +32,13 @@ export const Text = ({
   data,
   displayAsRaw,
   labels,
-  baseColor
-}: Props): JSX.Element | null => {
+  baseColor,
+  prefThresholds = 14,
+  minThresholds
+}: Props): ReactElement | null => {
   const theme = useTheme();
   const { classes, cx } = useTextStyles();
+  const { ref, width = 0 } = useResizeObserver();
 
   if (isNil(data)) {
     return null;
@@ -62,11 +69,15 @@ export const Text = ({
     })
   );
 
+  const canDisplayThresholdLabel = width > 150;
+  const warningLabel = canDisplayThresholdLabel ? `${labels.warning}: ` : '';
+  const criticalLabel = canDisplayThresholdLabel ? `${labels.critical}: ` : '';
+
   return (
-    <div className={classes.graphText}>
+    <div className={classes.graphText} ref={ref}>
       <FluidTypography
         max="40px"
-        pref={16}
+        pref={14}
         sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
         text={
           formatMetricValueWithUnit({
@@ -80,18 +91,20 @@ export const Text = ({
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.warning)}
+            containerClassName={cx(classes.thresholdLabel, classes.warning)}
             max="30px"
-            pref={14}
-            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            pref={prefThresholds}
+            text={`${warningLabel}${warningThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.critical)}
+            containerClassName={cx(classes.thresholdLabel, classes.critical)}
             max="30px"
-            pref={14}
-            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            pref={prefThresholds}
+            text={`${criticalLabel}${criticalThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
         </div>
       )}

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -7,6 +7,8 @@ import {
 import { Typography, useTheme } from '@mui/material';
 
 import dayjs from 'dayjs';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
 import { userAtom } from '@centreon/ui-context';
 import { Axis } from '@visx/visx';
@@ -22,6 +24,8 @@ import type { TimelineProps } from './models';
 import { useStyles } from './timeline.styles';
 import { useTimeline } from './useTimeline';
 
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
 interface Props extends TimelineProps {
   width: number;
   height: number;

package/src/Graph/Timeline/Timeline.tsx

@@ -1,14 +1,31 @@
+import type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
 import { ParentSize } from '../..';
 
 import ResponsiveTimeline from './ResponsiveTimeline';
 import type { TimelineProps } from './models';
 
-const Timeline = (props: TimelineProps): JSX.Element => (
-  <ParentSize>
+interface Props extends ParentSizeProps, TimelineProps {}
+
+const Timeline = ({
+  data,
+  startDate,
+  endDate,
+  TooltipContent,
+  tooltipClassName,
+  ...rest
+}: Props): JSX.Element => (
+  <ParentSize {...rest}>
     {({ width, height }) => (
-      <ResponsiveTimeline {...props} height={height} width={width} />
+      <ResponsiveTimeline
+        data={data}
+        startDate={startDate}
+        endDate={endDate}
+        TooltipContent={TooltipContent}
+        tooltipClassName={tooltipClassName}
+        height={height}
+        width={width}
+      />
     )}
   </ParentSize>
 );
-
 export default Timeline;

package/src/Graph/Tree/Links.tsx

@@ -26,7 +26,7 @@ const Links = <TData extends BaseProp>({
 }: Props<TData>): Array<JSX.Element> => {
   const theme = useTheme();
 
-  return links.map((link) => {
+  return links.map((link, idx) => {
     const ancestorIds = link.target
       .ancestors()
       .map((ancestor) => ancestor.data.data.id);
@@ -37,7 +37,7 @@ const Links = <TData extends BaseProp>({
 
     const LinkComponent = getLinkComponent(treeLink?.type);
 
-    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
+    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}-${idx}`;
 
     return (
       <LinkComponent

package/src/Graph/Tree/Tree.tsx

@@ -84,10 +84,10 @@ export const Tree = <TData extends BaseProp>({
   );
 
   return (
-    <Group left={node.width}>
+    <Group left={node.width / 2}>
       <VisxTree
         left={0}
-        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        nodeSize={[node.height + nodeMargins.x, node.height + node.width]}
         root={hierarchy(formattedTree, getExpanded)}
         separation={() => 1}
         size={[containerWidth, containerHeight]}

package/src/Graph/Tree/constants.ts

@@ -1,2 +1,2 @@
 export const margins = { bottom: 30, left: 30, right: 30, top: 30 };
-export const nodeMargins = { x: 90, y: 16 };
+export const nodeMargins = { x: 2 };

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -19,7 +19,10 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
+  legend: Pick<
+    LegendModel,
+    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
+  > & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -101,6 +104,7 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
+                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -122,6 +126,7 @@ const BaseChart = ({
             renderExtraComponent={legend.renderExtraComponent}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+            secondaryClick={legend?.secondaryClick}
           />
         </div>
       )}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -8,6 +8,7 @@ import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
+import { computeGElementMarginLeft } from '../utils';
 
 interface Props {
   allUnits: Array<string>;
@@ -58,10 +59,10 @@ const ChartSvgWrapper = ({
       width="100%"
     >
       <Group.Group
-        left={
-          maxAxisCharacters * 5 +
-          (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6)
-        }
+        left={computeGElementMarginLeft({
+          maxCharacters: maxAxisCharacters,
+          hasSecondUnit
+        })}
         top={margin.top}
       >
         {showGridLines && (

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
@@ -10,7 +12,7 @@ interface Props {
   title: string;
 }
 
-const Header = ({ title, header }: Props): JSX.Element => {
+const Header = ({ title, header }: Props): ReactElement => {
   const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -1,7 +1,8 @@
-import { MutableRefObject, useRef } from 'react';
+import { RefCallback } from 'react';
 
 import { equals, isNil } from 'ramda';
 
+import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
 import { margins } from '../margins';
 
@@ -20,8 +21,8 @@ interface UseComputeBaseChartDimensionsProps {
 interface UseComputeBaseChartDimensionsState {
   graphHeight: number;
   graphWidth: number;
-  legendRef: MutableRefObject<HTMLDivElement | null>;
-  titleRef: MutableRefObject<HTMLDivElement | null>;
+  legendRef: RefCallback<Element>;
+  titleRef: RefCallback<Element>;
 }
 
 export const useComputeBaseChartDimensions = ({
@@ -33,11 +34,14 @@ export const useComputeBaseChartDimensions = ({
   legendHeight,
   maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
-  const legendRef = useRef<HTMLDivElement | null>(null);
-  const titleRef = useRef<HTMLDivElement | null>(null);
+  const {
+    ref: legendRef,
+    width: legendRefWidth,
+    height: legendRefHeight
+  } = useResizeObserver();
+  const { ref: titleRef, height: titleRefHeight } = useResizeObserver();
 
-  const currentLegendHeight =
-    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+  const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
@@ -47,7 +51,7 @@ export const useComputeBaseChartDimensions = ({
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
     (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
-      ? legendRef.current?.getBoundingClientRect().width || 0
+      ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
@@ -62,7 +66,7 @@ export const useComputeBaseChartDimensions = ({
       ? (height || 0) -
         margin.top -
         legendBoundingHeight -
-        (titleRef.current?.getBoundingClientRect().height || 0) -
+        (titleRefHeight || 0) -
         5
       : 0;
 

package/src/Graph/common/timeSeries/index.test.ts

@@ -185,6 +185,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'black',
           display: true,
+          displayAs: undefined,
           filled: false,
           highlight: undefined,
           invert: null,
@@ -195,6 +196,7 @@ describe('timeSeries', () => {
           metric_id: 1,
           minimum_value: 0.5,
           name: 'Round-Trip-Time Average (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -204,6 +206,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'blue',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -214,6 +217,7 @@ describe('timeSeries', () => {
           metric_id: 2,
           minimum_value: 0.5,
           name: 'Time (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -223,6 +227,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -233,6 +238,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -242,6 +248,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -252,6 +259,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -261,6 +269,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -271,6 +280,7 @@ describe('timeSeries', () => {
           metric_id: 5,
           minimum_value: 0.5,
           name: 'Packet Loss (%)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: '%'
@@ -331,6 +341,7 @@ describe('timeSeries', () => {
         average_value: 1,
         color: 'black',
         display: true,
+        displayAs: undefined,
         filled: false,
         highlight: undefined,
         invert: null,
@@ -341,6 +352,7 @@ describe('timeSeries', () => {
         metric_id: 1,
         minimum_value: 0.5,
         name: 'Round-Trip-Time Average (ms)',
+        stackKey: null,
         stackOrder: null,
         transparency: 80,
         unit: 'ms'
@@ -389,6 +401,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -399,6 +412,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -408,6 +422,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -418,6 +433,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -475,6 +491,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -485,6 +502,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -503,6 +521,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -513,6 +532,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'