@centreon/ui 23.10.44 → 23.10.46

package/src/Graph/models.ts

@@ -0,0 +1,150 @@
+import { ReactNode } from 'react';
+
+import { ScaleLinear } from 'd3-scale';
+
+import { Line, Metric, TimeValue } from './timeSeries/models';
+import {
+  AxisX,
+  Axis as AxisYLeft,
+  AxisYRight
+} from './BasicComponents/Axes/models';
+import {
+  AreaRegularLines,
+  AreaStackedLines
+} from './BasicComponents/Lines/models';
+import { TimelineEvent } from './InteractiveComponents/Annotations/models';
+import { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
+
+export interface GraphData {
+  global;
+  metrics: Array<Metric>;
+  times: Array<string>;
+}
+
+export interface GraphEndpoint {
+  baseUrl: string;
+  queryParameters: GraphInterval;
+}
+export interface Data {
+  baseAxis: number;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  title: string;
+}
+
+export enum GraphIntervalProperty {
+  end = 'end',
+  start = 'start'
+}
+
+export interface Interval {
+  end: Date;
+  start: Date;
+}
+
+export interface GraphInterval {
+  end?: string;
+  start?: string;
+}
+
+export interface ShapeLines {
+  areaRegularLines?: AreaRegularLines;
+  areaStackedLines?: AreaStackedLines;
+}
+
+export interface Axis {
+  axisX?: AxisX;
+  axisYLeft?: AxisYLeft;
+  axisYRight?: AxisYRight;
+}
+
+export interface InteractedZone {
+  enable?: boolean;
+  getInterval?: (data: Interval) => void;
+}
+
+export interface TooltipData {
+  data: Date;
+  hideTooltip: () => void;
+  tooltipOpen: boolean;
+}
+export interface Tooltip {
+  renderComponent?: (args: TooltipData) => ReactNode;
+}
+
+export interface AnnotationEvent {
+  data?: Array<TimelineEvent>;
+}
+
+export interface GraphHeader {
+  displayTitle?: boolean;
+  extraComponent?: ReactNode;
+}
+
+export interface DisplayAnchor {
+  displayGuidingLines?: boolean;
+  displayTooltipsGuidingLines?: boolean;
+}
+
+export interface GraphProps {
+  annotationEvent?: AnnotationEvent;
+  axis?: Axis;
+  displayAnchor?: DisplayAnchor;
+  header?: GraphHeader;
+  height?: number;
+  loading: boolean;
+  timeShiftZones?: InteractedZone;
+  tooltip?: Tooltip;
+  width: number;
+  zoomPreview?: InteractedZone;
+}
+
+export interface Area {
+  display: boolean;
+}
+
+export type PatternOrientation =
+  | 'diagonal'
+  | 'diagonalRightToLeft'
+  | 'horizontal'
+  | 'vertical';
+
+export enum ThresholdType {
+  basic = 'basic',
+  pattern = 'pattern',
+  variation = 'variation'
+}
+
+export interface PatternThreshold {
+  data: Array<GraphData>;
+  orientation?: Array<PatternOrientation>;
+  type: ThresholdType.pattern;
+}
+export interface VariationThreshold {
+  displayCircles?: boolean;
+  factors: FactorsVariation;
+  getCountDisplayedCircles?: (value: number) => void;
+  type: ThresholdType.variation;
+}
+
+export interface BasicThreshold {
+  type: ThresholdType.basic;
+}
+
+export interface GlobalAreaLines {
+  areaRegularLines?: Area;
+  areaStackedLines?: Area;
+  areaThresholdLines?: Array<
+    PatternThreshold | VariationThreshold | BasicThreshold
+  >;
+}
+export interface LegendModel {
+  display?: boolean;
+  renderExtraComponent?: ReactNode;
+}
+
+export interface GetDate {
+  positionX: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}

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

@@ -0,0 +1,506 @@
+import { GraphData } from '../models';
+
+import * as timeSeries from '.';
+
+type TestCase = [number | null, string, 1000 | 1024, string | null];
+
+describe('timeSeries', () => {
+  const graphData: GraphData = {
+    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',
+        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',
+        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',
+        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',
+        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',
+        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(timeSeries.getTimeSeries(graphData)).toEqual([
+        {
+          avgDuration: 6,
+          duration: 12,
+          packet_loss: 0,
+          rta: 0,
+          time: 0.5,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          avgDuration: 4,
+          duration: 25,
+          packet_loss: 1,
+          rta: 1,
+          time: 3,
+          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(timeSeries.getTimeSeries(graphDataWithLowerLimit)).toEqual([
+        {
+          avgDuration: 6,
+          duration: 12,
+          time: 0.5,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          avgDuration: 4,
+          duration: 25,
+          packet_loss: 1,
+          rta: 1,
+          time: 3,
+          timeTick: '2020-11-05T10:40:00Z'
+        }
+      ]);
+    });
+  });
+
+  describe('getLineData', () => {
+    it('returns the line information for the given graph data', () => {
+      expect(timeSeries.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',
+          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',
+          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',
+          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',
+          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',
+          minimum_value: 0.5,
+          name: 'Packet Loss (%)',
+          stackOrder: null,
+          transparency: 80,
+          unit: '%'
+        }
+      ]);
+    });
+  });
+
+  describe('getMetrics', () => {
+    it('returns the metrics for the given time value', () => {
+      expect(
+        timeSeries.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 = timeSeries.getTimeSeries(graphData);
+      const lines = timeSeries.getLineData(graphData);
+      const unit = 'ms';
+
+      expect(
+        timeSeries.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 = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.getUnits(lines)).toEqual(['ms', '%']);
+    });
+  });
+
+  describe('getDates', () => {
+    it('teruns the dates for the given time series', () => {
+      const series = timeSeries.getTimeSeries(graphData);
+
+      expect(timeSeries.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 = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.getLineForMetric({ lines, metric: 'rta' })).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',
+        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 = timeSeries.getLineData(graphData);
+      const series = timeSeries.getTimeSeries(graphData);
+
+      expect(
+        timeSeries.getMetricValuesForLines({ lines, timeSeries: series })
+      ).toEqual([0, 1, 0.5, 3, 6, 4, 12, 25, 0, 1]);
+    });
+  });
+
+  describe(timeSeries.formatMetricValue, () => {
+    const cases: Array<TestCase> = [
+      [218857269, '', 1000, '218.86m'],
+      [218857269, '', 1024, '208.72M'],
+      [0.12232323445, '', 1000, '0.12'],
+      [1024, 'B', 1000, '1K'],
+      [1024, 'B', 1024, '1K'],
+      [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(timeSeries.formatMetricValue({ base, unit, value })).toEqual(
+          formattedResult
+        );
+      }
+    );
+  });
+
+  describe('getSortedStackedLines', () => {
+    it('returns stacked lines sorted by their own order for the given lines', () => {
+      const lines = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.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',
+          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',
+          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 = timeSeries.getLineData(graphData);
+      const series = timeSeries.getTimeSeries(graphData);
+
+      expect(
+        timeSeries.getStackedMetricValues({
+          lines: timeSeries.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 = timeSeries.getLineData(graphData);
+      const series = timeSeries.getTimeSeries(graphData);
+
+      expect(
+        timeSeries.getTimeSeriesForLines({
+          lines: timeSeries.getSortedStackedLines(lines),
+          timeSeries: series
+        })
+      ).toEqual([
+        {
+          avgDuration: 6,
+          duration: 12,
+          timeTick: '2020-11-05T10:35:00Z'
+        },
+        {
+          avgDuration: 4,
+          duration: 25,
+          timeTick: '2020-11-05T10:40:00Z'
+        }
+      ]);
+    });
+  });
+
+  describe('getInvertedStackedLines', () => {
+    it('returns inverted and stacked lines for the given lines', () => {
+      const lines = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.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',
+          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 = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.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',
+          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 = timeSeries.getLineData(graphData);
+
+      expect(timeSeries.hasUnitStackedLines({ lines, unit: 'ms' })).toEqual(
+        true
+      );
+
+      expect(timeSeries.hasUnitStackedLines({ lines, unit: '%' })).toEqual(
+        false
+      );
+    });
+  });
+});