[Th2-5234] Add time limit to message panel (#574)

* add limit to resumption messages id * added limit to loading messages * bump version
th2-net · Aug 29, 2024 · 0cdff21 · 0cdff21
1 parent 3bac042
commit 0cdff21
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "th2-rpt-viewer",
-	"version": "5.2.8",
+	"version": "5.2.9",
 	"description": "",
 	"main": "index.tsx",
 	"private": true,

diff --git a/src/api/ApiSchema.ts b/src/api/ApiSchema.ts
@@ -98,6 +98,7 @@ export interface MessageApiSchema {
 			bookId: string;
 			startTimestamp?: number;
 			messageId?: string;
+			lookupLimitDays: number;
 		},
 		abortSignal?: AbortSignal,
 	) => Promise<DirectionalStreamInfo>;

diff --git a/src/api/message.ts b/src/api/message.ts
@@ -125,12 +125,21 @@ const messageHttpApi: MessageApiSchema = {
 		console.error(res.statusText);
 		return [];
 	},
-	getResumptionMessageIds: async ({ streams, startTimestamp, messageId, bookId }, signal) => {
+	getResumptionMessageIds: async (
+		{ streams, startTimestamp, messageId, bookId, lookupLimitDays },
+		signal,
+	) => {
 		if (!startTimestamp && !messageId) {
 			throw new Error('One of startTimestamp or messageId must be specified');
 		}
 
-		const params = createURLSearchParams({ stream: streams, startTimestamp, messageId, bookId });
+		const params = createURLSearchParams({
+			stream: streams,
+			startTimestamp,
+			messageId,
+			bookId,
+			lookupLimitDays,
+		});
 		const res = await fetch(`backend/messageIds/?${params}`, { signal });
 		if (res.ok) return res.json();
 

diff --git a/src/components/embedded/embedded-stores/EmbeddedMessagesDataProviderStore.tsx b/src/components/embedded/embedded-stores/EmbeddedMessagesDataProviderStore.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  ***************************************************************************** */
 import { runInAction, action, observable, computed, autorun } from 'mobx';
+import moment from 'moment';
 import { MessagesSSEParams, SSEHeartbeat } from '../../../api/sse';
 import { EventMessage } from '../../../models/EventMessage';
 import EmbeddedMessagesStore from './EmbeddedMessagesStore';
@@ -104,7 +105,10 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 
 	private messageAC: AbortController | null = null;
 
-	public getFilterParams = () => this.messagesStore.filterStore.filterParams;
+	public getFilterParams = () => ({
+		...this.messagesStore.filterStore.filterParams,
+		lookupLimitDays: Number(this.messagesStore.filterStore.lookupLimitDays),
+	});
 
 	@action
 	public loadMessages = async (
@@ -164,6 +168,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 				{
 					streams: queryParams.stream,
 					bookId: queryParams.bookId,
+					lookupLimitDays: queryParams.lookupLimitDays,
 					...(this.messagesStore.selectedMessageId
 						? { messageId: this.messagesStore.selectedMessageId.valueOf() }
 						: { startTimestamp }),
@@ -228,6 +233,7 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 			{
 				streams: [stream],
 				bookId,
+				lookupLimitDays: Number(this.messagesStore.filterStore.lookupLimitDays),
 				...(lastMessage
 					? { messageId: lastMessage?.messageId }
 					: { startTimestamp: this.messagesStore.filterStore.filterParams.startTimestamp }),
@@ -250,8 +256,15 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 	) => {
 		this.prevLoadEndTimestamp = null;
 
+		const endTimestamp = query.startTimestamp
+			? moment(query.startTimestamp)
+					.utc()
+					.subtract(this.messagesStore.filterStore.lookupLimitDays, 'days')
+					.valueOf()
+			: undefined;
+
 		this.searchChannelPrev = new MessagesSSEChannel(
-			query,
+			{ ...query, endTimestamp },
 			{
 				onResponse: this.onPrevChannelResponse,
 				onError: this.onLoadingError,
@@ -311,8 +324,15 @@ export default class EmbeddedMessagesDataProviderStore implements MessagesDataSt
 		query: MessagesSSEParams,
 		listeners: Partial<MessageSSEEventListeners> = {},
 	) => {
+		const endTimestamp = query.startTimestamp
+			? moment(query.startTimestamp)
+					.utc()
+					.add(this.messagesStore.filterStore.lookupLimitDays, 'days')
+					.valueOf()
+			: undefined;
+
 		this.searchChannelNext = new MessagesSSEChannel(
-			query,
+			{ ...query, endTimestamp },
 			{
 				onResponse: this.onNextChannelResponse,
 				onError: this.onLoadingError,

diff --git a/src/components/embedded/embedded-stores/EmbeddedMessagesFilterStore.ts b/src/components/embedded/embedded-stores/EmbeddedMessagesFilterStore.ts
@@ -52,6 +52,8 @@ export default class EmbeddedMessagesFilterStore {
 
 	@observable filter: MessagesFilter = getDefaultMessagesFilter();
 
+	@observable lookupLimitDays = 7;
+
 	@observable sseMessagesFilter: MessageFilterState | null = null;
 
 	@observable isMessageFiltersLoading = false;

diff --git a/src/components/filter/MessagesFilterPanel.tsx b/src/components/filter/MessagesFilterPanel.tsx
@@ -44,6 +44,7 @@ import useSetState from '../../hooks/useSetState';
 import { notEmpty } from '../../helpers/object';
 import { prettifyCamelcase } from '../../helpers/stringUtils';
 import MessageExport from '../message/MessageExport';
+import InfinityLimit from '../search-panel/search-form/InfinityLimit';
 
 type CurrentSSEValues = {
 	[key in keyof MessageFilterState]: string;
@@ -72,6 +73,12 @@ const MessagesFilterPanel = () => {
 	});
 	const [isSoftFilterApplied, setIsSoftFilterApplied] = React.useState(filterStore.isSoftFilter);
 
+	function updateLimit(value: string) {
+		if (value === '' || /^\d+$/.test(value)) {
+			filterStore.setLookupLimit(value);
+		}
+	}
+
 	React.useEffect(() => {
 		setFilter(filterStore.sseMessagesFilter);
 	}, [filterStore.sseMessagesFilter]);
@@ -96,6 +103,10 @@ const MessagesFilterPanel = () => {
 
 	const submitChanges = React.useCallback(() => {
 		searchStore.stopSearch();
+		const newLimit = Number(filterStore.lookupLimitDays);
+		if (newLimit <= 0) {
+			filterStore.setLookupLimit('7');
+		}
 		messagesStore.applyFilter(
 			{
 				...filterStore.filter,
@@ -305,6 +316,13 @@ const MessagesFilterPanel = () => {
 				stopLoading={stopLoading}
 				isLoading={isMessageListLoading}
 			/>
+			<InfinityLimit
+				value={filterStore.lookupLimitDays}
+				setValue={updateLimit}
+				disabled={false}
+				isShort={true}
+				title='Days limit to messages search'
+			/>
 			<MessageExport
 				isExport={messagesStore.exportStore.isExport}
 				enableExport={messagesStore.exportStore.enableExport}

diff --git a/src/components/search-panel/search-form/InfinityLimit.tsx b/src/components/search-panel/search-form/InfinityLimit.tsx
@@ -20,11 +20,13 @@ export type InfinityLimitConfig = {
 	value: string;
 	setValue: (value: string) => void;
 	disabled: boolean;
+	isShort?: boolean;
+	title?: string;
 };
 
-const InfinityLimit = ({ value, setValue, disabled }: InfinityLimitConfig) => (
-	<div className='search-infinity-limit'>
-		<span className='search-infinity-limit__label'>Note: Limit is </span>
+const InfinityLimit = ({ value, setValue, disabled, isShort, title }: InfinityLimitConfig) => (
+	<div className={`search-infinity-limit ${isShort ? 'shortenned' : ''}`} title={title}>
+		{!isShort && <span className='search-infinity-limit__label'>Note: Limit is </span>}
 		<input
 			type='text'
 			className='search-infinity-limit__input'
@@ -33,7 +35,7 @@ const InfinityLimit = ({ value, setValue, disabled }: InfinityLimitConfig) => (
 			onChange={e => setValue(e.target.value)}
 			disabled={disabled}
 		/>
-		<span className='search-infinity-limit__label'> days</span>
+		<span className='search-infinity-limit__label'> {isShort ? 'limit' : 'days'}</span>
 	</div>
 );
 

diff --git a/src/stores/messages/MessagesDataProviderStore.ts b/src/stores/messages/MessagesDataProviderStore.ts
@@ -16,6 +16,7 @@
 
 import { action, reaction, observable, computed, runInAction, toJS } from 'mobx';
 import { nanoid } from 'nanoid';
+import moment from 'moment';
 import ApiSchema from '../../api/ApiSchema';
 import { MessagesSSEParams, SSEHeartbeat } from '../../api/sse';
 import { isAbortError } from '../../helpers/fetch';
@@ -188,7 +189,7 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 				{
 					streams: queryParams.stream,
 					bookId,
-
+					lookupLimitDays: Number(this.messagesStore.filterStore.lookupLimitDays),
 					...(this.messagesStore.selectedMessageId
 						? { messageId: this.messagesStore.selectedMessageId.valueOf() }
 						: { startTimestamp }),
@@ -247,6 +248,7 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 			{
 				streams: [stream],
 				bookId,
+				lookupLimitDays: Number(this.messagesStore.filterStore.lookupLimitDays),
 				...(lastMessage
 					? { messageId: lastMessage?.messageId }
 					: { startTimestamp: this.messagesStore.filterStore.filterParams.startTimestamp }),
@@ -288,8 +290,15 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 		requestTimeoutMs?: number,
 		listeners: Partial<MessageSSEEventListeners> = {},
 	) => {
+		const endTimestamp = query.startTimestamp
+			? moment(query.startTimestamp)
+					.utc()
+					.subtract(this.messagesStore.filterStore.lookupLimitDays, 'days')
+					.valueOf()
+			: undefined;
+
 		this.searchChannelPrev = new MessagesSSEChannel(
-			query,
+			{ ...query, endTimestamp },
 			{
 				onResponse: this.onPrevChannelResponse,
 				onError: this.onLoadingError,
@@ -358,8 +367,15 @@ export default class MessagesDataProviderStore implements MessagesDataStore {
 		requestTimeoutMs?: number,
 		listeners: Partial<MessageSSEEventListeners> = {},
 	) => {
+		const endTimestamp = query.startTimestamp
+			? moment(query.startTimestamp)
+					.utc()
+					.add(this.messagesStore.filterStore.lookupLimitDays, 'days')
+					.valueOf()
+			: undefined;
+
 		this.searchChannelNext = new MessagesSSEChannel(
-			query,
+			{ ...query, endTimestamp },
 			{
 				onResponse: this.onNextChannelResponse,
 				onError: this.onLoadingError,

diff --git a/src/stores/messages/MessagesFilterStore.ts b/src/stores/messages/MessagesFilterStore.ts
@@ -53,6 +53,8 @@ export default class MessagesFilterStore {
 
 	@observable filter: MessagesFilter = getDefaultMessagesFilter();
 
+	@observable lookupLimitDays = '7';
+
 	@observable sseMessagesFilter: MessageFilterState | null = null;
 
 	/*
@@ -222,4 +224,9 @@ export default class MessagesFilterStore {
 	public dispose = () => {
 		this.sseFilterSubscription();
 	};
+
+	@action
+	public setLookupLimit = (newLimit: string): void => {
+		this.lookupLimitDays = newLimit;
+	};
 }
diff --git a/src/styles/search-panel.scss b/src/styles/search-panel.scss
@@ -216,6 +216,21 @@
 	white-space: nowrap;
 	color: red;
 	font-weight: bold;
+
+	&.shortenned {
+		flex-direction: column;
+		font-weight: bold;
+		font-size: 12px;
+		align-items: center;
+
+		& > * {
+			margin-right: 0px;
+		}
+
+		.search-infinity-limit__input {
+			width: 25px;
+		}
+	}
 
 	& > * {
 		margin-right: 10px;