[Backport 2.5] Manually backported PRs 418, 471, 576, and 584. (#623)

* [FEATURE] Provide empty states for Findings and Alerts page #471 (#494) (#519) Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * fixed recent alerts & finding order; count for pie chart (#576) (#579) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> (cherry picked from commit 3812055) Co-authored-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * Show required field mappings only for enabled rules (#418) (#481) * show required field mappings only for enabled rules Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated mock custom rule to match mapping in backend Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> (cherry picked from commit 1bbc4c5) Co-authored-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * Resolved merge conflicts after cherry-picking PR 418. Signed-off-by: AWSHurneyt <hurneyt@amazon.com> * use user provided end date for x-axis calc (#584) (#604) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> (cherry picked from commit c280bad) Co-authored-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: AWSHurneyt <hurneyt@amazon.com> Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Co-authored-by: Amardeepsingh Siglani <amardeep7194@gmail.com> cr: https://code.amazon.com/reviews/CR-93561817
opensearch-project · Jun 8, 2023 · a645892 · a645892
1 parent 67e0fb4
commit a645892
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 15 deletions.
diff --git a/cypress/fixtures/integration_tests/rule/create_dns_rule.json b/cypress/fixtures/integration_tests/rule/create_dns_rule.json
@@ -16,7 +16,7 @@
     }
   ],
   "log_source": "",
-  "detection": "selection:\n  DnsQuestionName:\n    - QWE\n    - ASD\n    - YXC\ncondition: selection",
+  "detection": "selection:\n  query:\n    - QWE\n    - ASD\n    - YXC\ncondition: selection",
   "level": "low",
   "false_positives": [
     {

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -5,6 +5,7 @@
 
 import { OPENSEARCH_DASHBOARDS_URL } from '../support/constants';
 import sample_index_settings from '../fixtures/sample_index_settings.json';
+import dns_rule_data from '../fixtures/integration_tests/rule/create_dns_rule.json';
 
 const testMappings = {
   properties: {

diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx
@@ -17,6 +17,7 @@ import {
   EuiSuperDatePicker,
   EuiTitle,
   EuiToolTip,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 import dateMath from '@elastic/datemath';
@@ -82,6 +83,7 @@ export interface AlertsState {
   loading: boolean;
   timeUnit: TimeUnit;
   dateFormat: string;
+  widgetEmptyMessage: React.ReactNode | undefined;
 }
 
 const groupByOptions = [
@@ -113,6 +115,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       detectors: {},
       timeUnit: timeUnits.timeUnit,
       dateFormat: timeUnits.dateFormat,
+      widgetEmptyMessage: undefined,
     };
   }
 
@@ -149,7 +152,20 @@ class Alerts extends Component<AlertsProps, AlertsState> {
     const filteredAlerts = alerts.filter((alert) =>
       moment(alert.last_notification_time).isBetween(moment(startMoment), moment(endMoment))
     );
-    this.setState({ alertsFiltered: true, filteredAlerts: filteredAlerts });
+    this.setState({
+      alertsFiltered: true,
+      filteredAlerts: filteredAlerts,
+      widgetEmptyMessage: filteredAlerts.length ? undefined : (
+        <EuiEmptyPrompt
+          body={
+            <p>
+              <span style={{ display: 'block' }}>No alerts.</span>Adjust the time range to see more
+              results.
+            </p>
+          }
+        />
+      ),
+    });
     renderVisualization(this.generateVisualizationSpec(filteredAlerts), 'alerts-view');
   };
 
@@ -415,6 +431,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
       flyoutData,
       loading,
       recentlyUsedRanges,
+      widgetEmptyMessage,
     } = this.state;
 
     const {
@@ -508,7 +525,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="xxl" />
+            <EuiSpacer size={'m'} />
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiPanel>
@@ -517,7 +534,20 @@ class Alerts extends Component<AlertsProps, AlertsState> {
                   {this.createGroupByControl()}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <ChartContainer chartViewId={'alerts-view'} loading={loading} />
+                  {!alerts || alerts.length === 0 ? (
+                    <EuiEmptyPrompt
+                      title={<h2>No alerts</h2>}
+                      body={
+                        <p>
+                          Adjust the time range to see more results or create alert triggers in your{' '}
+                          <EuiLink href={`${location.pathname}#/detectors`}>detectors</EuiLink> to
+                          generate alerts.
+                        </p>
+                      }
+                    />
+                  ) : (
+                    <ChartContainer chartViewId={'alerts-view'} loading={loading} />
+                  )}
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiPanel>
@@ -535,6 +565,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
                 sorting={sorting}
                 selection={selection}
                 loading={loading}
+                message={widgetEmptyMessage}
               />
             </ContentPanel>
           </EuiFlexItem>

diff --git a/...ages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/...ages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
@@ -23,6 +23,7 @@ import { DetectorCreationStep } from '../../../models/types';
 import { GetFieldMappingViewResponse } from '../../../../../../server/models/interfaces';
 import FieldMappingService from '../../../../../services/FieldMappingService';
 import { MappingViewType } from '../components/RequiredFieldMapping/FieldMappingsTable';
+import { CreateDetectorRulesState } from '../../DefineDetector/components/DetectionRules/DetectionRules';
 
 export interface ruleFieldToIndexFieldMap {
   [fieldName: string]: string;
@@ -32,10 +33,11 @@ interface ConfigureFieldMappingProps extends RouteComponentProps {
   isEdit: boolean;
   detector: Detector;
   filedMappingService: FieldMappingService;
-  replaceFieldMappings: (mappings: FieldMapping[]) => void;
   fieldMappings: FieldMapping[];
-  updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   loading: boolean;
+  enabledRules: CreateDetectorRulesState['allRules'];
+  updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
+  replaceFieldMappings: (mappings: FieldMapping[]) => void;
 }
 
 interface ConfigureFieldMappingState {
@@ -67,6 +69,17 @@ export default class ConfigureFieldMapping extends Component<
     this.getAllMappings();
   };
 
+  private getRuleFieldsForEnabledRules(): Set<string> {
+    const ruleFieldsForEnabledRules = new Set<string>();
+    this.props.enabledRules.forEach((rule) => {
+      rule._source.query_field_names.forEach((fieldname) => {
+        ruleFieldsForEnabledRules.add(fieldname.value);
+      });
+    });
+
+    return ruleFieldsForEnabledRules;
+  }
+
   getAllMappings = async () => {
     this.setState({ loading: true });
     const mappingsView = await this.props.filedMappingService.getMappingsView(
@@ -75,14 +88,31 @@ export default class ConfigureFieldMapping extends Component<
     );
     if (mappingsView.ok) {
       const existingMappings = { ...this.state.createdMappings };
+      const ruleFieldsForEnabledRules = this.getRuleFieldsForEnabledRules();
+      const unmappedRuleFields = new Set(mappingsView.response.unmapped_field_aliases);
+
       Object.keys(mappingsView.response.properties).forEach((ruleFieldName) => {
+        // Filter the mappings view to include only the rule fields for the enabled rules
+        if (!ruleFieldsForEnabledRules.has(ruleFieldName)) {
+          delete mappingsView.response.properties[ruleFieldName];
+          return;
+        }
+
         existingMappings[ruleFieldName] =
           this.state.createdMappings[ruleFieldName] ||
           mappingsView.response.properties[ruleFieldName].path;
       });
+      mappingsView.response.unmapped_field_aliases?.forEach((ruleFieldName) => {
+        if (!ruleFieldsForEnabledRules.has(ruleFieldName)) {
+          unmappedRuleFields.delete(ruleFieldName);
+        }
+      });
       this.setState({
         createdMappings: existingMappings,
-        mappingsData: mappingsView.response,
+        mappingsData: {
+          ...mappingsView.response,
+          unmapped_field_aliases: Array.from(unmappedRuleFields),
+        },
       });
       this.updateMappingSharedState(existingMappings);
     }

diff --git a/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -60,6 +60,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
         logType: rule._source.category,
         name: rule._source.title,
         severity: rule._source.level,
+        ruleInfo: rule,
       })),
     [rulesState.allRules]
   );

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -324,6 +324,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
             loading={false}
             filedMappingService={services.fieldMappingService}
             fieldMappings={this.state.fieldMappings}
+            enabledRules={this.state.rulesState.allRules.filter((rule) => rule.enabled)}
             replaceFieldMappings={this.replaceFieldMappings}
             updateDataValidState={this.updateDataValidState}
           />

diff --git a/public/pages/Findings/components/FindingsTable/FindingsTable.tsx b/public/pages/Findings/components/FindingsTable/FindingsTable.tsx
@@ -12,6 +12,7 @@ import {
   EuiInMemoryTable,
   EuiLink,
   EuiToolTip,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 import dateMath from '@elastic/datemath';
@@ -48,6 +49,7 @@ interface FindingsTableState {
   flyout: object | undefined;
   flyoutOpen: boolean;
   selectedFinding?: Finding;
+  widgetEmptyMessage: React.ReactNode | undefined;
 }
 
 export default class FindingsTable extends Component<FindingsTableProps, FindingsTableState> {
@@ -59,6 +61,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
       flyout: undefined,
       flyoutOpen: false,
       selectedFinding: undefined,
+      widgetEmptyMessage: undefined,
     };
   }
 
@@ -82,7 +85,21 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
     const filteredFindings = findings.filter((finding) =>
       moment(finding.timestamp).isBetween(moment(startMoment), moment(endMoment))
     );
-    this.setState({ findingsFiltered: true, filteredFindings: filteredFindings });
+    this.setState({
+      findingsFiltered: true,
+      filteredFindings: filteredFindings,
+      widgetEmptyMessage:
+        filteredFindings.length || findings.length ? undefined : (
+          <EuiEmptyPrompt
+            body={
+              <p>
+                <span style={{ display: 'block' }}>No findings.</span>Adjust the time range to see
+                more results.
+              </p>
+            }
+          />
+        ),
+    });
     this.props.onFindingsFiltered(filteredFindings);
   };
 
@@ -142,7 +159,13 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
 
   render() {
     const { findings, loading, rules } = this.props;
-    const { findingsFiltered, filteredFindings, flyout, flyoutOpen } = this.state;
+    const {
+      findingsFiltered,
+      filteredFindings,
+      flyout,
+      flyoutOpen,
+      widgetEmptyMessage,
+    } = this.state;
 
     const columns: EuiBasicTableColumn<Finding>[] = [
       {
@@ -285,6 +308,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
           sorting={sorting}
           isSelectable={false}
           loading={loading}
+          message={widgetEmptyMessage}
         />
         {flyoutOpen && flyout}
       </div>

diff --git a/public/pages/Findings/containers/Findings/Findings.tsx b/public/pages/Findings/containers/Findings/Findings.tsx
@@ -14,6 +14,8 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
   EuiTitle,
+  EuiEmptyPrompt,
+  EuiLink,
 } from '@elastic/eui';
 import FindingsTable from '../../components/FindingsTable';
 import FindingsService from '../../../../services/FindingsService';
@@ -38,7 +40,6 @@ import {
 } 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';
 import {
   getNotificationChannels,
@@ -55,6 +56,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { DateTimeFilter } from '../../../Overview/models/interfaces';
 import { ChartContainer } from '../../../../components/Charts/ChartContainer';
 import { RulesViewModelActor } from '../../../Rules/models/RulesViewModelActor';
+import { Detector } from '../../../../../types';
 
 interface FindingsProps extends RouteComponentProps {
   detectorService: DetectorsService;
@@ -344,7 +346,22 @@ class Findings extends Component<FindingsProps, FindingsState> {
                 {this.createGroupByControl()}
               </EuiFlexItem>
               <EuiFlexItem>
-                <ChartContainer chartViewId={'findings-view'} loading={loading} />
+                {!findings || findings.length === 0 ? (
+                  <EuiEmptyPrompt
+                    title={<h2>No findings</h2>}
+                    body={
+                      <p>
+                        Adjust the time range to see more results or{' '}
+                        <EuiLink href={`${location.pathname}#/create-detector`}>
+                          create a detector
+                        </EuiLink>{' '}
+                        to generate findings.
+                      </p>
+                    }
+                  />
+                ) : (
+                  <ChartContainer chartViewId={'findings-view'} loading={loading} />
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>

diff --git a/public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx b/public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx
@@ -50,7 +50,7 @@ export const RecentAlertsWidget: React.FC<RecentAlertsWidgetProps> = ({
     items.sort((a, b) => {
       const timeA = new Date(a.time).getTime();
       const timeB = new Date(b.time).getTime();
-      return timeA - timeB;
+      return timeB - timeA;
     });
     setAlertItems(items.slice(0, 20));
   }, [items]);

diff --git a/public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx b/public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx
@@ -55,7 +55,7 @@ export const RecentFindingsWidget: React.FC<RecentFindingsWidgetProps> = ({
 
   useEffect(() => {
     items.sort((a, b) => {
-      return a.time - b.time;
+      return b.time - a.time;
     });
     setFindingItems(items.slice(0, 20));
   }, [items]);

diff --git a/public/pages/Overview/components/Widgets/TopRulesWidget.tsx b/public/pages/Overview/components/Widgets/TopRulesWidget.tsx
@@ -27,7 +27,7 @@ export const TopRulesWidget: React.FC<TopRulesWidgetProps> = ({ findings, loadin
     if (Object.keys(rulesCount).length > 0) {
       const visualizationData = Object.keys(rulesCount).map((ruleName) => ({
         ruleName,
-        count: 1,
+        count: rulesCount[ruleName],
       }));
       renderVisualization(getTopRulesVisualizationSpec(visualizationData), 'top-rules-view');
     }

diff --git a/public/pages/Overview/containers/Overview/Overview.tsx b/public/pages/Overview/containers/Overview/Overview.tsx
@@ -11,6 +11,7 @@ import {
   EuiPopover,
   EuiSuperDatePicker,
   EuiTitle,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import {
@@ -166,6 +167,7 @@ export const Overview: React.FC<OverviewProps> = (props) => {
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size={'m'} />
       </EuiFlexItem>
       <EuiFlexItem>
         <Summary

diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts
@@ -439,7 +439,9 @@ export const getDomainRange = (
   if (timeUnit) {
     const timeUnitSize = timeUnit.match(/.*(seconds|minutes|hours|date|month|year)$/);
     if (timeUnitSize && timeUnitSize[1]) {
-      rangeEnd = `now+1${timeUnitSize[1][0]}`;
+      // `||` is the separator which the datemath's parse method will use to split the dates for
+      // the addition.
+      rangeEnd = `${range[1]}||+1${timeUnitSize[1][0]}`;
     }
   }
   const end: number = parseDateString(rangeEnd);

diff --git a/server/models/interfaces/Rules.ts b/server/models/interfaces/Rules.ts
@@ -68,4 +68,5 @@ export type RuleSource = Rule & {
   rule: string;
   last_update_time: string;
   queries: { value: string }[];
+  query_field_names: { value: string }[];
 };