[SIEM][Timeline] Persist timeline to localStorage

x-pack/plugins/security_solution/cypress/integration/events_viewer.spec.ts

@@ -29,12 +29,12 @@ import {
   dragAndDropColumn,
   openEventsViewerFieldsBrowser,
   opensInspectQueryModal,
-  resetFields,
   waitsForEventsToBeLoaded,
 } from '../tasks/hosts/events';
 import { clearSearchBar, kqlSearch } from '../tasks/siem_header';
 
 import { HOSTS_PAGE } from '../urls/navigation';
+import { resetFields } from '../tasks/timeline';
 
 const defaultHeadersInDefaultEcsCategory = [
   { id: '@timestamp' },

x-pack/plugins/security_solution/cypress/integration/timeline_local_storage.spec.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { reload } from '../tasks/common';
+import { loginAndWaitForPage } from '../tasks/login';
+import { HOSTS_PAGE } from '../urls/navigation';
+import { openEvents } from '../tasks/hosts/main';
+import { DRAGGABLE_HEADER } from '../screens/timeline';
+import { TABLE_COLUMN_EVENTS_MESSAGE } from '../screens/hosts/external_events';
+import { waitsForEventsToBeLoaded, openEventsViewerFieldsBrowser } from '../tasks/hosts/events';
+import { removeColumn, resetFields } from '../tasks/timeline';
+
+describe('persistent timeline', () => {
+  before(() => {
+    loginAndWaitForPage(HOSTS_PAGE);
+    openEvents();
+    waitsForEventsToBeLoaded();
+  });
+
+  afterEach(() => {
+    openEventsViewerFieldsBrowser();
+    resetFields();
+  });
+
+  it('persist the deletion of a column', () => {
+    cy.get(DRAGGABLE_HEADER)
+      .eq(TABLE_COLUMN_EVENTS_MESSAGE)
+      .invoke('text')
+      .should('equal', 'message');
+    removeColumn(TABLE_COLUMN_EVENTS_MESSAGE);
+    reload(waitsForEventsToBeLoaded);
+    cy.get(DRAGGABLE_HEADER).each(($el) => {
+      expect($el.text()).not.equal('message');
+    });
+  });
+});

x-pack/plugins/security_solution/cypress/screens/hosts/events.ts

@@ -36,7 +36,4 @@ export const LOCAL_EVENTS_COUNT =
 export const LOAD_MORE =
   '[data-test-subj="events-viewer-panel"] [data-test-subj="TimelineMoreButton"';
 
-export const RESET_FIELDS =
-  '[data-test-subj="events-viewer-panel"] [data-test-subj="reset-fields"]';
-
 export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';

x-pack/plugins/security_solution/cypress/screens/hosts/external_events.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const TABLE_COLUMN_EVENTS_MESSAGE = 1;

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -21,6 +21,11 @@ export const ID_TOGGLE_FIELD = '[data-test-subj="toggle-field-_id"]';
 
 export const PROVIDER_BADGE = '[data-test-subj="providerBadge"]';
 
+export const REMOVE_COLUMN = '[data-test-subj="remove-column"]';
+
+export const RESET_FIELDS =
+  '[data-test-subj="events-viewer-panel"] [data-test-subj="reset-fields"]';
+
 export const SEARCH_OR_FILTER_CONTAINER =
   '[data-test-subj="timeline-search-or-filter-search-container"]';
 

x-pack/plugins/security_solution/cypress/tasks/common.ts

@@ -48,3 +48,9 @@ export const drop = (dropTarget: JQuery<HTMLElement>) => {
     .trigger('mouseup', { force: true })
     .wait(1000);
 };
+
+export const reload = (afterReload: () => void) => {
+  cy.reload();
+  cy.contains('a', 'Security');
+  afterReload();
+};

x-pack/plugins/security_solution/cypress/tasks/hosts/events.ts

@@ -13,7 +13,6 @@ import {
   HOST_GEO_COUNTRY_NAME_CHECKBOX,
   INSPECT_QUERY,
   LOAD_MORE,
-  RESET_FIELDS,
   SERVER_SIDE_EVENT_COUNT,
 } from '../../screens/hosts/events';
 import { DRAGGABLE_HEADER } from '../../screens/timeline';
@@ -53,10 +52,6 @@ export const opensInspectQueryModal = () => {
     .click({ force: true });
 };
 
-export const resetFields = () => {
-  cy.get(RESET_FIELDS).click({ force: true });
-};
-
 export const waitsForEventsToBeLoaded = () => {
   cy.get(SERVER_SIDE_EVENT_COUNT).should('exist').invoke('text').should('not.equal', '0');
 };

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -21,6 +21,8 @@ import {
   TIMELINE_TITLE,
   TIMESTAMP_TOGGLE_FIELD,
   TOGGLE_TIMELINE_EXPAND_EVENT,
+  REMOVE_COLUMN,
+  RESET_FIELDS,
 } from '../screens/timeline';
 
 import { drag, drop } from '../tasks/common';
@@ -101,3 +103,13 @@ export const dragAndDropIdToggleFieldToTimeline = () => {
     drop(headersDropArea)
   );
 };
+
+export const removeColumn = (column: number) => {
+  cy.get(REMOVE_COLUMN).first().should('exist');
+  cy.get(REMOVE_COLUMN).eq(column).click({ force: true });
+  cy.wait(3000); // wait for DOM updates
+};
+
+export const resetFields = () => {
+  cy.get(RESET_FIELDS).click({ force: true });
+};

x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.test.tsx

@@ -13,6 +13,7 @@ describe('AlertsTableComponent', () => {
   it('renders correctly', () => {
     const wrapper = shallow(
       <AlertsTableComponent
+        timelineId={'test'}
         canUserCRUD
         hasIndexWrite
         from={0}

x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx

@@ -53,9 +53,8 @@ import {
   displayErrorToast,
 } from '../../../common/components/toasters';
 
-export const ALERTS_TABLE_TIMELINE_ID = 'alerts-table';
-
 interface OwnProps {
+  timelineId: string;
   canUserCRUD: boolean;
   defaultFilters?: Filter[];
   hasIndexWrite: boolean;
@@ -68,6 +67,7 @@ interface OwnProps {
 type AlertsTableComponentProps = OwnProps & PropsFromRedux;
 
 export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
+  timelineId,
   canUserCRUD,
   clearEventsDeleted,
   clearEventsLoading,
@@ -141,16 +141,16 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 
   const setEventsLoadingCallback = useCallback(
     ({ eventIds, isLoading }: SetEventsLoadingProps) => {
-      setEventsLoading!({ id: ALERTS_TABLE_TIMELINE_ID, eventIds, isLoading });
+      setEventsLoading!({ id: timelineId, eventIds, isLoading });
     },
-    [setEventsLoading, ALERTS_TABLE_TIMELINE_ID]
+    [setEventsLoading, timelineId]
   );
 
   const setEventsDeletedCallback = useCallback(
     ({ eventIds, isDeleted }: SetEventsDeletedProps) => {
-      setEventsDeleted!({ id: ALERTS_TABLE_TIMELINE_ID, eventIds, isDeleted });
+      setEventsDeleted!({ id: timelineId, eventIds, isDeleted });
     },
-    [setEventsDeleted, ALERTS_TABLE_TIMELINE_ID]
+    [setEventsDeleted, timelineId]
   );
 
   const onAlertStatusUpdateSuccess = useCallback(
@@ -186,17 +186,17 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   // Callback for when open/closed filter changes
   const onFilterGroupChangedCallback = useCallback(
     (newFilterGroup: AlertFilterOption) => {
-      clearEventsLoading!({ id: ALERTS_TABLE_TIMELINE_ID });
-      clearEventsDeleted!({ id: ALERTS_TABLE_TIMELINE_ID });
-      clearSelected!({ id: ALERTS_TABLE_TIMELINE_ID });
+      clearEventsLoading!({ id: timelineId });
+      clearEventsDeleted!({ id: timelineId });
+      clearSelected!({ id: timelineId });
       setFilterGroup(newFilterGroup);
     },
     [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
   );
 
   // Callback for clearing entire selection from utility bar
   const clearSelectionCallback = useCallback(() => {
-    clearSelected!({ id: ALERTS_TABLE_TIMELINE_ID });
+    clearSelected!({ id: timelineId });
     setSelectAll(false);
     setShowClearSelectionAction(false);
   }, [clearSelected, setSelectAll, setShowClearSelectionAction]);
@@ -307,7 +307,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 
   useEffect(() => {
     initializeTimeline({
-      id: ALERTS_TABLE_TIMELINE_ID,
+      id: timelineId,
       documentType: i18n.ALERTS_DOCUMENT_TYPE,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
       loadingText: i18n.LOADING_ALERTS,
@@ -317,7 +317,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   }, []);
   useEffect(() => {
     setTimelineRowActions({
-      id: ALERTS_TABLE_TIMELINE_ID,
+      id: timelineId,
       queryFields: requiredFieldsForActions,
       timelineRowActions: additionalActions,
     });
@@ -343,7 +343,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       defaultModel={alertsDefaultModel}
       end={to}
       headerFilterGroup={headerFilterGroup}
-      id={ALERTS_TABLE_TIMELINE_ID}
+      id={timelineId}
       start={from}
       utilityBar={utilityBarCallback}
     />
@@ -353,9 +353,9 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 const makeMapStateToProps = () => {
   const getTimeline = timelineSelectors.getTimelineByIdSelector();
   const getGlobalInputs = inputsSelectors.globalSelector();
-  const mapStateToProps = (state: State) => {
-    const timeline: TimelineModel =
-      getTimeline(state, ALERTS_TABLE_TIMELINE_ID) ?? timelineDefaults;
+  const mapStateToProps = (state: State, ownProps: OwnProps) => {
+    const { timelineId } = ownProps;
+    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
     const { deletedEventIds, isSelectAllChecked, loadingEventIds, selectedEventIds } = timeline;
 
     const globalInputs: inputsModel.InputsRange = getGlobalInputs(state);

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/constants.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const SINGLE_RULE_ALERTS_TABLE_ID = 'detections-page-rule-details';
+export const ALERTS_TABLE_ID = 'detections-page-alerts';

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

@@ -36,6 +36,7 @@ import { DetectionEngineNoIndex } from './detection_engine_no_signal_index';
 import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
 import * as i18n from './translations';
+import { ALERTS_TABLE_ID } from './constants';
 
 export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
   filters,
@@ -138,6 +139,7 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
                         />
                         <EuiSpacer size="l" />
                         <AlertsTable
+                          timelineId={ALERTS_TABLE_ID}
                           loading={loading}
                           hasIndexWrite={hasIndexWrite ?? false}
                           canUserCRUD={(canUserCRUD ?? false) && (hasEncryptionKey ?? false)}

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

@@ -70,6 +70,7 @@ 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 { SINGLE_RULE_ALERTS_TABLE_ID } from '../../constants';
 
 enum RuleDetailTabs {
   alerts = 'alerts',
@@ -374,6 +375,7 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
                         <EuiSpacer />
                         {ruleId != null && (
                           <AlertsTable
+                            timelineId={SINGLE_RULE_ALERTS_TABLE_ID}
                             canUserCRUD={canUserCRUD ?? false}
                             defaultFilters={alertDefaultFilters}
                             hasIndexWrite={hasIndexWrite ?? false}

x-pack/plugins/security_solution/public/app/app.tsx

@@ -33,6 +33,8 @@ import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
 
 import { ApolloClientContext } from '../common/utils/apollo_context';
 import { SecuritySubPlugins } from './types';
+import { createSecuritySolutionStorage } from '../common/lib/local_storage';
+import { initialTimelineState } from '../timelines/store/timeline/reducer';
 
 interface AppPluginRootComponentProps {
   apolloClient: AppApolloClient;
@@ -79,11 +81,22 @@ const StartAppComponent: FC<StartAppComponent> = ({ subPlugins, ...libs }) => {
   const { i18n } = useKibana().services;
   const history = createHashHistory();
   const libs$ = new BehaviorSubject(libs);
+  const storage = createSecuritySolutionStorage(localStorage);
 
   const store = createStore(
-    createInitialState(subPluginsStore.initialState),
+    createInitialState({
+      ...subPluginsStore.initialState,
+      timeline: {
+        ...(subPluginsStore.initialState.timeline ?? initialTimelineState),
+        timelineById: {
+          ...(subPluginsStore.initialState.timeline?.timelineById ?? {}),
+          ...(storage.getAllTimelines() ?? {}),
+        },
+      },
+    }),
     subPluginsStore.reducer,
     libs$.pipe(pluck('apolloClient')),
+    storage,
     subPluginsStore.middlewares
   );
 

x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx

@@ -12,6 +12,7 @@ import {
   mockGlobalState,
   TestProviders,
   SUB_PLUGINS_REDUCER,
+  createSecuritySolutionStorageMock,
 } from '../../mock';
 import { createStore, State } from '../../store';
 import { AddFilterToGlobalSearchBar } from '.';
@@ -33,10 +34,21 @@ jest.mock('../../lib/kibana', () => ({
 
 describe('AddFilterToGlobalSearchBar Component', () => {
   const state: State = mockGlobalState;
-  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const securitySolutionLocalStorageMock = createSecuritySolutionStorageMock();
+  let store = createStore(
+    state,
+    SUB_PLUGINS_REDUCER,
+    apolloClientObservable,
+    securitySolutionLocalStorageMock
+  );
 
   beforeEach(() => {
-    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    store = createStore(
+      state,
+      SUB_PLUGINS_REDUCER,
+      apolloClientObservable,
+      securitySolutionLocalStorageMock
+    );
     mockAddFilters.mockClear();
   });
 

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -17,7 +17,6 @@ export interface OwnProps {
   start: number;
 }
 
-const ALERTS_TABLE_ID = 'alerts-table';
 const defaultAlertsFilters: Filter[] = [
   {
     meta: {
@@ -52,18 +51,19 @@ const defaultAlertsFilters: Filter[] = [
 ];
 
 interface Props {
+  id: string;
   endDate: number;
   startDate: number;
   pageFilters?: Filter[];
 }
 
-const AlertsTableComponent: React.FC<Props> = ({ endDate, startDate, pageFilters = [] }) => {
+const AlertsTableComponent: React.FC<Props> = ({ id, endDate, startDate, pageFilters = [] }) => {
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
   const { initializeTimeline } = useManageTimeline();
 
   useEffect(() => {
     initializeTimeline({
-      id: ALERTS_TABLE_ID,
+      id,
       documentType: i18n.ALERTS_DOCUMENT_TYPE,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
       title: i18n.ALERTS_TABLE_TITLE,
@@ -75,7 +75,7 @@ const AlertsTableComponent: React.FC<Props> = ({ endDate, startDate, pageFilters
       pageFilters={alertsFilter}
       defaultModel={alertsDefaultModel}
       end={endDate}
-      id={ALERTS_TABLE_ID}
+      id={id}
       start={startDate}
     />
   );