fix: JSON View scroll & currentstream changes

Author: praveen5959

src/layouts/MainLayout/providers/AppProvider.tsx

@@ -1,11 +1,12 @@
-import { LogStreamData } from '@/@types/parseable/api/stream';
-import initContext from '@/utils/initContext';
+import { FIXED_DURATIONS, FixedDuration } from '@/constants/timeConstants';
+import dayjs, { Dayjs } from 'dayjs';
+
 import { AboutData } from '@/@types/parseable/api/about';
-import _ from 'lodash';
 import { AxiosResponse } from 'axios';
+import { LogStreamData } from '@/@types/parseable/api/stream';
 import { SavedFilterType } from '@/@types/parseable/api/savedFilters';
-import { FIXED_DURATIONS, FixedDuration } from '@/constants/timeConstants';
-import dayjs, { Dayjs } from 'dayjs';
+import _ from 'lodash';
+import initContext from '@/utils/initContext';
 import timeRangeUtils from '@/utils/timeRangeUtils';
 
 const { makeTimeRangeLabel } = timeRangeUtils;
@@ -57,6 +58,7 @@ type AppStore = {
 	helpModalOpen: boolean;
 	createStreamModalOpen: boolean;
 	currentStream: null | string;
+	streamForCorrelation: null | string;
 	userRoles: UserRoles | null;
 	userSpecificStreams: null | LogStreamData;
 	userAccessMap: { [key: string]: boolean };
@@ -76,6 +78,7 @@ type AppStoreReducers = {
 	toggleMaximize: (store: AppStore) => ReducerOutput;
 	toggleHelpModal: (store: AppStore, val?: boolean) => ReducerOutput;
 	changeStream: (store: AppStore, stream: string) => ReducerOutput;
+	setStreamForCorrelation: (store: AppStore, stream: string) => ReducerOutput;
 	setUserRoles: (store: AppStore, roles: UserRoles | null) => ReducerOutput;
 	setshiftInterval: (store: AppStore, interval: number) => ReducerOutput;
 	syncTimeRange: (store: AppStore) => ReducerOutput;
@@ -93,6 +96,7 @@ const initialState: AppStore = {
 	maximized: false,
 	helpModalOpen: false,
 	currentStream: null,
+	streamForCorrelation: null,
 	userRoles: null,
 	userSpecificStreams: null,
 	userAccessMap: {},
@@ -208,6 +212,10 @@ const changeStream = (store: AppStore, stream: string) => {
 	return { currentStream: stream, activeSavedFilters };
 };
 
+const setStreamForCorrelation = (_store: AppStore, stream: string) => {
+	return { streamForCorrelation: stream };
+};
+
 const setUserRoles = (_store: AppStore, roles: UserRoles | null) => {
 	return { userRoles: roles };
 };
@@ -240,6 +248,7 @@ const appStoreReducers: AppStoreReducers = {
 	toggleMaximize,
 	toggleHelpModal,
 	changeStream,
+	setStreamForCorrelation,
 	setUserRoles,
 	setUserSpecificStreams,
 	setUserAccessMap,

src/pages/Correlation/Views/CorrelationJSONView.tsx

@@ -220,7 +220,7 @@ const CorrleationJSONView = (props: { errorMessage: string | null; hasNoData: bo
 							className={classes.innerContainer}
 							style={{ display: 'flex', flexDirection: 'row', maxHeight: `calc(100vh - ${primaryHeaderHeight}px )` }}>
 							<Stack gap={0} style={{ width: '100%' }}>
-								<Stack>
+								<Stack style={{ overflowY: 'scroll' }}>
 									<JsonRows isSearching={isSearching} setContextMenu={setContextMenu} />
 								</Stack>
 							</Stack>

src/pages/Correlation/index.tsx

@@ -52,10 +52,10 @@ const Correlation = () => {
 
 	const { isStoreSynced } = useParamsController();
 	const [timeRange] = useAppStore((store) => store.timeRange);
-	const [currentStream, setAppStore] = useAppStore((store) => store.currentStream);
+	const [streamForCorrelation, setAppStore] = useAppStore((store) => store.streamForCorrelation);
 	const [maximized] = useAppStore((store) => store.maximized);
 	const { isLoading: schemaLoading } = useGetStreamSchema({
-		streamName: currentStream || '',
+		streamName: streamForCorrelation || '',
 	});
 	const isSavedCorrelation = correlationId !== savedCorrelationId;
 	const streamsToFetch =
@@ -148,10 +148,10 @@ const Correlation = () => {
 	}, [correlationId, correlations]);
 
 	useEffect(() => {
-		if (currentStream && streamNames.length > 0 && Object.keys(fields).includes(currentStream)) {
+		if (streamForCorrelation && streamNames.length > 0 && Object.keys(fields).includes(streamForCorrelation)) {
 			getFetchStreamData();
 		}
-	}, [currentStream, fields]);
+	}, [streamForCorrelation, fields]);
 
 	useEffect(() => {
 		if (isCorrelatedData) {
@@ -196,7 +196,7 @@ const Correlation = () => {
 		}
 	}, [loadingState, currentPage]);
 
-	if (isLoading) return;
+	if (isLoading || !Object.keys(fields)) return;
 
 	return (
 		<Box className={classes.correlationWrapper}>

src/pages/Stream/components/PrimaryToolbar.tsx

@@ -1,26 +1,28 @@
 import { Button, Stack, px, rem } from '@mantine/core';
-import IconButton from '@/components/Button/IconButton';
 import { IconFilterHeart, IconMaximize, IconTable, IconTrash } from '@tabler/icons-react';
 import { STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT, STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme';
-import TimeRange from '@/components/Header/TimeRange';
-import RefreshInterval from '@/components/Header/RefreshInterval';
-import RefreshNow from '@/components/Header/RefreshNow';
-import Querier from './Querier';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { filterStoreReducers, useFilterStore } from '../providers/FilterProvider';
+import { logsStoreReducers, useLogsStore } from '../providers/LogsProvider';
 import { useCallback, useEffect } from 'react';
-import StreamDropdown from '@/components/Header/StreamDropdown';
-import { notifications } from '@mantine/notifications';
 import { useNavigate, useParams } from 'react-router-dom';
-import _ from 'lodash';
-import StreamingButton from '@/components/Header/StreamingButton';
+
+import { CorrelationIcon } from '@/components/Navbar/components/CorrelationIcon';
+import IconButton from '@/components/Button/IconButton';
+import Querier from './Querier';
+import RefreshInterval from '@/components/Header/RefreshInterval';
+import RefreshNow from '@/components/Header/RefreshNow';
 import ShareButton from '@/components/Header/ShareButton';
-import { useLogsStore, logsStoreReducers } from '../providers/LogsProvider';
-import { filterStoreReducers, useFilterStore } from '../providers/FilterProvider';
+import StreamDropdown from '@/components/Header/StreamDropdown';
+import StreamingButton from '@/components/Header/StreamingButton';
+import TimeRange from '@/components/Header/TimeRange';
+import _ from 'lodash';
 import classes from './styles/PrimaryToolbar.module.css';
-import { CorrelationIcon } from '@/components/Navbar/components/CorrelationIcon';
+import { notifications } from '@mantine/notifications';
 
 const { toggleDeleteModal, onToggleView } = logsStoreReducers;
 const { toggleSavedFiltersModal } = filterStoreReducers;
+const { setStreamForCorrelation } = appStoreReducers;
 const renderMaximizeIcon = () => <IconMaximize size={px('1rem')} stroke={1.5} />;
 const renderDeleteIcon = () => <IconTrash data-id="delete-stream-btn" size={px('1rem')} stroke={1.5} />;
 
@@ -46,12 +48,16 @@ const SavedFiltersButton = () => {
 
 const AddCorrelationButton = () => {
 	const navigate = useNavigate();
+	const [, setAppStore] = useAppStore(() => null);
 
 	return (
 		<Button
 			className={classes.savedFiltersBtn}
 			h="100%"
-			onClick={() => navigate('/correlation')}
+			onClick={() => {
+				setAppStore((store) => setStreamForCorrelation(store, store.currentStream || ''));
+				navigate('/correlation');
+			}}
 			leftSection={<CorrelationIcon stroke={'#000000'} strokeWidth={1} />}>
 			Correlate
 		</Button>