@centreon/ui 24.8.6 → 24.9.0

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

@@ -0,0 +1,622 @@
+import { LineChartData } from '../models';
+
+type TestCase = [number | null, string, 1000 | 1024, string | null];
+
+describe('timeSeries', () => {
+  const graphData: LineChartData = {
+    global: {},
+    metrics: [
+      {
+        average_value: 1,
+        data: [0, 1],
+        ds_data: {
+          ds_color_area: 'transparent',
+          ds_color_line: 'black',
+          ds_filled: false,
+          ds_invert: null,
+          ds_legend: 'Round-Trip-Time Average',
+          ds_order: null,
+          ds_stack: null,
+          ds_transparency: 80
+        },
+        legend: 'Round-Trip-Time Average (ms)',
+        maximum_value: 1.5,
+        metric: 'rta',
+        metric_id: 1,
+        minimum_value: 0.5,
+        unit: 'ms'
+      },
+      {
+        average_value: 1,
+        data: [0.5, 3],
+        ds_data: {
+          ds_color_area: 'blue',
+          ds_color_line: 'blue',
+          ds_filled: true,
+          ds_invert: null,
+          ds_legend: 'Time',
+          ds_order: null,
+          ds_stack: null,
+          ds_transparency: 80
+        },
+        legend: 'Time (ms)',
+        maximum_value: 1.5,
+        metric: 'time',
+        metric_id: 2,
+        minimum_value: 0.5,
+        unit: 'ms'
+      },
+      {
+        average_value: 1,
+        data: [6, 4],
+        ds_data: {
+          ds_color_area: 'red',
+          ds_color_line: 'red',
+          ds_filled: true,
+          ds_invert: null,
+          ds_legend: 'Average duration',
+          ds_order: '2',
+          ds_stack: '1',
+          ds_transparency: 80
+        },
+        legend: 'Average duration (ms)',
+        maximum_value: 1.5,
+        metric: 'avgDuration',
+        metric_id: 3,
+        minimum_value: 0.5,
+        unit: 'ms'
+      },
+      {
+        average_value: 1,
+        data: [12, 25],
+        ds_data: {
+          ds_color_area: 'yellow',
+          ds_color_line: 'yellow',
+          ds_filled: true,
+          ds_invert: '1',
+          ds_legend: 'Duration',
+          ds_order: '1',
+          ds_stack: '1',
+          ds_transparency: 80
+        },
+        legend: 'Duration (ms)',
+        maximum_value: 1.5,
+        metric: 'duration',
+        metric_id: 4,
+        minimum_value: 0.5,
+        unit: 'ms'
+      },
+      {
+        average_value: 1,
+        data: [0, 1],
+        ds_data: {
+          ds_color_area: 'yellow',
+          ds_color_line: 'yellow',
+          ds_filled: true,
+          ds_invert: null,
+          ds_legend: 'Packet Loss',
+          ds_order: null,
+          ds_stack: null,
+          ds_transparency: 80
+        },
+        legend: 'Packet Loss (%)',
+        maximum_value: 1.5,
+        metric: 'packet_loss',
+        metric_id: 5,
+        minimum_value: 0.5,
+        unit: '%'
+      }
+    ],
+    times: ['2020-11-05T10:35:00Z', '2020-11-05T10:40:00Z']
+  };
+
+  describe('getTimeSeries', () => {
+    it('returns the time series for the given graph data', () => {
+      expect(getTimeSeries(graphData)).toEqual([
+        {
+          1: 0,
+          2: 0.5,
+          3: 6,
+          4: 12,
+          5: 0,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          1: 1,
+          2: 3,
+          3: 4,
+          4: 25,
+          5: 1,
+          timeTick: '2020-11-05T10:40:00Z'
+        }
+      ]);
+    });
+
+    it('filters metric values below the given lower-limit value', () => {
+      const graphDataWithLowerLimit = {
+        ...graphData,
+        global: {
+          'lower-limit': 0.4
+        }
+      };
+
+      expect(getTimeSeries(graphDataWithLowerLimit)).toEqual([
+        {
+          2: 0.5,
+          3: 6,
+          4: 12,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          1: 1,
+          2: 3,
+          3: 4,
+          4: 25,
+          5: 1,
+          timeTick: '2020-11-05T10:40:00Z'
+        }
+      ]);
+    });
+  });
+
+  describe('getLineData', () => {
+    it('returns the line information for the given graph data', () => {
+      expect(getLineData(graphData)).toEqual([
+        {
+          areaColor: 'transparent',
+          average_value: 1,
+          color: 'black',
+          display: true,
+          filled: false,
+          highlight: undefined,
+          invert: null,
+          legend: 'Round-Trip-Time Average',
+          lineColor: 'black',
+          maximum_value: 1.5,
+          metric: 'rta',
+          metric_id: 1,
+          minimum_value: 0.5,
+          name: 'Round-Trip-Time Average (ms)',
+          stackOrder: null,
+          transparency: 80,
+          unit: 'ms'
+        },
+        {
+          areaColor: 'blue',
+          average_value: 1,
+          color: 'blue',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: null,
+          legend: 'Time',
+          lineColor: 'blue',
+          maximum_value: 1.5,
+          metric: 'time',
+          metric_id: 2,
+          minimum_value: 0.5,
+          name: 'Time (ms)',
+          stackOrder: null,
+          transparency: 80,
+          unit: 'ms'
+        },
+        {
+          areaColor: 'red',
+          average_value: 1,
+          color: 'red',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: null,
+          legend: 'Average duration',
+          lineColor: 'red',
+          maximum_value: 1.5,
+          metric: 'avgDuration',
+          metric_id: 3,
+          minimum_value: 0.5,
+          name: 'Average duration (ms)',
+          stackOrder: 2,
+          transparency: 80,
+          unit: 'ms'
+        },
+        {
+          areaColor: 'yellow',
+          average_value: 1,
+          color: 'yellow',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: '1',
+          legend: 'Duration',
+          lineColor: 'yellow',
+          maximum_value: 1.5,
+          metric: 'duration',
+          metric_id: 4,
+          minimum_value: 0.5,
+          name: 'Duration (ms)',
+          stackOrder: 1,
+          transparency: 80,
+          unit: 'ms'
+        },
+        {
+          areaColor: 'yellow',
+          average_value: 1,
+          color: 'yellow',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: null,
+          legend: 'Packet Loss',
+          lineColor: 'yellow',
+          maximum_value: 1.5,
+          metric: 'packet_loss',
+          metric_id: 5,
+          minimum_value: 0.5,
+          name: 'Packet Loss (%)',
+          stackOrder: null,
+          transparency: 80,
+          unit: '%'
+        }
+      ]);
+    });
+  });
+
+  describe('getMetrics', () => {
+    it('returns the metrics for the given time value', () => {
+      expect(
+        getMetrics({
+          rta: 1,
+          time: 0,
+          timeTick: '2020-11-05T10:40:00Z'
+        })
+      ).toEqual(['rta', 'time']);
+    });
+  });
+
+  describe('getMetricValuesForUnit', () => {
+    it('returns the values in the given time series corresponding to the given line unit', () => {
+      const series = getTimeSeries(graphData);
+      const lines = getLineData(graphData);
+      const unit = 'ms';
+
+      expect(
+        getMetricValuesForUnit({ lines, timeSeries: series, unit })
+      ).toEqual([0, 1, 0.5, 3, 6, 4, 12, 25]);
+    });
+  });
+
+  describe('getUnits', () => {
+    it('returns the units for the given lines', () => {
+      const lines = getLineData(graphData);
+
+      expect(getUnits(lines)).toEqual(['ms', '%']);
+    });
+  });
+
+  describe('getDates', () => {
+    it('teruns the dates for the given time series', () => {
+      const series = getTimeSeries(graphData);
+
+      expect(getDates(series)).toEqual([
+        new Date('2020-11-05T10:35:00.000Z'),
+        new Date('2020-11-05T10:40:00.000Z')
+      ]);
+    });
+  });
+
+  describe('getLineForMetric', () => {
+    it('returns the line corresponding to the given metrics', () => {
+      const lines = getLineData(graphData);
+
+      expect(getLineForMetric({ lines, metric_id: 1 })).toEqual({
+        areaColor: 'transparent',
+        average_value: 1,
+        color: 'black',
+        display: true,
+        filled: false,
+        highlight: undefined,
+        invert: null,
+        legend: 'Round-Trip-Time Average',
+        lineColor: 'black',
+        maximum_value: 1.5,
+        metric: 'rta',
+        metric_id: 1,
+        minimum_value: 0.5,
+        name: 'Round-Trip-Time Average (ms)',
+        stackOrder: null,
+        transparency: 80,
+        unit: 'ms'
+      });
+    });
+  });
+
+  describe('getMetricValuesForLines', () => {
+    it('returns the metric values for the given lines within the given time series', () => {
+      const lines = getLineData(graphData);
+      const series = getTimeSeries(graphData);
+
+      expect(
+        getMetricValuesForLines({ lines, timeSeries: series })
+      ).toEqual([0, 1, 0.5, 3, 6, 4, 12, 25, 0, 1]);
+    });
+  });
+
+  describe(formatMetricValue, () => {
+    const cases: Array<TestCase> = [
+      [218857269, '', 1000, '218.86m'],
+      [218857269, '', 1024, '208.72 M'],
+      [0.12232323445, '', 1000, '0.12'],
+      [1024, 'B', 1000, '1 KB'],
+      [1024, 'B', 1024, '1 KB'],
+      [null, 'B', 1024, null]
+    ];
+
+    it.each(cases)(
+      'formats the given value to a human readable form according to the given unit and base',
+      (value, unit, base, formattedResult) => {
+        expect(formatMetricValue({ base, unit, value })).toEqual(
+          formattedResult
+        );
+      }
+    );
+  });
+
+  describe('getSortedStackedLines', () => {
+    it('returns stacked lines sorted by their own order for the given lines', () => {
+      const lines = getLineData(graphData);
+
+      expect(getSortedStackedLines(lines)).toEqual([
+        {
+          areaColor: 'yellow',
+          average_value: 1,
+          color: 'yellow',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: '1',
+          legend: 'Duration',
+          lineColor: 'yellow',
+          maximum_value: 1.5,
+          metric: 'duration',
+          metric_id: 4,
+          minimum_value: 0.5,
+          name: 'Duration (ms)',
+          stackOrder: 1,
+          transparency: 80,
+          unit: 'ms'
+        },
+        {
+          areaColor: 'red',
+          average_value: 1,
+          color: 'red',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: null,
+          legend: 'Average duration',
+          lineColor: 'red',
+          maximum_value: 1.5,
+          metric: 'avgDuration',
+          metric_id: 3,
+          minimum_value: 0.5,
+          name: 'Average duration (ms)',
+          stackOrder: 2,
+          transparency: 80,
+          unit: 'ms'
+        }
+      ]);
+    });
+  });
+
+  describe('getStackedMetricValues', () => {
+    it('returns stacked metrics values for the given lines and the given time series', () => {
+      const lines = getLineData(graphData);
+      const series = getTimeSeries(graphData);
+
+      expect(
+        getStackedMetricValues({
+          lines: getSortedStackedLines(lines),
+          timeSeries: series
+        })
+      ).toEqual([18, 29]);
+    });
+  });
+
+  describe('getTimeSeriesForLines', () => {
+    it('returns the specific time series for the given lines and the fiven time series', () => {
+      const lines = getLineData(graphData);
+      const series = getTimeSeries(graphData);
+
+      expect(
+        getTimeSeriesForLines({
+          lines: getSortedStackedLines(lines),
+          timeSeries: series
+        })
+      ).toEqual([
+        {
+          3: 6,
+          4: 12,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          3: 4,
+          4: 25,
+          timeTick: '2020-11-05T10:40:00Z'
+        }
+      ]);
+    });
+  });
+
+  describe('getInvertedStackedLines', () => {
+    it('returns inverted and stacked lines for the given lines', () => {
+      const lines = getLineData(graphData);
+
+      expect(getInvertedStackedLines(lines)).toEqual([
+        {
+          areaColor: 'yellow',
+          average_value: 1,
+          color: 'yellow',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: '1',
+          legend: 'Duration',
+          lineColor: 'yellow',
+          maximum_value: 1.5,
+          metric: 'duration',
+          metric_id: 4,
+          minimum_value: 0.5,
+          name: 'Duration (ms)',
+          stackOrder: 1,
+          transparency: 80,
+          unit: 'ms'
+        }
+      ]);
+    });
+  });
+
+  describe('getNotInvertedStackedLines', () => {
+    it('returns not inverted and stacked lines for the given lines', () => {
+      const lines = getLineData(graphData);
+
+      expect(getNotInvertedStackedLines(lines)).toEqual([
+        {
+          areaColor: 'red',
+          average_value: 1,
+          color: 'red',
+          display: true,
+          filled: true,
+          highlight: undefined,
+          invert: null,
+          legend: 'Average duration',
+          lineColor: 'red',
+          maximum_value: 1.5,
+          metric: 'avgDuration',
+          metric_id: 3,
+          minimum_value: 0.5,
+          name: 'Average duration (ms)',
+          stackOrder: 2,
+          transparency: 80,
+          unit: 'ms'
+        }
+      ]);
+    });
+  });
+
+  describe('hasUnitStackedLines', () => {
+    it('returns true if the given unit contains stacked lines following the given lines, false otherwise', () => {
+      const lines = getLineData(graphData);
+
+      expect(hasUnitStackedLines({ lines, unit: 'ms' })).toEqual(
+        true
+      );
+
+      expect(hasUnitStackedLines({ lines, unit: '%' })).toEqual(
+        false
+      );
+    });
+  });
+});
+
+describe('Format value with unit', () => {
+  const units = [
+    'B',
+    'bytes',
+    'bytespersecond',
+    'B/s',
+    'B/sec',
+    'o',
+    'octets',
+    'b/s',
+    'b',
+    'ms',
+    '%',
+    ''
+  ];
+
+  const getExpectedResult = (unit): string => {
+    if (unit === '') {
+      return '324.23m';
+    }
+
+    return `309.21 M${unit}`;
+  };
+
+  const humanReadableTestCases = units.map((unit) => {
+    if (unit === '%') {
+      return {
+        expectedResult: '45.56%',
+        unit,
+        value: 45.55678
+      };
+    }
+
+    if (unit === 'ms') {
+      return {
+        expectedResult: '34.23 seconds',
+        unit,
+        value: 34232
+      };
+    }
+
+    return {
+      expectedResult: getExpectedResult(unit),
+      unit,
+      value: 324234232.34233
+    };
+  });
+
+  const rawTestCases = units.map((unit) => {
+    if (unit === '%') {
+      return {
+        expectedResult: '45.55678%',
+        unit,
+        value: 45.55678
+      };
+    }
+
+    if (unit === 'ms') {
+      return {
+        expectedResult: '34232 ms',
+        unit,
+        value: 34232
+      };
+    }
+
+    return {
+      expectedResult:
+        unit === '' ? '324234232.34233 ' : `324234232.34233 ${unit}`,
+      unit,
+      value: 324234232.34233
+    };
+  });
+
+  describe('Format the value as human readable', () => {
+    it.each(humanReadableTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          formatMetricValueWithUnit({
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
+  });
+
+  describe('Format the value as raw', () => {
+    it.each(rawTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          timeSeries.formatMetricValueWithUnit({
+            isRaw: true,
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
+  });
+});

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

@@ -1,51 +1,51 @@
-import numeral from 'numeral';
 import { Scale } from '@visx/visx';
 import { bisector } from 'd3-array';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
+import numeral from 'numeral';
 import {
-  map,
-  pipe,
-  reduce,
-  filter,
-  addIndex,
-  isNil,
   path,
-  reject,
+  T,
+  add,
+  addIndex,
+  always,
+  any,
+  cond,
   equals,
+  filter,
+  find,
+  flatten,
+  head,
+  identity,
+  includes,
+  isEmpty,
+  isNil,
+  isNotNil,
   keys,
+  last,
+  lt,
+  map,
+  negate,
+  pipe,
   prop,
-  flatten,
   propEq,
-  uniq,
-  find,
+  reduce,
+  reject,
   sortBy,
-  add,
-  isEmpty,
-  any,
-  lt,
-  identity,
-  head,
-  last,
-  cond,
-  always,
-  T,
-  includes,
   split,
-  negate,
-  isNotNil
+  uniq
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
 import { LineChartData } from '../models';
 
 import {
-  Metric,
-  TimeValue,
-  Line,
   AxeScale,
-  Xscale,
   FormatMetricValueProps,
-  TimeValueProps
+  Line,
+  Metric,
+  TimeValue,
+  TimeValueProps,
+  Xscale
 } from './models';
 
 interface TimeTickWithMetrics {
@@ -137,7 +137,7 @@ const toLine = ({
   name: legend,
   stackOrder:
     equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
-      ? parseInt(ds_data.ds_order || '0', 10)
+      ? Number.parseInt(ds_data.ds_order || '0', 10)
       : null,
   transparency: ds_data.ds_transparency,
   unit

package/src/Graph/common/utils.ts

@@ -1,3 +1,4 @@
+import numeral from 'numeral';
 import {
   T,
   always,
@@ -12,9 +13,8 @@ import {
   lte,
   pluck
 } from 'ramda';
-import numeral from 'numeral';
 
-import { darken, getLuminance, lighten, Theme } from '@mui/material';
+import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
 import { Thresholds } from './models';