Feature/charts should show the entire time range selected in the filter

opensearch-project#258 (opensearch-project#265) (opensearch-project#274) * [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]> * [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]> * [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]> * [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]> * [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]> * [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]> * [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]> * PR 265 Code review Signed-off-by: Jovan Cvetkovic <[email protected]> * PR 265 Code review Signed-off-by: Jovan Cvetkovic <[email protected]> Signed-off-by: Jovan Cvetkovic <[email protected]> (cherry picked from commit 2ccadad) Co-authored-by: Jovan Cvetkovic <[email protected]> Signed-off-by: AWSHurneyt <[email protected]>
AWSHurneyt · Feb 22, 2023 · 65b54e2 · 65b54e2
1 parent 5615cd6
commit 65b54e2
Show file tree

Hide file tree

Showing 11 changed files with 446 additions and 272 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 {
@@ -54,6 +55,8 @@ import {
 } from '../../../../utils/helpers';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { match, withRouter } from 'react-router-dom';
+import { DateTimeFilter } from '../../../Overview/models/interfaces';
+import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 
 export interface AlertsProps {
   alertService: AlertsService;
@@ -63,12 +66,12 @@ export interface AlertsProps {
   opensearchService: OpenSearchService;
   notifications: NotificationsStart;
   match: match;
+  dateTimeFilter?: DateTimeFilter;
+  setDateTimeFilter?: Function;
 }
 
 export interface AlertsState {
   groupBy: string;
-  startTime: string;
-  endTime: string;
   recentlyUsedRanges: DurationRange[];
   selectedItems: AlertItem[];
   alerts: AlertItem[];
@@ -77,7 +80,8 @@ export interface AlertsState {
   filteredAlerts: AlertItem[];
   detectors: { [key: string]: Detector };
   loading: boolean;
-  timeUnit: string;
+  timeUnit: TimeUnit;
+  dateFormat: string;
 }
 
 const groupByOptions = [
@@ -90,25 +94,38 @@ class Alerts extends Component<AlertsProps, AlertsState> {
 
   constructor(props: AlertsProps) {
     super(props);
+
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = props;
+    const timeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
     this.state = {
+      loading: true,
       groupBy: 'status',
-      startTime: DEFAULT_DATE_RANGE.start,
-      endTime: DEFAULT_DATE_RANGE.end,
       recentlyUsedRanges: [DEFAULT_DATE_RANGE],
       selectedItems: [],
       alerts: [],
       alertsFiltered: false,
       filteredAlerts: [],
       detectors: {},
-      loading: false,
-      timeUnit: 'yearmonthdatehoursminutes',
+      timeUnit: timeUnits.timeUnit,
+      dateFormat: timeUnits.dateFormat,
     };
   }
 
   componentDidUpdate(prevProps: Readonly<AlertsProps>, prevState: Readonly<AlertsState>) {
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
     const alertsChanged =
-      prevState.startTime !== this.state.startTime ||
-      prevState.endTime !== this.state.endTime ||
+      prevProps.dateTimeFilter?.startTime !== dateTimeFilter.startTime ||
+      prevProps.dateTimeFilter?.endTime !== dateTimeFilter.endTime ||
       prevState.alerts !== this.state.alerts ||
       prevState.alerts.length !== this.state.alerts.length;
 
@@ -120,9 +137,15 @@ class Alerts extends Component<AlertsProps, AlertsState> {
   }
 
   filterAlerts = () => {
-    const { alerts, startTime, endTime } = this.state;
-    const startMoment = dateMath.parse(startTime);
-    const endMoment = dateMath.parse(endTime);
+    const { alerts } = this.state;
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
+    const startMoment = dateMath.parse(dateTimeFilter.startTime);
+    const endMoment = dateMath.parse(dateTimeFilter.endTime);
     const filteredAlerts = alerts.filter((alert) =>
       moment(alert.last_notification_time).isBetween(moment(startMoment), moment(endMoment))
     );
@@ -226,10 +249,20 @@ class Alerts extends Component<AlertsProps, AlertsState> {
         severity: parseAlertSeverityToOption(alert.severity)?.label || alert.severity,
       };
     });
-
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
+    const chartTimeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
     return getAlertsVisualizationSpec(visData, this.state.groupBy, {
-      timeUnit: this.state.timeUnit,
-      dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+      timeUnit: chartTimeUnits.timeUnit,
+      dateFormat: chartTimeUnits.dateFormat,
+      domain: getDomainRange(
+        [dateTimeFilter.startTime, dateTimeFilter.endTime],
+        chartTimeUnits.timeUnit.unit
+      ),
     });
   }
 
@@ -313,13 +346,17 @@ 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,
     });
+
+    this.props.setDateTimeFilter &&
+      this.props.setDateTimeFilter({
+        startTime: start,
+        endTime: endTime,
+      });
   };
 
   onRefresh = async () => {
@@ -375,11 +412,15 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       filteredAlerts,
       flyoutData,
       loading,
-      startTime,
-      endTime,
       recentlyUsedRanges,
     } = this.state;
 
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
     const severities = new Set();
     const statuses = new Set();
     filteredAlerts.forEach((alert) => {
@@ -455,8 +496,8 @@ class Alerts extends Component<AlertsProps, AlertsState> {
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiSuperDatePicker
-                  start={startTime}
-                  end={endTime}
+                  start={dateTimeFilter.startTime}
+                  end={dateTimeFilter.endTime}
                   recentlyUsedRanges={recentlyUsedRanges}
                   isLoading={loading}
                   onTimeChange={this.onTimeChange}
@@ -474,7 +515,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
                   {this.createGroupByControl()}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <div id="alerts-view"></div>
+                  <ChartContainer chartViewId={'alerts-view'} loading={loading} />
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiPanel>
@@ -491,6 +532,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
                 search={search}
                 sorting={sorting}
                 selection={selection}
+                loading={loading}
               />
             </ContentPanel>
           </EuiFlexItem>

diff --git a/public/pages/Findings/containers/Findings/Findings.tsx b/public/pages/Findings/containers/Findings/Findings.tsx
@@ -28,12 +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';
@@ -51,7 +51,8 @@ import {
 } from '../../../../utils/helpers';
 import { DetectorHit, RuleSource } from '../../../../../server/models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
-import { ruleSeverity } from '../../../Rules/utils/constants';
+import { DateTimeFilter } from '../../../Overview/models/interfaces';
+import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 
 interface FindingsProps extends RouteComponentProps {
   detectorService: DetectorsService;
@@ -61,6 +62,8 @@ interface FindingsProps extends RouteComponentProps {
   ruleService: RuleService;
   notifications: NotificationsStart;
   match: match;
+  dateTimeFilter?: DateTimeFilter;
+  setDateTimeFilter?: Function;
 }
 
 interface FindingsState {
@@ -69,13 +72,12 @@ interface FindingsState {
   findings: FindingItemType[];
   notificationChannels: FeatureChannelList[];
   rules: { [id: string]: RuleSource };
-  startTime: string;
-  endTime: string;
   recentlyUsedRanges: DurationRange[];
   groupBy: FindingsGroupByType;
   filteredFindings: FindingItemType[];
   plugins: string[];
-  timeUnit: string;
+  timeUnit: TimeUnit;
+  dateFormat: string;
 }
 
 interface FindingVisualizationData {
@@ -99,19 +101,26 @@ class Findings extends Component<FindingsProps, FindingsState> {
 
   constructor(props: FindingsProps) {
     super(props);
+
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = props;
+    const timeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
     this.state = {
-      loading: false,
+      loading: true,
       detectors: [],
       findings: [],
       notificationChannels: [],
       rules: {},
-      startTime: DEFAULT_DATE_RANGE.start,
-      endTime: DEFAULT_DATE_RANGE.end,
       recentlyUsedRanges: [DEFAULT_DATE_RANGE],
       groupBy: 'logType',
       filteredFindings: [],
       plugins: [],
-      timeUnit: 'yearmonthdatehoursminutes',
+      timeUnit: timeUnits.timeUnit,
+      dateFormat: timeUnits.dateFormat,
     };
   }
 
@@ -246,13 +255,17 @@ 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,
     });
+
+    this.props.setDateTimeFilter &&
+      this.props.setDateTimeFilter({
+        startTime: start,
+        endTime: endTime,
+      });
   };
 
   generateVisualizationSpec() {
@@ -269,10 +282,20 @@ class Findings extends Component<FindingsProps, FindingsState> {
         ruleSeverity: this.state.rules[finding.queries[0].id].level,
       });
     });
-
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
+    const chartTimeUnits = getChartTimeUnit(dateTimeFilter.startTime, dateTimeFilter.endTime);
     return getFindingsVisualizationSpec(visData, this.state.groupBy, {
-      timeUnit: this.state.timeUnit,
-      dateFormat: getDateFormatByTimeUnit(this.state.startTime, this.state.endTime),
+      timeUnit: chartTimeUnits.timeUnit,
+      dateFormat: chartTimeUnits.dateFormat,
+      domain: getDomainRange(
+        [dateTimeFilter.startTime, dateTimeFilter.endTime],
+        chartTimeUnits.timeUnit.unit
+      ),
     });
   }
 
@@ -293,16 +316,15 @@ class Findings extends Component<FindingsProps, FindingsState> {
   };
 
   render() {
-    const {
-      loading,
-      notificationChannels,
-      rules,
-      startTime,
-      endTime,
-      recentlyUsedRanges,
-    } = this.state;
+    const { loading, notificationChannels, rules, recentlyUsedRanges } = this.state;
     let { findings } = this.state;
 
+    const {
+      dateTimeFilter = {
+        startTime: DEFAULT_DATE_RANGE.start,
+        endTime: DEFAULT_DATE_RANGE.end,
+      },
+    } = this.props;
     if (Object.keys(rules).length > 0) {
       findings = findings.map((finding) => {
         const rule = rules[finding.queries[0].id];
@@ -325,8 +347,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiSuperDatePicker
-                start={startTime}
-                end={endTime}
+                start={dateTimeFilter.startTime}
+                end={dateTimeFilter.endTime}
                 recentlyUsedRanges={recentlyUsedRanges}
                 isLoading={loading}
                 onTimeChange={this.onTimeChange}
@@ -344,7 +366,7 @@ class Findings extends Component<FindingsProps, FindingsState> {
                 {this.createGroupByControl()}
               </EuiFlexItem>
               <EuiFlexItem>
-                <div id="findings-view" style={{ width: '100%' }}></div>
+                <ChartContainer chartViewId={'findings-view'} loading={loading} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
@@ -359,8 +381,8 @@ class Findings extends Component<FindingsProps, FindingsState> {
               findings={findings}
               loading={loading}
               rules={rules}
-              startTime={startTime}
-              endTime={endTime}
+              startTime={dateTimeFilter.startTime}
+              endTime={dateTimeFilter.endTime}
               onRefresh={this.onRefresh}
               notificationChannels={parseNotificationChannelsToOptions(notificationChannels)}
               refreshNotificationChannels={this.getNotificationChannels}