added button for searchResults to open in a new workspace

src/components/search-panel/SearchPanelResults.tsx

@@ -29,6 +29,7 @@ interface SearchPanelResultsProps {
 	onResultItemClick: (
 		searchResult: SearchResult,
 		filter?: { type: 'body' | 'bodyBinary'; entry: FilterEntry },
+		isNewWorkspace?: boolean,
 	) => void;
 	onResultGroupClick: (timestamp: number, resultType: ActionType) => void;
 	onResultDelete: () => void;

src/components/search-panel/SearchResultItem.tsx

@@ -76,6 +76,7 @@ type SearchResultItemProps = {
 	onResultClick: (
 		item: SearchResult,
 		filter?: { type: 'body' | 'bodyBinary'; entry: FilterEntry },
+		isNewWorkspace?: boolean,
 	) => void;
 };
 
@@ -398,6 +399,11 @@ const SearchResultItem = ({
 			<div className={nameClassName} onClick={() => onResultClick(result)}>
 				{getItemName(result)}
 			</div>
+			<div
+				className='search-result__new-workspace'
+				onClick={() => onResultClick(result, undefined, true)}>
+				Open in a new workspace
+			</div>
 			<div className='search-result__timestamp'>{formatTime(getTimestampAsNumber(result))}</div>
 			<div className='search-result__body'>
 				{Object.entries(keysToDisplay[result.type]).map(([key, valueGetter], index, arr) => (

src/stores/RootStore.ts

@@ -49,6 +49,7 @@ export default class RootStore {
 			this,
 			this.api,
 			this.filtersHistoryStore,
+			this.sessionsStore,
 			this.parseUrlState(),
 		);
 

src/stores/workspace/WorkspaceStore.ts

@@ -30,9 +30,9 @@ import { isEventMessage } from '../../helpers/event';
 import { TimeRange } from '../../models/Timestamp';
 import WorkspacesStore, { WorkspacesUrlState } from './WorkspacesStore';
 import { WorkspacePanelsLayout } from '../../components/workspace/WorkspaceSplitter';
-import { SearchStore } from '../SearchStore';
+import { FilterEntry, SearchStore } from '../SearchStore';
 import { SessionsStore } from '../messages/SessionsStore';
-import { getRangeFromTimestamp } from '../../helpers/date';
+import { getRangeFromTimestamp, timestampToNumber } from '../../helpers/date';
 import { isAbortError } from '../../helpers/fetch';
 import { getObjectKeys } from '../../helpers/object';
 import MessagesViewTypesStore from '../messages/MessagesViewTypesStore';
@@ -215,14 +215,36 @@ export default class WorkspaceStore {
 	};
 
 	@action
-	public onSearchResultItemSelect = (resultItem: EventTreeNode | EventAction | EventMessage) => {
-		this.onSavedItemSelect(resultItem);
+	public onSearchResultItemSelect = (
+		resultItem: EventTreeNode | EventAction | EventMessage,
+		filter?: { type: 'body' | 'bodyBinary'; entry: FilterEntry },
+		isNewWorkspace?: boolean,
+	) => {
+		if (isNewWorkspace) {
+			let initialWorkspaceState: WorkspaceInitialState = {};
+
+			if (isEventMessage(resultItem)) {
+				initialWorkspaceState = this.workspacesStore.getInitialWorkspaceByMessage(
+					timestampToNumber(resultItem.timestamp),
+					resultItem,
+				);
+			} else {
+				initialWorkspaceState = this.workspacesStore.getInitialWorkspaceByEvent(
+					timestampToNumber(resultItem.startTimestamp),
+					resultItem,
+				);
+			}
+
+			const newWorkspace = this.workspacesStore.createWorkspace(initialWorkspaceState);
+			this.workspacesStore.addWorkspace(newWorkspace);
+		} else {
+			this.onSavedItemSelect(resultItem);
+		}
 	};
 
 	@action
 	public onSearchResultGroupSelect = (timestamp: number, resultType: ActionType) => {
 		switch (resultType) {
-			case ActionType.EVENT_TREE_NODE:
 			case ActionType.EVENT_ACTION:
 				this.eventsStore.clearFilter();
 				this.eventsStore.filterStore.setEventsRange(

src/stores/workspace/WorkspacesStore.ts

@@ -23,6 +23,14 @@ import WorkspaceStore, { WorkspaceUrlState, WorkspaceInitialState } from './Work
 import TabsStore from './TabsStore';
 import RootStore from '../RootStore';
 import FiltersHistoryStore from '../FiltersHistoryStore';
+import { SearchStore } from 'stores/SearchStore';
+import { SessionsStore } from 'stores/messages/SessionsStore';
+import { getRangeFromTimestamp } from '../../helpers/date';
+import { EventMessage } from '../../models/EventMessage';
+import { MessageFilterState } from '../../components/search-panel/SearchPanelFilters';
+import { EventTreeNode, EventAction } from '../../models/EventAction';
+
+const SEARCH_INTERVAL = 15;
 
 export type WorkspacesUrlState = Array<WorkspaceUrlState>;
 
@@ -31,16 +39,21 @@ export default class WorkspacesStore {
 
 	public bookmarksStore: IBookmarksStore;
 
+	public searchStore: SearchStore;
+
 	public tabsStore = new TabsStore(this);
 
 	constructor(
 		private rootStore: RootStore,
 		private api: ApiSchema,
 		public filtersHistoryStore: FiltersHistoryStore,
+		private sessionsStore: SessionsStore,
 		initialState: WorkspacesUrlState | null,
 	) {
 		this.init(initialState || null);
 
+		this.searchStore = new SearchStore(this, api, filtersHistoryStore, sessionsStore);
+
 		this.bookmarksStore = new BookmarksStore(this, this.api.indexedDb);
 
 		reaction(() => this.activeWorkspace, this.onActiveWorkspaceChange);
@@ -68,6 +81,44 @@ export default class WorkspacesStore {
 		this.tabsStore.setActiveWorkspace(this.workspaces.length - 1);
 	};
 
+	public getInitialWorkspaceByMessage = (
+		timestamp: number,
+		targetMessage?: EventMessage,
+	): WorkspaceInitialState => {
+		const requestInfo = this.searchStore.currentSearch?.request;
+		const filters: MessageFilterState | null = (requestInfo?.filters as MessageFilterState) || null;
+
+		return {
+			messages: {
+				sse: filters,
+				streams: requestInfo?.state.stream || [],
+				timestampFrom: null,
+				timestampTo: timestamp,
+				targetMessage,
+			},
+			interval: SEARCH_INTERVAL,
+			layout: [0, 0, 100, 0],
+			timeRange: getRangeFromTimestamp(timestamp, SEARCH_INTERVAL),
+		};
+	};
+
+	public getInitialWorkspaceByEvent = (
+		timestamp: number,
+		targetEvent?: EventTreeNode | EventAction,
+	): WorkspaceInitialState => {
+		const [timestampFrom, timestampTo] = getRangeFromTimestamp(timestamp, SEARCH_INTERVAL);
+
+		return {
+			events: {
+				range: [timestampFrom, timestampTo],
+				targetEvent,
+			},
+			layout: [0, 100, 0, 0],
+			interval: SEARCH_INTERVAL,
+			timeRange: [timestampFrom, timestampTo],
+		};
+	};
+
 	public createWorkspace = (workspaceInitialState: WorkspaceInitialState = {}) =>
 		new WorkspaceStore(
 			this,

src/styles/search-panel.scss

@@ -874,9 +874,9 @@
 	background-color: $searchResultBackgroundColor;
 	display: grid;
 	grid-template-areas:
-		'icon name timestamp'
-		'body body body';
-	grid-template-columns: 15px 1fr auto;
+		'icon name new-workspace timestamp'
+		'body body body body';
+	grid-template-columns: 15px auto 1fr auto;
 	grid-template-rows: 15px auto;
 	gap: 5px 7px;
 	padding: 5px;
@@ -945,6 +945,18 @@
 		}
 	}
 
+	&__new-workspace {
+		grid-area: new-workspace;
+		font-size: 10px;
+		color: #808080;
+		line-height: 15px;
+		cursor: pointer;
+
+		&:hover {
+			color: #595959;
+		}
+	}
+
 	&__timestamp {
 		grid-area: timestamp;
 		color: #808080;