[Backport main] Correlation engine ux

package.json

@@ -71,6 +71,7 @@
     "yarn": "^1.21.1"
   },
   "dependencies": {
-    "formik": "^2.2.6"
+    "formik": "^2.2.6",
+    "react-graph-vis": "^1.0.7"
   }
 }

public/app.scss

@@ -15,6 +15,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Overview/components/Widgets/WidgetContainer.scss";
 @import "./pages/Main/components/Callout.scss";
 @import "./pages/Detectors/components/ReviewFieldMappings/ReviewFieldMappings.scss";
+@import "./pages/Correlations//Correlations.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);

public/models/interfaces.ts

@@ -15,9 +15,11 @@ import {
   NotificationsService,
   IndexPatternsService,
 } from '../services';
+import CorrelationService from '../services/CorrelationService';
 
 export interface BrowserServices {
   detectorsService: DetectorsService;
+  correlationsService: CorrelationService;
   findingsService: FindingsService;
   indexService: IndexService;
   opensearchService: OpenSearchService;

public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx

@@ -28,20 +28,21 @@ import {
   formatRuleType,
   renderTime,
 } from '../../../../utils/helpers';
-import { FindingsService, OpenSearchService } from '../../../../services';
+import { FindingsService, IndexPatternsService, OpenSearchService } from '../../../../services';
 import FindingDetailsFlyout from '../../../Findings/components/FindingDetailsFlyout';
-import { Detector } from '../../../../../models/interfaces';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
 import { Finding } from '../../../Findings/models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { DataStore } from '../../../../store/DataStore';
+import { Detector } from '../../../../../types';
 
 export interface AlertFlyoutProps {
   alertItem: AlertItem;
   detector: Detector;
   findingsService: FindingsService;
   notifications: NotificationsStart;
   opensearchService: OpenSearchService;
+  indexPatternService: IndexPatternsService;
   onClose: () => void;
   onAcknowledge: (selectedItems: AlertItem[]) => void;
 }
@@ -180,9 +181,10 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
       <FindingDetailsFlyout
         {...this.props}
         finding={{
-          ...findingFlyoutData,
-          detector: { _id: detector.id, _index: '', _source: detector },
+          ...(findingFlyoutData as Finding),
+          detector: { _id: detector.id as string, _index: '', _source: detector },
         }}
+        findings={findingItems}
         closeFlyout={onClose}
         backButton={
           <EuiButtonIcon
@@ -195,6 +197,7 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
           />
         }
         allRules={rules}
+        indexPatternsService={this.props.indexPatternService}
       />
     ) : (
       <EuiFlyout

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

@@ -42,8 +42,7 @@ import AlertsService from '../../../../services/AlertsService';
 import DetectorService from '../../../../services/DetectorService';
 import { AlertItem } from '../../../../../server/models/interfaces';
 import { AlertFlyout } from '../../components/AlertFlyout/AlertFlyout';
-import { FindingsService, OpenSearchService } from '../../../../services';
-import { Detector } from '../../../../../models/interfaces';
+import { FindingsService, IndexPatternsService, OpenSearchService } from '../../../../services';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
 import { DISABLE_ACKNOWLEDGED_ALERT_HELP_TEXT } from '../../utils/constants';
 import {
@@ -58,13 +57,15 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { match, RouteComponentProps, withRouter } from 'react-router-dom';
 import { DateTimeFilter } from '../../../Overview/models/interfaces';
 import { ChartContainer } from '../../../../components/Charts/ChartContainer';
+import { Detector } from '../../../../../types';
 
 export interface AlertsProps extends RouteComponentProps {
   alertService: AlertsService;
   detectorService: DetectorService;
   findingService: FindingsService;
   opensearchService: OpenSearchService;
   notifications: NotificationsStart;
+  indexPatternService: IndexPatternsService;
   match: match;
   dateTimeFilter?: DateTimeFilter;
   setDateTimeFilter?: Function;
@@ -500,6 +501,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
             onClose={this.onFlyoutClose}
             onAcknowledge={this.onAcknowledge}
             findingsService={this.props.findingService}
+            indexPatternService={this.props.indexPatternService}
           />
         )}
         <EuiFlexGroup direction="column">

public/pages/Correlations/Correlations.scss

@@ -0,0 +1,8 @@
+/*
+* Copyright OpenSearch Contributors
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+.correlation_rule_field_condition .euiButtonGroup__buttons {
+  box-shadow: none;
+}

public/pages/Correlations/components/CorrelationGraph.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import Graph from 'react-graph-vis';
+
+export const CorrelationGraph = ({ graph: { nodes, edges }, options, events }) => {
+  return (
+    <Graph
+      key={`network`}
+      identifier={`network`}
+      graph={{ nodes, edges }}
+      options={options}
+      events={events}
+      style={{ border: '1px solid' }}
+    />
+  );
+};

public/pages/Correlations/components/DeleteModal.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiConfirmModal } from '@elastic/eui';
+import React from 'react';
+
+export interface DeleteRuleModalProps {
+  title: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const DeleteCorrelationRuleModal: React.FC<DeleteRuleModalProps> = ({
+  title,
+  onCancel,
+  onConfirm,
+}) => {
+  return (
+    <EuiConfirmModal
+      title={`Delete ${title}?`}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      cancelButtonText="Cancel"
+      confirmButtonText="Delete"
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+    >
+      <p>Delete the correlation rule permanently? This action cannot be undone.</p>
+    </EuiConfirmModal>
+  );
+};

public/pages/Correlations/components/ExperimentalBanner.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui';
+
+export const CorrelationsExperimentalBanner = () => {
+  return (
+    <>
+      <EuiCallOut title="Experimental Feature" iconType="beaker">
+        <p>
+          The feature is experimental and should not be used in a production environment. While we
+          are working on the finishing touches, share your ideas and feedback on&nbsp;
+          <EuiLink target="_blank" href="https://forum.opensearch.org/">
+            forum.opensearch.org.
+          </EuiLink>
+          For more information see &nbsp;
+          <EuiLink
+            href="https://opensearch.org/docs/latest/security-analytics/index/"
+            target="_blank"
+          >
+            Security Analytics Documentation.
+          </EuiLink>
+        </p>
+      </EuiCallOut>
+      <EuiSpacer />
+    </>
+  );
+};

public/pages/Correlations/components/FilterGroup.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiFilterSelectItem,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiFieldSearch,
+  FilterChecked,
+} from '@elastic/eui';
+
+export type FilterItem = { name: string | React.ReactNode; id: string; checked?: FilterChecked };
+export interface LogTypeFilterGroupProps {
+  groupName: string;
+  items: FilterItem[];
+  setItems: (items: FilterItem[]) => void;
+}
+
+export const FilterGroup: React.FC<LogTypeFilterGroupProps> = ({ groupName, items, setItems }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onButtonClick = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  function updateItem(index: number) {
+    if (!items[index]) {
+      return;
+    }
+
+    const newItems = [...items];
+
+    switch (newItems[index].checked) {
+      case 'on':
+        newItems[index] = {
+          ...newItems[index],
+          checked: undefined,
+        };
+        break;
+
+      default:
+        newItems[index] = {
+          ...newItems[index],
+          checked: 'on',
+        };
+    }
+
+    setItems(newItems);
+  }
+
+  const button = (
+    <EuiFilterButton
+      iconType="arrowDown"
+      onClick={onButtonClick}
+      isSelected={isPopoverOpen}
+      numFilters={items.length}
+      hasActiveFilters={!!items.find((item) => item.checked === 'on')}
+      numActiveFilters={items.filter((item) => item.checked === 'on').length}
+    >
+      {groupName}
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiFilterGroup>
+      <EuiPopover
+        id="popoverExampleMultiSelect"
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+      >
+        <EuiPopoverTitle paddingSize="s">
+          <EuiFieldSearch compressed />
+        </EuiPopoverTitle>
+        <div className="ouiFilterSelect__items">
+          {items.map((item, index) => (
+            <EuiFilterSelectItem
+              checked={item.checked}
+              key={index}
+              onClick={() => updateItem(index)}
+              showIcons={true}
+            >
+              {item.name}
+            </EuiFilterSelectItem>
+          ))}
+        </div>
+      </EuiPopover>
+    </EuiFilterGroup>
+  );
+};