@centreon/ui 23.10.62 → 23.10.63

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

@@ -1,9 +1,10 @@
-import { always, cond, equals, isNil } from 'ramda';
-
-import { Theme, useTheme } from '@mui/material';
+import { equals, isNil } from 'ramda';
 
 import { getUnits, getYScale } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
+import { Thresholds } from '../../common/models';
+
+import { ThresholdLine } from './ThresholdLine';
 
 interface Props {
   displayedLines: Array<Line>;
@@ -11,24 +12,11 @@ interface Props {
   leftScale: (value: number) => number;
   rightScale: (value: number) => number;
   showTooltip: (props) => void;
-  thresholdLabels?: Array<string>;
   thresholdUnit?: string;
-  thresholds?: Array<number>;
+  thresholds: Thresholds;
   width: number;
 }
 
-interface GetColorProps {
-  index: number;
-  theme: Theme;
-}
-
-const getColor = ({ index, theme }: GetColorProps): string => {
-  return cond([
-    [equals(0), always(theme.palette.warning.main)],
-    [equals(1), always(theme.palette.error.main)]
-  ])(index);
-};
-
 const Thresholds = ({
   thresholds,
   leftScale,
@@ -37,15 +25,8 @@ const Thresholds = ({
   displayedLines,
   thresholdUnit,
   showTooltip,
-  hideTooltip,
-  thresholdLabels
-}: Props): JSX.Element | null => {
-  const theme = useTheme();
-
-  if (!thresholds) {
-    return null;
-  }
-
+  hideTooltip
+}: Props): JSX.Element => {
   const [firstUnit, secondUnit, thirdUnit] = getUnits(
     displayedLines as Array<Line>
   );
@@ -63,55 +44,32 @@ const Thresholds = ({
         unit: firstUnit
       });
 
-  const thresholdScaledValues = thresholds
-    .sort()
-    .map((threshold) => yScale(threshold));
-
   return (
     <>
-      {thresholdScaledValues.map((threshold, index) => {
-        return (
-          <line
-            data-testid={`threshold-${threshold}`}
-            key={`threshold-${thresholdLabels?.[index]}-${threshold}`}
-            stroke={getColor({
-              index,
-              theme
-            })}
-            strokeDasharray="5,5"
-            strokeWidth={2}
-            x1={0}
-            x2={width}
-            y1={threshold}
-            y2={threshold}
-          />
-        );
-      })}
-      {thresholdScaledValues.map((threshold, index) => {
-        return (
-          <line
-            data-testid={`threshold-${threshold}-tooltip`}
-            key={`threshold-${thresholdLabels?.[index]}-${threshold}-tooltip`}
-            stroke="transparent"
-            strokeWidth={4}
-            x1={0}
-            x2={width}
-            y1={threshold}
-            y2={threshold}
-            onMouseEnter={(): void => {
-              if (!thresholdLabels?.[index]) {
-                return;
-              }
-              showTooltip({
-                tooltipData: thresholdLabels?.[index],
-                tooltipLeft: 0,
-                tooltipTop: threshold
-              });
-            }}
-            onMouseLeave={hideTooltip}
-          />
-        );
-      })}
+      {thresholds.warning.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          key={`warning-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="warning"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
+      {thresholds.critical.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          key={`critical-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="critical"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
     </>
   );
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,12 +1,13 @@
 import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
-import { isNil } from 'ramda';
+import { flatten, isNil, pluck } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -35,16 +36,14 @@ import Thresholds from './BasicComponents/Thresholds';
 
 interface Props extends LineChartProps {
   curve: CurveType;
-  disabledThresholds?: boolean;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
-  thresholdLabels?: Array<string>;
   thresholdUnit?: string;
-  thresholds?: Array<number>;
+  thresholds?: ThresholdsModel;
 }
 
 const baseStyles = {
@@ -71,9 +70,7 @@ const LineChart = ({
   curve,
   marginBottom,
   thresholds,
-  thresholdUnit,
-  thresholdLabels,
-  disabledThresholds
+  thresholdUnit
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -107,6 +104,11 @@ const LineChart = ({
 
   const { title, timeSeries, baseAxis, lines } = graphData;
 
+  const thresholdValues = flatten([
+    pluck('value', thresholds?.warning || []),
+    pluck('value', thresholds?.critical || [])
+  ]);
+
   const { displayedLines, newLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
     lines,
@@ -129,10 +131,10 @@ const LineChart = ({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
         thresholdUnit,
-        thresholds: (!disabledThresholds && thresholds) || [],
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight: graphHeight - 35
       }),
-    [displayedLines, timeSeries, graphHeight]
+    [displayedLines, timeSeries, graphHeight, thresholdValues]
   );
 
   const rightScale = useMemo(
@@ -141,7 +143,7 @@ const LineChart = ({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
         thresholdUnit,
-        thresholds: (!disabledThresholds && thresholds) || [],
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
@@ -236,16 +238,15 @@ const LineChart = ({
                 zoomData={{ ...zoomPreview }}
               />
 
-              {!disabledThresholds && (
+              {thresholds?.enabled && (
                 <Thresholds
                   displayedLines={displayedLines}
                   hideTooltip={hideThresholdTooltip}
                   leftScale={leftScale}
                   rightScale={rightScale}
                   showTooltip={showThresholdTooltip}
-                  thresholdLabels={thresholdLabels}
                   thresholdUnit={thresholdUnit}
-                  thresholds={thresholds}
+                  thresholds={thresholds as ThresholdsModel}
                   width={graphWidth}
                 />
               )}

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

@@ -387,8 +387,21 @@ export const withThresholds: Story = {
   argTypes,
   args: {
     ...argumentsData,
-    thresholdLabels: ['threshold 1', 'threshold 2'],
-    thresholds: [300, 350]
+    thresholds: {
+      critical: [
+        {
+          label: 'critical',
+          value: 350
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning',
+          value: 300
+        }
+      ]
+    }
   },
   render: (args) => (
     <WrapperLineChart
@@ -403,7 +416,58 @@ export const withThresholdsAndUnit: Story = {
   args: {
     ...argumentsData,
     thresholdUnit: '%',
-    thresholds: [65, 79]
+    thresholds: {
+      critical: [
+        {
+          label: 'critical',
+          value: 79
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning',
+          value: 65
+        }
+      ]
+    }
+  },
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataLastDay as unknown as LineChartData}
+    />
+  )
+};
+
+export const thresholdsRange: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    thresholdUnit: '%',
+    thresholds: {
+      critical: [
+        {
+          label: 'critical 1',
+          value: 60
+        },
+        {
+          label: 'critical 2',
+          value: 79
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'warning 1',
+          value: 20
+        },
+        {
+          label: 'warning 2',
+          value: 30
+        }
+      ]
+    }
   },
   render: (args) => (
     <WrapperLineChart

package/src/Graph/LineChart/index.tsx

@@ -10,7 +10,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 
 import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -25,16 +25,14 @@ dayjs.extend(timezonePlugin);
 interface Props extends Partial<LineChartProps> {
   curve?: CurveType;
   data?: LineChartData;
-  disabledThresholds?: boolean;
   end: string;
   legend: LegendModel;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
-  thresholdLabels?: Array<string>;
   thresholdUnit?: string;
-  thresholds?: Array<number>;
+  thresholds?: Thresholds;
 }
 
 const WrapperLineChart = ({
@@ -56,9 +54,7 @@ const WrapperLineChart = ({
   curve = Curve.curveLinear,
   marginBottom = 0,
   thresholds,
-  thresholdUnit,
-  thresholdLabels,
-  disabledThresholds
+  thresholdUnit
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -91,7 +87,6 @@ const WrapperLineChart = ({
               annotationEvent={annotationEvent}
               axis={axis}
               curve={curve}
-              disabledThresholds={disabledThresholds}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -102,7 +97,6 @@ const WrapperLineChart = ({
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}
-              thresholdLabels={thresholdLabels}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}
               timeShiftZones={timeShiftZones}

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -2,7 +2,7 @@ import { useMemo, useRef } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';
-import { head } from 'ramda';
+import { flatten, head, pluck } from 'ramda';
 import { Bar } from '@visx/shape';
 import { useSpring, animated } from '@react-spring/web';
 
@@ -17,7 +17,8 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
 
 import { SingleBarProps } from './models';
-import Thresholds, { barHeight, groupMargin, margin } from './Thresholds';
+import Thresholds, { groupMargin } from './Thresholds';
+import { barHeight, margin } from './ThresholdLine';
 
 interface Props extends SingleBarProps {
   height: number;
@@ -31,19 +32,21 @@ const baseStyles = {
 
 const ResponsiveSingleBar = ({
   data,
-  thresholdTooltipLabels,
   thresholds,
   width,
-  height,
-  disabledThresholds
+  height
 }: Props): JSX.Element => {
   const theme = useTheme();
 
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
+  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
   );
 
@@ -131,11 +134,10 @@ const ResponsiveSingleBar = ({
             x={0}
             y={groupMargin + margin}
           />
-          {!disabledThresholds && (
+          {thresholds.enabled && (
             <Thresholds
               hideTooltip={hideTooltip}
               showTooltip={showTooltip}
-              thresholdTooltipLabels={thresholdTooltipLabels}
               thresholds={thresholds}
               xScale={xScale}
             />

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -20,8 +20,21 @@ const Template = (props): JSX.Element => (
 export const success: Story = {
   args: {
     data: dataLastWeek,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 1.5]
+    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.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -38,8 +64,95 @@ 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 disabled: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const criticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const rangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical 1',
+          value: 0.5
+        },
+        {
+          label: 'Critical 2',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning 1',
+          value: 0.13
+        },
+        {
+          label: 'Warning 2',
+          value: 0.3
+        }
+      ]
+    }
   },
   render: Template
 };

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -0,0 +1,74 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { groupMargin } from './Thresholds';
+
+const lineMargin = 10;
+
+const thresholdLineHeight = 60 + 2 * lineMargin;
+
+export const margin = 40;
+
+export const barHeight = 50;
+
+interface Props {
+  hideTooltip: () => void;
+  label: string;
+  showTooltip: (args) => void;
+  thresholdType: string;
+  value: number;
+  xScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  xScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = xScale(value) || 0;
+
+  const bottom = barHeight + margin * 2;
+
+  const onMouseEnter = (left) => (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: left,
+      tooltipTop: bottom
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray={4}
+        strokeWidth={2}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+        onMouseEnter={onMouseEnter(scaledValue)}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};