-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Backport main] Correlation engine ux (#537)
* Correlation engine ux (#524) * wip Signed-off-by: Amardeepsingh Siglani <[email protected]> * completed rules page; added placeholder for findings flyout tabs Signed-off-by: Amardeepsingh Siglani <[email protected]> * reverted change to show empty table Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated rule type Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated create correlation rule page Signed-off-by: Amardeepsingh Siglani <[email protected]> * correlation page wip Signed-off-by: Amardeepsingh Siglani <[email protected]> * Correlation store and API services Signed-off-by: Jovan Cvetkovic <[email protected]> * Correlation store and API services Signed-off-by: Jovan Cvetkovic <[email protected]> * Correlation store and API services Signed-off-by: Jovan Cvetkovic <[email protected]> * Correlation store and API services Signed-off-by: Jovan Cvetkovic <[email protected]> * Correlation store and API services Signed-off-by: Jovan Cvetkovic <[email protected]> * updated correlations page Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated store interfaces Signed-off-by: Amardeepsingh Siglani <[email protected]> * fixed correlation store Signed-off-by: Amardeepsingh Siglani <[email protected]> * added api for all correlations Signed-off-by: Amardeepsingh Siglani <[email protected]> * added filter support for correlations Signed-off-by: Amardeepsingh Siglani <[email protected]> * using apis; added validation Signed-off-by: Amardeepsingh Siglani <[email protected]> * Implemented logic to populate correlations tables data. Signed-off-by: AWSHurneyt <[email protected]> * restricted to AND Signed-off-by: Amardeepsingh Siglani <[email protected]> * log type clearable Signed-off-by: Amardeepsingh Siglani <[email protected]> * code cleanup Signed-off-by: Jovan Cvetkovic <[email protected]> * fixed API issue Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated snapshots Signed-off-by: Amardeepsingh Siglani <[email protected]> * ux improvements Signed-off-by: Amardeepsingh Siglani <[email protected]> * code cleanup Signed-off-by: Jovan Cvetkovic <[email protected]> * removed redundant code Signed-off-by: Amardeepsingh Siglani <[email protected]> * removed unwanted param Signed-off-by: Amardeepsingh Siglani <[email protected]> * connected refresh Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]> Signed-off-by: Jovan Cvetkovic <[email protected]> Signed-off-by: AWSHurneyt <[email protected]> Co-authored-by: Jovan Cvetkovic <[email protected]> Co-authored-by: AWSHurneyt <[email protected]> (cherry picked from commit f565a92) * Removed duplicate import for EuiSpacer (#538) (#540) * removed duplicate import * updated snapshots --------- Signed-off-by: Amardeepsingh Siglani <[email protected]> * Pinned babel traverse and core (#539) (#544) * pinned babel traverse and core * removed cyclic dependency * added types for vis * refactored code --------- Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]> Co-authored-by: Amardeepsingh Siglani <[email protected]>
- Loading branch information
1 parent
b10b3a4
commit 804f872
Showing
57 changed files
with
3,395 additions
and
240 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| .correlation_rule_field_condition .euiButtonGroup__buttons { | ||
| box-shadow: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' }} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
31 changes: 31 additions & 0 deletions
31
public/pages/Correlations/components/ExperimentalBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <EuiLink target="_blank" href="https://forum.opensearch.org/"> | ||
| forum.opensearch.org. | ||
| </EuiLink> | ||
| For more information see | ||
| <EuiLink | ||
| href="https://opensearch.org/docs/latest/security-analytics/index/" | ||
| target="_blank" | ||
| > | ||
| Security Analytics Documentation. | ||
| </EuiLink> | ||
| </p> | ||
| </EuiCallOut> | ||
| <EuiSpacer /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
Oops, something went wrong.