@centreon/ui 23.10.61 → 23.10.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.61",
+  "version": "23.10.63",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -1,17 +1,18 @@
 import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
-import { useTransition, interpolate, animated } from '@react-spring/web';
-import { equals } from 'ramda';
+import { useTransition, to, animated } from '@react-spring/web';
+import { equals, includes, pluck } from 'ramda';
 
-import { Metric } from '../common/timeSeries/models';
+import { Typography } from '@mui/material';
 
-import { ThresholdType } from './models';
+import { Metric } from '../common/timeSeries/models';
+import { Thresholds } from '../common/models';
 
 type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
 
-const fromLeaveTransition = (): AnimatedStyles => ({
-  endAngle: 0,
+const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
+  endAngle,
   opacity: 0,
-  startAngle: 0
+  startAngle: -(Math.PI / 2)
 });
 const enterUpdateTransition = <T,>({
   startAngle,
@@ -30,7 +31,7 @@ type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
   hideTooltip?: () => void;
   metric?: Metric;
   showTooltip?: (args) => void;
-  thresholdTooltipLabels?: Array<string>;
+  thresholds: Thresholds;
 };
 
 const AnimatedPie = <Datum,>({
@@ -41,7 +42,7 @@ const AnimatedPie = <Datum,>({
   getColor,
   showTooltip,
   hideTooltip,
-  thresholdTooltipLabels = []
+  thresholds
 }: AnimatedPieProps<Datum>): JSX.Element => {
   const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
     enter: enterUpdateTransition,
@@ -54,26 +55,36 @@ const AnimatedPie = <Datum,>({
   return transitions((props, arc, { key }) => (
     <g key={key}>
       <animated.path
-        d={interpolate(
-          [props.startAngle, props.endAngle],
-          (startAngle, endAngle) =>
-            path({
-              ...arc,
-              endAngle,
-              startAngle
-            })
+        d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
+          path({
+            ...arc,
+            endAngle,
+            startAngle
+          })
         )}
         data-testid={`${arc.data?.value || arc.data}-arc`}
+        display={
+          includes('transparent', arc.data?.name || '') ? 'none' : 'inline'
+        }
         fill={getColor(arc)}
         onMouseEnter={(event) => {
-          const thresholdType = arc.data.name;
+          const thresholdType = arc.data?.name as string;
 
-          if (equals(thresholdType, ThresholdType.Success)) {
+          if (equals(thresholdType, 'success')) {
             return;
           }
 
           showTooltip?.({
-            tooltipData: thresholdTooltipLabels[thresholdType],
+            tooltipData: (
+              <div>
+                {pluck(
+                  'label',
+                  thresholds[thresholdType as 'warning' | 'critical']
+                ).map((label) => (
+                  <Typography key={label}>{label}</Typography>
+                ))}
+              </div>
+            ),
             tooltipLeft: event.clientX,
             tooltipTop: event.clientY
           });

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -20,8 +20,21 @@ const Template = (props): JSX.Element => (
 export const success: Story = {
   args: {
     data: dataLastWeek,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 0.6]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -29,8 +42,21 @@ export const success: Story = {
 export const warning: Story = {
   args: {
     data: dataLastWeek,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.2, 0.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -38,8 +64,73 @@ export const warning: Story = {
 export const critical: Story = {
   args: {
     data: dataLastWeek,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.13, 0.35]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const withCriticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const withRangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.55
+        },
+        {
+          label: 'Critical',
+          value: 0.65
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        },
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };

package/src/Graph/Gauge/Gauge.tsx

@@ -1,7 +1,6 @@
 import { Responsive } from '@visx/visx';
-import { sort, subtract } from 'ramda';
 
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 import { getMetricWithLatestData } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
 
@@ -9,21 +8,13 @@ import ResponsiveGauge from './ResponsiveGauge';
 
 interface Props {
   data?: LineChartData;
-  disabledThresholds?: boolean;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
-export const Gauge = ({
-  thresholds,
-  data,
-  thresholdTooltipLabels,
-  disabledThresholds
-}: Props): JSX.Element | null => {
+export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
-  const sortedThresholds = sort(subtract, thresholds);
 
   const metric = getMetricWithLatestData(data) as Metric;
 
@@ -31,11 +22,9 @@ export const Gauge = ({
     <Responsive.ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
-          disabledThresholds={disabledThresholds}
           height={height}
           metric={metric}
-          thresholdTooltipLabels={thresholdTooltipLabels}
-          thresholds={sortedThresholds}
+          thresholds={thresholds}
           width={width}
         />
       )}

package/src/Graph/Gauge/PieData.tsx

@@ -1,8 +1,10 @@
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
-import { T, always, cond, gt, head, identity } from 'ramda';
+import { identity } from 'ramda';
 
-import { Theme, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
+
+import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { thresholdThickness } from './Thresholds';
 import AnimatedPie from './AnimatedPie';
@@ -10,29 +12,11 @@ import { GaugeProps } from './models';
 
 const dataThickness = 45;
 
-interface GetColorFromDataProps {
-  data: number;
-  theme: Theme;
-  thresholds: Array<number>;
-}
-
-const getColorFromData = ({
-  data,
-  thresholds,
-  theme
-}: GetColorFromDataProps): string =>
-  cond([
-    [gt(head(thresholds) as number), always(theme.palette.success.main)],
-    [gt(thresholds[1]), always(theme.palette.warning.main)],
-    [T, always(theme.palette.error.main)]
-  ])(data);
-
 const PieData = ({
   metric,
   adaptedMaxValue,
   thresholds,
-  radius,
-  disabledThresholds
+  radius
 }: Omit<
   GaugeProps,
   'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
@@ -40,9 +24,9 @@ const PieData = ({
   const theme = useTheme();
 
   const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = disabledThresholds
+  const pieColor = !thresholds.enabled
     ? theme.palette.success.main
-    : getColorFromData({
+    : getColorFromDataAndTresholds({
         data: metric.data[0],
         theme,
         thresholds
@@ -69,7 +53,7 @@ const PieData = ({
           animate
           getColor={(arc) => getDataColor(arc.data)}
           getKey={(arc) => `${arc.data}`}
-          thresholdTooltipLabels={[]}
+          thresholds={thresholds}
         />
       )}
     </Pie>

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 
 import { Group } from '@visx/group';
-import { head } from 'ramda';
+import { flatten, head, pluck } from 'ramda';
 import { Tooltip } from '@visx/visx';
 
 import { Box, Fade, useTheme } from '@mui/material';
@@ -13,13 +13,11 @@ import { margins } from '../common/margins';
 
 import Thresholds from './Thresholds';
 import PieData from './PieData';
+import { GaugeProps } from './models';
 
-interface Props {
-  disabledThresholds?: boolean;
+interface Props extends Pick<GaugeProps, 'thresholds'> {
   height: number;
   metric: Metric;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
   width: number;
 }
 
@@ -32,9 +30,7 @@ const ResponsiveGauge = ({
   width,
   height,
   thresholds,
-  metric,
-  thresholdTooltipLabels,
-  disabledThresholds
+  metric
 }: Props): JSX.Element => {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -54,13 +50,17 @@ const ResponsiveGauge = ({
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
   const radius = Math.min(innerWidth, innerHeight) / 2;
+  const thresholdValues = flatten([
+    pluck('value', thresholds.warning),
+    pluck('value', thresholds.critical)
+  ]);
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
-    Math.max(...thresholds) * 1.1,
+    Math.max(...thresholdValues) * 1.1,
     head(metric.data) as number
   );
 
-  const pieColor = disabledThresholds
+  const pieColor = !thresholds.enabled
     ? theme.palette.success.main
     : getColorFromDataAndTresholds({
         data: metric.data[0],
@@ -79,17 +79,14 @@ const ResponsiveGauge = ({
         <Group left={centerX + margins.left} top={centerY + height / 6}>
           <Thresholds
             adaptedMaxValue={adaptedMaxValue}
-            disabledThresholds={disabledThresholds}
             hideTooltip={hideTooltip}
             metric={metric}
             radius={radius}
             showTooltip={showTooltip}
-            thresholdTooltipLabels={thresholdTooltipLabels}
             thresholds={thresholds}
           />
           <PieData
             adaptedMaxValue={adaptedMaxValue}
-            disabledThresholds={disabledThresholds}
             metric={metric}
             radius={radius}
             thresholds={thresholds}
@@ -114,7 +111,7 @@ const ResponsiveGauge = ({
           {metric.unit}
         </text>
       </svg>
-      <Fade in={tooltipOpen && !disabledThresholds}>
+      <Fade in={tooltipOpen && thresholds.enabled}>
         <Tooltip.Tooltip
           left={(tooltipLeft || 0) - svgLeft}
           style={{

package/src/Graph/Gauge/Thresholds.tsx

@@ -1,11 +1,11 @@
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
-import { pluck } from 'ramda';
+import { equals, pluck } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
 import AnimatedPie from './AnimatedPie';
-import { GaugeProps, ThresholdType } from './models';
+import { GaugeProps } from './models';
 
 export const thresholdThickness = 12;
 
@@ -15,72 +15,125 @@ const Thresholds = ({
   adaptedMaxValue,
   showTooltip,
   hideTooltip,
-  metric,
-  thresholdTooltipLabels,
-  disabledThresholds
+  metric
 }: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
   const theme = useTheme();
 
-  const namedThresholds = [
+  const criticalThresholdValues = pluck('value', thresholds.critical);
+  const warningThresholdValues = pluck('value', thresholds.warning);
+
+  const isCriticalLowerThanWarning =
+    criticalThresholdValues[0] < warningThresholdValues[0];
+
+  const criticalThreshold = isCriticalLowerThanWarning
+    ? [0, ...criticalThresholdValues, adaptedMaxValue]
+    : [...criticalThresholdValues, adaptedMaxValue];
+  const criticalThresholdArc = criticalThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'critical' : `transparent-${index}-critical`,
+      value: value - (criticalThreshold[index - 1] || 0)
+    };
+  });
+  const criticalThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', criticalThresholdArc),
+    range: ['transparent', theme.palette.error.main, 'transparent']
+  });
+
+  const warningThreshold = isCriticalLowerThanWarning
+    ? [0, ...warningThresholdValues, adaptedMaxValue]
+    : [...warningThresholdValues, adaptedMaxValue];
+  const warningThresholdArc = warningThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'warning' : `transparent-${index}-warning`,
+      value: value - (warningThreshold[index - 1] || 0)
+    };
+  });
+  const warningThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', warningThresholdArc),
+    range: ['transparent', theme.palette.warning.main, 'transparent']
+  });
+
+  const successThresholdArc = [adaptedMaxValue].map((value) => {
+    return {
+      name: 'success',
+      value
+    };
+  });
+  const successThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', successThresholdArc),
+    range: [theme.palette.success.main]
+  });
+
+  if (!thresholds.enabled) {
+    return (
+      <Pie
+        data={successThresholdArc}
+        endAngle={-Math.PI / 2}
+        innerRadius={radius - thresholdThickness}
+        outerRadius={radius}
+        pieSortValues={() => -1}
+        pieValue={(d) => d.value}
+        startAngle={Math.PI / 2}
+      >
+        {(pie) => (
+          <AnimatedPie<{ name: string; value: number }>
+            {...pie}
+            animate
+            getColor={(arc) => successThresholdScaleOrdinal(arc.data.name)}
+            getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+            hideTooltip={hideTooltip}
+            metric={metric}
+            showTooltip={showTooltip}
+            thresholds={thresholds}
+          />
+        )}
+      </Pie>
+    );
+  }
+
+  const arcs = [
     {
-      name: ThresholdType.Success,
-      value: thresholds[0]
+      thresholdArc: successThresholdArc,
+      thresholdScaleOrdinal: successThresholdScaleOrdinal
     },
     {
-      name: ThresholdType.Warning,
-      value: thresholds[1]
+      thresholdArc: warningThresholdArc,
+      thresholdScaleOrdinal: warningThresholdScaleOrdinal
     },
     {
-      name: ThresholdType.Error,
-      value: adaptedMaxValue
+      thresholdArc: criticalThresholdArc,
+      thresholdScaleOrdinal: criticalThresholdScaleOrdinal
     }
   ];
 
-  const adaptedThresholds = namedThresholds.map(({ name, value }, index) => {
-    return {
-      name,
-      value: value - (namedThresholds[index - 1]?.value || 0)
-    };
-  });
-
-  const getThresholdColor = scaleOrdinal({
-    domain: pluck('name', adaptedThresholds),
-    range: disabledThresholds
-      ? [
-          theme.palette.success.main,
-          theme.palette.success.main,
-          theme.palette.success.main
-        ]
-      : [
-          theme.palette.success.main,
-          theme.palette.warning.main,
-          theme.palette.error.main
-        ]
-  });
-
   return (
-    <Pie
-      data={adaptedThresholds}
-      endAngle={-Math.PI / 2}
-      innerRadius={radius - thresholdThickness}
-      outerRadius={radius}
-      pieSortValues={() => -1}
-      pieValue={(d) => d.value}
-      startAngle={Math.PI / 2}
-    >
-      {(pie) => (
-        <AnimatedPie<{ name: ThresholdType; value: number }>
-          {...pie}
-          animate
-          getColor={(arc) => getThresholdColor(arc.data.name)}
-          getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
-          hideTooltip={hideTooltip}
-          metric={metric}
-          showTooltip={showTooltip}
-          thresholdTooltipLabels={thresholdTooltipLabels}
-        />
-      )}
-    </Pie>
+    <>
+      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
+        <Pie
+          data={thresholdArc}
+          endAngle={-Math.PI / 2}
+          innerRadius={radius - thresholdThickness}
+          key={`arc-${thresholdArc[0].name}`}
+          outerRadius={radius}
+          pieSortValues={() => -1}
+          pieValue={(d) => d.value}
+          startAngle={Math.PI / 2}
+        >
+          {(pie) => (
+            <AnimatedPie<{ name: string; value: number }>
+              {...pie}
+              animate
+              getColor={(arc) => thresholdScaleOrdinal(arc.data.name)}
+              getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+          )}
+        </Pie>
+      ))}
+    </>
   );
 };
 

package/src/Graph/Gauge/models.ts

@@ -1,15 +1,14 @@
+import { Thresholds } from '../common/models';
 import { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;
-  disabledThresholds?: boolean;
   height: number;
   hideTooltip: () => void;
   metric: Metric;
   radius: number;
   showTooltip: (args) => void;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
   width: number;
 }
 

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

@@ -0,0 +1,64 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+interface Props {
+  hideTooltip: () => void;
+  label: string;
+  showTooltip: (args) => void;
+  thresholdType: string;
+  value: number;
+  width: number;
+  yScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  yScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  width
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = yScale(value);
+
+  const onMouseEnter = (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: 0,
+      tooltipTop: scaledValue
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="5,5"
+        strokeWidth={2}
+        x1={0}
+        x2={width}
+        y1={scaledValue}
+        y2={scaledValue}
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={0}
+        x2={width}
+        y1={scaledValue}
+        y2={scaledValue}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};