Version 6

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "th2-rpt-viewer",
-	"version": "5.0.7",
+	"version": "6.0.1",
 	"description": "",
 	"main": "index.tsx",
 	"private": true,

src/api/message.ts

@@ -54,9 +54,9 @@ const messageHttpApi: MessageApiSchema = {
 			timelineDirection,
 			messageId: messageId.length > 0 ? messageId : null,
 			limit,
-			timestampFrom,
-			timestampTo,
-			stream: streams,
+			timestampFrom: timestampFrom ? new Date(timestampFrom).toISOString() : null,
+			timestampTo: timestampTo ? new Date(timestampTo).toISOString() : null,
+			stream: streams.flatMap(stream => [`${stream}:first`, `${stream}:second`]),
 		});
 
 		const res = await fetch(`backend/search/messages?${params}`, {
@@ -74,8 +74,8 @@ const messageHttpApi: MessageApiSchema = {
 	getMessagesIds: async (timestampFrom, timestampTo) => {
 		const params = createURLSearchParams({
 			idsOnly: true,
-			timestampFrom,
-			timestampTo,
+			timestampFrom: timestampFrom ? new Date(timestampFrom).toISOString() : null,
+			timestampTo: timestampTo ? new Date(timestampTo).toISOString() : null,
 		});
 		const res = await fetch(`backend/search/messages?${params}`);
 
@@ -129,7 +129,11 @@ const messageHttpApi: MessageApiSchema = {
 			throw new Error('One of startTimestamp or messageId must be specified');
 		}
 
-		const params = createURLSearchParams({ stream: streams, startTimestamp, messageId });
+		const params = createURLSearchParams({
+			stream: streams.flatMap(stream => [`${stream}:first`, `${stream}:second`]),
+			startTimestamp: startTimestamp ? new Date(startTimestamp).toISOString() : startTimestamp,
+			messageId,
+		});
 		const res = await fetch(`backend/messageIds/?${params}`, { signal });
 		if (res.ok) return res.json();
 

src/api/sse.ts

@@ -76,6 +76,17 @@ export interface EventSSEParams extends BaseSSEParams {
 	resumeFromId?: string;
 }
 
+export type MessageDirection = 'first' | 'second';
+
+export const toStream = (
+	name: string,
+	direction: MessageDirection[] = ['first', 'second'],
+): string[] => {
+	const res = direction.map(dir => `${name}:${dir}`);
+
+	return res;
+};
+
 export interface MessagesSSEParams extends BaseSSEParams {
 	stream: string[];
 	filters?: Array<MessagesSSEFilters>;
@@ -103,7 +114,11 @@ export interface MessageIdsEvent {
 	reason: string;
 	// session: messageId
 	messageIds: {
-		[session: string]: string | null;
+		[session: string]: {
+			hasStarted: boolean;
+			hasFinished: boolean;
+			lastId: string | null;
+		};
 	};
 }
 
@@ -171,9 +186,9 @@ export function getMessagesSSEParamsFromFilter(
 	);
 
 	const queryParams: MessagesSSEParams = {
-		startTimestamp,
-		endTimestamp: endTimestamp || undefined,
-		stream: streams,
+		startTimestamp: startTimestamp ? new Date(startTimestamp).toISOString() : startTimestamp,
+		endTimestamp: endTimestamp ? new Date(endTimestamp).toISOString() : endTimestamp,
+		stream: streams.flatMap(stream => [`${stream}:first`, `${stream}:second`]),
 		searchDirection,
 		resultCountLimit,
 		filters: filtersToAdd,
@@ -185,15 +200,24 @@ export function getMessagesSSEParamsFromFilter(
 
 const sseApi: SSESchema = {
 	getEventSource: config => {
+		// console.error(new Error());
 		const { type, queryParams } = config;
-		const params = createURLSearchParams({ ...queryParams });
+		const params = createURLSearchParams({
+			...queryParams,
+			startTimestamp: queryParams.startTimestamp
+				? new Date(queryParams.startTimestamp).toISOString()
+				: null,
+			endTimestamp: queryParams.endTimestamp
+				? new Date(queryParams.endTimestamp).toISOString()
+				: null,
+		});
 		return new EventSource(`backend/search/sse/${type}s/?${params}`);
 	},
 	getEventsTreeSource: (timeRange, filter, sseParams) => {
 		const paramFromFilter = filter ? getEventsSSEParamsFromFilter(filter) : {};
 		const params = createURLSearchParams({
-			startTimestamp: timeRange[0],
-			endTimestamp: timeRange[1],
+			startTimestamp: new Date(timeRange[0]).toISOString(),
+			endTimestamp: new Date(timeRange[1]).toISOString(),
 			...paramFromFilter,
 			...sseParams,
 		});

src/components/bookmarks/BookmarksPanel.tsx

@@ -152,9 +152,13 @@ const BookmarkItemBase = (props: BookmarkItemProps) => {
 		: bookmark;
 
 	const itemInfo = {
-		id: isEventMessage(item) ? item.messageId : item.eventId,
+		id: isEventMessage(item) ? item.id : item.eventId,
 		status: isEventMessage(item) ? null : item.successful ? 'passed' : 'failed',
-		title: isEventMessage(item) ? item.messageType || 'unknown type' : item.eventName,
+		title: isEventMessage(item)
+			? item.parsedMessages
+					?.map(parsedMessage => parsedMessage.message.metadata.messageType)
+					.toString() || 'unknown type'
+			: item.eventName,
 		timestamp: getTimestampAsNumber(item),
 		type: item.type,
 	};

src/components/embedded/EmbeddedEventHeader.tsx

@@ -54,7 +54,7 @@ export default function EmbeddedEventHeader(props: Props) {
 					<div className='event-header-card__time-label'>
 						<span className='event-header-card__time-label-full'>
 							{formatTime(startTimestampValue)}
-						</span>
+						</span>{' '}
 					</div>
 					{eventType && <span className='event-header-card__event-type'>{eventType}</span>}
 				</>

src/components/embedded/EmbeddedMessage.tsx

@@ -15,19 +15,40 @@
  ***************************************************************************** */
 
 import React, { useEffect, useState } from 'react';
-import { EventMessage, MessageViewType } from '../../models/EventMessage';
+import { EventMessage, MessageViewType, EventMessageItem } from '../../models/EventMessage';
 import MessageCardBase from '../message/message-card/MessageCardBase';
 import SplashScreen from '../SplashScreen';
 
 function EmbeddedMessage({ messageId }: { messageId: string }) {
 	const [message, setMessage] = useState<EventMessage | null>();
+	const [messageList, setMessageList] = React.useState<EventMessageItem[]>([]);
 	const [viewType, setViewType] = useState(MessageViewType.JSON);
 	const [errorStatus, setErrorStatus] = useState<string | null>(null);
 
 	useEffect(() => {
 		getMessage();
 	}, []);
 
+	useEffect(() => {
+		if (message)
+			message.parsedMessages?.forEach((parsedMessage, index) => {
+				const tempMessage = message;
+				const { parsedMessages, ...rest } = tempMessage;
+				const tempMessageItem: EventMessageItem = {
+					...rest,
+					parsedMessage: null,
+					parsedMessages: [],
+				};
+
+				tempMessageItem.parsedMessage = tempMessage.parsedMessages
+					? tempMessage.parsedMessages[index]
+					: null;
+				if (tempMessageItem.parsedMessages && tempMessageItem.parsedMessage)
+					tempMessageItem.parsedMessages[0] = tempMessageItem.parsedMessage;
+				setMessageList([...messageList, tempMessageItem]);
+			});
+	});
+
 	async function getMessage() {
 		const res = await fetch(`backend/message/${messageId}`);
 		if (res.ok) {
@@ -41,15 +62,20 @@ function EmbeddedMessage({ messageId }: { messageId: string }) {
 		throw new Error(errorStatus);
 	}
 
-	if (message) {
+	if (messageList) {
 		return (
 			<div className='embedded-wrapper'>
-				<MessageCardBase
-					isEmbedded
-					message={message}
-					setViewType={setViewType}
-					viewType={viewType}
-				/>
+				{messageList.map((parsedMessage, index: number) => {
+					return (
+						<MessageCardBase
+							isEmbedded
+							key={`${parsedMessage.id}-${index}`}
+							message={parsedMessage}
+							setViewType={setViewType}
+							viewType={viewType}
+						/>
+					);
+				})}
 			</div>
 		);
 	}

src/components/embedded/EmbeddedMessages.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  ***************************************************************************** */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { observer, Observer } from 'mobx-react-lite';
 import moment from 'moment';
-import { EventMessage, MessageViewType } from '../../models/EventMessage';
+import { EventMessage, EventMessageItem } from '../../models/EventMessage';
 import SplashScreen from '../SplashScreen';
-import MessageCardBase from '../message/message-card/MessageCardBase';
 import '../../styles/embedded.scss';
 import api from '../../api';
 import StateSaverProvider from '../util/StateSaverProvider';
@@ -30,26 +29,17 @@ import { raf } from '../../helpers/raf';
 import EmbeddedMessagesStore from './embedded-stores/EmbeddedMessagesStore';
 import MessagesUpdateButton from '../message/MessagesUpdateButton';
 import EmbeddedMessagesFilterPanel from './EmbeddedMessagesFilterPanel';
+import MessageCard from '../message/message-card/MessageCard';
 
 const messagesStore = new EmbeddedMessagesStore(api);
 
 const EmbeddedMessages = () => {
 	const { dataStore, scrolledIndex } = messagesStore;
 	const { updateStore } = dataStore;
 
-	const [viewType, setViewType] = useState(MessageViewType.JSON);
-
-	const renderMsg = (index: number, message: EventMessage) => {
-		return (
-			<MessageCardBase
-				isEmbedded
-				key={index}
-				message={message}
-				setViewType={setViewType}
-				viewType={viewType}
-			/>
-		);
-	};
+	const renderMsg = React.useCallback((index: number, message: EventMessageItem) => {
+		return <MessageCard message={message} />;
+	}, []);
 
 	const reportURL = React.useMemo(() => {
 		const messagesStoreState = {
@@ -132,7 +122,7 @@ export default function MessagesApp() {
 interface Props {
 	computeItemKey?: (idx: number) => React.Key;
 	rowCount: number;
-	itemRenderer: (index: number, message: EventMessage) => React.ReactElement;
+	itemRenderer: (index: number, message: EventMessageItem) => React.ReactElement;
 	/*
 		 Number objects is used here because in some cases (eg one message / action was
 		 selected several times by different entities)
@@ -159,6 +149,31 @@ const MessagesVirtualizedList = observer((props: Props) => {
 		scrolledIndex,
 	} = props;
 
+	const [messageList, setMessageList] = React.useState<EventMessageItem[]>([]);
+
+	React.useEffect(() => {
+		messagesStore.dataStore.messages.forEach(message =>
+			message.parsedMessages?.forEach((parsedMessage, index) => {
+				const tempMessage = message;
+				const { parsedMessages, ...rest } = tempMessage;
+				const tempMessageItem: EventMessageItem = {
+					...rest,
+					parsedMessage: null,
+					parsedMessages: [],
+				};
+
+				tempMessageItem.parsedMessage = tempMessage.parsedMessages
+					? tempMessage.parsedMessages[index]
+					: null;
+
+				if (tempMessageItem.parsedMessages && tempMessageItem.parsedMessage)
+					tempMessageItem.parsedMessages[0] = tempMessageItem.parsedMessage;
+
+				setMessageList([...messageList, tempMessageItem]);
+			}),
+		);
+	}, [messagesStore.dataStore.messages]);
+
 	React.useEffect(() => {
 		if (scrolledIndex !== null) {
 			raf(() => {
@@ -214,7 +229,7 @@ const MessagesVirtualizedList = observer((props: Props) => {
 
 	return (
 		<Virtuoso
-			data={messagesStore.dataStore.messages}
+			data={messageList}
 			firstItemIndex={messagesStore.dataStore.startIndex}
 			ref={virtuoso}
 			overscan={overscan}

src/components/embedded/embedded-stores/EmbeddedMessagesDataProviderStore.tsx

@@ -187,10 +187,14 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 
 		const [nextMessages, prevMessages] = await Promise.all([
 			this.searchChannelNext.loadAndSubscribe({
-				resumeMessageIds: extractMessageIds(messageIds.previous),
+				resumeMessageIds: extractMessageIds(
+					messageIds.next.filter((messageId, index) => index < 2),
+				),
 			}),
 			this.searchChannelPrev.loadAndSubscribe({
-				resumeMessageIds: extractMessageIds(messageIds.next),
+				resumeMessageIds: extractMessageIds(
+					messageIds.previous.filter((messageId, index) => index < 2),
+				),
 			}),
 		]);
 
@@ -204,7 +208,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 		} else {
 			const firstPrevMessage = prevMessages[0];
 			if (firstPrevMessage) {
-				this.messagesStore.scrollToMessage(firstPrevMessage.messageId);
+				this.messagesStore.scrollToMessage(firstPrevMessage.id);
 			}
 		}
 	};
@@ -274,10 +278,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 		this.lastPreviousChannelResponseTimestamp = null;
 		const firstPrevMessage = messages[0];
 
-		if (
-			firstPrevMessage &&
-			firstPrevMessage.messageId === this.messages[this.messages.length - 1]?.messageId
-		) {
+		if (firstPrevMessage && firstPrevMessage.id === this.messages[this.messages.length - 1]?.id) {
 			messages.shift();
 		}
 
@@ -291,7 +292,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 			this.messages = newMessagesList;
 
 			const selectedMessageId = this.messagesStore.selectedMessageId?.valueOf();
-			if (selectedMessageId && messages.find(m => m.messageId === selectedMessageId)) {
+			if (selectedMessageId && messages.find(m => m.id === selectedMessageId)) {
 				this.messagesStore.scrollToMessage(selectedMessageId);
 			}
 		}
@@ -330,7 +331,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 		this.lastNextChannelResponseTimestamp = null;
 		const firstNextMessage = messages[this.messages.length - 1];
 
-		if (firstNextMessage && firstNextMessage.messageId === this.messages[0]?.messageId) {
+		if (firstNextMessage && firstNextMessage.id === this.messages[0]?.id) {
 			messages.pop();
 		}
 
@@ -345,7 +346,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 			this.messages = newMessagesList;
 
 			const selectedMessageId = this.messagesStore.selectedMessageId?.valueOf();
-			if (selectedMessageId && messages.find(m => m.messageId === selectedMessageId)) {
+			if (selectedMessageId && messages.find(m => m.id === selectedMessageId)) {
 				this.messagesStore.scrollToMessage(selectedMessageId);
 			}
 		}

src/components/embedded/embedded-stores/EmbeddedMessagesStore.tsx

@@ -83,7 +83,7 @@ export default class EmbeddedMessagesStore {
 	@action
 	public scrollToMessage = async (messageId: string) => {
 		const messageIndex = this.dataStore.messages.findIndex(
-			(m: { messageId: string }) => m.messageId === messageId,
+			(m: { id: string }) => m.id === messageId,
 		);
 		if (messageIndex !== -1) {
 			this.scrolledIndex = new Number(messageIndex);

src/components/event/EventCardHeader.tsx

@@ -149,7 +149,7 @@ function EventCardHeader(props: Props) {
 						onMouseLeave={onMouseLeave}>
 						<span className='event-header-card__time-label-full'>
 							{formatTime(startTimestampValue)}
-						</span>
+						</span>{' '}
 					</div>
 					{eventType && (
 						<span className='event-header-card__event-type' onClick={handleTypeClick}>