[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 [FEATURE] Add chart data to the tooltips opensearch-project#263 Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Dec 27, 2022 · b2ba85a · b2ba85a
1 parent 4d9db71
commit b2ba85a
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 142 deletions.
diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx
@@ -25,7 +25,8 @@ import { ContentPanel } from '../../../../components/ContentPanel';
 import {
   getAlertsVisualizationSpec,
   getChartTimeUnit,
-  getDateFormatByTimeUnit,
+  getDomainRange,
+  TimeUnit,
 } from '../../../Overview/utils/helpers';
 import moment from 'moment';
 import {
@@ -77,7 +78,8 @@ export interface AlertsState {
   filteredAlerts: AlertItem[];
   detectors: { [key: string]: Detector };
   loading: boolean;
-  timeUnit: string;
+  timeUnit: TimeUnit;
+  dateFormat: string;
 }
 
 const groupByOptions = [
@@ -90,7 +92,10 @@ class Alerts extends Component<AlertsProps, AlertsState> {
 
   constructor(props: AlertsProps) {
     super(props);
+
+    const timeUnits = getChartTimeUnit(DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end);
     this.state = {
+      loading: false,
       groupBy: 'status',
       startTime: DEFAULT_DATE_RANGE.start,
       endTime: DEFAULT_DATE_RANGE.end,
@@ -100,8 +105,8 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       alertsFiltered: false,
       filteredAlerts: [],
       detectors: {},
-      loading: false,
-      timeUnit: 'yearmonthdatehoursminutes',
+      timeUnit: timeUnits.timeUnit,
+      dateFormat: timeUnits.dateFormat,
     };
   }
 
@@ -227,9 +232,14 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       };
     });
 
+    const chartTimeUnits = getChartTimeUnit(this.state.startTime, this.state.endTime);
     return getAlertsVisualizationSpec(visData, this.state.groupBy, {
       timeUnit: this.state.timeUnit,
-      dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+      dateFormat: chartTimeUnits.dateFormat,
+      domain: getDomainRange(
+        [this.state.startTime, this.state.endTime],
+        chartTimeUnits.timeUnit.unit
+      ),
     });
   }
 
@@ -313,12 +323,12 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       recentlyUsedRanges = recentlyUsedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
     const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
 
-    const timeUnit = getChartTimeUnit(start, endTime);
+    const timeUnits = getChartTimeUnit(start, endTime);
     this.setState({
       startTime: start,
       endTime: endTime,
       recentlyUsedRanges: recentlyUsedRanges,
-      timeUnit,
+      ...timeUnits,
     });
   };
 

diff --git a/public/pages/Findings/containers/Findings/Findings.tsx b/public/pages/Findings/containers/Findings/Findings.tsx
@@ -28,13 +28,12 @@ import {
   DEFAULT_DATE_RANGE,
   MAX_RECENTLY_USED_TIME_RANGES,
   OS_NOTIFICATION_PLUGIN,
-  ROUTES,
 } from '../../../../utils/constants';
 import {
   getChartTimeUnit,
-  getDateFormatByTimeUnit,
   getDomainRange,
   getFindingsVisualizationSpec,
+  TimeUnit,
 } from '../../../Overview/utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
 import { Finding } from '../../models/interfaces';
@@ -75,7 +74,8 @@ interface FindingsState {
   groupBy: FindingsGroupByType;
   filteredFindings: FindingItemType[];
   plugins: string[];
-  timeUnit: string;
+  timeUnit: TimeUnit;
+  dateFormat: string;
 }
 
 interface FindingVisualizationData {
@@ -99,6 +99,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
 
   constructor(props: FindingsProps) {
     super(props);
+
+    const timeUnits = getChartTimeUnit(DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end);
     this.state = {
       loading: false,
       detectors: [],
@@ -111,7 +113,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
       groupBy: 'logType',
       filteredFindings: [],
       plugins: [],
-      timeUnit: getChartTimeUnit(DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end),
+      timeUnit: timeUnits.timeUnit,
+      dateFormat: timeUnits.dateFormat,
     };
   }
 
@@ -246,12 +249,12 @@ 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);
+    const timeUnits = getChartTimeUnit(start, endTime);
     this.setState({
       startTime: start,
       endTime: endTime,
       recentlyUsedRanges: recentlyUsedRanges,
-      timeUnit,
+      ...timeUnits,
     });
   };
 
@@ -270,10 +273,14 @@ class Findings extends Component<FindingsProps, FindingsState> {
       });
     });
 
+    const chartTimeUnits = getChartTimeUnit(this.state.startTime, this.state.endTime);
     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]),
+      dateFormat: chartTimeUnits.dateFormat,
+      domain: getDomainRange(
+        [this.state.startTime, this.state.endTime],
+        chartTimeUnits.timeUnit.unit
+      ),
     });
   }
 

diff --git a/public/pages/Overview/components/Widgets/Summary.tsx b/public/pages/Overview/components/Widgets/Summary.tsx
@@ -8,9 +8,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { WidgetContainer } from './WidgetContainer';
 import { summaryGroupByOptions } from '../../utils/constants';
 import {
-  getDateFormatByTimeUnit,
+  getChartTimeUnit,
+  getDomainRange,
   getOverviewVisualizationSpec,
   getTimeWithMinPrecision,
+  TimeUnit,
 } from '../../utils/helpers';
 import { AlertItem, FindingItem } from '../../models/interfaces';
 import { createSelectComponent, renderVisualization } from '../../../../utils/helpers';
@@ -21,6 +23,9 @@ export interface SummaryProps {
   findings: FindingItem[];
   alerts: AlertItem[];
   loading?: boolean;
+  startTime: string;
+  endTime: string;
+  timeUnit: TimeUnit;
 }
 
 export interface SummaryData {
@@ -62,9 +67,12 @@ export const Summary: React.FC<SummaryProps> = ({
   );
 
   const generateVisualizationSpec = useCallback((summaryData, groupBy) => {
+    const chartTimeUnits = getChartTimeUnit(startTime, endTime);
+
     return getOverviewVisualizationSpec(summaryData, groupBy, {
       timeUnit: timeUnit,
-      dateFormat: getDateFormatByTimeUnit(startTime, endTime),
+      dateFormat: chartTimeUnits.dateFormat,
+      domain: getDomainRange([startTime, endTime], chartTimeUnits.timeUnit.unit),
     });
   }, []);
 

diff --git a/public/pages/Overview/containers/Overview/Overview.tsx b/public/pages/Overview/containers/Overview/Overview.tsx
@@ -28,7 +28,7 @@ import { ServicesContext } from '../../../../services';
 import { Summary } from '../../components/Widgets/Summary';
 import { TopRulesWidget } from '../../components/Widgets/TopRulesWidget';
 import { GettingStartedPopup } from '../../components/GettingStarted/GettingStartedPopup';
-import { getChartTimeUnit } from '../../utils/helpers';
+import { getChartTimeUnit, TimeUnit } from '../../utils/helpers';
 
 export const Overview: React.FC<OverviewProps> = (props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -45,7 +45,9 @@ export const Overview: React.FC<OverviewProps> = (props) => {
   const [endTime, setEndTime] = useState(DEFAULT_DATE_RANGE.end);
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([DEFAULT_DATE_RANGE]);
   const [loading, setLoading] = useState(true);
-  const [timeUnit, setTimeUnit] = useState('yearmonthdatehoursminutes');
+
+  const timeUnits = getChartTimeUnit(DEFAULT_DATE_RANGE.start, DEFAULT_DATE_RANGE.end);
+  const [timeUnit, setTimeUnit] = useState<TimeUnit>(timeUnits.timeUnit);
 
   const context = useContext(CoreServicesContext);
   const services = useContext(ServicesContext);
@@ -94,10 +96,10 @@ export const Overview: React.FC<OverviewProps> = (props) => {
       usedRanges = usedRanges.slice(0, MAX_RECENTLY_USED_TIME_RANGES);
 
     const endTime = start === end ? DEFAULT_DATE_RANGE.end : end;
-    const timeUnit = getChartTimeUnit(start, endTime);
+    const timeUnits = getChartTimeUnit(start, endTime);
     setStartTime(start);
     setEndTime(endTime);
-    setTimeUnit(timeUnit);
+    setTimeUnit(timeUnits.timeUnit);
     setRecentlyUsedRanges(usedRanges);
   };
 

diff --git a/public/pages/Overview/utils/helper.test.ts b/public/pages/Overview/utils/helper.test.ts
@@ -1,35 +1,7 @@
-import { getChartTimeUnit, getDateFormatByTimeUnit } from './helpers';
+import { getChartTimeUnit } from './helpers';
 import { TimeUnitsMap } from './constants';
-import moment from 'moment';
 
 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 hoursAgo = moment().subtract(15, 'hours');
-
-    const timeFormats: {
-      [key: string]: string;
-    } = {
-      'now-15m': dayFormat,
-      'now-15h': hoursAgo.date() === moment().date() ? dayFormat : 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', () => {