Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 53c1f4d

Browse files
praveen5959praveen5959
committed
UI changes and Code refactoring
1 parent ed84f93 commit 53c1f4d

File tree

10 files changed

+603
-405
lines changed

10 files changed

+603
-405
lines changed

‎src/pages/Correlation/components/CorrelationControlSection.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import classes from '../styles/Correlation.module.css';
2+
import SavedCorrelationsButton from './SavedCorrelationsBtn';
3+
import TimeRange from '@/components/Header/TimeRange';
4+
import RefreshInterval from '@/components/Header/RefreshInterval';
5+
import RefreshNow from '@/components/Header/RefreshNow';
6+
import ViewToggle from './CorrelationViewToggle';
7+
import ShareButton from './ShareButton';
8+
import { MaximizeButton } from '@/pages/Stream/components/PrimaryToolbar';
9+
10+
export const CorrelationControlSection = () => {
11+
return (
12+
<div
13+
style={{
14+
display: 'flex',
15+
justifyContent: 'space-between',
16+
alignItems: 'center',
17+
width: '100%',
18+
}}>
19+
{/* <CorrelationFilters /> */}
20+
<div className={classes.logTableControlWrapper}>
21+
<div style={{ display: 'flex', gap: '10px' }}>
22+
<SavedCorrelationsButton />
23+
<TimeRange />
24+
<RefreshInterval />
25+
<RefreshNow />
26+
</div>
27+
<div style={{ display: 'flex', gap: '10px' }}>
28+
<ViewToggle />
29+
<ShareButton />
30+
<MaximizeButton />
31+
</div>
32+
</div>
33+
</div>
34+
);
35+
};

‎src/pages/Correlation/components/CorrelationFieldsSection.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { FC } from 'react';
2+
import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider';
3+
import { CorrelationFieldItem } from './CorrelationFieldItem';
4+
import classes from '../styles/Correlation.module.css';
5+
import { Text } from '@mantine/core';
6+
7+
const { deleteSelectedField } = correlationStoreReducers;
8+
9+
interface CorrelationFieldsSectionProps {
10+
setIsCorrelationEnabled: (enabled: boolean) => void;
11+
}
12+
13+
export const CorrelationFieldsSection: FC<CorrelationFieldsSectionProps> = ({ setIsCorrelationEnabled }) => {
14+
const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store);
15+
const streamNames = Object.keys(fields);
16+
17+
return (
18+
<div className={classes.fieldsJoinsWrapper}>
19+
<Text
20+
style={{
21+
width: '35px',
22+
color: streamNames.length > 0 ? 'black' : '#CBCBCB',
23+
}}>
24+
Fields
25+
</Text>
26+
<div
27+
style={{
28+
border: streamNames.length > 0 ? '1px solid #CBCBCB' : '1px solid #e1e5e8',
29+
backgroundColor: streamNames.length > 0 ? 'white' : '#F7F8F9',
30+
}}
31+
className={classes.fieldsPillsWrapper}>
32+
{Object.keys(selectedFields).length < 1 && (
33+
<Text c={'#ACB5BD'} size="sm">
34+
Click on fields to correlate
35+
</Text>
36+
)}
37+
{Object.entries(selectedFields).map(([streamName, fieldsMap]: [any, any]) =>
38+
fieldsMap.map((field: any, index: any) => (
39+
<CorrelationFieldItem
40+
key={`${streamName}-${index}`}
41+
headerColor={fields[streamName]['headerColor']}
42+
backgroundColor={fields[streamName]['backgroundColor']}
43+
iconColor={fields[streamName]['iconColor']}
44+
fieldName={field}
45+
onDelete={() => {
46+
isCorrelatedData && setIsCorrelationEnabled(true);
47+
setCorrelationData((store) => deleteSelectedField(store, field, streamName));
48+
}}
49+
/>
50+
)),
51+
)}
52+
</div>
53+
</div>
54+
);
55+
};

‎src/pages/Correlation/components/CorrelationJoinSection.tsx‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
import { FC, useCallback } from 'react';
2+
import { correlationStoreReducers, useCorrelationStore } from '../providers/CorrelationProvider';
3+
import { dataTypeIcons } from './CorrelationFieldItem';
4+
import classes from '../styles/Correlation.module.css';
5+
import { ActionIcon, Badge, Button, Select, SelectProps, Text } from '@mantine/core';
6+
import { STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme';
7+
import { IconX } from '@tabler/icons-react';
8+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
9+
import { useCorrelationFetchCount } from '../hooks/useCorrelationFetchCount';
10+
import { useCorrelationQueryLogs } from '@/hooks/useCorrelationQueryLogs';
11+
import { CorrelationSaveIcon } from './CorrelationSaveIcon';
12+
13+
const {
14+
toggleSaveCorrelationModal,
15+
setCorrelationCondition,
16+
setActiveCorrelation,
17+
setSelectedFields,
18+
setIsCorrelatedFlag,
19+
setCorrelationId,
20+
} = correlationStoreReducers;
21+
22+
const { syncTimeRange } = appStoreReducers;
23+
24+
interface CorrelationJoinSectionProps {
25+
select1Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null };
26+
select2Value: { value: string | null; dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null };
27+
isCorrelationEnabled: boolean;
28+
setIsCorrelationEnabled: (enabled: boolean) => void;
29+
setSelect1Value: (value: {
30+
value: string | null;
31+
dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null;
32+
}) => void;
33+
setSelect2Value: (value: {
34+
value: string | null;
35+
dataType?: '' | 'number' | 'boolean' | 'text' | 'timestamp' | 'list' | null;
36+
}) => void;
37+
}
38+
39+
export const CorrelationJoinSection: FC<CorrelationJoinSectionProps> = ({
40+
setIsCorrelationEnabled,
41+
setSelect1Value,
42+
setSelect2Value,
43+
select1Value,
44+
select2Value,
45+
isCorrelationEnabled,
46+
}) => {
47+
const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store);
48+
const [, setAppStore] = useAppStore((store) => store);
49+
const streamNames = Object.keys(fields);
50+
const { refetchCount } = useCorrelationFetchCount();
51+
const { getCorrelationData } = useCorrelationQueryLogs();
52+
53+
const clearQuery = () => {
54+
setSelect1Value({ value: null, dataType: '' });
55+
setSelect2Value({ value: null, dataType: '' });
56+
setCorrelationData((store) => setCorrelationCondition(store, ''));
57+
setCorrelationData((store) => setSelectedFields(store, '', '', true));
58+
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
59+
setCorrelationData((store) => setCorrelationId(store, ''));
60+
setCorrelationData((store) => setActiveCorrelation(store, null));
61+
setIsCorrelationEnabled(false);
62+
setAppStore(syncTimeRange);
63+
};
64+
65+
const renderJoinOneOptions: SelectProps['renderOption'] = ({ option }) => {
66+
const fieldType = fields[streamNames[0]]?.fieldTypeMap[option.value];
67+
return (
68+
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
69+
{option.label}
70+
{dataTypeIcons('black')[fieldType]}
71+
</div>
72+
);
73+
};
74+
75+
const renderJoinTwoOptions: SelectProps['renderOption'] = ({ option }) => {
76+
const fieldType = fields[streamNames[1]]?.fieldTypeMap[option.value];
77+
return (
78+
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
79+
{option.label}
80+
{dataTypeIcons('black')[fieldType]}
81+
</div>
82+
);
83+
};
84+
85+
const handleFieldChange = (fieldValue: string | null, isFirstField: boolean) => {
86+
if (isFirstField) {
87+
const fieldType = fieldValue && fields[streamNames[0]]?.fieldTypeMap[fieldValue];
88+
console.log(fieldType);
89+
90+
setSelect1Value({ value: fieldValue, dataType: fieldType });
91+
} else {
92+
setSelect2Value({ value: fieldValue });
93+
}
94+
};
95+
96+
const openSaveCorrelationModal = useCallback(() => {
97+
setCorrelationData((store) => toggleSaveCorrelationModal(store, true));
98+
}, []);
99+
100+
return (
101+
<div className={classes.fieldsJoinsWrapper} style={{ height: STREAM_PRIMARY_TOOLBAR_HEIGHT }}>
102+
<Text
103+
style={{
104+
width: '35px',
105+
color: streamNames.length > 0 ? 'black' : '#CBCBCB',
106+
flexShrink: 0,
107+
flexGrow: 0,
108+
}}>
109+
Joins
110+
</Text>
111+
<div className={classes.joinsWrapper}>
112+
<div style={{ width: '50%' }}>
113+
<Select
114+
styles={{
115+
input: { height: 26 },
116+
}}
117+
disabled={streamNames.length === 0}
118+
placeholder={streamNames[0] ? `Select field from ${streamNames[0]}` : 'Select Stream 1'}
119+
style={{ height: '100%' }}
120+
radius="md"
121+
data={
122+
streamNames.length > 0
123+
? Object.keys(fields[streamNames[0]].fieldTypeMap).filter(
124+
(key) => fields[streamNames[0]].fieldTypeMap[key] !== 'list',
125+
)
126+
: []
127+
}
128+
value={select1Value.value}
129+
onChange={(value) => handleFieldChange(value, true)}
130+
renderOption={renderJoinOneOptions}
131+
/>
132+
</div>
133+
<Text size="md"> = </Text>
134+
<div style={{ width: '50%' }}>
135+
<Select
136+
styles={{
137+
input: { height: 26 },
138+
}}
139+
disabled={streamNames.length < 2}
140+
placeholder={streamNames[1] ? `Select field from ${streamNames[1]}` : 'Select Stream 2'}
141+
radius="md"
142+
data={
143+
streamNames.length > 1
144+
? Object.keys(fields[streamNames[1]].fieldTypeMap).filter((key) => {
145+
const dataType = fields[streamNames[1]].fieldTypeMap[key];
146+
return dataType !== 'list' && (!select1Value.dataType || select1Value.dataType === dataType);
147+
})
148+
: []
149+
}
150+
value={select2Value.value}
151+
onChange={(value) => handleFieldChange(value, false)}
152+
renderOption={renderJoinTwoOptions}
153+
/>
154+
</div>
155+
<ActionIcon
156+
className={classes.saveCorrelationIcon}
157+
size={38}
158+
disabled={!isCorrelatedData}
159+
radius={5}
160+
onClick={() => {
161+
openSaveCorrelationModal();
162+
}}>
163+
<CorrelationSaveIcon />
164+
</ActionIcon>
165+
<div style={{ height: '100%', width: '20%', display: 'flex' }}>
166+
{isCorrelatedData && (
167+
<Badge
168+
variant="outline"
169+
color="#535BED"
170+
h={'100%'}
171+
size="lg"
172+
styles={{
173+
root: {
174+
textTransform: 'none',
175+
},
176+
}}
177+
rightSection={
178+
<IconX
179+
style={{ cursor: 'pointer' }}
180+
size={12}
181+
color="#535BED"
182+
onClick={() => {
183+
setSelect1Value({ value: null, dataType: '' });
184+
setSelect2Value({ value: null, dataType: '' });
185+
setCorrelationData((store) => setCorrelationCondition(store, ''));
186+
setCorrelationData((store) => setIsCorrelatedFlag(store, false));
187+
setCorrelationData((store) => setCorrelationId(store, ''));
188+
setCorrelationData((store) => setActiveCorrelation(store, null));
189+
setIsCorrelationEnabled(false);
190+
setAppStore(syncTimeRange);
191+
}}
192+
/>
193+
}>
194+
Join Applied
195+
</Badge>
196+
)}
197+
</div>
198+
<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
199+
<Button
200+
className={classes.correlateBtn}
201+
disabled={!isCorrelationEnabled || Object.keys(selectedFields).length === 0}
202+
variant="filled"
203+
onClick={() => {
204+
setCorrelationData((store) => setIsCorrelatedFlag(store, true));
205+
setIsCorrelationEnabled(false);
206+
refetchCount();
207+
getCorrelationData();
208+
}}>
209+
Correlate
210+
</Button>
211+
<Button
212+
className={classes.clearBtn}
213+
onClick={clearQuery}
214+
disabled={streamNames.length == 0 || Object.keys(selectedFields).length === 0}>
215+
Clear
216+
</Button>
217+
</div>
218+
</div>
219+
</div>
220+
);
221+
};

‎src/pages/Correlation/components/CorrelationSaveIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { px } from '@mantine/core';
2+
3+
export const CorrelationSaveIcon = () => (
4+
<svg height={px('1rem')} width={px('1rem')} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
d="M13.3333 15.3333L13.6666 15.6666M10.6667 12.6667L9.33329 11.3333C8.97967 10.9797 8.78101 10.5001 8.78101 9.99996C8.78101 9.49986 8.97967 9.02026 9.33329 8.66666L14.6667 3.33329C15.0203 2.97967 15.4999 2.78101 16 2.78101C16.5001 2.78101 16.9797 2.97967 17.3333 3.33329L22.6667 8.66666C23.0203 9.02026 23.219 9.49986 23.219 9.99996C23.219 10.5001 23.0203 10.9797 22.6667 11.3333L21.3333 12.6666"
7+
stroke="black"
8+
strokeWidth="1.5"
9+
strokeLinecap="round"
10+
strokeLinejoin="round"
11+
/>
12+
<path
13+
d="M10.6667 4.66663L9.33329 3.33329C8.97967 2.97967 8.50006 2.78101 7.99996 2.78101C7.49986 2.78101 7.02025 2.97967 6.66663 3.33329L1.33329 8.66666C0.979668 9.02026 0.781006 9.49986 0.781006 9.99996C0.781006 10.5001 0.979668 10.9797 1.33329 11.3333L6.66663 16.6667C7.02025 17.0203 7.49986 17.219 7.99996 17.219C8.50006 17.219 8.97967 17.0203 9.33329 16.6667L14.6667 11.3333C15.0203 10.9797 15.219 10.5001 15.219 9.99996C15.219 9.49986 15.0203 9.02026 14.6667 8.66666L13.3333 7.33329"
14+
stroke="black"
15+
strokeWidth="1.5"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path d="M15.5 17H23.5" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
20+
<path d="M19.5 13V21" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
21+
</svg>
22+
);
23+
24+
CorrelationSaveIcon.displayName = 'CorrelationSaveIcon';

0 commit comments

Comments
 (0)