@centreon/ui 24.6.2 → 24.6.4

package/src/Graph/{LineChart/BasicComponents → common/Thresholds}/ThresholdLine.tsx

@@ -2,10 +2,11 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import { margin } from '../common';
+import { margin } from '../../LineChart/common';
 
 interface Props {
   hideTooltip: () => void;
+  isHorizontal: boolean;
   label: string;
   showTooltip: (args) => void;
   thresholdType: string;
@@ -21,7 +22,8 @@ export const ThresholdLine = ({
   thresholdType,
   showTooltip,
   hideTooltip,
-  width
+  width,
+  isHorizontal
 }: Props): JSX.Element => {
   const theme = useTheme();
 
@@ -38,6 +40,20 @@ export const ThresholdLine = ({
     ? theme.palette.warning.main
     : theme.palette.error.main;
 
+  const coordinates = isHorizontal
+    ? {
+        x1: 0,
+        x2: width,
+        y1: scaledValue,
+        y2: scaledValue
+      }
+    : {
+        x1: scaledValue,
+        x2: scaledValue,
+        y1: 0,
+        y2: width
+      };
+
   return (
     <>
       <line
@@ -45,21 +61,15 @@ export const ThresholdLine = ({
         stroke={lineColor}
         strokeDasharray="5,5"
         strokeWidth={2}
-        x1={0}
-        x2={width}
-        y1={scaledValue}
-        y2={scaledValue}
+        {...coordinates}
       />
       <line
         data-testid={`${thresholdType}-line-${value}-tooltip`}
         stroke="transparent"
         strokeWidth={5}
-        x1={0}
-        x2={width}
-        y1={scaledValue}
-        y2={scaledValue}
         onMouseEnter={onMouseEnter}
         onMouseLeave={hideTooltip}
+        {...coordinates}
       />
     </>
   );

package/src/Graph/{LineChart/BasicComponents → common/Thresholds}/Thresholds.tsx

@@ -1,14 +1,15 @@
 import { equals, isNil } from 'ramda';
 
-import { getUnits, getYScale } from '../../common/timeSeries';
-import { Line } from '../../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../../common/models';
+import { getUnits, getYScale } from '../timeSeries';
+import { Line } from '../timeSeries/models';
+import { Thresholds as ThresholdsModel } from '../models';
 
 import { ThresholdLine } from './ThresholdLine';
 
 interface Props {
   displayedLines: Array<Line>;
   hideTooltip: () => void;
+  isHorizontal?: boolean;
   leftScale: (value: number) => number;
   rightScale: (value: number) => number;
   showTooltip: (props) => void;
@@ -25,7 +26,8 @@ const Thresholds = ({
   displayedLines,
   thresholdUnit,
   showTooltip,
-  hideTooltip
+  hideTooltip,
+  isHorizontal = true
 }: Props): JSX.Element => {
   const [firstUnit, secondUnit, thirdUnit] = getUnits(
     displayedLines as Array<Line>
@@ -49,6 +51,7 @@ const Thresholds = ({
       {thresholds.warning.map(({ value, label }) => (
         <ThresholdLine
           hideTooltip={hideTooltip}
+          isHorizontal={isHorizontal}
           key={`warning-${value}`}
           label={label}
           showTooltip={showTooltip}
@@ -61,6 +64,7 @@ const Thresholds = ({
       {thresholds.critical.map(({ value, label }) => (
         <ThresholdLine
           hideTooltip={hideTooltip}
+          isHorizontal={isHorizontal}
           key={`critical-${value}`}
           label={label}
           showTooltip={showTooltip}

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

@@ -135,9 +135,10 @@ const toLine = ({
   metric_id,
   minimum_value,
   name: legend,
-  stackOrder: equals(ds_data.ds_stack, '1')
-    ? parseInt(ds_data.ds_order || '0', 10)
-    : null,
+  stackOrder:
+    equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
+      ? parseInt(ds_data.ds_order || '0', 10)
+      : null,
   transparency: ds_data.ds_transparency,
   unit
 });
@@ -353,7 +354,8 @@ const getScale = ({
   thresholds,
   isCenteredZero,
   scale,
-  scaleLogarithmicBase
+  scaleLogarithmicBase,
+  isHorizontal
 }): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
   const minValue = Math.min(
@@ -370,6 +372,7 @@ const getScale = ({
   const scaleType = getScaleType(scale);
 
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
+  const range = [height, upperRangeValue];
 
   if (isCenteredZero) {
     const greatestValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
@@ -377,14 +380,14 @@ const getScale = ({
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
       domain: [-greatestValue, greatestValue],
-      range: [height, upperRangeValue]
+      range: isHorizontal ? range : range.reverse()
     });
   }
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
     domain: [isLogScale ? 0.001 : minValue, maxValue],
-    range: [height, upperRangeValue]
+    range: isHorizontal ? range : range.reverse()
   });
 };
 
@@ -396,9 +399,10 @@ const getLeftScale = ({
   thresholdUnit,
   isCenteredZero,
   scale,
-  scaleLogarithmicBase
+  scaleLogarithmicBase,
+  isHorizontal = true
 }: AxeScale): ScaleLinear<number, number> => {
-  const [firstUnit, , thirdUnit] = getUnits(dataLines);
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(dataLines);
 
   const shouldApplyThresholds =
     equals(thresholdUnit, firstUnit) ||
@@ -423,7 +427,9 @@ const getLeftScale = ({
 
   const stackedValues = firstUnitHasStackedLines
     ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines),
+        lines: getSortedStackedLines(dataLines).filter(
+          ({ unit }) => !equals(unit, secondUnit)
+        ),
         timeSeries: dataTimeSeries
       })
     : [0];
@@ -432,6 +438,7 @@ const getLeftScale = ({
     graphValues,
     height: valueGraphHeight,
     isCenteredZero,
+    isHorizontal,
     scale,
     scaleLogarithmicBase,
     stackedValues,
@@ -449,6 +456,17 @@ const getXScale = ({
   });
 };
 
+export const getXScaleBand = ({
+  dataTime,
+  valueWidth
+}: Xscale): ReturnType<typeof Scale.scaleBand<number>> => {
+  return Scale.scaleBand({
+    domain: dataTime.map(getTime),
+    padding: 0.2,
+    range: [0, valueWidth]
+  });
+};
+
 const getRightScale = ({
   dataLines,
   dataTimeSeries,
@@ -457,7 +475,8 @@ const getRightScale = ({
   thresholdUnit,
   isCenteredZero,
   scale,
-  scaleLogarithmicBase
+  scaleLogarithmicBase,
+  isHorizontal = true
 }: AxeScale): ScaleLinear<number, number> => {
   const [, secondUnit] = getUnits(dataLines);
 
@@ -475,7 +494,9 @@ const getRightScale = ({
 
   const stackedValues = secondUnitHasStackedLines
     ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines),
+        lines: getSortedStackedLines(dataLines).filter(({ unit }) =>
+          equals(unit, secondUnit)
+        ),
         timeSeries: dataTimeSeries
       })
     : [0];
@@ -484,6 +505,7 @@ const getRightScale = ({
     graphValues,
     height: valueGraphHeight,
     isCenteredZero,
+    isHorizontal,
     scale,
     scaleLogarithmicBase,
     stackedValues,

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

@@ -76,6 +76,7 @@ export interface AxeScale
   > {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
+  isHorizontal?: boolean;
   thresholdUnit?: string;
   thresholds: Array<number>;
   valueGraphHeight: number;

package/src/Graph/common/useTooltipStyles.ts

@@ -11,6 +11,7 @@ export const useTooltipStyles = makeStyles()((theme) => ({
     maxWidth: 'none',
     padding: theme.spacing(0.5, 1)
   },
+  tooltipChildren: { height: '100%', width: '100%' },
   tooltipDisablePadding: {
     padding: theme.spacing(0)
   }

package/src/Graph/mockedData/pingService.json

@@ -0,0 +1,203 @@
+{
+  "global": {
+    "base": 1000,
+    "title": "Ping service"
+  },
+  "metrics": [
+    {
+      "metric_id": 2,
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "%",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Packet Loss",
+      "stack": 0,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        10.0,
+        20.0,
+        null,
+        null
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
+    {
+      "metric_id": 1,
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.04508,
+        0.0242,
+        0.03592,
+        0.01304,
+        0.025,
+        0.02748,
+        0.05296,
+        0.01864,
+        0.02688,
+        0.03676,
+        0.03696,
+        null,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 3,
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#525256",
+        "ds_color_area": "#525256",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.11372,
+        0.05604,
+        0.08556,
+        0.02548,
+        0.05352,
+        0.05336,
+        0.109,
+        0.04112,
+        0.05504,
+        0.06812,
+        0.08644,
+        null,
+        null
+      ],
+      "last_value": 0.09,
+      "minimum_value": null,
+      "maximum_value": 0.11,
+      "average_value": null
+    },
+    {
+      "metric_id": 4,
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#191777",
+        "ds_color_area": "#191777",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.00984,
+        0.008,
+        0.00784,
+        0.00624,
+        0.00932,
+        0.01348,
+        0.01796,
+        0.0064,
+        0.01148,
+        0.01644,
+        0.01168,
+        null,
+        null
+      ],
+      "last_value": 0.01,
+      "minimum_value": 0.01,
+      "maximum_value": null,
+      "average_value": null
+    }
+  ],
+  "times": [
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
+  ]
+}

package/src/Graph/mockedData/pingServiceMixedStacked.json

@@ -0,0 +1,203 @@
+{
+  "global": {
+    "base": 1000,
+    "title": "Ping service"
+  },
+  "metrics": [
+    {
+      "metric_id": 2,
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "%",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Packet Loss",
+      "stack": 0,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        10.0,
+        20.0,
+        null,
+        null
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
+    {
+      "metric_id": 1,
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.04508,
+        0.0242,
+        0.03592,
+        0.01304,
+        0.025,
+        0.02748,
+        0.05296,
+        0.01864,
+        0.02688,
+        0.03676,
+        0.03696,
+        null,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 3,
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#525256",
+        "ds_color_area": "#525256",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.11372,
+        0.05604,
+        0.08556,
+        0.02548,
+        0.05352,
+        0.05336,
+        0.109,
+        0.04112,
+        0.05504,
+        0.06812,
+        0.08644,
+        null,
+        null
+      ],
+      "last_value": 0.09,
+      "minimum_value": null,
+      "maximum_value": 0.11,
+      "average_value": null
+    },
+    {
+      "metric_id": 4,
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#191777",
+        "ds_color_area": "#191777",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.00984,
+        0.008,
+        0.00784,
+        0.00624,
+        0.00932,
+        0.01348,
+        0.01796,
+        0.0064,
+        0.01148,
+        0.01644,
+        0.01168,
+        null,
+        null
+      ],
+      "last_value": 0.01,
+      "minimum_value": 0.01,
+      "maximum_value": null,
+      "average_value": null
+    }
+  ],
+  "times": [
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
+  ]
+}