[FEATURE] Charts | Change charts time-unit to bigger timespan #164 (#204)

* [FEATURE] Charts | Change charts time-unit to bigger timespan #164

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Charts | Change charts time-unit to bigger timespan #164

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>

Author: jovancvetkovic3006

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -22,7 +22,11 @@ import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components
 import dateMath from '@elastic/datemath';
 import React, { Component } from 'react';
 import { ContentPanel } from '../../../../components/ContentPanel';
-import { getAlertsVisualizationSpec } from '../../../Overview/utils/helpers';
+import {
+  getAlertsVisualizationSpec,
+  getChartTimeUnit,
+  getDateFormatByTimeUnit,
+} from '../../../Overview/utils/helpers';
 import moment from 'moment';
 import {
   ALERT_STATE,
@@ -70,6 +74,7 @@ export interface AlertsState {
   filteredAlerts: AlertItem[];
   detectors: { [key: string]: Detector };
   loading: boolean;
+  timeUnit: string;
 }
 
 const groupByOptions = [
@@ -93,6 +98,7 @@ export default class Alerts extends Component<AlertsProps, AlertsState> {
       filteredAlerts: [],
       detectors: {},
       loading: false,
+      timeUnit: 'yearmonthdatehoursminutes',
     };
   }
 
@@ -218,7 +224,10 @@ export default class Alerts extends Component<AlertsProps, AlertsState> {
       };
     });
 
-    return getAlertsVisualizationSpec(visData, this.state.groupBy);
+    return getAlertsVisualizationSpec(visData, this.state.groupBy, {
+      timeUnit: this.state.timeUnit,
+      dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+    });
   }
 
   createGroupByControl(): React.ReactNode {
@@ -297,10 +306,13 @@ export default class Alerts extends Component<AlertsProps, AlertsState> {
     if (recentlyUsedRanges.length > MAX_RECENTLY_USED_TIME_RANGES)
       recentlyUsedRanges = recentlyUsedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
     const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
+
+    const timeUnit = getChartTimeUnit(start, endTime);
     this.setState({
       startTime: start,
       endTime: endTime,
       recentlyUsedRanges: recentlyUsedRanges,
+      timeUnit,
     });
   };
 

public/pages/Findings/containers/Findings/Findings.tsx

@@ -29,11 +29,15 @@ import {
   MAX_RECENTLY_USED_TIME_RANGES,
   OS_NOTIFICATION_PLUGIN,
 } from '../../../../utils/constants';
-import { getFindingsVisualizationSpec } from '../../../Overview/utils/helpers';
+import {
+  getChartTimeUnit,
+  getDateFormatByTimeUnit,
+  getFindingsVisualizationSpec,
+} from '../../../Overview/utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
 import { Finding } from '../../models/interfaces';
 import { Detector } from '../../../../../models/interfaces';
-import { FeatureChannelList } from '../../../../../server/models/interfaces/Notifications';
+import { FeatureChannelList } from '../../../../../server/models/interfaces';
 import {
   getNotificationChannels,
   parseNotificationChannelsToOptions,
@@ -46,6 +50,7 @@ import {
 } from '../../../../utils/helpers';
 import { DetectorHit, RuleSource } from '../../../../../server/models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
+import { ruleSeverity } from '../../../Rules/utils/constants';
 
 interface FindingsProps extends RouteComponentProps {
   detectorService: DetectorsService;
@@ -68,6 +73,7 @@ interface FindingsState {
   groupBy: FindingsGroupByType;
   filteredFindings: FindingItemType[];
   plugins: string[];
+  timeUnit: string;
 }
 
 interface FindingVisualizationData {
@@ -103,6 +109,7 @@ export default class Findings extends Component<FindingsProps, FindingsState> {
       groupBy: 'logType',
       filteredFindings: [],
       plugins: [],
+      timeUnit: 'yearmonthdatehoursminutes',
     };
   }
 
@@ -234,10 +241,12 @@ export default class Findings extends Component<FindingsProps, FindingsState> {
     if (recentlyUsedRanges.length > MAX_RECENTLY_USED_TIME_RANGES)
       recentlyUsedRanges = recentlyUsedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
     const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
+    const timeUnit = getChartTimeUnit(start, endTime);
     this.setState({
       startTime: start,
       endTime: endTime,
       recentlyUsedRanges: recentlyUsedRanges,
+      timeUnit,
     });
   };
 
@@ -256,7 +265,10 @@ export default class Findings extends Component<FindingsProps, FindingsState> {
       });
     });
 
-    return getFindingsVisualizationSpec(visData, this.state.groupBy);
+    return getFindingsVisualizationSpec(visData, this.state.groupBy, {
+      timeUnit: this.state.timeUnit,
+      dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+    });
   }
 
   createGroupByControl(): React.ReactNode {

public/pages/Overview/utils/constants.ts

@@ -9,3 +9,18 @@ export const summaryGroupByOptions = [
 ];
 
 export const moreLink = 'https://opensearch.org/docs/latest/security-analytics/';
+
+/**
+ * Time axis' timeUnit map
+ * for each time search unit there is a mapped chart timeUnit
+ */
+export const TimeUnitsMap: {
+  [key: string]: string;
+} = {
+  minutes: 'yearmonthdatehoursminutes',
+  hours: 'yearmonthdatehoursminutes',
+  days: 'yearmonthdatehours',
+  weeks: 'yearmonthdatehours',
+  months: 'yearmonthdatehours',
+  years: 'yearmonthdate',
+};

public/pages/Overview/utils/helper.test.ts

@@ -0,0 +1,59 @@
+import { getChartTimeUnit, getDateFormatByTimeUnit } from './helpers';
+import { TimeUnitsMap } from './constants';
+
+describe('helper utilities spec', () => {
+  describe('tests getDateFormatByTimeUnit function', () => {
+    const yearFormat = '%Y-%m-%d';
+    const dayFormat = '%H:%M:%S';
+    const fullFormat = '%Y-%m-%d %H:%M';
+
+    const timeFormats: {
+      [key: string]: string;
+    } = {
+      'now-15m': dayFormat,
+      'now-15h': fullFormat,
+      'now-15d': fullFormat,
+      'now-2M': yearFormat,
+      'now-2y': fullFormat,
+    };
+
+    it(` - function should return default format ${fullFormat} if dates are not valid`, () => {
+      expect(getDateFormatByTimeUnit('', '')).toBe(fullFormat);
+    });
+
+    for (const [start, format] of Object.entries(timeFormats)) {
+      it(` - function should return ${format} if start date is ${start}`, () => {
+        expect(getDateFormatByTimeUnit(start, 'now')).toBe(format);
+      });
+    }
+  });
+
+  describe('tests getChartTimeUnit function', () => {
+    const defaultTimeUnit = 'yearmonthdatehoursminutes';
+    it(' - function should return default timeUnit if fn params are invalid', () => {
+      expect(getChartTimeUnit('', '')).toBe(defaultTimeUnit);
+    });
+
+    it(' - function should return default timeUnit if one is passed as param', () => {
+      const defaultFormat = 'yearmonthdate';
+      expect(getChartTimeUnit('', '', defaultFormat)).toBe(defaultFormat);
+    });
+
+    const timeUnits: {
+      [key: string]: string;
+    } = {
+      minutes: 'now-15m',
+      hours: 'now-15h',
+      days: 'now-15d',
+      weeks: 'now-15w',
+      months: 'now-5M',
+      years: 'now-15y',
+    };
+
+    for (const [unit, start] of Object.entries(timeUnits)) {
+      it(` - function should return ${TimeUnitsMap[unit]} if unit is ${unit}`, () => {
+        expect(getChartTimeUnit(start, 'now')).toBe(TimeUnitsMap[unit]);
+      });
+    }
+  });
+});