@centreon/ui 25.10.20 → 25.10.22

package/src/Graph/Chart/models.ts

@@ -175,6 +175,11 @@ export interface LegendModel {
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
+  secondaryClick?: (props: {
+    element: EventTarget | null;
+    metricId: number | string;
+    position: [number, number];
+  }) => void;
 }
 
 export interface GetDate {
@@ -193,4 +198,4 @@ export interface GraphTooltipData {
     unit: string;
     value: number;
   }>;
-}
+}

package/src/Graph/Chart/useChartData.ts

@@ -40,7 +40,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return data;
     }
 
-    if (isEmpty(data.metrics) || isEmpty(data.times)) {
+    if (isEmpty(data.metrics)) {
       return undefined;
     }
 

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -19,7 +19,10 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
+  legend: Pick<
+    LegendModel,
+    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
+  > & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -101,6 +104,7 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
+                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -122,6 +126,7 @@ const BaseChart = ({
             renderExtraComponent={legend.renderExtraComponent}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+            secondaryClick={legend?.secondaryClick}
           />
         </div>
       )}

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

@@ -185,6 +185,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'black',
           display: true,
+          displayAs: undefined,
           filled: false,
           highlight: undefined,
           invert: null,
@@ -195,6 +196,7 @@ describe('timeSeries', () => {
           metric_id: 1,
           minimum_value: 0.5,
           name: 'Round-Trip-Time Average (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -204,6 +206,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'blue',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -214,6 +217,7 @@ describe('timeSeries', () => {
           metric_id: 2,
           minimum_value: 0.5,
           name: 'Time (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -223,6 +227,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -233,6 +238,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -242,6 +248,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -252,6 +259,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -261,6 +269,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -271,6 +280,7 @@ describe('timeSeries', () => {
           metric_id: 5,
           minimum_value: 0.5,
           name: 'Packet Loss (%)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: '%'
@@ -331,6 +341,7 @@ describe('timeSeries', () => {
         average_value: 1,
         color: 'black',
         display: true,
+        displayAs: undefined,
         filled: false,
         highlight: undefined,
         invert: null,
@@ -341,6 +352,7 @@ describe('timeSeries', () => {
         metric_id: 1,
         minimum_value: 0.5,
         name: 'Round-Trip-Time Average (ms)',
+        stackKey: null,
         stackOrder: null,
         transparency: 80,
         unit: 'ms'
@@ -389,6 +401,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -399,6 +412,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -408,6 +422,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -418,6 +433,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -475,6 +491,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -485,6 +502,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -503,6 +521,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -513,6 +532,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'

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

@@ -26,6 +26,7 @@ import {
   map,
   negate,
   pipe,
+  pluck,
   prop,
   propEq,
   reduce,
@@ -72,7 +73,7 @@ const toTimeTickValue = (
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
     const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
       ...acc,
-      [metric_id]: data[timeIndex]
+      [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -139,6 +140,7 @@ const toLine = ({
     equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
       ? Number.parseInt(ds_data.ds_order || '0', 10)
       : null,
+  stackKey: ds_data.ds_stack_key || null,
   transparency: ds_data.ds_transparency,
   unit
 });
@@ -240,7 +242,10 @@ const getStackedMetricValues = ({
   timeSeries
 }: LinesTimeSeries): Array<number> => {
   const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
-    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
+    map(
+      (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
+      timeSeries
+    );
 
   const metricsValues = pipe(
     map(prop('metric_id')) as (metric) => Array<number>,
@@ -593,15 +598,15 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = (value: number): string => {
-  return `${numeral(value).format('0.[00]a')} ms`;
+const formatTime = ({ value, unit }): string => {
+  return `${numeral(value).format('0.[00]a')} ${unit}`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime(value);
+        return formatTime({ value, unit: 'ms' });
       },
       regexps: {
         format: /(ms)/,
@@ -618,6 +623,27 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
+const registerSecondsUnitToNumeral = (): null => {
+  try {
+    numeral.register('format', 'seconds', {
+      format: (value) => {
+        return formatTime({ value, unit: 's' });
+      },
+      regexps: {
+        format: /(s)/,
+        unformat: /(s)/
+      },
+      unformat: () => ''
+    });
+
+    return null;
+  } catch (_) {
+    return null;
+  }
+};
+
+registerSecondsUnitToNumeral();
+
 const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
@@ -647,6 +673,7 @@ const formatMetricValue = ({
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
+    [equals('s'), always(' s')],
     [T, always(base1024 ? ' ib' : 'a')]
   ])(unit);
 
@@ -671,8 +698,6 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
-  const base1024 = getBase1024({ base, unit });
-
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -685,9 +710,7 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return base1024 || !unit || equals(unit, 'ms')
-    ? formattedMetricValue
-    : `${formattedMetricValue} ${unit}`;
+  return formattedMetricValue;
 };
 
 const bisectDate = bisector(identity).center;
@@ -737,6 +760,93 @@ export const formatMetricName = ({
   return metricName;
 };
 
+export const getStackedLinesTimeSeriesPerStackAndUnit = ({
+  stackedLines,
+  timeSeries,
+  invert
+}: {
+  stackedLines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  invert?: boolean;
+}): {
+  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
+    string,
+    { lines: Array<Line>; timeSeries: Array<TimeValue> }
+  >;
+  stackedKeys: Record<string, null>;
+} => {
+  const stackedKeys = stackedLines.reduce(
+    (acc, { unit, stackKey }) => ({
+      ...acc,
+      [`stacked-${unit || ''}-${stackKey ? stackKey : ''}`]: null
+    }),
+    {}
+  );
+  const stackedKeysWithOnlyStackKey = Object.keys(stackedKeys).filter(
+    (stackKey: string) => stackKey.split('-')[2]
+  );
+  const stackedKeysWithOnlyUnit = Object.keys(stackedKeys).filter(
+    (stackKey: string) => !stackKey.split('-')[2]
+  );
+
+  const stackedLinesTimeSeriesPerStackKey = stackedKeysWithOnlyStackKey.reduce(
+    (acc, stackedKey: string) => {
+      const [, stackUnit, stackKey] = stackedKey.split('-');
+      const relatedLines = stackedLines.filter(({ unit, stackKey: key }) => {
+        return stackUnit === (unit || '') && stackKey === key;
+      });
+
+      return {
+        ...acc,
+        [stackedKey]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            invert,
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+  const affectedLinesPerStackKey = flatten(
+    pluck('lines', Object.values(stackedLinesTimeSeriesPerStackKey))
+  );
+  const stackedLinesTimeSeriesPerUnit = stackedKeysWithOnlyUnit.reduce(
+    (acc, stackedKey: string) => {
+      const [, stackUnit] = stackedKey.split('-');
+      const relatedLines = stackedLines.filter(
+        (line) =>
+          !affectedLinesPerStackKey.some(
+            (affectedLine) => line.metric_id === affectedLine.metric_id
+          ) && stackUnit === (line.unit || '')
+      );
+
+      return {
+        ...acc,
+        [stackedKey]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries,
+            invert
+          })
+        }
+      };
+    },
+    {}
+  );
+
+  return {
+    stackedLinesTimeSeriesPerStackKeyAndUnit: {
+      ...stackedLinesTimeSeriesPerStackKey,
+      ...stackedLinesTimeSeriesPerUnit
+    },
+    stackedKeys
+  };
+};
+
 export {
   getTimeSeries,
   getLineData,
@@ -766,4 +876,4 @@ export {
   formatMetricValueWithUnit,
   getYScaleUnit,
   getYScalePerUnit
-};
+};

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

@@ -9,7 +9,8 @@ interface DsData {
   ds_invert: string | null;
   ds_legend: string | null;
   ds_order: string | null;
-  ds_stack: string | null;
+  ds_stack: string | boolean | null;
+  ds_stack_key?: string | null;
   ds_transparency: number;
 }
 
@@ -20,7 +21,7 @@ export interface Metric {
   critical_low_threshold: number | null;
   data: Array<number | null>;
   displayAs?: 'line' | 'bar';
-  ds_data?: DsData;
+  ds_data: DsData;
   legend: string;
   maximum_value: number | null;
   metric: string;
@@ -56,6 +57,7 @@ export interface Line {
   minimum_value: number | null;
   name: string;
   stackOrder: number | null;
+  stackKey: string | null;
   transparency: number;
   unit: string;
 }

package/src/Graph/common/utils.ts

@@ -25,7 +25,7 @@ import { BarStyle } from '../BarChart/models';
 import { margin } from '../Chart/common';
 import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
-import { formatMetricValue } from './timeSeries';
+import { formatMetricValueWithUnit } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
@@ -234,7 +234,7 @@ export const getFormattedAxisValues = ({
 
   const formattedData = metricIds.map((metricId) =>
     timeSeries.map((data) =>
-      formatMetricValue({
+      formatMetricValueWithUnit({
         value: data[metricId],
         unit: axisUnit,
         base
@@ -246,7 +246,7 @@ export const getFormattedAxisValues = ({
 
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
-        formatMetricValue({
+        formatMetricValueWithUnit({
           value,
           unit: axisUnit,
           base
@@ -273,5 +273,11 @@ export const computeGElementMarginLeft = ({
 export const computPixelsToShiftMouse = (xScale): number => {
   const domain = xScale.domain();
 
-  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
+  const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');
+
+  if (!hoursDiffInGraph) {
+    return 0;
+  }
+
+  return Math.round(8 / hoursDiffInGraph);
 };

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -0,0 +1,74 @@
+{
+  "global": {},
+  "metrics": [
+    {
+      "metric": "count",
+      "metric_id": 1,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#4269d0",
+        "ds_color_line": "#4269d0"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "severity_text:\"Fatal\" OR severity_text:\"Error\"",
+        "period": 3600
+      },
+      "data": [
+        217, 270, 293, 300, 303, 295, 298, 283, 299, 299, 297, 285, 270, 248,
+        274, 292, 284, 47
+      ]
+    },
+    {
+      "metric": "count",
+      "metric_id": 2,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#efb118",
+        "ds_color_line": "#efb118"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "",
+        "period": 3600
+      },
+      "data": [
+        32, 825, 939, 922, 918, 939, 943, 947, 946, 909, 931, 939, 883, 907,
+        928, 904, 923, 893, 139
+      ]
+    }
+  ],
+  "times": [
+    "2025-10-04T16:19:30.000Z",
+    "2025-10-04T16:20:00.000Z",
+    "2025-10-04T16:20:30.000Z",
+    "2025-10-04T16:21:00.000Z",
+    "2025-10-04T16:21:30.000Z",
+    "2025-10-04T16:22:00.000Z",
+    "2025-10-04T16:22:30.000Z",
+    "2025-10-04T16:23:00.000Z",
+    "2025-10-04T16:23:30.000Z",
+    "2025-10-04T16:24:00.000Z",
+    "2025-10-04T16:24:30.000Z",
+    "2025-10-04T16:25:00.000Z",
+    "2025-10-04T16:25:30.000Z",
+    "2025-10-04T16:26:00.000Z",
+    "2025-10-04T16:26:30.000Z",
+    "2025-10-04T16:27:00.000Z",
+    "2025-10-04T16:27:30.000Z",
+    "2025-10-04T16:28:00.000Z",
+    "2025-10-04T16:28:30.000Z"
+  ]
+}