-
Notifications
You must be signed in to change notification settings - Fork 44
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) (#1060) * overview and connection pages UI * all producer flows for threat intel UI with dummy data * updated enum name * separated dummy data * updated snapshots * apis integrated; UX added, updated * refactored to use source type; integrated source refresh and delete * if edit scan reloads and no monitor go to create * using async imports for vega * Threat intel findings integrated * fixed refresh button visibility; updated snapshots * addressed PR comments --------- (cherry picked from commit 03c076f) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
bc692d1
commit 4ab1188
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.