secondary header added

src/components/Header/Layout.tsx

@@ -1,25 +1,18 @@
-import logoInvert from '@/assets/images/brand/logo-invert.svg';
-import { HOME_ROUTE } from '@/constants/routes';
 import { HEADER_HEIGHT } from '@/constants/theme';
 import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { Box, Image, Header as MantineHeader } from '@mantine/core';
+import { Box, Header as MantineHeader } from '@mantine/core';
 import { FC } from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import {  Outlet } from 'react-router-dom';
 import { useHeaderStyles } from './styles';
 
 type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
 
 const HeaderLayout: FC<HeaderProps> = (props) => {
 	const { classes } = useHeaderStyles();
-	const { container, logoContainer, navContainer, imageSty } = classes;
+	const { container, navContainer } = classes;
 
 	return (
-		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
-			<Box className={logoContainer}>
-				<Link to={HOME_ROUTE}>
-					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
-				</Link>
-			</Box>
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder zIndex={100}>
 			<Box className={navContainer}>
 				<Outlet />
 			</Box>

src/components/Header/PrimaryHeader.tsx

@@ -0,0 +1,49 @@
+import logoInvert from '@/assets/images/brand/logo-invert.svg';
+import { HOME_ROUTE } from '@/constants/routes';
+import { HEADER_HEIGHT } from '@/constants/theme';
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { Box, Button, Image, Header as MantineHeader, Tooltip } from '@mantine/core';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { useHeaderStyles } from './styles';
+
+type PrimaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const PrimaryHeader: FC<PrimaryHeaderProps> = (props) => {
+	const { classes } = useHeaderStyles();
+	const { container, logoContainer, navContainer, imageSty, actionBtn } = classes;
+
+	return (
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
+			<Box className={logoContainer}>
+				<Link to={HOME_ROUTE}>
+					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
+				</Link>
+			</Box>
+			<Box className={navContainer}>
+				<Box
+					display={'flex'}
+					sx={{
+						justifyContent: 'flex-end',
+						alignItems: 'center',
+						width: '100%',
+						paddingLeft: '1rem',
+					}}
+					pr={'xl'}>
+					<Tooltip label="Upgrade to production support" position="bottom">
+						<Button
+							variant="outline"
+							component={'a'}
+							href="mailto:[email protected]?subject=Production%20Support%20Query"
+							target="_blank"
+							className={actionBtn}>
+							<Image height={30} fit="fill" src={'/AGPLv3_Logo.svg'} />
+						</Button>
+					</Tooltip>
+				</Box>
+			</Box>
+		</MantineHeader>
+	);
+};
+
+export default PrimaryHeader;

src/components/Header/SecondaryHeader.tsx

@@ -0,0 +1,24 @@
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { FC } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import HeaderLayout from './Layout';
+import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
+import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+
+type SecondaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const SecondaryHeader: FC<SecondaryHeaderProps> = (props) => {
+	return (
+		<Routes>
+			<Route element={<HeaderLayout {...props} />}>
+				<Route path={LOGS_ROUTE} element={<LogsHeader />} />
+				<Route path={QUERY_ROUTE} element={<QueryHeader />} />
+				<Route path={STATS_ROUTE} element={<StatsHeader />} />
+				<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
+				<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
+			</Route>
+		</Routes>
+	);
+};
+
+export default SecondaryHeader;

src/components/Header/SubHeader.tsx

@@ -109,7 +109,6 @@ export const UsersManagementHeader: FC = () => {
 				<Box className={innerContainer}>
 					<ReloadUser />
 					<DocsUser />
-					{/* <CreateUser /> */}
 				</Box>
 			</Box>
 		</Box>

src/components/Header/index.tsx

@@ -1,24 +1,7 @@
-import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { FC } from 'react';
-import { Route, Routes } from 'react-router-dom';
-import HeaderLayout from './Layout';
-import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
-import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+import PrimaryHeader from "./PrimaryHeader";
+import SecondaryHeader from "./SecondaryHeader";
 
-type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
-
-const Header: FC<HeaderProps> = (props) => {
-	return (
-		<Routes>
-			<Route element={<HeaderLayout {...props} />}>
-				<Route path={LOGS_ROUTE} element={<LogsHeader />} />
-				<Route path={QUERY_ROUTE} element={<QueryHeader />} />
-				<Route path={STATS_ROUTE} element={<StatsHeader />} />
-				<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
-				<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
-			</Route>
-		</Routes>
-	);
-};
-
-export default Header;
+export {
+    PrimaryHeader,
+    SecondaryHeader
+}

src/components/Header/styles.tsx

@@ -23,22 +23,23 @@ export const useHeaderStyles = createStyles((theme) => {
 			justifyContent: 'center',
 			alignItems: 'center',
 			padding: spacing.md,
-			paddingRight:0,
-			width: NAVBAR_WIDTH,
-			height: "24px",
-
-		},
-		imageSty: {
-
-		},
-		burgerIcon: {
-
-
+			paddingRight: 0,
+			minWidth: NAVBAR_WIDTH,
+			height: '24px',
 		},
+		imageSty: {},
+		burgerIcon: {},
 		navContainer: {
-			width: `calc(100% - ${NAVBAR_WIDTH}px)`,
+			width: `calc(100% )`,
 			justifyContent: 'space-between',
 		},
+		actionBtn: {
+			transition: 'transform .2s ease-in-out',
+			'&:hover ': {
+				transform: 'scale(1.3)',
+				backgroundColor: colors.gray[0],
+			},
+		},
 	};
 });
 

src/components/Navbar/index.tsx

@@ -16,21 +16,22 @@ import {
 } from '@tabler/icons-react';
 import { FC, useEffect } from 'react';
 import { useNavbarStyles } from './styles';
-import {  useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
 import { notifications } from '@mantine/notifications';
 import { useNavigate } from 'react-router-dom';
 import { DEFAULT_FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context';
 import useMountedState from '@/hooks/useMountedState';
 import dayjs from 'dayjs';
 import { useDisclosure } from '@mantine/hooks';
-import {  USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
 import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
 import InfoModal from './infoModal';
 import { useGetUserRole } from '@/hooks/useGetUserRoles';
 import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler';
 import { LogStreamData } from '@/@types/parseable/api/stream';
 import Cookies from 'js-cookie';
+import { NAVBAR_WIDTH } from '@/constants/theme';
 const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
 
 const links = [
@@ -47,7 +48,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 	const { streamName } = useParams();
 	const location = useLocation();
 
-	const username =  Cookies.get('username') 
+	const username = Cookies.get('username');
 
 	const {
 		state: { subNavbarTogle },
@@ -78,7 +79,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 		Cookies.remove('session');
 		Cookies.remove('username');
 
-		window.location.href=`${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
+		window.location.href = `${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
 	};
 
 	const {
@@ -179,8 +180,8 @@ const Navbar: FC<NavbarProps> = (props) => {
 	}, [username]);
 
 	useEffect(() => {
-		if(streams && streams.length > 0 && roles){
-			const userStreams = getUserSepcificStreams(roles,streams as any);
+		if (streams && streams.length > 0 && roles) {
+			const userStreams = getUserSepcificStreams(roles, streams as any);
 			setUserSepecficStreams(userStreams as any);
 		}
 	}, [roles, streams]);
@@ -202,7 +203,13 @@ const Navbar: FC<NavbarProps> = (props) => {
 		modalCancelBtn,
 	} = classes;
 	return (
-		<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth + 20} hidden={isSubNavbarOpen}>
+		<MantineNavbar
+			{...props}
+			withBorder
+			zIndex={1}
+			hiddenBreakpoint={window.outerWidth + 20}
+			hidden={isSubNavbarOpen}
+			width={{ xs: `${NAVBAR_WIDTH}px` }}>
 			<MantineNavbar.Section grow className={container}>
 				<NavLink label="Log Streams" icon={<IconBinaryTree2 size="1.5rem" stroke={1.3} />} className={streamsBtn} />
 				<Select

src/constants/theme.ts

@@ -1,3 +1,3 @@
-export const HEADER_HEIGHT = 70;
+export const HEADER_HEIGHT = 50;
 export const NAVBAR_WIDTH = 200;
 export const APP_MIN_WIDTH = 650;

src/layouts/MainLayout/index.tsx

@@ -1,4 +1,4 @@
-import Header from '@/components/Header';
+import { PrimaryHeader, SecondaryHeader } from '@/components/Header';
 import Navbar from '@/components/Navbar';
 import { NAVBAR_WIDTH } from '@/constants/theme';
 import { Box } from '@mantine/core';
@@ -13,10 +13,17 @@ const MainLayout: FC = () => {
 
 	return (
 		<Box className={container}>
-			<Header p="xs" />
+			<PrimaryHeader p="xs" />
 			<Box className={contentContainer}>
 				<Navbar w={NAVBAR_WIDTH} />
-				<Outlet />
+				<Box sx={{
+					width: `calc(100% - ${NAVBAR_WIDTH}px)`,
+					display: 'flex',
+					flexDirection: 'column',
+				}}>
+					<SecondaryHeader />
+					<Outlet />
+				</Box>
 			</Box>
 		</Box>
 	);

src/pages/AccessManagement/styles.tsx

@@ -1,3 +1,5 @@
+import { heights } from '@/components/Mantine/sizing';
+import { HEADER_HEIGHT } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
 export const useUsersStyles = createStyles((theme) => {
 	const { spacing, radius, colors } = theme;
@@ -6,6 +8,7 @@ export const useUsersStyles = createStyles((theme) => {
 
 	return {
 		container: {
+			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT*2}px - ${20}px)`,
 			flex: 1,
 			width: '100%',
 			position: 'relative',

src/pages/Config/styles.tsx

@@ -1,11 +1,9 @@
-import {  NAVBAR_WIDTH } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
 export const useConfigStyles = createStyles((theme) => {
 	const { spacing ,colors} = theme;
 	const { widths, } = theme.other;
 	return {
 		container: {
-			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
 			display: 'flex',
 			margin: spacing.md,
 			flex: 1,

src/pages/Logs/styles.tsx

@@ -1,12 +1,10 @@
-import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
+import { HEADER_HEIGHT } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
 
-export const useLogsStyles = createStyles((theme) => {
-	const { widths } = theme.other;
+export const useLogsStyles = createStyles(() => {
 	return {
 		container: {
 			flex: 1,
-			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
 			display: 'flex',
 			position: 'relative',
 		},
@@ -25,7 +23,7 @@ export const useLogTableStyles = createStyles((theme) => {
 		container: {
 			position: 'relative',
 			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT*2}px)`,
 			display: 'flex',
 			flexDirection: 'column',
 			overflow: 'hidden',
@@ -34,7 +32,7 @@ export const useLogTableStyles = createStyles((theme) => {
 		innerContainer: {
 			position: 'relative',
 			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT*2}px)`,
 			display: 'flex',
 			flexDirection: 'column',
 			overflow: 'hidden',
@@ -48,8 +46,7 @@ export const useLogTableStyles = createStyles((theme) => {
 		pinnedScrollView: {
 			overflow: 'unset !important',
 
-			"& .mantine-ScrollArea-root ":{
-			}
+			'& .mantine-ScrollArea-root ': {},
 		},
 
 		tableStyle: {

src/pages/Query/styles.tsx

@@ -1,4 +1,4 @@
-import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
+import { HEADER_HEIGHT } from '@/constants/theme';
 
 import { createStyles } from '@mantine/core';
 
@@ -11,18 +11,17 @@ export const useQueryStyles = createStyles((theme) => {
 	return {
 		container: {
 			flex: 1,
-			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
 			display: 'flex',
 			position: 'relative',
+			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT * 2}px)`,
 		},
 		innerContainer: {
 			position: 'relative',
 			flex: 1,
-			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+			maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT * 2}px)`,
 			display: 'flex',
 			flexDirection: 'column',
 			overflow: 'hidden',
-			// padding: px(spacing.sm),
 		},
 		runQueryBtn: {
 			background: pColor,

src/pages/Stats/styles.tsx

@@ -1,12 +1,8 @@
-import {  NAVBAR_WIDTH } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
-export const useStatsStyles = createStyles((theme) => {
-	const { widths } = theme.other;
+export const useStatsStyles = createStyles(() => {
 	return {
 		container: {
 			flex: 1,
-			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
-			// display: 'flex',
 			position: 'relative',
 		},
 	};