-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Threat intel platform][Part 1] UX to support threat intel platform (#…
…1050) * overview and connection pages UI Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * all producer flows for threat intel UI with dummy data Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated enum name Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * separated dummy data Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated snapshots Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * apis integrated; UX added, updated Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * refactored to use source type; integrated source refresh and delete Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * if edit scan reloads and no monitor go to create Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * using async imports for vega Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * Threat intel findings integrated Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * fixed refresh button visibility; updated snapshots Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * addressed PR comments Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> (cherry picked from commit 03c076f) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
3d361b6
commit 12e7817
Showing
70 changed files
with
5,731 additions
and
710 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { | ||
| EuiAccordion, | ||
| EuiButton, | ||
| EuiComboBox, | ||
| EuiComboBoxOptionOption, | ||
| EuiFieldText, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiFormRow, | ||
| EuiSpacer, | ||
| EuiSwitch, | ||
| EuiText, | ||
| EuiTextArea, | ||
| } from '@elastic/eui'; | ||
| import React, { useState } from 'react'; | ||
| import { NOTIFICATIONS_HREF } from '../../utils/constants'; | ||
| import { NotificationsCallOut } from '../NotificationsCallOut'; | ||
| import { | ||
| NotificationChannelOption, | ||
| NotificationChannelTypeOptions, | ||
| TriggerAction, | ||
| } from '../../../types'; | ||
| import { getIsNotificationPluginInstalled } from '../../utils/helpers'; | ||
|
|
||
| export interface NotificationFormProps { | ||
| allNotificationChannels: NotificationChannelTypeOptions[]; | ||
| loadingNotifications: boolean; | ||
| action: TriggerAction; | ||
| prepareMessage: (updateMessage?: boolean, onMount?: boolean) => void; | ||
| refreshNotificationChannels: () => void; | ||
| onChannelsChange: (selectedOptions: EuiComboBoxOptionOption<string>[]) => void; | ||
| onMessageBodyChange: (message: string) => void; | ||
| onMessageSubjectChange: (subject: string) => void; | ||
| } | ||
|
|
||
| export const NotificationForm: React.FC<NotificationFormProps> = ({ | ||
| action, | ||
| allNotificationChannels, | ||
| loadingNotifications, | ||
| prepareMessage, | ||
| refreshNotificationChannels, | ||
| onChannelsChange, | ||
| onMessageBodyChange, | ||
| onMessageSubjectChange, | ||
| }) => { | ||
| const hasNotificationPlugin = getIsNotificationPluginInstalled(); | ||
| const [showNotificationDetails, setShowNotificationDetails] = useState(true); | ||
| const selectedNotificationChannelOption: NotificationChannelOption[] = []; | ||
| if (action.destination_id) { | ||
| allNotificationChannels.forEach((typeOption) => { | ||
| const matchingChannel = typeOption.options.find( | ||
| (option) => option.value === action.destination_id | ||
| ); | ||
| if (matchingChannel) selectedNotificationChannelOption.push(matchingChannel); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiSwitch | ||
| label="Send notification" | ||
| checked={showNotificationDetails} | ||
| onChange={(e) => setShowNotificationDetails(e.target.checked)} | ||
| /> | ||
| <EuiSpacer /> | ||
| {showNotificationDetails && ( | ||
| <> | ||
| <EuiFlexGroup alignItems={'flexEnd'}> | ||
| <EuiFlexItem style={{ maxWidth: 400 }}> | ||
| <EuiFormRow | ||
| label={ | ||
| <EuiText size="m"> | ||
| <p>Notification channel</p> | ||
| </EuiText> | ||
| } | ||
| > | ||
| <EuiComboBox | ||
| placeholder={'Select notification channel.'} | ||
| async={true} | ||
| isLoading={loadingNotifications} | ||
| options={allNotificationChannels as EuiComboBoxOptionOption<string>[]} | ||
| selectedOptions={ | ||
| selectedNotificationChannelOption as EuiComboBoxOptionOption<string>[] | ||
| } | ||
| onChange={onChannelsChange} | ||
| singleSelection={{ asPlainText: true }} | ||
| onFocus={refreshNotificationChannels} | ||
| isDisabled={!hasNotificationPlugin} | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton | ||
| href={NOTIFICATIONS_HREF} | ||
| iconType={'popout'} | ||
| target={'_blank'} | ||
| isDisabled={!hasNotificationPlugin} | ||
| > | ||
| Manage channels | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
|
|
||
| {!hasNotificationPlugin && ( | ||
| <> | ||
| <EuiSpacer size="m" /> | ||
| <NotificationsCallOut /> | ||
| </> | ||
| )} | ||
|
|
||
| <EuiSpacer size={'l'} /> | ||
|
|
||
| <EuiAccordion | ||
| id={`alert-condition-notify-msg-${action.id ?? 'draft'}`} | ||
| buttonContent={ | ||
| <EuiText size="m"> | ||
| <p>Notification message</p> | ||
| </EuiText> | ||
| } | ||
| paddingSize={'l'} | ||
| initialIsOpen={false} | ||
| > | ||
| <EuiFlexGroup direction={'column'} style={{ width: '75%' }}> | ||
| <EuiFlexItem> | ||
| <EuiFormRow | ||
| label={ | ||
| <EuiText size={'s'}> | ||
| <p>Message subject</p> | ||
| </EuiText> | ||
| } | ||
| fullWidth={true} | ||
| > | ||
| <EuiFieldText | ||
| placeholder={'Enter a subject for the notification message.'} | ||
| value={action?.subject_template.source} | ||
| onChange={(e) => onMessageSubjectChange(e.target.value)} | ||
| required={true} | ||
| fullWidth={true} | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <EuiFormRow | ||
| label={ | ||
| <EuiText size="s"> | ||
| <p>Message body</p> | ||
| </EuiText> | ||
| } | ||
| fullWidth={true} | ||
| > | ||
| <EuiTextArea | ||
| placeholder={'Enter the content of the notification message.'} | ||
| value={action?.message_template.source} | ||
| onChange={(e) => onMessageBodyChange(e.target.value)} | ||
| required={true} | ||
| fullWidth={true} | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <EuiFormRow> | ||
| <EuiButton | ||
| fullWidth={false} | ||
| onClick={() => prepareMessage(true /* updateMessage */)} | ||
| > | ||
| Generate message | ||
| </EuiButton> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiAccordion> | ||
|
|
||
| <EuiSpacer size="xl" /> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
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,35 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { | ||
| EuiDescriptionList, | ||
| EuiFlexGroup, | ||
| EuiFlexGroupProps, | ||
| EuiFlexItem, | ||
| EuiFlexItemProps, | ||
| } from '@elastic/eui'; | ||
| import React from 'react'; | ||
|
|
||
| export interface DescriptionGroupProps { | ||
| listItems: { title: NonNullable<React.ReactNode>; description: NonNullable<React.ReactNode> }[]; | ||
| itemProps?: Pick<EuiFlexItemProps, 'grow'>; | ||
| groupProps?: Pick<EuiFlexGroupProps, 'justifyContent'>; | ||
| } | ||
|
|
||
| export const DescriptionGroup: React.FC<DescriptionGroupProps> = ({ | ||
| listItems, | ||
| itemProps, | ||
| groupProps, | ||
| }) => { | ||
| return ( | ||
| <EuiFlexGroup gutterSize="s" {...groupProps}> | ||
| {listItems.map((item, idx) => ( | ||
| <EuiFlexItem {...itemProps} key={`item-${idx}`}> | ||
| <EuiDescriptionList listItems={[item]} /> | ||
| </EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| ); | ||
| }; |
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,23 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { EuiIcon } from '@elastic/eui'; | ||
| import React from 'react'; | ||
|
|
||
| export interface StatusWithIndicatorProps { | ||
| text: string; | ||
| indicatorColor: 'success' | 'text'; | ||
| } | ||
|
|
||
| export const StatusWithIndicator: React.FC<StatusWithIndicatorProps> = ({ | ||
| text, | ||
| indicatorColor, | ||
| }) => { | ||
| return ( | ||
| <span> | ||
| <EuiIcon type={'dot'} color={indicatorColor} style={{ marginBottom: 4 }} /> {text} | ||
| </span> | ||
| ); | ||
| }; |
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
Oops, something went wrong.