Added logTable toolbar

src/pages/Correlation/index.tsx

@@ -2,21 +2,54 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import _ from 'lodash';
 import { useDocumentTitle } from '@mantine/hooks';
-import { Group, Stack } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import LogsView from '../Stream/Views/Explore/LogsView';
+import Querier from '../Stream/components/Querier';
+import SecondaryToolbar from '../Stream/components/SecondaryToolbar';
+import {
+	PRIMARY_HEADER_HEIGHT,
+	STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT,
+	STREAM_PRIMARY_TOOLBAR_HEIGHT,
+} from '@/constants/theme';
+import { MaximizeButton, SavedFiltersButton } from '../Stream/components/PrimaryToolbar';
+import TimeRange from '@/components/Header/TimeRange';
+import RefreshInterval from '@/components/Header/RefreshInterval';
+import RefreshNow from '@/components/Header/RefreshNow';
+import ShareButton from '@/components/Header/ShareButton';
 
 const Correlation = () => {
 	useDocumentTitle('Parseable | Correlation');
 
 	return (
-		<Group>
-			<Stack style={{ flex: 1 }}>
-				<LogsView schemaLoading={false} infoLoading={false} />
+		<Stack
+			gap={0}
+			style={{
+				maxHeight: `calc(100vh - ${PRIMARY_HEADER_HEIGHT}px )`,
+				overflowY: 'scroll',
+				flex: 1,
+			}}>
+			<h1>PKB</h1>
+			<Stack
+				style={{
+					height: STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT,
+					alignItems: 'center',
+					justifyContent: 'center',
+					padding: '0 1.25rem',
+				}}>
+				<Stack style={{ flexDirection: 'row', height: STREAM_PRIMARY_TOOLBAR_HEIGHT }} w="100%">
+					<Querier />
+					<SavedFiltersButton />
+					<TimeRange />
+					<RefreshInterval />
+					<RefreshNow />
+					{/* <ViewToggle /> */}
+					<ShareButton />
+					<MaximizeButton />
+				</Stack>
 			</Stack>
-			<Stack style={{ flex: 1 }}>
-				<LogsView schemaLoading={false} infoLoading={false} />
-			</Stack>
-		</Group>
+			<SecondaryToolbar />
+			<LogsView schemaLoading={false} infoLoading={false} />
+		</Stack>
 	);
 };
 

src/pages/Stream/components/PrimaryToolbar.tsx

@@ -23,13 +23,13 @@ const { toggleSavedFiltersModal } = filterStoreReducers;
 const renderMaximizeIcon = () => <IconMaximize size={px('1rem')} stroke={1.5} />;
 const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
 
-const MaximizeButton = () => {
+export const MaximizeButton = () => {
 	const [_appStore, setAppStore] = useAppStore((_store) => null);
 	const onClick = useCallback(() => setAppStore(appStoreReducers.toggleMaximize), []);
 	return <IconButton renderIcon={renderMaximizeIcon} size={38} onClick={onClick} tooltipLabel="Full screen" />;
 };
 
-const SavedFiltersButton = () => {
+export const SavedFiltersButton = () => {
 	const [_store, setLogsStore] = useFilterStore((_store) => null);
 	const onClick = useCallback(() => setLogsStore((store) => toggleSavedFiltersModal(store, true)), []);
 	return (