[FEATURE] Set default time range to 24 hrs and share the same setting…

… for all UI pages opensearch-project#253 [FEATURE] Charts should show the entire time range selected in the filter opensearch-project#258 Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Dec 24, 2022 · 4d9db71 · 4d9db71
1 parent c6d5dbe
commit 4d9db71
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 14 deletions.
diff --git a/public/pages/Findings/containers/Findings/Findings.tsx b/public/pages/Findings/containers/Findings/Findings.tsx
@@ -33,6 +33,7 @@ import {
 import {
   getChartTimeUnit,
   getDateFormatByTimeUnit,
+  getDomainRange,
   getFindingsVisualizationSpec,
 } from '../../../Overview/utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
@@ -51,7 +52,6 @@ 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;
@@ -111,7 +111,7 @@ class Findings extends Component<FindingsProps, FindingsState> {
       groupBy: 'logType',
       filteredFindings: [],
       plugins: [],
-      timeUnit: 'yearmonthdatehoursminutes',
+      timeUnit: getChartTimeUnit(DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end),
     };
   }
 
@@ -273,6 +273,7 @@ class Findings extends Component<FindingsProps, FindingsState> {
     return getFindingsVisualizationSpec(visData, this.state.groupBy, {
       timeUnit: this.state.timeUnit,
       dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+      domain: getDomainRange([this.state.startTime, this.state.endTime]),
     });
   }
 

diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts
@@ -10,10 +10,12 @@ import { SummaryData } from '../components/Widgets/Summary';
 import dateMath from '@elastic/datemath';
 import { TimeUnitsMap } from './constants';
 import _ from 'lodash';
+import { DEFAULT_DATE_RANGE } from '../../../utils/constants';
 
 export type DateOpts = {
   timeUnit: string;
   dateFormat: string;
+  domain?: number[];
 };
 
 /**
@@ -45,7 +47,7 @@ const addInteractiveLegends = (layer: any) => _.defaultsDeep(layer, legendSelect
 function getVisualizationSpec(description: string, data: any, layers: any[]): TopLevelSpec {
   return {
     config: {
-      view: { stroke: null },
+      view: { stroke: 'transparent' },
       legend: {
         labelColor: '#343741',
         titleColor: '#1a1c21',
@@ -143,6 +145,15 @@ export function getOverviewVisualizationSpec(
   );
 }
 
+export const getDomainRange = (
+  range: string[] = [DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end]
+): number[] => {
+  return [
+    dateMath.parse(range[0])?.toDate().getTime(),
+    dateMath.parse(range[1])?.toDate().getTime(),
+  ];
+};
+
 /**
  * Returns chart x-axis date format based on time span
  * @param start
@@ -186,21 +197,48 @@ export function getFindingsVisualizationSpec(
   dateOpts: DateOpts = {
     timeUnit: 'yearmonthdatehoursminutes',
     dateFormat: '%Y-%m-%d %H:%M',
+    domain: [DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end],
   }
 ) {
+  console.log('TIME UNIT', dateOpts.timeUnit);
+  // dateOpts.timeUnit = 'yearmonthdatehours';
   return getVisualizationSpec('Findings data overview', visualizationData, [
     addInteractiveLegends({
-      mark: 'bar',
+      mark: {
+        type: 'bar',
+        strokeWidth: 1,
+        stroke: 'white',
+        clip: true,
+      },
       encoding: {
-        tooltip: [{ field: 'finding', aggregate: 'sum', type: 'quantitative', title: 'Findings' }],
+        tooltip: [
+          {
+            field: 'finding',
+            aggregate: 'sum',
+            type: 'quantitative',
+            title: 'Findings',
+          },
+          {
+            field: 'time',
+            type: 'temporal',
+            title: 'Time',
+            format: '%Y-%m-%d %H:%M',
+          },
+        ],
         x: {
           timeUnit: dateOpts.timeUnit,
           field: 'time',
           title: '',
+          type: 'temporal',
           axis: {
             grid: false,
             format: dateOpts.dateFormat,
           },
+          scale: {
+            type: 'time',
+            field: 'time',
+            domain: dateOpts.domain,
+          },
         },
         y: {
           aggregate: 'sum',
@@ -328,22 +366,53 @@ export function getChartTimeUnit(
 ): string {
   const startMoment = dateMath.parse(start);
   const endMoment = dateMath.parse(end);
-  let minUnit: string = 'minutes';
-  let timeUnit: string = TimeUnitsMap[minUnit];
+  let timeUnit: string = 'yearmonthdatehoursminutes';
 
   if (!startMoment || !endMoment) return defaultUnit;
 
   try {
     const timeDiff = endMoment.diff(startMoment);
     const momentTimeDiff = moment.duration(timeDiff);
 
-    const timeUnits: string[] = ['years', 'months', 'days', 'hours', 'minutes'];
-    for (const unit of timeUnits) {
-      // @ts-ignore
-      if (momentTimeDiff._data[unit]) {
-        timeUnit = TimeUnitsMap[unit];
-        break;
+    console.log('TIME UNIT', momentTimeDiff);
+    const { years, months, days, hours, minutes, seconds } = momentTimeDiff._data;
+
+    if (!years) {
+      if (!months) {
+        if (!days) {
+          if (!hours) {
+            if (minutes < 60) {
+              timeUnit = 'yearmonthdatehoursminutes';
+            }
+          } else {
+            if (hours < 60) {
+              timeUnit = 'yearmonthdatehours';
+            }
+          }
+        } else {
+          if (days === 1) {
+            timeUnit = 'yearmonthdatehours';
+          } else if (days <= 14) {
+            timeUnit = 'yearmonthdate';
+          } else {
+            timeUnit = 'yearmonthdate';
+          }
+        }
+      } else {
+        if (months <= 6) {
+          timeUnit = 'yearmonthdate';
+        } else {
+          timeUnit = 'yearmonth';
+        }
+      }
+    } else if (years <= 6) {
+      timeUnit = 'yearmonth';
+
+      if (years > 2) {
+        timeUnit = 'yearquarter';
       }
+    } else {
+      timeUnit = 'year';
     }
   } catch (e) {
     console.error(`Time diff can't be calculated for dates: ${start} and ${end}`);

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -9,7 +9,7 @@ import { DETECTOR_TYPES } from '../pages/Detectors/utils/constants';
 
 export const DATE_MATH_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
 export const MAX_RECENTLY_USED_TIME_RANGES = 5;
-export const DEFAULT_DATE_RANGE = { start: 'now-15m', end: 'now' };
+export const DEFAULT_DATE_RANGE = { start: 'now-24h', end: 'now' };
 
 export const PLUGIN_NAME = 'opensearch_security_analytics_dashboards';
 export const OS_NOTIFICATION_PLUGIN = 'opensearch-notifications';