diff --git a/src/pages/Correlation/components/CorrelationControlSection.tsx b/src/pages/Correlation/components/CorrelationControlSection.tsx new file mode 100644 index 00000000..44d492bd --- /dev/null +++ b/src/pages/Correlation/components/CorrelationControlSection.tsx @@ -0,0 +1,35 @@ +import classes from '../styles/Correlation.module.css'; +import SavedCorrelationsButton from './SavedCorrelationsBtn'; +import TimeRange from '@/components/Header/TimeRange'; +import RefreshInterval from '@/components/Header/RefreshInterval'; +import RefreshNow from '@/components/Header/RefreshNow'; +import ViewToggle from './CorrelationViewToggle'; +import ShareButton from './ShareButton'; +import { MaximizeButton } from '@/pages/Stream/components/PrimaryToolbar'; + +export const CorrelationControlSection = () => { + return ( +
+ {/* */} +
+
+ + + + +
+
+ + + +
+
+
+ ); +}; diff --git a/src/pages/Correlation/components/CorrelationFieldsSection.tsx b/src/pages/Correlation/components/CorrelationFieldsSection.tsx new file mode 100644 index 00000000..a6f3ee02 --- /dev/null +++ b/src/pages/Correlation/components/CorrelationFieldsSection.tsx @@ -0,0 +1,55 @@ +import { FC } from 'react'; +import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider'; +import { CorrelationFieldItem } from './CorrelationFieldItem'; +import classes from '../styles/Correlation.module.css'; +import { Text } from '@mantine/core'; + +const { deleteSelectedField } = correlationStoreReducers; + +interface CorrelationFieldsSectionProps { + setIsCorrelationEnabled: (enabled: boolean) => void; +} + +export const CorrelationFieldsSection: FC = ({ setIsCorrelationEnabled }) => { + const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store); + const streamNames = Object.keys(fields); + + return ( +
+ 0 ? 'black' : '#CBCBCB', + }}> + Fields + +
0 ? '1px solid #CBCBCB' : '1px solid #e1e5e8', + backgroundColor: streamNames.length > 0 ? 'white' : '#F7F8F9', + }} + className={classes.fieldsPillsWrapper}> + {Object.keys(selectedFields).length < 1 && ( + + Click on fields to correlate + + )} + {Object.entries(selectedFields).map(([streamName, fieldsMap]: [any, any]) => + fieldsMap.map((field: any, index: any) => ( + { + isCorrelatedData && setIsCorrelationEnabled(true); + setCorrelationData((store) => deleteSelectedField(store, field, streamName)); + }} + /> + )), + )} +
+
+ ); +}; diff --git a/src/pages/Correlation/components/CorrelationJoinSection.tsx b/src/pages/Correlation/components/CorrelationJoinSection.tsx new file mode 100644 index 00000000..3300932b --- /dev/null +++ b/src/pages/Correlation/components/CorrelationJoinSection.tsx @@ -0,0 +1,221 @@ +import { FC, useCallback } from 'react'; +import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider'; +import { dataTypeIcons } from './CorrelationFieldItem'; +import classes from '../styles/Correlation.module.css'; +import { ActionIcon, Badge, Button, Select, SelectProps, Text } from '@mantine/core'; +import { STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme'; +import { IconX } from '@tabler/icons-react'; +import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; +import { useCorrelationFetchCount } from '../hooks/useCorrelationFetchCount'; +import { useCorrelationQueryLogs } from '@/hooks/useCorrelationQueryLogs'; +import { CorrelationSaveIcon } from './CorrelationSaveIcon'; + +const { + toggleSaveCorrelationModal, + setCorrelationCondition, + setActiveCorrelation, + setSelectedFields, + setIsCorrelatedFlag, + setCorrelationId, +} = correlationStoreReducers; + +const { syncTimeRange } = appStoreReducers; + +interface CorrelationJoinSectionProps { + select1Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null }; + select2Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null }; + isCorrelationEnabled: boolean; + setIsCorrelationEnabled: (enabled: boolean) => void; + setSelect1Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; + setSelect2Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; +} + +export const CorrelationJoinSection: FC = ({ + setIsCorrelationEnabled, + setSelect1Value, + setSelect2Value, + select1Value, + select2Value, + isCorrelationEnabled, +}) => { + const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store); + const [, setAppStore] = useAppStore((store) => store); + const streamNames = Object.keys(fields); + const { refetchCount } = useCorrelationFetchCount(); + const { getCorrelationData } = useCorrelationQueryLogs(); + + const clearQuery = () => { + setSelect1Value({ value: null, dataType: '' }); + setSelect2Value({ value: null, dataType: '' }); + setCorrelationData((store) => setCorrelationCondition(store, '')); + setCorrelationData((store) => setSelectedFields(store, '', '', true)); + setCorrelationData((store) => setIsCorrelatedFlag(store, false)); + setCorrelationData((store) => setCorrelationId(store, '')); + setCorrelationData((store) => setActiveCorrelation(store, null)); + setIsCorrelationEnabled(false); + setAppStore(syncTimeRange); + }; + + const renderJoinOneOptions: SelectProps['renderOption'] = ({ option }) => { + const fieldType = fields[streamNames[0]]?.fieldTypeMap[option.value]; + return ( +
+ {option.label} + {dataTypeIcons('black')[fieldType]} +
+ ); + }; + + const renderJoinTwoOptions: SelectProps['renderOption'] = ({ option }) => { + const fieldType = fields[streamNames[1]]?.fieldTypeMap[option.value]; + return ( +
+ {option.label} + {dataTypeIcons('black')[fieldType]} +
+ ); + }; + + const handleFieldChange = (fieldValue: string | null, isFirstField: boolean) => { + if (isFirstField) { + const fieldType = fieldValue && fields[streamNames[0]]?.fieldTypeMap[fieldValue]; + console.log(fieldType); + + setSelect1Value({ value: fieldValue, dataType: fieldType }); + } else { + setSelect2Value({ value: fieldValue }); + } + }; + + const openSaveCorrelationModal = useCallback(() => { + setCorrelationData((store) => toggleSaveCorrelationModal(store, true)); + }, []); + + return ( +
+ 0 ? 'black' : '#CBCBCB', + flexShrink: 0, + flexGrow: 0, + }}> + Joins + +
+
+ 1 + ? Object.keys(fields[streamNames[1]].fieldTypeMap).filter((key) => { + const dataType = fields[streamNames[1]].fieldTypeMap[key]; + return dataType !== 'list' && (!select1Value.dataType || select1Value.dataType === dataType); + }) + : [] + } + value={select2Value.value} + onChange={(value) => handleFieldChange(value, false)} + renderOption={renderJoinTwoOptions} + /> +
+ { + openSaveCorrelationModal(); + }}> + + +
+ {isCorrelatedData && ( + { + setSelect1Value({ value: null, dataType: '' }); + setSelect2Value({ value: null, dataType: '' }); + setCorrelationData((store) => setCorrelationCondition(store, '')); + setCorrelationData((store) => setIsCorrelatedFlag(store, false)); + setCorrelationData((store) => setCorrelationId(store, '')); + setCorrelationData((store) => setActiveCorrelation(store, null)); + setIsCorrelationEnabled(false); + setAppStore(syncTimeRange); + }} + /> + }> + Join Applied + + )} +
+
+ + +
+
+
+ ); +}; diff --git a/src/pages/Correlation/components/CorrelationSaveIcon.tsx b/src/pages/Correlation/components/CorrelationSaveIcon.tsx new file mode 100644 index 00000000..cd7f959e --- /dev/null +++ b/src/pages/Correlation/components/CorrelationSaveIcon.tsx @@ -0,0 +1,24 @@ +import { px } from '@mantine/core'; + +export const CorrelationSaveIcon = () => ( + + + + + + +); + +CorrelationSaveIcon.displayName = 'CorrelationSaveIcon'; diff --git a/src/pages/Correlation/components/CorrelationSideBar.tsx b/src/pages/Correlation/components/CorrelationSideBar.tsx new file mode 100644 index 00000000..4955a8cb --- /dev/null +++ b/src/pages/Correlation/components/CorrelationSideBar.tsx @@ -0,0 +1,176 @@ +import { TextInput, Text } from '@mantine/core'; +import { IconTrashX } from '@tabler/icons-react'; +import classes from '../styles/Correlation.module.css'; +import { CorrelationFieldItem } from './CorrelationFieldItem'; +import { StreamSelectBox } from './StreamSelectBox'; +import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider'; +import { FC, useState } from 'react'; +import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; + +const { changeStream } = appStoreReducers; +const { setIsCorrelatedFlag, setSelectedFields, deleteStreamData } = correlationStoreReducers; + +interface CorrelationSideBarProps { + setIsCorrelationEnabled: (enabled: boolean) => void; + setSelect1Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; + setSelect2Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; + loadingState: boolean; + isLoading: boolean; +} + +export const CorrelationSidebar: FC = ({ + setIsCorrelationEnabled, + setSelect1Value, + setSelect2Value, + loadingState, + isLoading, +}) => { + const [searchText, setSearchText] = useState(''); + + const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store); + const [userSpecificStreams, setAppStore] = useAppStore((store) => store.userSpecificStreams); + const streamNames = Object.keys(fields); + const streamData = + userSpecificStreams?.map((stream: any) => ({ + value: stream.name, + label: stream.name, + })) ?? []; + + const filterFields = (fieldsIter: any) => { + const typedFields = Object.keys(fieldsIter.fieldTypeMap) as string[]; + return searchText + ? typedFields.filter((field) => field.toLowerCase().includes(searchText.toLowerCase())) + : typedFields; + }; + const addStream = (value: string | null) => { + if (value) { + setAppStore((store) => changeStream(store, value)); + } + }; + + return ( +
+ Streams + setSearchText(e.target.value)} + /> +
+ {Object.entries(fields).map(([stream, fieldsIter]: [any, any]) => { + if (!fieldsIter) return; + const filteredFields = filterFields(fieldsIter); + const totalStreams = Object.entries(fields).length; + const heightPercentage = totalStreams === 1 ? '50%' : `${100 / totalStreams}%`; + + return ( +
+
+ + {stream} + + { + setAppStore((store) => changeStream(store, '')); + setCorrelationData((store) => setIsCorrelatedFlag(store, false)); + setSelect1Value({ value: null, dataType: '' }); + setSelect2Value({ value: null, dataType: '' }); + setCorrelationData((store) => deleteStreamData(store, stream)); + setIsCorrelationEnabled(false); + }} + /> +
+ {filteredFields.length > 0 ? ( +
+ {filteredFields.map((field: string) => { + const isSelected = selectedFields[stream]?.includes(field); + const dataType = fieldsIter.fieldTypeMap[field]; + return ( + { + if (isLoading) return; + if (isCorrelatedData) { + setIsCorrelationEnabled(true); + } + setCorrelationData((store) => setSelectedFields(store, field, stream)); + }} + /> + ); + })} +
+ ) : ( + No fields match your search. + )} +
+ ); + })} + {streamNames.length === 0 && ( + <> + {/* First box */} + value && addStream(value)} + data={streamData.filter((stream) => !streamNames.includes(stream.value))} + isFirst={true} + /> + + {/* Second box */} + addStream(value)} + data={streamData.filter((stream) => !streamNames.includes(stream.value))} + isFirst={false} + /> + + )} + {streamNames.length === 1 && ( + <> + {/* Render the single existing field */} + addStream(value)} + data={streamData.filter((stream) => !streamNames.includes(stream.value))} + isFirst={false} + /> + + )} +
+
+ ); +}; diff --git a/src/pages/Correlation/components/CorrelationToolbar.tsx b/src/pages/Correlation/components/CorrelationToolbar.tsx new file mode 100644 index 00000000..62f7fabd --- /dev/null +++ b/src/pages/Correlation/components/CorrelationToolbar.tsx @@ -0,0 +1,52 @@ +import { Stack } from '@mantine/core'; +import { STREAM_SECONDARY_TOOLBAR_HRIGHT } from '@/constants/theme'; +import classes from '../styles/Correlation.module.css'; +import MultiEventTimeLineGraph from './MultiEventTimeLineGraph'; +import { CorrelationFieldsSection } from './CorrelationFieldsSection'; +import { FC } from 'react'; +import { CorrelationJoinSection } from './CorrelationJoinSection'; +import { CorrelationControlSection } from './CorrelationControlSection'; + +interface CorrelationToolbarProps { + setIsCorrelationEnabled: (enabled: boolean) => void; + select1Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null }; + select2Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null }; + isCorrelationEnabled: boolean; + setSelect1Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; + setSelect2Value: (value: { + value: string | null; + dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; + }) => void; +} + +export const CorrelationToolbar: FC = ({ + setIsCorrelationEnabled, + setSelect1Value, + setSelect2Value, + select1Value, + select2Value, + isCorrelationEnabled, +}) => { + return ( + + + + + + + + + + + ); +}; diff --git a/src/pages/Correlation/components/SavedCorrelationItem.tsx b/src/pages/Correlation/components/SavedCorrelationItem.tsx index 8ee32d87..318ffd48 100644 --- a/src/pages/Correlation/components/SavedCorrelationItem.tsx +++ b/src/pages/Correlation/components/SavedCorrelationItem.tsx @@ -54,8 +54,8 @@ const SelectedFields: FC<{ tableConfigs: TableConfig[] }> = ({ tableConfigs }) =
Selected Fields:
- {fields.map((field) => ( - {field.content} + {fields.map((field, index) => ( + {field.content} ))}
diff --git a/src/pages/Correlation/index.tsx b/src/pages/Correlation/index.tsx index 4507046f..ab595533 100644 --- a/src/pages/Correlation/index.tsx +++ b/src/pages/Correlation/index.tsx @@ -1,11 +1,9 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useDocumentTitle } from '@mantine/hooks'; -import { Stack, Box, TextInput, Text, Select, Button, Center, Stepper, Badge, SelectProps } from '@mantine/core'; -import { IconTrashX, IconX } from '@tabler/icons-react'; +import { Stack, Box, Center, Stepper } from '@mantine/core'; import { PRIMARY_HEADER_HEIGHT, STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT, - STREAM_PRIMARY_TOOLBAR_HEIGHT, STREAM_SECONDARY_TOOLBAR_HRIGHT, } from '@/constants/theme'; import classes from './styles/Correlation.module.css'; @@ -16,44 +14,25 @@ import { correlationStoreReducers, useCorrelationStore } from './providers/Corre import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import CorrelationTable from './Views/CorrelationTable'; import CorrelationFooter from './Views/CorrelationFooter'; -import TimeRange from '@/components/Header/TimeRange'; -import RefreshInterval from '@/components/Header/RefreshInterval'; -import RefreshNow from '@/components/Header/RefreshNow'; -import MultiEventTimeLineGraph from './components/MultiEventTimeLineGraph'; import { CorrelationEmptyPlaceholder } from './components/CorrelationEmptyPlaceholder'; -import { StreamSelectBox } from './components/StreamSelectBox'; -import { CorrelationFieldItem, dataTypeIcons } from './components/CorrelationFieldItem'; -import { MaximizeButton } from '../Stream/components/PrimaryToolbar'; -import ShareButton from './components/ShareButton'; import useParamsController from './hooks/useParamsController'; import _ from 'lodash'; import { useCorrelationsQuery } from '@/hooks/useCorrelations'; -import SavedCorrelationsButton from './components/SavedCorrelationsBtn'; import SavedCorrelationsModal from './components/SavedCorrelationsModal'; import SaveCorrelationModal from './components/SaveCorrelationModal'; import { useCorrelationFetchCount } from './hooks/useCorrelationFetchCount'; import CorrleationJSONView from './Views/CorrelationJSONView'; -import ViewToggle from './components/CorrelationViewToggle'; import dayjs from 'dayjs'; +import { CorrelationToolbar } from './components/CorrelationToolbar'; +import { CorrelationSidebar } from './components/CorrelationSideBar'; -const { changeStream, syncTimeRange, setTimeRange } = appStoreReducers; -const { - deleteStreamData, - setSelectedFields, - deleteSelectedField, - setCorrelationCondition, - setIsCorrelatedFlag, - toggleSaveCorrelationModal, - setActiveCorrelation, - setCorrelationId, - setPageAndPageData, - setTargetPage, -} = correlationStoreReducers; +const { changeStream, setTimeRange } = appStoreReducers; +const { setSelectedFields, setCorrelationCondition, setActiveCorrelation, setPageAndPageData, setTargetPage } = + correlationStoreReducers; const Correlation = () => { useDocumentTitle('Parseable | Correlation'); // State Management Hooks - const [userSpecificStreams] = useAppStore((store) => store.userSpecificStreams); const [ { fields, @@ -89,7 +68,6 @@ const Correlation = () => { const { refetchCount, countLoading } = useCorrelationFetchCount(); // Local State - const [searchText, setSearchText] = useState(''); const [select1Value, setSelect1Value] = useState<{ value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null; @@ -113,11 +91,6 @@ const Correlation = () => { : PRIMARY_HEADER_HEIGHT + STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT + STREAM_SECONDARY_TOOLBAR_HRIGHT; const streamNames = Object.keys(fields); - const streamData = - userSpecificStreams?.map((stream: any) => ({ - value: stream.name, - label: stream.name, - })) ?? []; const { currentOffset, pageData, targetPage, currentPage } = tableOpts; // Effects @@ -196,14 +169,6 @@ const Correlation = () => { correlationCondition && setIsCorrelationEnabled(true); }, [select1Value, select2Value, activeCorrelation, correlationCondition]); - // Utility Functions - const filterFields = (fieldsIter: any) => { - const typedFields = Object.keys(fieldsIter.fieldTypeMap) as string[]; - return searchText - ? typedFields.filter((field) => field.toLowerCase().includes(searchText.toLowerCase())) - : typedFields; - }; - const updateCorrelationCondition = () => { if (select1Value.value && select2Value.value) { const condition = `"${streamNames[0]}".${select1Value.value} = "${streamNames[1]}".${select2Value.value}`; @@ -212,65 +177,13 @@ const Correlation = () => { } }; - // Event Handlers - const addStream = (value: string | null) => { - if (value) { - setAppStore((store) => changeStream(store, value)); - } - }; - - const handleFieldChange = (fieldValue: string | null, isFirstField: boolean) => { - if (isFirstField) { - const fieldType = fieldValue && fields[streamNames[0]]?.fieldTypeMap[fieldValue]; - console.log(fieldType); - - setSelect1Value({ value: fieldValue, dataType: fieldType }); - } else { - setSelect2Value({ value: fieldValue }); - } - }; - - const clearQuery = () => { - setSelect1Value({ value: null, dataType: '' }); - setSelect2Value({ value: null, dataType: '' }); - setCorrelationData((store) => setCorrelationCondition(store, '')); - setCorrelationData((store) => setSelectedFields(store, '', '', true)); - setCorrelationData((store) => setIsCorrelatedFlag(store, false)); - setCorrelationData((store) => setCorrelationId(store, '')); - setCorrelationData((store) => setActiveCorrelation(store, null)); - setIsCorrelationEnabled(false); - setAppStore(syncTimeRange); - }; - const openSaveCorrelationModal = useCallback((e: React.MouseEvent) => { - e.stopPropagation(); - setCorrelationData((store) => toggleSaveCorrelationModal(store, true)); - }, []); - - const renderJoinOneOptions: SelectProps['renderOption'] = ({ option }) => { - const fieldType = fields[streamNames[0]]?.fieldTypeMap[option.value]; - return ( -
- {option.label} - {dataTypeIcons('black')[fieldType]} -
- ); - }; - - const renderJoinTwoOptions: SelectProps['renderOption'] = ({ option }) => { - const fieldType = fields[streamNames[1]]?.fieldTypeMap[option.value]; - return ( -
- {option.label} - {dataTypeIcons('black')[fieldType]} -
- ); - }; - // View Flags const hasContentLoaded = !schemaLoading && !loadingState && !streamsLoading && !multipleSchemasLoading; const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0; const showTable = hasContentLoaded && !hasNoData && !errorMessage; + const isStreamsLoading = loadingState || schemaLoading || streamsLoading || multipleSchemasLoading; + useEffect(() => { if (!showTable) return; @@ -288,313 +201,25 @@ const Correlation = () => { -
- Streams - setSearchText(e.target.value)} - /> -
- {Object.entries(fields).map(([stream, fieldsIter]: [any, any]) => { - if (!fieldsIter) return; - const filteredFields = filterFields(fieldsIter); - const totalStreams = Object.entries(fields).length; - const heightPercentage = totalStreams === 1 ? '50%' : `${100 / totalStreams}%`; - - const isLoading = loadingState || schemaLoading || streamsLoading || multipleSchemasLoading; - return ( -
-
- - {stream} - - { - setAppStore((store) => changeStream(store, '')); - setCorrelationData((store) => setIsCorrelatedFlag(store, false)); - setSelect1Value({ value: null, dataType: '' }); - setSelect2Value({ value: null, dataType: '' }); - setCorrelationData((store) => deleteStreamData(store, stream)); - }} - /> -
- {filteredFields.length > 0 ? ( -
- {filteredFields.map((field: string) => { - const isSelected = selectedFields[stream]?.includes(field); - const dataType = fieldsIter.fieldTypeMap[field]; - return ( - { - if (isLoading) return; - if (isCorrelatedData) { - setIsCorrelationEnabled(true); - setCorrelationData((store) => setIsCorrelatedFlag(store, false)); - } - setCorrelationData((store) => setSelectedFields(store, field, stream)); - }} - /> - ); - })} -
- ) : ( - No fields match your search. - )} -
- ); - })} - {streamNames.length === 0 && ( - <> - {/* First box */} - value && addStream(value)} - data={streamData.filter((stream) => !streamNames.includes(stream.value))} - isFirst={true} - /> - - {/* Second box */} - addStream(value)} - data={streamData.filter((stream) => !streamNames.includes(stream.value))} - isFirst={false} - /> - - )} - {streamNames.length === 1 && ( - <> - {/* Render the single existing field */} - addStream(value)} - data={streamData.filter((stream) => !streamNames.includes(stream.value))} - isFirst={false} - /> - - )} -
-
+ - - -
- 0 ? 'black' : '#CBCBCB', - }}> - Fields - -
0 ? '1px solid #CBCBCB' : '1px solid #e1e5e8', - backgroundColor: streamNames.length > 0 ? 'white' : '#F7F8F9', - }} - className={classes.fieldsPillsWrapper}> - {Object.keys(selectedFields).length < 1 && ( - - Click on fields to correlate - - )} - {Object.entries(selectedFields).map(([streamName, fieldsMap]: [any, any]) => - fieldsMap.map((field: any, index: any) => ( - { - isCorrelatedData && setIsCorrelationEnabled(true); - setCorrelationData((store) => deleteSelectedField(store, field, streamName)); - }} - /> - )), - )} -
-
-
- 0 ? 'black' : '#CBCBCB', - flexShrink: 0, - flexGrow: 0, - }}> - Joins - -
-
- 1 - ? Object.keys(fields[streamNames[1]].fieldTypeMap).filter((key) => { - const dataType = fields[streamNames[1]].fieldTypeMap[key]; - return ( - dataType !== 'list' && (!select1Value.dataType || select1Value.dataType === dataType) - ); - }) - : [] - } - value={select2Value.value} - onChange={(value) => handleFieldChange(value, false)} - renderOption={renderJoinTwoOptions} - /> -
-
- {isCorrelatedData && ( - { - setSelect1Value({ value: null, dataType: '' }); - setSelect2Value({ value: null, dataType: '' }); - setCorrelationData((store) => setCorrelationCondition(store, '')); - setCorrelationData((store) => setIsCorrelatedFlag(store, false)); - setCorrelationData((store) => setCorrelationId(store, '')); - setCorrelationData((store) => setActiveCorrelation(store, null)); - setIsCorrelationEnabled(false); - setAppStore(syncTimeRange); - }} - /> - }> - Join Applied - - )} -
-
- - - -
-
-
- -
- {/* */} -
-
- - - - -
-
- - - -
-
-
- - - - + {Object.keys(selectedFields).length > 0 && ( <> {viewMode === 'table' ? ( diff --git a/src/pages/Correlation/providers/CorrelationProvider.tsx b/src/pages/Correlation/providers/CorrelationProvider.tsx index f7d1768d..a2498ba8 100644 --- a/src/pages/Correlation/providers/CorrelationProvider.tsx +++ b/src/pages/Correlation/providers/CorrelationProvider.tsx @@ -433,10 +433,12 @@ const setSelectedFields = ( ...store.tableOpts, pageData: updatedPageData || [], currentPage, - totalPages: getTotalPages( - filterAndSortData(store.tableOpts, store.streamData[streamName]?.logData || []), - store.tableOpts.perPage, - ), + totalPages: store.isCorrelatedData + ? store.tableOpts.totalPages + : getTotalPages( + filterAndSortData(store.tableOpts, store.streamData[streamName]?.logData || []), + store.tableOpts.perPage, + ), }, }; }; diff --git a/src/pages/Correlation/styles/Correlation.module.css b/src/pages/Correlation/styles/Correlation.module.css index 9b58053f..83af18cc 100644 --- a/src/pages/Correlation/styles/Correlation.module.css +++ b/src/pages/Correlation/styles/Correlation.module.css @@ -262,3 +262,11 @@ text-transform: uppercase; font-weight: 700; } + +.saveCorrelationIcon { + background-color: white; + border: 1px solid #e0e0e0; + &:hover { + background-color: #e0e0e0; + } +}