Merge branch 'correlation' of https://github.com/praveen5959/console …

…into correlation
parseablehq · Jan 13, 2025 · d592b75 · d592b75
2 parents 4ce85b9 + 0aedb67
commit d592b75
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 21 deletions.
diff --git a/src/hooks/useFetchStreamData.tsx b/src/hooks/useFetchStreamData.tsx
@@ -7,7 +7,7 @@ import { AxiosError } from 'axios';
 import { useStreamStore } from '@/pages/Stream/providers/StreamProvider';
 import {
 	correlationStoreReducers,
-	STREAM_DATA_LOAD_LIMIT,
+	CORRELATION_LOAD_LIMIT,
 	useCorrelationStore,
 } from '@/pages/Correlation/providers/CorrelationProvider';
 import { notifyError } from '@/utils/notification';
@@ -46,7 +46,7 @@ export const useFetchStreamData = () => {
 	const defaultQueryOpts = {
 		startTime: timeRange.startTime,
 		endTime: timeRange.endTime,
-		limit: STREAM_DATA_LOAD_LIMIT,
+		limit: CORRELATION_LOAD_LIMIT,
 		pageOffset: currentOffset,
 		timePartitionColumn,
 		selectedFields: _.flatMap(selectedFields, (values, key) => _.map(values, (value) => `${key}.${value}`)) || [],

diff --git a/src/pages/Correlation/components/MultiEventTimeLineGraph.tsx b/src/pages/Correlation/components/MultiEventTimeLineGraph.tsx
@@ -305,17 +305,36 @@ const MultiEventTimeLineGraph = () => {
 	const { fetchQueryMutation } = useQueryResult();
 	const [fields] = useCorrelationStore((store) => store.fields);
 	const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
+	const [streamData] = useCorrelationStore((store) => store.streamData);
 	const [timeRange] = useAppStore((store) => store.timeRange);
-	const [multipleStreamData, setMultipleStreamData] = useState<any>([]);
+	const [multipleStreamData, setMultipleStreamData] = useState<{ [key: string]: any }>({});
 
 	const { interval, startTime, endTime } = timeRange;
 
+	const streamGraphData = Object.values(multipleStreamData);
+
+	useEffect(() => {
+		setMultipleStreamData((prevData) => {
+			const newData = { ...prevData };
+			const streamDataKeys = Object.keys(streamData);
+			Object.keys(newData).forEach((key) => {
+				if (!streamDataKeys.includes(key)) {
+					delete newData[key];
+				}
+			});
+			return newData;
+		});
+	}, [streamData]);
+
 	useEffect(() => {
 		if (!fields || Object.keys(fields).length === 0) {
-			setMultipleStreamData([]);
+			setMultipleStreamData({});
 			return;
 		}
-		const queries = Object.keys(fields).map((streamKey) => {
+
+		const streamNames = Object.keys(fields);
+		const streamsToFetch = streamNames.filter((streamName) => !Object.keys(streamData).includes(streamName));
+		const queries = streamsToFetch.map((streamKey) => {
 			const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval);
 			const logsQuery = {
 				startTime: modifiedStartTime,
@@ -330,12 +349,18 @@ const MultiEventTimeLineGraph = () => {
 				queryEngine: 'Parseable',
 				logsQuery,
 				query: graphQuery,
+				streamKey,
 			};
 		});
-		setMultipleStreamData([]);
 		Promise.all(queries.map((queryData: any) => fetchQueryMutation.mutateAsync(queryData)))
 			.then((results) => {
-				setMultipleStreamData(results);
+				setMultipleStreamData((prevData: any) => {
+					const newData = { ...prevData };
+					results.forEach((result, index) => {
+						newData[queries[index].streamKey] = result;
+					});
+					return newData;
+				});
 			})
 			.catch((error) => {
 				console.error('Error fetching queries:', error);
@@ -345,14 +370,10 @@ const MultiEventTimeLineGraph = () => {
 	const isLoading = fetchQueryMutation.isLoading;
 	const avgEventCount = useMemo(() => calcAverage(fetchQueryMutation?.data), [fetchQueryMutation?.data]);
 	const graphData = useMemo(() => {
-		if (
-			!multipleStreamData ||
-			multipleStreamData.length === 0 ||
-			multipleStreamData.length !== Object.keys(fields).length
-		)
+		if (!streamGraphData || streamGraphData.length === 0 || streamGraphData.length !== Object.keys(fields).length)
 			return [];
-		return parseGraphData(multipleStreamData, startTime, endTime, interval);
-	}, [multipleStreamData]);
+		return parseGraphData(streamGraphData, startTime, endTime, interval);
+	}, [streamGraphData]);
 
 	const hasData = Array.isArray(graphData) && graphData.length !== 0;
 	const [, setLogsStore] = useAppStore((store) => store.timeRange);

diff --git a/src/pages/Correlation/components/ShareButton.tsx b/src/pages/Correlation/components/ShareButton.tsx
@@ -14,7 +14,9 @@ export default function ShareButton() {
 	const [isSecureHTTPContext] = useAppStore((store) => store.isSecureHTTPContext);
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [{ streamData, selectedFields }] = useCorrelationStore((store) => store);
-	const [{ tableOpts }] = useCorrelationStore((store) => store);
+	const [{ tableOpts, fields }] = useCorrelationStore((store) => store);
+
+	const streamNames = Object.keys(fields);
 
 	const { pageData } = tableOpts;
 
@@ -41,7 +43,12 @@ export default function ShareButton() {
 
 	const exportHandler = useCallback(
 		(fileType: string | null) => {
-			const filename = `${currentStream}-logs`;
+			let filename = 'correlation-logs';
+			if (streamNames.length === 1) {
+				filename = `correlation-${streamNames[0]}-logs`;
+			} else if (streamNames.length > 1) {
+				filename = `correlation-${streamNames[0]}-${streamNames[1]}-logs`;
+			}
 
 			if (pageData.length === 0) {
 				console.error('No data to export');

diff --git a/src/pages/Correlation/index.tsx b/src/pages/Correlation/index.tsx
@@ -223,7 +223,7 @@ const Correlation = () => {
 								placeholder="Select Stream 1"
 								disabled={false}
 								onChange={(value) => value && addStream(value)}
-								data={streamData}
+								data={streamData.filter((stream) => !streamNames.includes(stream.value))}
 								isFirst={true}
 							/>
 
@@ -233,7 +233,7 @@ const Correlation = () => {
 								placeholder="Select Stream 2"
 								disabled={streamNames.length < 1}
 								onChange={(value) => addStream(value)}
-								data={streamData}
+								data={streamData.filter((stream) => !streamNames.includes(stream.value))}
 								isFirst={false}
 							/>
 						</>
@@ -246,7 +246,7 @@ const Correlation = () => {
 								placeholder="Select Stream 2"
 								disabled={logsLoading}
 								onChange={(value) => addStream(value)}
-								data={streamData}
+								data={streamData.filter((stream) => !streamNames.includes(stream.value))}
 								isFirst={false}
 							/>
 						</>
@@ -376,7 +376,10 @@ const Correlation = () => {
 								}}>
 								Correlate
 							</Button>
-							<Button className={classes.clearBtn} onClick={clearQuery} disabled={streamNames.length == 0}>
+							<Button
+								className={classes.clearBtn}
+								onClick={clearQuery}
+								disabled={streamNames.length == 0 || Object.keys(selectedFields).length === 0}>
 								Clear
 							</Button>
 						</div>

diff --git a/src/pages/Correlation/providers/CorrelationProvider.tsx b/src/pages/Correlation/providers/CorrelationProvider.tsx
@@ -8,7 +8,6 @@ import { FilterQueryBuilder } from '@/utils/queryBuilder';
 import { formatQuery } from 'react-querybuilder';
 
 export const CORRELATION_LOAD_LIMIT = 1000;
-export const STREAM_DATA_LOAD_LIMIT = 250;
 
 export const STREAM_COLORS = ['#FDA4AF', '#c084fc'];
 export const STREAM_HEADER_COLORS = ['#9F1239', '#7E22CE'];

diff --git a/src/pages/Correlation/styles/Correlation.module.css b/src/pages/Correlation/styles/Correlation.module.css
@@ -192,6 +192,14 @@
 		background-color: #545beb;
 		border-radius: rem(8px);
 	}
+	&:disabled {
+		cursor: not-allowed;
+		background-color: white;
+	}
+
+	&:disabled:hover {
+		background-color: white;
+	}
 }
 
 .logsSecondaryToolbar {