feat: Correlation feature

src/@types/parseable/api/query.ts

@@ -1,7 +1,7 @@
 import { QueryEngineType } from '@/@types/parseable/api/about';
 export type LogsQuery = {
 	queryEngine?: QueryEngineType;
-	streamName: string;
+	streamName?: string;
 	startTime: Date;
 	endTime: Date;
 	access: string[] | null;

src/api/query.ts

@@ -3,7 +3,7 @@ import { LOG_QUERY_URL } from './constants';
 import { Log, LogsQuery, LogsResponseWithHeaders } from '@/@types/parseable/api/query';
 import { QueryEngineType } from '@/@types/parseable/api/about';
 import timeRangeUtils from '@/utils/timeRangeUtils';
-import { QueryBuilder } from '@/utils/queryBuilder';
+import { CorrelationQueryBuilder, QueryBuilder } from '@/utils/queryBuilder';
 
 const { formatDateAsCastType } = timeRangeUtils;
 type QueryEngine = QueryEngineType;
@@ -16,6 +16,16 @@ type QueryLogs = {
 	pageOffset: number;
 };
 
+type CorrelationLogs = {
+	streamNames: string[];
+	startTime: Date;
+	endTime: Date;
+	limit: number;
+	queryEngine?: QueryEngine;
+	correlationCondition?: string;
+	selectedFields?: string[];
+};
+
 // to optimize query performace, it has been decided to round off the time at the given level
 const optimizeTime = (date: Date) => {
 	const tempDate = new Date(date);
@@ -56,6 +66,18 @@ export const getQueryLogsWithHeaders = (logsQuery: QueryLogs) => {
 	return Axios().post<LogsResponseWithHeaders>(endPoint, formQueryOpts(logsQuery), {});
 };
 
+export const getCorrelationQueryLogsWithHeaders = (logsQuery: CorrelationLogs) => {
+	const queryBuilder = new CorrelationQueryBuilder(logsQuery);
+	const endPoint = LOG_QUERY_URL({ fields: true }, queryBuilder.getResourcePath());
+	return Axios().post<LogsResponseWithHeaders>(endPoint, queryBuilder.getCorrelationQuery(), {});
+};
+
+export const getStreamDataWithHeaders = (logsQuery: CorrelationLogs) => {
+	const queryBuilder = new CorrelationQueryBuilder(logsQuery);
+	const endPoint = LOG_QUERY_URL({ fields: true }, queryBuilder.getResourcePath());
+	return Axios().post<LogsResponseWithHeaders>(endPoint, queryBuilder.getQuery(), {});
+};
+
 // ------ Custom sql query
 
 const makeCustomQueryRequestData = (logsQuery: LogsQuery, query: string) => {

src/components/Navbar/components/CorrelationIcon.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+
+export const CorrelationIcon = forwardRef<
+	SVGSVGElement,
+	{
+		stroke?: string;
+		strokeWidth?: number;
+		height?: string;
+		width?: string;
+	}
+>(({ stroke, strokeWidth, height, width }, ref) => (
+	<svg ref={ref} height={height} width={width} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M13.3333 17.3333L14.6667 18.6667C15.0203 19.0203 15.4999 19.219 16 19.219C16.5001 19.219 16.9797 19.0203 17.3333 18.6667L22.6667 13.3333C23.0203 12.9797 23.219 12.5001 23.219 12C23.219 11.4999 23.0203 11.0203 22.6667 10.6667L17.3333 5.33333C16.9797 4.97971 16.5001 4.78105 16 4.78105C15.4999 4.78105 15.0203 4.97971 14.6667 5.33333L9.33333 10.6667C8.97971 11.0203 8.78105 11.4999 8.78105 12C8.78105 12.5001 8.97971 12.9797 9.33333 13.3333L10.6667 14.6667"
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M10.6667 6.66667L9.33333 5.33333C8.97971 4.97971 8.5001 4.78105 8 4.78105C7.4999 4.78105 7.02029 4.97971 6.66667 5.33333L1.33333 10.6667C0.979711 11.0203 0.781049 11.4999 0.781049 12C0.781049 12.5001 0.979711 12.9797 1.33333 13.3333L6.66667 18.6667C7.02029 19.0203 7.4999 19.219 8 19.219C8.5001 19.219 8.97971 19.0203 9.33333 18.6667L14.6667 13.3333C15.0203 12.9797 15.219 12.5001 15.219 12C15.219 11.4999 15.0203 11.0203 14.6667 10.6667L13.3333 9.33333"
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+));
+
+CorrelationIcon.displayName = 'CorrelationIcon';

src/components/Navbar/index.tsx

@@ -13,7 +13,14 @@ import { FC, useCallback, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { useDisclosure } from '@mantine/hooks';
-import { HOME_ROUTE, CLUSTER_ROUTE, USERS_MANAGEMENT_ROUTE, STREAM_ROUTE, DASHBOARDS_ROUTE } from '@/constants/routes';
+import {
+	HOME_ROUTE,
+	CLUSTER_ROUTE,
+	USERS_MANAGEMENT_ROUTE,
+	STREAM_ROUTE,
+	DASHBOARDS_ROUTE,
+	CORRELATION_ROUTE,
+} from '@/constants/routes';
 import InfoModal from './infoModal';
 import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler';
 import Cookies from 'js-cookie';
@@ -26,6 +33,7 @@ import UserModal from './UserModal';
 import { signOutHandler } from '@/utils';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import _ from 'lodash';
+import { CorrelationIcon } from './components/CorrelationIcon';
 
 const { setUserRoles, setUserSpecificStreams, setUserAccessMap, changeStream, setStreamSpecificUserAccess } =
 	appStoreReducers;
@@ -49,6 +57,12 @@ const navItems = [
 		path: '/explore',
 		route: STREAM_ROUTE,
 	},
+	{
+		icon: '',
+		label: 'Correlation',
+		path: '/correlation',
+		route: CORRELATION_ROUTE,
+	},
 ];
 
 const previlagedActions = [
@@ -167,7 +181,16 @@ const Navbar: FC = () => {
 									onClick={() => navigateToPage(navItem.route)}
 									key={index}>
 									<Tooltip label={navItem.label} position="right">
-										<navItem.icon stroke={isActiveItem ? 1.4 : 1.2} size={'1.2rem'} />
+										{navItem.route === CORRELATION_ROUTE ? (
+											<CorrelationIcon
+												stroke={isActiveItem ? '#000000' : '#858e96'}
+												strokeWidth={isActiveItem ? 1.4 : 1.2}
+												height="1.2rem"
+												width="1.2rem"
+											/>
+										) : (
+											<navItem.icon stroke={isActiveItem ? 1.4 : 1.2} size="1.2rem" />
+										)}
 									</Tooltip>
 								</Stack>
 							);

src/components/SideBar/Sidebar.tsx

@@ -0,0 +1,110 @@
+import { Stack, Tooltip } from '@mantine/core';
+import classes from './styles/SideBar.module.css';
+import { IconBolt, IconFilterSearch, IconSettings2 } from '@tabler/icons-react';
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { STREAM_VIEWS } from '@/constants/routes';
+import _ from 'lodash';
+
+type MenuItemProps = {
+	setCurrentView: (view: string) => void;
+	currentView: string;
+};
+
+const AllLogsButton = (props: MenuItemProps) => {
+	const viewName = 'explore';
+	const isActive = props.currentView === viewName;
+	const additionalClassNames = `${isActive ? classes.activeMenuItem : ''}`;
+	return (
+		<Stack
+			onClick={() => props.setCurrentView(viewName)}
+			style={{ padding: '4px 0', alignItems: 'center' }}
+			className={classes.menuItemContainer}>
+			<Tooltip label="Explore" position="right">
+				<Stack className={additionalClassNames} style={{ padding: '4px 4px' }}>
+					<IconFilterSearch
+						stroke={isActive ? 1.4 : 1.2}
+						size="1.2rem"
+						className={classes.icon}
+						{...(isActive && { color: 'black' })}
+					/>
+				</Stack>
+			</Tooltip>
+		</Stack>
+	);
+};
+
+const ConfigButton = (props: MenuItemProps) => {
+	const viewName = 'manage';
+	const isActive = props.currentView === viewName;
+	const additionalClassNames = `${isActive ? classes.activeMenuItem : ''}`;
+	return (
+		<Stack
+			onClick={() => props.setCurrentView(viewName)}
+			style={{ padding: '4px 0', alignItems: 'center' }}
+			className={classes.menuItemContainer}>
+			<Tooltip label="Manage" position="right">
+				<Stack className={additionalClassNames} style={{ padding: '4px 4px' }}>
+					<IconSettings2
+						stroke={isActive ? 1.4 : 1.2}
+						size="1.2rem"
+						className={classes.icon}
+						{...(isActive && { color: 'black' })}
+					/>
+				</Stack>
+			</Tooltip>
+		</Stack>
+	);
+};
+
+const LiveTailMenu = (props: MenuItemProps) => {
+	const viewName = 'live-tail';
+	const isActive = props.currentView === viewName;
+	const additionalClassNames = `${isActive ? classes.activeMenuItem : ''}`;
+	return (
+		<Stack
+			onClick={() => props.setCurrentView(viewName)}
+			className={classes.menuItemContainer}
+			style={{ padding: '4px 0', alignItems: 'center' }}>
+			<Tooltip label="Live Tail" position="right">
+				<Stack className={additionalClassNames} style={{ padding: '4px 4px' }}>
+					<IconBolt
+						stroke={isActive ? 1.4 : 1.2}
+						size="1.2rem"
+						className={classes.icon}
+						{...(isActive && { color: 'black' })}
+					/>
+				</Stack>
+			</Tooltip>
+		</Stack>
+	);
+};
+
+const SideBar = () => {
+	const [currentStream] = useAppStore((store) => store.currentStream);
+	const [isStandAloneMode] = useAppStore((store) => store.isStandAloneMode);
+	const { view } = useParams();
+	const navigate = useNavigate();
+
+	const setCurrentView = useCallback(
+		(view: string) => {
+			if (_.includes(STREAM_VIEWS, view)) {
+				navigate(`/${currentStream}/${view}`);
+			}
+		},
+		[currentStream],
+	);
+
+	return (
+		<Stack className={classes.container} style={{ gap: 0 }}>
+			<Stack gap={0}>
+				<AllLogsButton setCurrentView={setCurrentView} currentView={view || ''} />
+				{isStandAloneMode && <LiveTailMenu setCurrentView={setCurrentView} currentView={view || ''} />}
+				<ConfigButton setCurrentView={setCurrentView} currentView={view || ''} />
+			</Stack>
+		</Stack>
+	);
+};
+
+export default SideBar;

src/components/SideBar/styles/SideBar.module.css

@@ -0,0 +1,52 @@
+.container {
+    flex: 1;
+    gap: 1rem;
+    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.menuItemContainer {
+    cursor: pointer;
+}
+
+.activeMenuItem {
+    padding: 4px;
+    background-color: var(--mantine-color-gray-1);
+    border-radius: 0.2rem;
+}
+
+.menuIconContainer {
+    background-color: transparent;
+}
+
+.menuLabel {
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding-right: 4px;
+}
+
+.streamDropdownContainer {
+    /* margin-top: 0.5rem; */
+    /* padding: 0 1.25rem; */
+    position: relative;
+}
+
+.sideBarToggleContainer {
+    position: absolute; 
+    left: 93%;
+    top: 30%;
+    align-items: center;
+    justify-content: center;
+    z-index: 99;
+}
+
+.sideBarToggleIconContainer {
+    padding: 2rem;
+    border-radius: 50%;
+    background-color: white;
+    border: 1px solid var(--mantine-color-gray-2);
+    cursor: pointer;
+}
+
+.icon {
+    color: var(--mantine-color-gray-6);
+}

src/constants/routes.ts

@@ -11,6 +11,7 @@ export const OIDC_NOT_CONFIGURED_ROUTE = '/oidc-not-configured';
 export const CLUSTER_ROUTE = '/cluster';
 export const STREAM_ROUTE = '/:streamName/:view?';
 export const DASHBOARDS_ROUTE = '/dashboards';
+export const CORRELATION_ROUTE = '/correlation';
 
 export const STREAM_VIEWS = ['explore', 'manage', 'live-tail'];
 
@@ -27,4 +28,5 @@ export const PATHS = {
 	cluster: '/cluster',
 	manage: '/:streamName/:view?',
 	dashboards: '/dashboards',
+	correlation: '/correlation',
 } as { [key: string]: string };