UI changes and Code refactoring

parseablehq · Jan 22, 2025 · 53c1f4d · 53c1f4d
1 parent ed84f93
commit 53c1f4d
Show file tree

Hide file tree

Showing 10 changed files with 603 additions and 405 deletions.
diff --git a/src/pages/Correlation/components/CorrelationControlSection.tsx 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 (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+				width: '100%',
+			}}>
+			{/* <CorrelationFilters /> */}
+			<div className={classes.logTableControlWrapper}>
+				<div style={{ display: 'flex', gap: '10px' }}>
+					<SavedCorrelationsButton />
+					<TimeRange />
+					<RefreshInterval />
+					<RefreshNow />
+				</div>
+				<div style={{ display: 'flex', gap: '10px' }}>
+					<ViewToggle />
+					<ShareButton />
+					<MaximizeButton />
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/src/pages/Correlation/components/CorrelationFieldsSection.tsx 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<CorrelationFieldsSectionProps> = ({ setIsCorrelationEnabled }) => {
+	const [{ fields, selectedFields, isCorrelatedData }, setCorrelationData] = useCorrelationStore((store) => store);
+	const streamNames = Object.keys(fields);
+
+	return (
+		<div className={classes.fieldsJoinsWrapper}>
+			<Text
+				style={{
+					width: '35px',
+					color: streamNames.length > 0 ? 'black' : '#CBCBCB',
+				}}>
+				Fields
+			</Text>
+			<div
+				style={{
+					border: streamNames.length > 0 ? '1px solid #CBCBCB' : '1px solid #e1e5e8',
+					backgroundColor: streamNames.length > 0 ? 'white' : '#F7F8F9',
+				}}
+				className={classes.fieldsPillsWrapper}>
+				{Object.keys(selectedFields).length < 1 && (
+					<Text c={'#ACB5BD'} size="sm">
+						Click on fields to correlate
+					</Text>
+				)}
+				{Object.entries(selectedFields).map(([streamName, fieldsMap]: [any, any]) =>
+					fieldsMap.map((field: any, index: any) => (
+						<CorrelationFieldItem
+							key={`${streamName}-${index}`}
+							headerColor={fields[streamName]['headerColor']}
+							backgroundColor={fields[streamName]['backgroundColor']}
+							iconColor={fields[streamName]['iconColor']}
+							fieldName={field}
+							onDelete={() => {
+								isCorrelatedData && setIsCorrelationEnabled(true);
+								setCorrelationData((store) => deleteSelectedField(store, field, streamName));
+							}}
+						/>
+					)),
+				)}
+			</div>
+		</div>
+	);
+};
diff --git a/src/pages/Correlation/components/CorrelationJoinSection.tsx 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<CorrelationJoinSectionProps> = ({
+	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 (
+			<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+				{option.label}
+				{dataTypeIcons('black')[fieldType]}
+			</div>
+		);
+	};
+
+	const renderJoinTwoOptions: SelectProps['renderOption'] = ({ option }) => {
+		const fieldType = fields[streamNames[1]]?.fieldTypeMap[option.value];
+		return (
+			<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+				{option.label}
+				{dataTypeIcons('black')[fieldType]}
+			</div>
+		);
+	};
+
+	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 (
+		<div className={classes.fieldsJoinsWrapper} style={{ height: STREAM_PRIMARY_TOOLBAR_HEIGHT }}>
+			<Text
+				style={{
+					width: '35px',
+					color: streamNames.length > 0 ? 'black' : '#CBCBCB',
+					flexShrink: 0,
+					flexGrow: 0,
+				}}>
+				Joins
+			</Text>
+			<div className={classes.joinsWrapper}>
+				<div style={{ width: '50%' }}>
+					<Select
+						styles={{
+							input: { height: 26 },
+						}}
+						disabled={streamNames.length === 0}
+						placeholder={streamNames[0] ? `Select field from ${streamNames[0]}` : 'Select Stream 1'}
+						style={{ height: '100%' }}
+						radius="md"
+						data={
+							streamNames.length > 0
+								? Object.keys(fields[streamNames[0]].fieldTypeMap).filter(
+										(key) => fields[streamNames[0]].fieldTypeMap[key] !== 'list',
+								  )
+								: []
+						}
+						value={select1Value.value}
+						onChange={(value) => handleFieldChange(value, true)}
+						renderOption={renderJoinOneOptions}
+					/>
+				</div>
+				<Text size="md"> = </Text>
+				<div style={{ width: '50%' }}>
+					<Select
+						styles={{
+							input: { height: 26 },
+						}}
+						disabled={streamNames.length < 2}
+						placeholder={streamNames[1] ? `Select field from ${streamNames[1]}` : 'Select Stream 2'}
+						radius="md"
+						data={
+							streamNames.length > 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}
+					/>
+				</div>
+				<ActionIcon
+					className={classes.saveCorrelationIcon}
+					size={38}
+					disabled={!isCorrelatedData}
+					radius={5}
+					onClick={() => {
+						openSaveCorrelationModal();
+					}}>
+					<CorrelationSaveIcon />
+				</ActionIcon>
+				<div style={{ height: '100%', width: '20%', display: 'flex' }}>
+					{isCorrelatedData && (
+						<Badge
+							variant="outline"
+							color="#535BED"
+							h={'100%'}
+							size="lg"
+							styles={{
+								root: {
+									textTransform: 'none',
+								},
+							}}
+							rightSection={
+								<IconX
+									style={{ cursor: 'pointer' }}
+									size={12}
+									color="#535BED"
+									onClick={() => {
+										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
+						</Badge>
+					)}
+				</div>
+				<div style={{ display: 'flex', gap: '5px', alignItems: 'center', height: '25px' }}>
+					<Button
+						className={classes.correlateBtn}
+						disabled={!isCorrelationEnabled || Object.keys(selectedFields).length === 0}
+						variant="filled"
+						onClick={() => {
+							setCorrelationData((store) => setIsCorrelatedFlag(store, true));
+							setIsCorrelationEnabled(false);
+							refetchCount();
+							getCorrelationData();
+						}}>
+						Correlate
+					</Button>
+					<Button
+						className={classes.clearBtn}
+						onClick={clearQuery}
+						disabled={streamNames.length == 0 || Object.keys(selectedFields).length === 0}>
+						Clear
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/src/pages/Correlation/components/CorrelationSaveIcon.tsx b/src/pages/Correlation/components/CorrelationSaveIcon.tsx
@@ -0,0 +1,24 @@
+import { px } from '@mantine/core';
+
+export const CorrelationSaveIcon = () => (
+	<svg height={px('1rem')} width={px('1rem')} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			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"
+			stroke="black"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			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"
+			stroke="black"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path d="M15.5 17H23.5" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+		<path d="M19.5 13V21" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+	</svg>
+);
+
+CorrelationSaveIcon.displayName = 'CorrelationSaveIcon';