@centreon/ui 23.10.61 → 23.10.63

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}
+      />
+    </>
+  );
+};

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,20 +1,13 @@
-import { useTheme } from '@mui/material';
+import { Thresholds } from '../common/models';
 
-export const margin = 40;
-
-export const barHeight = 50;
+import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
 
-const lineMargin = 10;
-
-const thresholdLineHeight = 60 + 2 * lineMargin;
-
 interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
   xScale: (value: number) => number;
 }
 
@@ -22,79 +15,32 @@ const Thresholds = ({
   xScale,
   thresholds,
   showTooltip,
-  hideTooltip,
-  thresholdTooltipLabels
-}: Props): JSX.Element => {
-  const theme = useTheme();
-
-  const warningValue = thresholds[0];
-  const criticalValue = thresholds[1];
-  const warningTooltipLabel = thresholdTooltipLabels[0];
-  const criticalTooltipLabel = thresholdTooltipLabels[1];
-
-  const bottom = barHeight + margin * 2;
-
-  const onMouseEnter =
-    ({ label, left }) =>
-    (): void =>
-      showTooltip({
-        tooltipData: label,
-        tooltipLeft: left,
-        tooltipTop: bottom
-      });
-
-  return (
-    <>
-      <line
-        data-testid="warning-line"
-        stroke={theme.palette.warning.main}
-        strokeDasharray={4}
-        strokeWidth={2}
-        x1={xScale(warningValue)}
-        x2={xScale(warningValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-      />
-      <line
-        data-testid="critical-line"
-        stroke={theme.palette.error.main}
-        strokeDasharray={4}
-        strokeWidth={2}
-        x1={xScale(criticalValue)}
-        x2={xScale(criticalValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-      />
-      <line
-        data-testid="warning-line-tooltip"
-        stroke="transparent"
-        strokeWidth={5}
-        x1={xScale(warningValue)}
-        x2={xScale(warningValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-        onMouseEnter={onMouseEnter({
-          label: warningTooltipLabel,
-          left: xScale(warningValue)
-        })}
-        onMouseLeave={hideTooltip}
+  hideTooltip
+}: Props): JSX.Element => (
+  <>
+    {thresholds.warning.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`warning-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        thresholdType="warning"
+        value={value}
+        xScale={xScale}
       />
-      <line
-        data-testid="critical-line-tooltip"
-        stroke="transparent"
-        strokeWidth={5}
-        x1={xScale(criticalValue)}
-        x2={xScale(criticalValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-        onMouseEnter={onMouseEnter({
-          label: criticalTooltipLabel,
-          left: xScale(criticalValue)
-        })}
-        onMouseLeave={hideTooltip}
+    ))}
+    {thresholds.critical.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`critical-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        thresholdType="critical"
+        value={value}
+        xScale={xScale}
       />
-    </>
-  );
-};
+    ))}
+  </>
+);
 
 export default Thresholds;

package/src/Graph/SingleBar/models.ts

@@ -1,8 +1,6 @@
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 
 export interface SingleBarProps {
   data?: LineChartData;
-  disabledThresholds?: boolean;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }

package/src/Graph/Text/Text.tsx

@@ -2,7 +2,7 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValue,
   getMetricWithLatestData
@@ -13,19 +13,17 @@ import { useTextStyles } from './Text.styles';
 
 interface Props {
   data?: LineChartData;
-  disabledThresholds?: boolean;
   labels: {
     critical: string;
     warning: string;
   };
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
 export const Text = ({
   thresholds,
   data,
-  labels,
-  disabledThresholds
+  labels
 }: Props): JSX.Element | null => {
   const theme = useTheme();
   const { classes } = useTextStyles();
@@ -44,6 +42,20 @@ export const Text = ({
     thresholds
   });
 
+  const warningThresholdLabels = thresholds.warning.map(({ value }) =>
+    formatMetricValue({
+      unit: metricUnit,
+      value
+    })
+  );
+
+  const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
+    formatMetricValue({
+      unit: metricUnit,
+      value
+    })
+  );
+
   return (
     <div className={classes.graphText}>
       <Typography sx={{ color }} variant="h3">
@@ -53,25 +65,17 @@ export const Text = ({
         })}{' '}
         {metricUnit}
       </Typography>
-      {!disabledThresholds && (
+      {thresholds.enabled && (
         <div className={classes.thresholds}>
           <Typography sx={{ color: 'warning.main' }} variant="h5">
             {labels.warning}
             {': '}
-            {formatMetricValue({
-              unit: metricUnit,
-              value: thresholds[0]
-            })}{' '}
-            {metricUnit}
+            {warningThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
           <Typography sx={{ color: 'error.main' }} variant="h5">
             {labels.critical}
             {': '}
-            {formatMetricValue({
-              unit: metricUnit,
-              value: thresholds[1]
-            })}{' '}
-            {metricUnit}
+            {criticalThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
         </div>
       )}

package/src/Graph/common/models.ts

@@ -5,3 +5,15 @@ export interface LineChartData {
   metrics: Array<Metric>;
   times: Array<string>;
 }
+
+export interface Thresholds {
+  critical: Array<{
+    label: string;
+    value: number;
+  }>;
+  enabled: boolean;
+  warning: Array<{
+    label: string;
+    value: number;
+  }>;
+}

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

@@ -326,10 +326,19 @@ const getYScale = ({
 const getScale = ({
   graphValues,
   height,
-  stackedValues
+  stackedValues,
+  thresholds
 }): ScaleLinear<number, number> => {
-  const minValue = min(getMin(graphValues), getMin(stackedValues));
-  const maxValue = max(getMax(graphValues), getMax(stackedValues));
+  const minValue = Math.min(
+    getMin(graphValues),
+    getMin(stackedValues),
+    Math.min(...thresholds)
+  );
+  const maxValue = Math.max(
+    getMax(graphValues),
+    getMax(stackedValues),
+    Math.max(...thresholds)
+  );
 
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
 
@@ -343,10 +352,17 @@ const getScale = ({
 const getLeftScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight
+  valueGraphHeight,
+  thresholds,
+  thresholdUnit
 }: AxeScale): ScaleLinear<number, number> => {
   const [firstUnit, , thirdUnit] = getUnits(dataLines);
 
+  const shouldApplyThresholds =
+    equals(thresholdUnit, firstUnit) ||
+    equals(thresholdUnit, thirdUnit) ||
+    !thresholdUnit;
+
   const graphValues = isNil(thirdUnit)
     ? getMetricValuesForUnit({
         lines: dataLines,
@@ -370,7 +386,12 @@ const getLeftScale = ({
       })
     : [0];
 
-  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
+  return getScale({
+    graphValues,
+    height: valueGraphHeight,
+    stackedValues,
+    thresholds: shouldApplyThresholds ? thresholds : []
+  });
 };
 
 const getXScale = ({
@@ -386,7 +407,9 @@ const getXScale = ({
 const getRightScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight
+  valueGraphHeight,
+  thresholds,
+  thresholdUnit
 }: AxeScale): ScaleLinear<number, number> => {
   const [, secondUnit] = getUnits(dataLines);
 
@@ -396,6 +419,8 @@ const getRightScale = ({
     unit: secondUnit
   });
 
+  const shouldApplyThresholds = equals(thresholdUnit, secondUnit);
+
   const secondUnitHasStackedLines = isNil(secondUnit)
     ? false
     : hasUnitStackedLines({ lines: dataLines, unit: secondUnit });
@@ -407,7 +432,12 @@ const getRightScale = ({
       })
     : [0];
 
-  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
+  return getScale({
+    graphValues,
+    height: valueGraphHeight,
+    stackedValues,
+    thresholds: shouldApplyThresholds ? thresholds : []
+  });
 };
 
 const formatMetricValue = ({
@@ -476,7 +506,10 @@ const getTimeValue = ({
   xScale,
   timeSeries,
   marginLeft = margin.left
-}: TimeValueProps): TimeValue => {
+}: TimeValueProps): TimeValue | null => {
+  if (isNil(x)) {
+    return null;
+  }
   const date = xScale.invert(x - marginLeft);
   const index = bisectDate(getDates(timeSeries), date);
 

package/src/Graph/common/timeSeries/models.ts

@@ -65,6 +65,8 @@ export interface Xscale {
 export interface AxeScale {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
+  thresholdUnit?: string;
+  thresholds: Array<number>;
   valueGraphHeight: number;
 }
 
@@ -117,6 +119,6 @@ export interface YScales {
 export interface TimeValueProps {
   marginLeft?: number;
   timeSeries: Array<TimeValue>;
-  x: number;
+  x?: number;
   xScale: ScaleLinear<number, number>;
 }