schema fetch logic

Author: Koustavd18

src/pages/Correlation/index.tsx

@@ -28,8 +28,15 @@ import { useFetchStreamData } from '@/hooks/useFetchStreamData';
 import useParamsController from './hooks/useParamsController';
 
 const { setStreamForCorrelation, setTimeRange } = appStoreReducers;
-const { setSelectedFields, setCorrelationCondition, setActiveCorrelation, setPageAndPageData, setTargetPage } =
-	correlationStoreReducers;
+import { getLogStreamSchema } from '@/api/logStream';
+const {
+	setSelectedFields,
+	setCorrelationCondition,
+	setActiveCorrelation,
+	setPageAndPageData,
+	setTargetPage,
+	setStreamSchema,
+} = correlationStoreReducers;
 
 const Correlation = () => {
 	useDocumentTitle('Parseable | Correlation');
@@ -62,6 +69,7 @@ const Correlation = () => {
 		(isSavedCorrelation && activeCorrelation?.tableConfigs.map((config: { tableName: string }) => config.tableName)) ||
 		[];
 	const { isLoading: multipleSchemasLoading } = useGetMultipleStreamSchemas(streamsToFetch);
+	const [schemaLoad, setSchemaLoad] = useState<boolean>(false);
 
 	const { getCorrelationData, loadingState, error: errorMessage } = useCorrelationQueryLogs();
 	const { getFetchStreamData, loading: streamsLoading } = useFetchStreamData();
@@ -140,6 +148,22 @@ const Correlation = () => {
 					type: 'custom',
 				}),
 			);
+		if (!activeCorrelation) return;
+
+		const fetchSchema = async (streamName: string) => {
+			setSchemaLoad(true);
+			try {
+				const schema = await getLogStreamSchema(streamName);
+				setCorrelationData((store) => setStreamSchema(store, schema.data, streamName));
+			} catch (error) {
+				console.log(error);
+			} finally {
+				setSchemaLoad(false);
+			}
+		};
+		const streamNames = activeCorrelation.tableConfigs.map((config: { tableName: string }) => config.tableName);
+		streamNames.forEach(async (el) => await fetchSchema(el));
+
 		setSelect1Value({ value: null, dataType: '' });
 		setSelect2Value({ value: null, dataType: '' });
 		setCorrelationData((store) => setCorrelationCondition(store, ''));
@@ -154,21 +178,22 @@ const Correlation = () => {
 	}, [streamForCorrelation, fields]);
 
 	useEffect(() => {
-		if (isCorrelatedData) {
+		if (isCorrelatedData && !schemaLoad) {
 			getCorrelationData();
 		} else {
 			getFetchStreamData();
 		}
-	}, [currentOffset, timeRange]);
+	}, [currentOffset, timeRange, schemaLoad]);
 
 	useEffect(() => {
+		if (schemaLoad) return;
 		updateCorrelationCondition();
 		if (activeCorrelation && correlationCondition && isSavedCorrelation) {
 			refetchCount();
 			getCorrelationData();
 		}
 		correlationCondition && setIsCorrelationEnabled(true);
-	}, [select1Value, select2Value, activeCorrelation, correlationCondition]);
+	}, [select1Value, select2Value, activeCorrelation, correlationCondition, schemaLoad]);
 
 	const updateCorrelationCondition = () => {
 		if (select1Value.value && select2Value.value) {
@@ -196,14 +221,14 @@ const Correlation = () => {
 		}
 	}, [loadingState, currentPage]);
 
-	if (isLoading || !Object.keys(fields) || !Object.keys(selectedFields)) return;
+	if (isLoading || schemaLoad || !Object.keys(fields) || !Object.keys(selectedFields)) return;
 
 	return (
 		<Box className={classes.correlationWrapper}>
 			<SavedCorrelationsModal />
 			<SaveCorrelationModal />
 			<CorrelationSidebar
-				isLoading={isStreamsLoading}
+				isLoading={isStreamsLoading || multipleSchemasLoading}
 				loadingState={loadingState}
 				setSelect1Value={setSelect1Value}
 				setSelect2Value={setSelect2Value}

src/pages/Stream/components/PrimaryToolbar.tsx

@@ -5,9 +5,8 @@ import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/Ap
 import { filterStoreReducers, useFilterStore } from '../providers/FilterProvider';
 import { logsStoreReducers, useLogsStore } from '../providers/LogsProvider';
 import { useCallback, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
-import { CorrelationIcon } from '@/components/Navbar/components/CorrelationIcon';
 import IconButton from '@/components/Button/IconButton';
 import Querier from './Querier';
 import RefreshInterval from '@/components/Header/RefreshInterval';
@@ -22,7 +21,6 @@ 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,24 +44,6 @@ const SavedFiltersButton = () => {
 	);
 };
 
-const AddCorrelationButton = () => {
-	const navigate = useNavigate();
-	const [, setAppStore] = useAppStore(() => null);
-
-	return (
-		<Button
-			className={classes.savedFiltersBtn}
-			h="100%"
-			onClick={() => {
-				setAppStore((store) => setStreamForCorrelation(store, store.currentStream || ''));
-				navigate('/correlation');
-			}}
-			leftSection={<CorrelationIcon stroke={'#000000'} strokeWidth={1} />}>
-			Correlate
-		</Button>
-	);
-};
-
 const DeleteStreamButton = () => {
 	const [, setLogsStore] = useLogsStore(() => null);
 	const onClick = useCallback(() => setLogsStore(toggleDeleteModal), []);
@@ -122,7 +102,6 @@ const PrimaryToolbar = () => {
 			{view === 'explore' ? (
 				<Stack style={{ flexDirection: 'row', height: STREAM_PRIMARY_TOOLBAR_HEIGHT }} w="100%">
 					<StreamDropdown />
-					<AddCorrelationButton />
 					<Querier />
 					<SavedFiltersButton />
 					<TimeRange />