changed messageId to id

src/components/bookmarks/BookmarksPanel.tsx

@@ -221,7 +221,7 @@ 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,
 		timestamp: getTimestampAsNumber(item),

src/components/embedded/EmbeddedMessages.tsx

@@ -47,7 +47,7 @@ const EmbeddedMessages = () => {
 				message={message}
 				setViewType={setViewType}
 				viewType={viewType}
-				applyFilterToBody={message.messageId === selectedMessageId}
+				applyFilterToBody={message.id === selectedMessageId}
 			/>
 		);
 	};

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

@@ -208,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);
 			}
 		}
 	};
@@ -278,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();
 		}
 
@@ -295,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);
 			}
 		}
@@ -334,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();
 		}
 
@@ -349,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/graph/GraphItemsMenu.tsx

@@ -69,7 +69,7 @@ export default function GraphItemsMenu({
 			<ul className='graph-item-group__list'>
 				{items.map(item => (
 					<li
-						key={isEventMessage(item) ? item.messageId : item.eventId}
+						key={isEventMessage(item) ? item.id : item.eventId}
 						className='graph-menu__item'
 						onClick={ev => handleClick(ev, item)}>
 						<div
@@ -79,7 +79,7 @@ export default function GraphItemsMenu({
 							)}
 						/>
 						<div className='graph-menu__item-name'>
-							{isEventMessage(item) ? item.messageId : item.eventName}
+							{isEventMessage(item) ? item.id : item.eventName}
 						</div>
 						<div className='graph-menu__item-timestamp'>
 							{moment(getTimestampAsNumber(item)).utc().format('DD.MM.YYYY HH:mm:ss:SSS')}

src/components/message/message-card-list/MessagesVirtualizedList.tsx

@@ -81,9 +81,7 @@ const MessagesVirtualizedList = (props: Props) => {
 		const selectedMessageId = messageStore.selectedMessageId?.valueOf();
 		if (selectedMessageId) {
 			raf(() => {
-				const index = messageStore.dataStore.messages.findIndex(
-					m => m.messageId === selectedMessageId,
-				);
+				const index = messageStore.dataStore.messages.findIndex(m => m.id === selectedMessageId);
 				if (index !== -1) virtuoso.current?.scrollToIndex({ index, align: 'center' });
 			}, 3);
 		}

src/components/message/message-card/MessageCard.tsx

@@ -40,7 +40,7 @@ export interface RecoveredProps {
 interface Props extends OwnProps, RecoveredProps {}
 
 const MessageCard = observer(({ message, viewType, setViewType }: Props) => {
-	const { messageId } = message;
+	const messageId = message.id;
 
 	const messagesStore = useMessagesWorkspaceStore();
 	const messagesDataStore = useMessagesDataStore();
@@ -60,7 +60,7 @@ const MessageCard = observer(({ message, viewType, setViewType }: Props) => {
 
 	const isSoftFiltered = messagesDataStore.isSoftFiltered.get(messageId);
 
-	const applyFilterToBody = messagesStore.selectedMessageId?.valueOf() === message.messageId;
+	const applyFilterToBody = messagesStore.selectedMessageId?.valueOf() === message.id;
 
 	React.useEffect(() => {
 		const abortController = new AbortController();
@@ -107,7 +107,7 @@ const MessageCard = observer(({ message, viewType, setViewType }: Props) => {
 	}, [messagesStore.setHoveredMessage]);
 
 	const isAttached = computed(
-		() => !!messagesStore.attachedMessages.find(attMsg => attMsg.messageId === message.messageId),
+		() => !!messagesStore.attachedMessages.find(attMsg => attMsg.id === message.id),
 	).get();
 
 	const toogleMessagePin = React.useCallback(() => {

src/components/message/message-card/MessageCardBase.tsx

@@ -67,9 +67,9 @@ const MessageCardBase = React.memo(
 		addMessageToExport,
 		applyFilterToBody,
 	}: MessageCardBaseProps) => {
-		const { messageId, timestamp, messageType, sessionId, direction, bodyBase64, body } = message;
+		const { id, timestamp, messageType, sessionId, direction, bodyBase64, body } = message;
 
-		const splittedMessageId = messageId.split(':');
+		const splittedMessageId = id.split(':');
 		const messageIdWithHighlightedSession = splittedMessageId.map(
 			getMessageIdWithHighlightedSession,
 		);
@@ -107,11 +107,7 @@ const MessageCardBase = React.memo(
 				return (
 					<>
 						{isExport ? (
-							<Checkbox
-								id={messageId}
-								checked={!!isExported}
-								onChange={() => addMessageToExport?.()}
-							/>
+							<Checkbox id={id} checked={!!isExported} onChange={() => addMessageToExport?.()} />
 						) : (
 							<span className={iconsClassName} />
 						)}
@@ -144,7 +140,7 @@ const MessageCardBase = React.memo(
 		const messageViewTypeRendererProps: MessageCardViewTypeRendererProps = {
 			renderInfo: renderInlineMessageInfo,
 			viewType,
-			messageId,
+			messageId: id,
 			messageBody: body,
 			isBeautified: viewType === MessageViewType.FORMATTED,
 			rawContent: bodyBase64,
@@ -170,7 +166,7 @@ const MessageCardBase = React.memo(
 					<div className='mc-header__info'>
 						{isExport ? (
 							<Checkbox
-								id={messageId}
+								id={id}
 								checked={!!isExported}
 								onChange={() => {
 									addMessageToExport?.();
@@ -213,7 +209,7 @@ const MessageCardBase = React.memo(
 											? `data:${message.messageType};base64,${message.bodyBase64}`
 											: ''
 									}
-									alt={message.messageId}
+									alt={message.id}
 								/>
 							</div>
 						) : (

src/components/message/message-card/MessageCardTools.tsx

@@ -50,7 +50,7 @@ const MessageCardTools = ({
 	isScreenshotMsg,
 	isEmbedded,
 }: MessageCardToolsConfig) => {
-	const { messageId, messageType } = message;
+	const { id, messageType } = message;
 
 	const [isViewMenuOpen, setIsViewMenuOpen] = useState(false);
 	const rootRef = useRef<HTMLDivElement>(null);
@@ -193,7 +193,7 @@ const MessageCardTools = ({
 				{isScreenshotMsg && (
 					<a
 						className='message-card-tools__item'
-						download={`${messageId}.${messageType.replace('image/', '')}`}
+						download={`${id}.${messageType.replace('image/', '')}`}
 						href={`data:${message.messageType};base64,${message.bodyBase64 || ''}`}>
 						<div className='message-card-tools__icon download' />
 					</a>

src/components/message/message-card/MessageHeader.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import { EventMessage } from '../../../models/EventMessage';
 import { createStyleSelector } from '../../../helpers/styleCreators';
-import { timestampToNumber, formatTime } from '../../../helpers/date';
+import { formatTime } from '../../../helpers/date';
 import { getHashCode } from '../../../helpers/stringHash';
 
 interface MessageInfoProps {
@@ -28,7 +28,7 @@ interface MessageInfoProps {
 
 export const MessageHeader = React.memo((props: MessageInfoProps) => {
 	const { message, onTimestampMouseEnter, onTimestampMouseLeave } = props;
-	const { timestamp, sessionId, messageType, messageId, direction } = message;
+	const { timestamp, sessionId, messageType, id, direction } = message;
 
 	// session arrow color, we calculating it for each session from-to pair, based on hash
 	const sessionArrowStyle: React.CSSProperties = {
@@ -41,7 +41,7 @@ export const MessageHeader = React.memo((props: MessageInfoProps) => {
 		direction?.toLowerCase(),
 	);
 
-	const formattedTimestamp = formatTime(timestampToNumber(timestamp));
+	const formattedTimestamp = formatTime(timestamp);
 	return (
 		<div className='mc-header__info'>
 			<span
@@ -54,7 +54,7 @@ export const MessageHeader = React.memo((props: MessageInfoProps) => {
 			<span className='mc-header__value sessionId-inline' title={`Session: ${sessionId}`}>
 				{sessionId}
 			</span>
-			<span className='mc-header__value'>{messageId}</span>
+			<span className='mc-header__value'>{id}</span>
 			<span className={sessionClass} style={sessionArrowStyle}></span>
 			<span className='mc-header__value messageType' title={messageType && `Name: ${messageType}`}>
 				{messageType}

src/components/search-panel/SearchResultGroup.tsx

@@ -121,7 +121,7 @@ const SearchResultGroup = ({
 			messagesWorkspaceStore.currentMessagesIndexesRange.endIndex + 1,
 		);
 
-		return visibleMessages.some(({ messageId }) => messageId === message.messageId);
+		return visibleMessages.some(({ id }) => id === message.id);
 	};
 
 	const isResultItemHighlighted = (result: SearchResult) => {

src/helpers/event.ts

@@ -109,7 +109,7 @@ export const sortByTimestamp = (
 };
 
 export function getItemId(item: EventAction | EventTreeNode | EventMessage) {
-	if (isEventMessage(item)) return item.messageId;
+	if (isEventMessage(item)) return item.id;
 	return item.eventId;
 }
 

src/helpers/graph.ts

@@ -106,6 +106,6 @@ export function filterUniqueGraphItems(items: GraphItem[]) {
 }
 
 function getGraphItemId(item: GraphItem) {
-	if (isEventMessage(item)) return item.messageId;
+	if (isEventMessage(item)) return item.id;
 	return item.eventId;
 }

src/models/EventMessage.ts

@@ -46,7 +46,7 @@ export interface MessageDisplayRule {
 export interface EventMessage {
 	type: ActionType.MESSAGE;
 	messageType: string;
-	messageId: string;
+	id: string;
 	timestamp: number;
 	direction: string;
 	sessionId: string;

src/stores/GraphStore.ts

@@ -168,11 +168,9 @@ export class GraphStore {
 				? GraphItemType.PASSED
 				: GraphItemType.FAILED;
 		}
-		return item.messageId === this.selectedStore.hoveredMessage?.messageId
+		return item.id === this.selectedStore.hoveredMessage?.id
 			? GraphItemType.HOVERED_MESSAGE
-			: this.selectedStore.attachedMessages.findIndex(
-					attMsg => attMsg.messageId === item.messageId,
-			  ) !== -1
+			: this.selectedStore.attachedMessages.findIndex(attMsg => attMsg.id === item.id) !== -1
 			? GraphItemType.ATTACHED_MESSAGE
 			: GraphItemType.PINNED_MESSAGE;
 	};

src/stores/SelectedStore.ts

@@ -99,7 +99,7 @@ export class SelectedStore {
 	@action
 	public toggleMessagePin = (message: EventMessage) => {
 		const bookmark = this.bookmarkedMessages.find(
-			messageBookmark => messageBookmark.id === message.messageId,
+			messageBookmark => messageBookmark.id === message.id,
 		);
 		if (bookmark) {
 			this.removeBookmark(bookmark);
@@ -197,7 +197,7 @@ export class SelectedStore {
 
 	private createMessageBookmark = (message: EventMessage): MessageBookmark => {
 		return {
-			id: message.messageId,
+			id: message.id,
 			timestamp: moment.utc().valueOf(),
 			item: toJS(message),
 		};

src/stores/events/EventsDataStore.ts

@@ -506,7 +506,7 @@ export default class EventsDataStore {
 			try {
 				this.targetEventAC = new AbortController();
 				const event = await this.api.events.getEvent(targetEventId, this.targetEventAC.signal);
-				const targetEventTimestamp = timestampToNumber(event.startTimestamp);
+				const targetEventTimestamp = event.startTimestamp;
 				// TODO: add filtering too see if target event matches current filter
 				if (
 					targetEventTimestamp < this.filterStore.timestampFrom ||

src/stores/messages/MessagesDataProviderStore.ts

@@ -184,7 +184,7 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 
 		runInAction(() => {
 			const messages = [
-				...nextMessages.filter(val => val.messageId !== message?.messageId),
+				...nextMessages.filter(val => val.id !== message?.id),
 				...[message].filter(isEventMessage),
 				...prevMessages,
 			];
@@ -194,11 +194,11 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 
 		if (!this.messagesStore.selectedMessageId) {
 			message = prevMessages[0] || nextMessages[nextMessages.length - 1];
-			if (message) this.messagesStore.selectedMessageId = new String(message.messageId);
+			if (message) this.messagesStore.selectedMessageId = new String(message.id);
 		}
 
 		if (this.messagesStore.filterStore.isSoftFilter && message) {
-			this.isSoftFiltered.set(message.messageId, true);
+			this.isSoftFiltered.set(message.id, true);
 		}
 	};
 
@@ -268,10 +268,7 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 		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();
 		}
 
@@ -311,7 +308,7 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 		this.lastNextChannelResponseTimestamp = null;
 		const firstNextMessage = messages[messages.length - 1];
 
-		if (firstNextMessage && firstNextMessage.messageId === this.messages[0]?.messageId) {
+		if (firstNextMessage && firstNextMessage.id === this.messages[0]?.id) {
 			messages.pop();
 		}