[Threat intel] Fixed ui issues

common/helpers.ts

@@ -43,3 +43,21 @@ export const setSecurityAnalyticsPluginConfig = (config: SecurityAnalyticsPlugin
 
 export const getSecurityAnalyticsPluginConfig = (): SecurityAnalyticsPluginConfigType | undefined =>
   securityAnalyticsPluginConfig;
+
+export function extractFieldsFromMappings(
+  properties: any,
+  fields: string[],
+  parentField: string = ''
+) {
+  Object.keys(properties).forEach((field) => {
+    if (properties[field].hasOwnProperty('properties')) {
+      extractFieldsFromMappings(
+        properties[field]['properties'],
+        fields,
+        parentField ? `${parentField}.${field}` : field
+      );
+    } else {
+      fields.push(parentField ? `${parentField}.${field}` : field);
+    }
+  });
+}

public/app.scss

@@ -21,6 +21,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Rules/components/RuleEditor/RuleEditorForm.scss";
 @import "./pages/Rules/components/RuleEditor/DetectionVisualEditor.scss";
 @import "./pages/Rules/components/RuleEditor/components/SelectionExpField.scss";
+@import "./pages/ThreatIntel/containers/AddThreatIntelSource/AddThreatIntelSource.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);

public/components/DeleteModal/DeleteModal.tsx

@@ -20,6 +20,7 @@ interface DeleteModalProps {
   ids: string;
   onClickDelete: (event?: any) => void;
   type: string;
+  confirmButtonText?: string;
 }
 
 interface DeleteModalState {
@@ -49,6 +50,7 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
       onClickDelete,
       additionalWarning,
       confirmation,
+      confirmButtonText,
     } = this.props;
     const { confirmDeleteText } = this.state;
 
@@ -62,7 +64,7 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
             closeDeleteModal();
           }}
           cancelButtonText={'Cancel'}
-          confirmButtonText={`Delete ${type}`}
+          confirmButtonText={confirmButtonText ?? `Delete ${type}`}
           buttonColor={'danger'}
           defaultFocusedButton="confirm"
           confirmButtonDisabled={confirmDeleteText != DEFAULT_DELETION_TEXT}

public/components/Notifications/NotificationForm.tsx

@@ -31,7 +31,7 @@ export interface NotificationFormProps {
   allNotificationChannels: NotificationChannelTypeOptions[];
   loadingNotifications: boolean;
   action?: TriggerAction;
-  prepareMessage: (updateMessage?: boolean, onMount?: boolean) => void;
+  prepareMessage?: (updateMessage?: boolean, onMount?: boolean) => void;
   refreshNotificationChannels: () => void;
   onChannelsChange: (selectedOptions: EuiComboBoxOptionOption<string>[]) => void;
   onMessageBodyChange: (message: string) => void;
@@ -51,9 +51,9 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
   onNotificationToggle,
 }) => {
   const hasNotificationPlugin = getIsNotificationPluginInstalled();
-  const [isActionRemoved, setIsActionRemoved] = useState(true);
+  const [shouldSendNotification, setShouldSendNotification] = useState(!!action?.destination_id);
   const selectedNotificationChannelOption: NotificationChannelOption[] = [];
-  if (!isActionRemoved && action?.destination_id) {
+  if (shouldSendNotification && action?.destination_id) {
     allNotificationChannels.forEach((typeOption) => {
       const matchingChannel = typeOption.options.find(
         (option) => option.value === action.destination_id
@@ -66,14 +66,14 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
     <>
       <EuiSwitch
         label="Send notification"
-        checked={isActionRemoved}
+        checked={shouldSendNotification}
         onChange={(e) => {
-          setIsActionRemoved(e.target.checked);
+          setShouldSendNotification(e.target.checked);
           onNotificationToggle?.(e.target.checked);
         }}
       />
       <EuiSpacer />
-      {isActionRemoved && (
+      {shouldSendNotification && (
         <>
           <EuiFlexGroup alignItems={'flexEnd'}>
             <EuiFlexItem style={{ maxWidth: 400 }}>
@@ -168,17 +168,18 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
                   />
                 </EuiFormRow>
               </EuiFlexItem>
-
-              <EuiFlexItem>
-                <EuiFormRow>
-                  <EuiButton
-                    fullWidth={false}
-                    onClick={() => prepareMessage(true /* updateMessage */)}
-                  >
-                    Generate message
-                  </EuiButton>
-                </EuiFormRow>
-              </EuiFlexItem>
+              {prepareMessage && (
+                <EuiFlexItem>
+                  <EuiFormRow>
+                    <EuiButton
+                      fullWidth={false}
+                      onClick={() => prepareMessage(true /* updateMessage */)}
+                    >
+                      Generate message
+                    </EuiButton>
+                  </EuiFormRow>
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </EuiAccordion>
 

public/pages/CreateDetector/components/DefineDetector/components/DetectorSchedule/Interval.tsx

@@ -29,7 +29,7 @@ export interface IntervalState {
 
 export class Interval extends React.Component<IntervalProps, IntervalState> {
   state = {
-    isIntervalValid: true,
+    isIntervalValid: Number.isInteger(this.props.schedule.period.interval),
   };
 
   onTimeIntervalChange = (event: React.ChangeEvent<HTMLInputElement>) => {

public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx

@@ -88,7 +88,7 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
             </EuiTitle>
             <EuiSpacer size={'s'} />
             {createTextDetailsGroup([
-              { label: 'IOC match', content: 'Any match in threat intelligence feed' },
+              { label: 'IoC match', content: 'Any match in threat intelligence feed' },
             ])}
           </>
         )}

public/pages/Findings/components/FindingDetailsFlyout.tsx

@@ -596,7 +596,7 @@ export default class FindingDetailsFlyout extends Component<
             </div>
             <EuiSpacer size="s" />
             <EuiText>
-              <p>This finding is generated from a threat intelligence feed IOCs.</p>
+              <p>This finding is generated from a threat intelligence feed IoCs.</p>
             </EuiText>
             <EuiSpacer size={'l'} />
             {createTextDetailsGroup([

public/pages/Findings/components/FindingsTable/ThreatIntelFindingsTable.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { renderTime } from '../../../../utils/helpers';
 import { DEFAULT_EMPTY_DATA } from '../../../../utils/constants';
 import { DataStore } from '../../../../store/DataStore';
+import { IocLabel, ThreatIntelIocType } from '../../../../../common/constants';
 
 export interface ThreatIntelFindingsTableProps {
   findingItems: ThreatIntelFinding[];
@@ -30,6 +31,7 @@ export const ThreatIntelFindingsTable: React.FC<ThreatIntelFindingsTableProps> =
     {
       name: 'Indicator type',
       field: 'ioc_type',
+      render: (iocType: ThreatIntelIocType) => IocLabel[iocType],
     },
     {
       name: 'Threat intel source',

public/pages/Findings/containers/Findings/Findings.tsx

@@ -83,12 +83,14 @@ interface DetectionRulesFindingsState {
   rules: { [id: string]: RuleSource };
   groupBy: FindingsGroupByType;
   filteredFindings: FindingItemType[];
+  emptyPromptBody: React.ReactNode;
 }
 
 interface ThreatIntelFindingsState {
   findings: ThreatIntelFinding[];
   groupBy: ThreatIntelFindingsGroupByType;
   filteredFindings: ThreatIntelFinding[];
+  emptyPromptBody: React.ReactNode;
 }
 
 interface FindingsState {
@@ -153,11 +155,25 @@ class Findings extends Component<FindingsProps, FindingsState> {
           rules: {},
           filteredFindings: [],
           groupBy: 'logType',
+          emptyPromptBody: (
+            <p>
+              Adjust the time range to see more results or{' '}
+              <EuiLink href={`${location.pathname}#/create-detector`}>create a detector</EuiLink> to
+              generate findings.
+            </p>
+          ),
         },
         [FindingTabId.ThreatIntel]: {
           findings: [],
           filteredFindings: [],
           groupBy: 'indicatorType',
+          emptyPromptBody: (
+            <p>
+              Adjust the time range to see more results or{' '}
+              <EuiLink href={`${location.pathname}#/threat-intel`}>setup threat intel</EuiLink> to
+              generate findings.
+            </p>
+          ),
         },
       },
       recentlyUsedRanges: [DEFAULT_DATE_RANGE],
@@ -600,15 +616,7 @@ class Findings extends Component<FindingsProps, FindingsState> {
                 {!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>
-                    }
+                    body={this.state.findingStateByTabId[this.state.selectedTabId].emptyPromptBody}
                   />
                 ) : (
                   <ChartContainer chartViewId={'findings-view'} loading={loading} />

public/pages/ThreatIntel/components/ConfigureThreatIntelAlertTriggers/ConfigureThreatIntelAlertTriggers.tsx

@@ -88,7 +88,10 @@ export const ConfigureThreatIntelAlertTriggers: React.FC<ConfigureThreatIntelAle
       <EuiSpacer />
       <EuiButton
         onClick={() => {
-          updateTriggers([...alertTriggers, getEmptyThreatIntelAlertTrigger(getNextTriggerName())]);
+          updateTriggers([
+            ...alertTriggers,
+            getEmptyThreatIntelAlertTrigger(getNextTriggerName(), false),
+          ]);
         }}
       >
         Add another alert trigger