diff --git a/src/hooks/useFetchStreamData.tsx b/src/hooks/useFetchStreamData.tsx index 10136952..0d0f3470 100644 --- 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 index 0f62f864..df0a389c 100644 --- 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([]); + 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 index 86d94345..b28e3594 100644 --- 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 index c2eb2b96..222f0c85 100644 --- 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 - diff --git a/src/pages/Correlation/providers/CorrelationProvider.tsx b/src/pages/Correlation/providers/CorrelationProvider.tsx index b999f1af..52b3c7e9 100644 --- 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 index 80aeb87d..b09b9b0a 100644 --- 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 {