[SIEM][Exceptions] - ExceptionsViewer UI component part 2

x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx

@@ -10,7 +10,8 @@ import * as api from '../api';
 import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
 import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
 import { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
-import { ExceptionListAndItems, UseExceptionListProps } from '../types';
+import { ExceptionListSchema } from '../../../common/schemas';
+import { ExceptionItemsAndPagination, UseExceptionListProps } from '../types';
 
 import { ReturnExceptionListAndItems, useExceptionList } from './use_exception_list';
 
@@ -41,8 +42,7 @@ describe('useExceptionList', () => {
       );
       await waitForNextUpdate();
 
-      expect(result.current).toEqual([true, null, result.current[2]]);
-      expect(typeof result.current[2]).toEqual('function');
+      expect(result.current).toEqual([true, null, null, null]);
     });
   });
 
@@ -62,19 +62,23 @@ describe('useExceptionList', () => {
       await waitForNextUpdate();
       await waitForNextUpdate();
 
-      const expectedResult: ExceptionListAndItems = {
-        ...getExceptionListSchemaMock(),
-        exceptionItems: {
-          items: [{ ...getExceptionListItemSchemaMock() }],
-          pagination: {
-            page: 1,
-            perPage: 20,
-            total: 1,
-          },
+      const expectedListResult: ExceptionListSchema = getExceptionListSchemaMock();
+
+      const expectedListItemsResult: ExceptionItemsAndPagination = {
+        items: [getExceptionListItemSchemaMock()],
+        pagination: {
+          page: 1,
+          perPage: 20,
+          total: 1,
         },
       };
 
-      expect(result.current).toEqual([false, expectedResult, result.current[2]]);
+      expect(result.current).toEqual([
+        false,
+        expectedListResult,
+        expectedListItemsResult,
+        result.current[3],
+      ]);
     });
   });
 
@@ -128,7 +132,13 @@ describe('useExceptionList', () => {
       );
       await waitForNextUpdate();
       await waitForNextUpdate();
-      result.current[2]();
+
+      expect(typeof result.current[3]).toEqual('function');
+
+      if (result.current[3] != null) {
+        result.current[3]({ listId: 'myListId', listNamespaceType: 'single' });
+      }
+
       await waitForNextUpdate();
 
       expect(spyOnfetchExceptionListById).toHaveBeenCalledTimes(2);

x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx

@@ -4,12 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { fetchExceptionListById, fetchExceptionListItemsByListId } from '../api';
-import { ExceptionListAndItems, UseExceptionListProps } from '../types';
+import {
+  ExceptionItemsAndPagination,
+  UseExceptionListProps,
+  UseExceptionListRefreshProps,
+} from '../types';
+import { ExceptionListSchema } from '../../../common/schemas';
 
-export type ReturnExceptionListAndItems = [boolean, ExceptionListAndItems | null, () => void];
+type Func = (arg: UseExceptionListRefreshProps) => void;
+export type ReturnExceptionListAndItems = [
+  boolean,
+  ExceptionListSchema | null,
+  ExceptionItemsAndPagination | null,
+  Func | null
+];
 
 /**
  * Hook for using to get an ExceptionList and it's ExceptionListItems
@@ -37,64 +48,60 @@ export const useExceptionList = ({
   },
   onError,
 }: UseExceptionListProps): ReturnExceptionListAndItems => {
-  const [exceptionListAndItems, setExceptionList] = useState<ExceptionListAndItems | null>(null);
-  const [shouldRefresh, setRefresh] = useState<boolean>(true);
-  const refreshExceptionList = useCallback(() => setRefresh(true), [setRefresh]);
+  const [exceptionList, setExceptionList] = useState<ExceptionListSchema | null>(null);
+  const [exceptionItems, setExceptionListItems] = useState<ExceptionItemsAndPagination | null>(
+    null
+  );
+  const fetchExceptionList = useRef<Func | null>(null);
   const [loading, setLoading] = useState(true);
-  const tags = filterOptions.tags.sort().join();
+  const tags = useMemo(() => filterOptions.tags.sort().join(), [filterOptions.tags]);
 
   useEffect(
     () => {
       let isSubscribed = true;
       const abortCtrl = new AbortController();
 
-      const fetchData = async (idToFetch: string): Promise<void> => {
-        if (shouldRefresh) {
-          try {
-            setLoading(true);
+      const fetchData = async ({
+        listId,
+        listNamespaceType,
+      }: UseExceptionListRefreshProps): Promise<void> => {
+        try {
+          setLoading(true);
+
+          const { list_id, namespace_type, ...restOfExceptionList } = await fetchExceptionListById({
+            http,
+            id: listId,
+            namespaceType: listNamespaceType,
+            signal: abortCtrl.signal,
+          });
+          const fetchListItemsResult = await fetchExceptionListItemsByListId({
+            filterOptions,
+            http,
+            listId: list_id,
+            namespaceType: namespace_type,
+            pagination,
+            signal: abortCtrl.signal,
+          });
 
-            const {
+          if (isSubscribed) {
+            setExceptionList({
               list_id,
               namespace_type,
-              ...restOfExceptionList
-            } = await fetchExceptionListById({
-              http,
-              id: idToFetch,
-              namespaceType,
-              signal: abortCtrl.signal,
+              ...restOfExceptionList,
             });
-            const fetchListItemsResult = await fetchExceptionListItemsByListId({
-              filterOptions,
-              http,
-              listId: list_id,
-              namespaceType: namespace_type,
-              pagination,
-              signal: abortCtrl.signal,
+            setExceptionListItems({
+              items: [...fetchListItemsResult.data],
+              pagination: {
+                page: fetchListItemsResult.page,
+                perPage: fetchListItemsResult.per_page,
+                total: fetchListItemsResult.total,
+              },
             });
-
-            setRefresh(false);
-
-            if (isSubscribed) {
-              setExceptionList({
-                list_id,
-                namespace_type,
-                ...restOfExceptionList,
-                exceptionItems: {
-                  items: [...fetchListItemsResult.data],
-                  pagination: {
-                    page: fetchListItemsResult.page,
-                    perPage: fetchListItemsResult.per_page,
-                    total: fetchListItemsResult.total,
-                  },
-                },
-              });
-            }
-          } catch (error) {
-            setRefresh(false);
-            if (isSubscribed) {
-              setExceptionList(null);
-              onError(error);
-            }
+          }
+        } catch (error) {
+          if (isSubscribed) {
+            setExceptionList(null);
+            onError(error);
           }
         }
 
@@ -103,25 +110,18 @@ export const useExceptionList = ({
         }
       };
 
-      if (id != null) {
-        fetchData(id);
+      if (id != null && namespaceType != null) {
+        fetchData({ listId: id, listNamespaceType: namespaceType });
       }
+
+      fetchExceptionList.current = fetchData;
       return (): void => {
         isSubscribed = false;
         abortCtrl.abort();
       };
     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      http,
-      id,
-      onError,
-      shouldRefresh,
-      pagination.page,
-      pagination.perPage,
-      filterOptions.filter,
-      tags,
-    ]
+    [http, id, namespaceType, pagination.page, pagination.perPage, filterOptions.filter, tags]
   );
 
-  return [loading, exceptionListAndItems, refreshExceptionList];
+  return [loading, exceptionList, exceptionItems, fetchExceptionList.current];
 };

x-pack/plugins/lists/public/exceptions/types.ts

@@ -29,10 +29,6 @@ export interface ExceptionItemsAndPagination {
   pagination: Pagination;
 }
 
-export interface ExceptionListAndItems extends ExceptionListSchema {
-  exceptionItems: ExceptionItemsAndPagination;
-}
-
 export type AddExceptionList = ExceptionListSchema | CreateExceptionListSchemaPartial;
 
 export type AddExceptionListItem = CreateExceptionListItemSchemaPartial | ExceptionListItemSchema;
@@ -51,6 +47,11 @@ export interface UseExceptionListProps {
   pagination?: Pagination;
 }
 
+export interface UseExceptionListRefreshProps {
+  listId: string;
+  listNamespaceType: NamespaceType;
+}
+
 export interface ApiCallByListIdProps {
   http: HttpStart;
   listId: string;

x-pack/plugins/lists/public/index.tsx

@@ -7,4 +7,5 @@
 export { usePersistExceptionItem } from './exceptions/hooks/persist_exception_item';
 export { usePersistExceptionList } from './exceptions/hooks/persist_exception_list';
 export { useExceptionList } from './exceptions/hooks/use_exception_list';
+export { deleteExceptionListItemById } from './exceptions/api';
 export { mockNewExceptionItem, mockNewExceptionList } from './exceptions/mock';

x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_detection.json

@@ -0,0 +1,9 @@
+{
+  "list_id": "detection_list",
+  "_tags": ["detection"],
+  "tags": ["detection", "sample_tag"],
+  "type": "detection",
+  "description": "This is a sample detection type exception list",
+  "name": "Sample Detection Exception List",
+  "namespace_type": "single"
+}

x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_auto_id.json

@@ -5,6 +5,7 @@
   "type": "simple",
   "description": "This is a sample endpoint type exception that has no item_id so it creates a new id each time",
   "name": "Sample Endpoint Exception List",
+  "comment": [],
   "entries": [
     {
       "field": "actingProcess.file.signer",

x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_detection_auto_id.json

@@ -0,0 +1,26 @@
+{
+  "list_id": "detection_list",
+  "_tags": ["detection"],
+  "tags": ["test_tag", "detection", "no_more_bad_guys"],
+  "type": "simple",
+  "description": "This is a sample detection type exception that has no item_id so it creates a new id each time",
+  "name": "Sample Detection Exception List Item",
+  "comment": [],
+  "entries": [
+    {
+      "field": "host.name",
+      "operator": "included",
+      "match": "sampleHostName"
+    },
+    {
+      "field": "event.category",
+      "operator": "included",
+      "match_any": ["process", "malware"]
+    },
+    {
+      "field": "event.action",
+      "operator": "included",
+      "match": "user-password-change"
+    }
+  ]
+}

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx

@@ -70,10 +70,12 @@ import { FailureHistory } from './failure_history';
 import { RuleStatus } from '../../../../components/rules//rule_status';
 import { useMlCapabilities } from '../../../../../common/components/ml_popover/hooks/use_ml_capabilities';
 import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
+import { ExceptionsViewer } from '../../../../../common/components/exceptions/viewer';
 
 enum RuleDetailTabs {
   alerts = 'alerts',
   failures = 'failures',
+  exceptions = 'exceptions',
 }
 
 const ruleDetailTabs = [
@@ -82,6 +84,11 @@ const ruleDetailTabs = [
     name: detectionI18n.ALERT,
     disabled: false,
   },
+  {
+    id: RuleDetailTabs.exceptions,
+    name: i18n.EXCEPTIONS_TAB,
+    disabled: false,
+  },
   {
     id: RuleDetailTabs.failures,
     name: i18n.FAILURE_HISTORY_TAB,
@@ -385,6 +392,12 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
                         )}
                       </>
                     )}
+                    {ruleDetailTab === RuleDetailTabs.exceptions && (
+                      <ExceptionsViewer
+                        commentsAccordionId={'ruleDetailsTabExceptions'}
+                        exceptionLists={[]}
+                      />
+                    )}
                     {ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
                   </WrapperPage>
                 </StickyContainer>

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/translations.ts

@@ -89,3 +89,10 @@ export const TYPE_FAILED = i18n.translate(
     defaultMessage: 'Failed',
   }
 );
+
+export const EXCEPTIONS_TAB = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.exceptionsTab',
+  {
+    defaultMessage: 'Exceptions',
+  }
+);