[Osquery] Persist history page filters across tab and detail-page navigation (elastic#260891)

Author: tomsonpl

x-pack/platform/plugins/shared/osquery/public/actions/history_filter_storage.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { saveHistoryFilters, getHistoryFilters } from './history_filter_storage';
+
+describe('history_filter_storage', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  describe('saveHistoryFilters / getHistoryFilters', () => {
+    it('should round-trip a query string', () => {
+      saveHistoryFilters('?q=uptime&sources=live');
+      expect(getHistoryFilters()).toBe('?q=uptime&sources=live');
+    });
+
+    it('should return empty string when nothing is stored', () => {
+      expect(getHistoryFilters()).toBe('');
+    });
+
+    it('should store empty string for default filters', () => {
+      saveHistoryFilters('');
+      expect(getHistoryFilters()).toBe('');
+    });
+
+    it('should overwrite previous value', () => {
+      saveHistoryFilters('?q=first');
+      saveHistoryFilters('?q=second');
+      expect(getHistoryFilters()).toBe('?q=second');
+    });
+  });
+
+  describe('graceful degradation', () => {
+    it('should not throw when sessionStorage.setItem throws', () => {
+      jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+        throw new Error('QuotaExceededError');
+      });
+
+      expect(() => saveHistoryFilters('?q=test')).not.toThrow();
+
+      jest.restoreAllMocks();
+    });
+
+    it('should return empty string when sessionStorage.getItem throws', () => {
+      jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+        throw new Error('SecurityError');
+      });
+
+      expect(getHistoryFilters()).toBe('');
+
+      jest.restoreAllMocks();
+    });
+  });
+});

x-pack/platform/plugins/shared/osquery/public/actions/history_filter_storage.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+const STORAGE_KEY = 'osquery:historyFilters';
+
+export const saveHistoryFilters = (qs: string): void => {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, qs);
+  } catch {
+    // sessionStorage may be unavailable (e.g. private browsing quota exceeded)
+  }
+};
+
+export const getHistoryFilters = (): string => {
+  try {
+    return sessionStorage.getItem(STORAGE_KEY) ?? '';
+  } catch {
+    return '';
+  }
+};

x-pack/platform/plugins/shared/osquery/public/actions/use_history_url_params.test.ts

@@ -5,8 +5,17 @@
  * 2.0.
  */
 
-import { parseHistoryUrlParams, serializeHistoryUrlParams } from './use_history_url_params';
+import { renderHook, act } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import React from 'react';
+import { Router } from '@kbn/shared-ux-router';
+import {
+  parseHistoryUrlParams,
+  serializeHistoryUrlParams,
+  useHistoryUrlParams,
+} from './use_history_url_params';
 import type { HistoryUrlFilters } from './use_history_url_params';
+import { getHistoryFilters } from './history_filter_storage';
 
 describe('parseHistoryUrlParams', () => {
   it('returns defaults for empty search string', () => {
@@ -228,3 +237,57 @@ describe('serializeHistoryUrlParams', () => {
     });
   });
 });
+
+describe('useHistoryUrlParams', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  const renderWithRouter = (initialPath: string) => {
+    const history = createMemoryHistory({ initialEntries: [initialPath] });
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(Router, { history }, children);
+
+    return { ...renderHook(() => useHistoryUrlParams(), { wrapper }), history };
+  };
+
+  it('persists filters to sessionStorage when setFilter is called', () => {
+    const { result } = renderWithRouter('/history');
+
+    act(() => {
+      result.current.setFilter('q', 'uptime');
+    });
+
+    expect(getHistoryFilters()).toContain('q=uptime');
+  });
+
+  it('persists filters to sessionStorage when setFilters is called', () => {
+    const { result } = renderWithRouter('/history');
+
+    act(() => {
+      result.current.setFilters({ q: 'dns', sources: ['live'] });
+    });
+
+    const stored = getHistoryFilters();
+    expect(stored).toContain('q=dns');
+    expect(stored).toContain('sources=live');
+  });
+
+  it('URL wins over stale sessionStorage on mount', () => {
+    sessionStorage.setItem('osquery:historyFilters', '?q=stale');
+    const { result } = renderWithRouter('/history?q=fromUrl');
+
+    expect(result.current.filters.q).toBe('fromUrl');
+    expect(getHistoryFilters()).toContain('q=fromUrl');
+  });
+
+  it('stores empty string when all filters are at defaults', () => {
+    const { result } = renderWithRouter('/history?q=test');
+
+    act(() => {
+      result.current.setFilter('q', '');
+    });
+
+    expect(getHistoryFilters()).toBe('');
+  });
+});

x-pack/platform/plugins/shared/osquery/public/actions/use_history_url_params.ts

@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { parse, stringify } from 'query-string';
 import type { SourceFilter } from '../../common/api/unified_history/types';
+import { saveHistoryFilters } from './history_filter_storage';
 
 export const DEFAULT_START_DATE = 'now-24h';
 export const DEFAULT_END_DATE = 'now';
@@ -111,12 +112,22 @@ export const useHistoryUrlParams = () => {
 
   const filters = useMemo(() => parseHistoryUrlParams(search), [search]);
 
+  // Sync sessionStorage with the current URL on mount and whenever the
+  // search string changes (e.g. user manually edits the URL bar).
+  useEffect(() => {
+    saveHistoryFilters(search);
+  }, [search]);
+
   const replaceUrl = useCallback(
     (nextFilters: HistoryUrlFilters) => {
       const serialized = serializeHistoryUrlParams(nextFilters);
       const qs = stringify(serialized, { sort: false, skipNull: true });
+      const nextSearch = qs ? `?${qs}` : '';
+      // Eager save — the useEffect above will also fire after history.replace,
+      // but writing here avoids a brief window where sessionStorage is stale.
+      saveHistoryFilters(nextSearch);
       const currentPathname = history.location.pathname;
-      history.replace({ pathname: currentPathname, search: qs ? `?${qs}` : '' });
+      history.replace({ pathname: currentPathname, search: nextSearch });
     },
     [history]
   );

x-pack/platform/plugins/shared/osquery/public/common/page_paths.test.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { pagePathGetters } from './page_paths';
+
+describe('pagePathGetters', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  describe('history', () => {
+    it('returns bare /history when no persisted filters exist', () => {
+      expect(pagePathGetters.history()).toBe('/history');
+    });
+
+    it('appends persisted filters from sessionStorage', () => {
+      sessionStorage.setItem('osquery:historyFilters', '?q=uptime&sources=live');
+      expect(pagePathGetters.history()).toBe('/history?q=uptime&sources=live');
+    });
+
+    it('returns bare /history when persisted filters are empty string', () => {
+      sessionStorage.setItem('osquery:historyFilters', '');
+      expect(pagePathGetters.history()).toBe('/history');
+    });
+  });
+});

x-pack/platform/plugins/shared/osquery/public/common/page_paths.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { getHistoryFilters } from '../actions/history_filter_storage';
+
 export type StaticPage =
   | 'base'
   | 'overview'
@@ -61,7 +63,8 @@ export const pagePathGetters: {
   live_queries: () => '/live_queries',
   live_query_new: () => '/live_queries/new',
   live_query_details: ({ liveQueryId }) => `/live_queries/${liveQueryId}`,
-  history: () => '/history',
+  // Note: unlike other getters, history() reads sessionStorage to restore persisted filters.
+  history: () => `/history${getHistoryFilters()}`,
   history_details: ({ liveQueryId }) => `/history/${liveQueryId}`,
   history_scheduled_details: ({ scheduleId, executionCount }) =>
     `/history/scheduled/${scheduleId}/${executionCount}`,

x-pack/platform/plugins/shared/osquery/public/common/use_go_back.test.ts

@@ -26,6 +26,7 @@ describe('useGoBack', () => {
     jest.clearAllMocks();
     mockLocationState = null;
     mockHistoryLength = 2;
+    sessionStorage.clear();
   });
 
   it('pushes to fallback path when location state has no fromHistory flag', () => {
@@ -81,4 +82,15 @@ describe('useGoBack', () => {
     expect(mockPush).toHaveBeenCalledWith('/history');
     expect(mockGoBack).not.toHaveBeenCalled();
   });
+
+  it('pushes fallback path with query string when provided by caller', () => {
+    const { result } = renderHook(() => useGoBack('/history?q=uptime&sources=live'));
+    const event = createMouseEvent();
+
+    act(() => {
+      result.current(event);
+    });
+
+    expect(mockPush).toHaveBeenCalledWith('/history?q=uptime&sources=live');
+  });
 });

x-pack/platform/plugins/shared/osquery/public/components/main_navigation.tsx

@@ -26,6 +26,7 @@ import { PAGE_ROUTING_PATHS } from '../common/page_paths';
 import { ManageIntegrationLink } from './manage_integration_link';
 import { useKibana } from '../common/lib/kibana';
 import { useIsExperimentalFeatureEnabled } from '../common/experimental_features_context';
+import { getHistoryFilters } from '../actions/history_filter_storage';
 
 enum Section {
   LiveQueries = 'live_queries',
@@ -64,7 +65,10 @@ export const MainNavigation = () => {
   });
 
   const historySection = isHistoryEnabled ? Section.History : Section.LiveQueries;
-  const historyNavProps = useRouterNavigate(historySection);
+  const persistedHistoryQs = isHistoryEnabled ? getHistoryFilters() : '';
+  const historyNavProps = useRouterNavigate(
+    persistedHistoryQs ? `${historySection}${persistedHistoryQs}` : historySection
+  );
   const packsNavProps = useRouterNavigate(Section.Packs);
   const savedQueriesNavProps = useRouterNavigate(Section.SavedQueries);
   const newQueryNavProps = useRouterNavigate('/new');

x-pack/platform/plugins/shared/osquery/public/routes/live_queries/details/index.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../../components/layouts';
 import { useLiveQueryDetails } from '../../../actions/use_live_query_details';
 import { useBreadcrumbs } from '../../../common/hooks/use_breadcrumbs';
+import { pagePathGetters } from '../../../common/page_paths';
 import { PackQueriesStatusTable } from '../../../live_queries/form/pack_queries_status_table';
 import { useIsExperimentalFeatureEnabled } from '../../../common/experimental_features_context';
 
@@ -32,7 +33,7 @@ const LiveQueryDetailsPageComponent = () => {
   useBreadcrumbs(isHistoryEnabled ? 'history_details' : 'live_query_details', {
     liveQueryId: actionId,
   });
-  const backNavigationTarget = isHistoryEnabled ? 'history' : 'live_queries';
+  const backNavigationTarget = isHistoryEnabled ? pagePathGetters.history() : 'live_queries';
   const handleGoBack = useGoBack(backNavigationTarget);
   const liveQueryListProps = useRouterNavigate(backNavigationTarget, handleGoBack);
   const [isLive, setIsLive] = useState(false);

x-pack/platform/plugins/shared/osquery/public/routes/live_queries/new/index.tsx

@@ -15,6 +15,7 @@ import { isArray } from 'lodash';
 import { WithHeaderLayout } from '../../../components/layouts';
 import { useRouterNavigate } from '../../../common/lib/kibana';
 import { useGoBack } from '../../../common/use_go_back';
+import { pagePathGetters } from '../../../common/page_paths';
 import type { LocationStateWithFromHistory } from '../../../common/use_go_back';
 import { LiveQuery } from '../../../live_queries';
 import { useBreadcrumbs } from '../../../common/hooks/use_breadcrumbs';
@@ -29,7 +30,7 @@ const NewLiveQueryPageComponent = () => {
   useBreadcrumbs(isHistoryEnabled ? 'new_query' : 'live_query_new');
   const { replace } = useHistory();
   const location = useLocation<LocationState>();
-  const backNavigationTarget = isHistoryEnabled ? 'history' : 'live_queries';
+  const backNavigationTarget = isHistoryEnabled ? pagePathGetters.history() : 'live_queries';
   const handleGoBack = useGoBack(backNavigationTarget);
   const backNavigationProps = useRouterNavigate(backNavigationTarget, handleGoBack);
   const [initialFormData, setInitialFormData] = useState<Record<string, unknown> | undefined>({});