@centreon/ui 23.10.62 → 23.10.63

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/utils.ts

@@ -1,20 +1,73 @@
-import { T, always, cond, gt, head } from 'ramda';
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
 
 import { Theme } from '@mui/material';
 
+import { Thresholds } from './models';
+
 interface GetColorFromDataAndThresholdsProps {
   data: number;
   theme: Theme;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
 export const getColorFromDataAndTresholds = ({
   data,
   thresholds,
   theme
-}: GetColorFromDataAndThresholdsProps): string =>
-  cond([
-    [gt(head(thresholds) as number), always(theme.palette.success.main)],
-    [gt(thresholds[1]), always(theme.palette.warning.main)],
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
     [T, always(theme.palette.error.main)]
   ])(data);
+};