Add console query

package.json

@@ -20,6 +20,7 @@
 		"@mantine/hooks": "^6.0.15",
 		"@mantine/notifications": "^6.0.15",
 		"@mantine/prism": "^6.0.15",
+		"@monaco-editor/react": "^4.5.1",
 		"@tabler/icons-react": "^2.23.0",
 		"axios": "^1.4.0",
 		"dayjs": "^1.11.8",
@@ -29,6 +30,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
+		"react-resizable-panels": "^0.0.53",
 		"react-router-dom": "^6.14.0"
 	},
 	"devDependencies": {

signatures/version1/cla.json

@@ -0,0 +1,12 @@
+{
+  "signedContributors": [
+    {
+      "name": "Ryiski",
+      "id": 47484379,
+      "comment_id": 1564572383,
+      "created_at": "2023-05-26T15:34:15Z",
+      "repoId": 523035254,
+      "pullRequestNo": 62
+    }
+  ]
+}

src/api/query.ts

@@ -17,3 +17,18 @@ export const getQueryLogs = (logsQuery: LogsQuery) => {
 		{},
 	);
 };
+
+export const getQueryResult = (logsQuery: LogsQuery, query = '') => {
+	const { startTime, endTime} = logsQuery;
+
+
+	return Axios().post(
+		LOG_QUERY_URL,
+		{
+			query,
+			startTime,
+			endTime,
+		},
+		{},
+	);
+};

src/components/Header/index.tsx

@@ -19,7 +19,7 @@ const Header: FC<HeaderProps> = (props) => {
 	const { container, actionsContainer } = classes;
 
 	return (
-		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl" withBorder={false}>
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl" withBorder={true}>
 			<Link to={HOME_ROUTE} style={{ height: 25 }}>
 				<Image maw={HEADER_HEIGHT * 2.5} mx="auto" src={logoInvert} alt="Parseable Logo" />
 			</Link>
@@ -57,12 +57,12 @@ const Help: FC<UnstyledButtonProps> = (props) => {
 	const [opened, { close, open }] = useDisclosure();
 
 	const { classes } = useHeaderStyles();
-	const { actionBtn, actionBtnIcon, actionBtnText, helpTitle, helpDescription } = classes;
+	const { actionBtn, actionBtnText, helpTitle, helpDescription } = classes;
 
 	return (
 		<Fragment>
-			<UnstyledButton {...props} className={actionBtn} onClick={open} color="brandSecondary.1" variant="filled">
-				<IconHelpCircle size={px('1.1rem')} className={actionBtnIcon} />
+			<UnstyledButton {...props} className={actionBtn} onClick={open} variant="filled">
+				<IconHelpCircle size={px('1.1rem')} />
 				<Text ml="xs" className={actionBtnText}>
 					Help
 				</Text>
@@ -107,11 +107,11 @@ const User: FC<BoxProps> = (props) => {
 	const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
 
 	const { classes } = useHeaderStyles();
-	const { userContainer, userIcon, userText } = classes;
+	const { userContainer, userText } = classes;
 
 	return (
 		<Box className={userContainer} {...props}>
-			<IconUser size={px('1.1rem')} className={userIcon} />
+			<IconUser size={px('1.1rem')} />
 			<Text ml="xs" className={userText}>
 				{username}
 			</Text>
@@ -136,11 +136,11 @@ const SignOut: FC<UnstyledButtonProps> = (props) => {
 	};
 
 	const { classes } = useHeaderStyles();
-	const { actionBtn, actionBtnIcon } = classes;
+	const { actionBtn } = classes;
 
 	return (
 		<UnstyledButton {...props} onClick={onSignOut} className={actionBtn}>
-			<IconLogout size={px('1.2rem')} className={actionBtnIcon} />
+			<IconLogout size={px('1.2rem')}  />
 		</UnstyledButton>
 	);
 };

src/components/Header/styles.tsx

@@ -1,16 +1,16 @@
 import { createStyles } from '@mantine/core';
 
 export const useHeaderStyles = createStyles((theme) => {
-	const { primaryColor, colors, spacing, fontSizes, radius, shadows } = theme;
+	const {colors, spacing, fontSizes, radius, shadows } = theme;
 	const { fontWeights, widths, heights } = theme.other;
 
-	const pColor = colors[primaryColor][2];
-	const sColor = colors.brandSecondary[2];
+	const white = colors.white[0];
+	const sColor = colors.brandSecondary[0];
 	const defaultRadius = radius[theme.defaultRadius as string];
 
 	return {
 		container: {
-			background: pColor,
+			background: white,
 			display: 'flex',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -32,19 +32,14 @@ export const useHeaderStyles = createStyles((theme) => {
 			},
 		},
 
-		actionBtnIcon: {
-			color: colors.gray[3],
-		},
-
-		actionBtnText: {
-			color: colors.gray[3],
+		actionBtnText: {		
 			fontSize: fontSizes.sm,
 		},
 
 		helpTitle: {
 			fontSize: fontSizes.md,
 			textAlign: 'center',
-			color: pColor,
+			color: white,
 			fontWeight: fontWeights.bold,
 		},
 
@@ -86,7 +81,7 @@ export const useHeaderStyles = createStyles((theme) => {
 			'&::after': {
 				content: '""',
 				display: 'block',
-				backgroundColor: pColor,
+				backgroundColor: white,
 				width: widths[14],
 				height: heights['0.5'],
 				marginTop: spacing.xs,
@@ -104,13 +99,7 @@ export const useHeaderStyles = createStyles((theme) => {
 			alignItems: 'center',
 			justifyContent: 'center',
 		},
-
-		userIcon: {
-			color: colors.gray[3],
-		},
-
 		userText: {
-			color: colors.gray[3],
 			fontSize: fontSizes.sm,
 		},
 	};

src/components/Mantine/theme.tsx

@@ -19,8 +19,8 @@ export const theme: MantineThemeOverride = {
 	colors: {
 		black: ['#000000'],
 		white: ['#FFFFFF'],
-		brandPrimary: ['#4192DF', '#1F288E', '#1A237E', '#10143E'],
-		brandSecondary: ['#F6BA74', '#F29C38', '#C27D2D'],
+		brandPrimary: ['#545BEB', '#1F288E', '#1A237E', '#10143E'],
+		brandSecondary: ['#FC466B', '#F29C38', '#C27D2D'],
 		error: ['#8F0F27'],
 		dimmed: ['#868e96'],
 	},
@@ -51,10 +51,10 @@ export const theme: MantineThemeOverride = {
 				return {
 					control: {
 						'&[data-active=true]': {
-							background: colors.brandSecondary[1],
+							background: colors.brandPrimary[0],
 
 							':hover': {
-								background: colors.brandSecondary[1],
+								color: colors.brandSecondary[0],
 							},
 						},
 					},
@@ -63,19 +63,23 @@ export const theme: MantineThemeOverride = {
 		},
 		Checkbox: {
 			styles: ({ colors }) => {
-				const pColor = colors.brandSecondary[1];
+				const pColor = colors.brandPrimary[0];
+				const sColor = colors.brandSecondary[0];
 
 				return {
 					labelWrapper: {
 						width: '100%',
 					},
 					label: {
 						cursor: 'pointer',
+						':hover': {
+							color: sColor,
+						},
 					},
 					input: {
 						cursor: 'pointer',
 						':hover': {
-							borderColor: pColor,
+							borderColor: sColor,
 						},
 
 						'&:checked': {
@@ -91,7 +95,7 @@ export const theme: MantineThemeOverride = {
 				scrollbar: {
 					[`&[data-orientation="vertical"] .mantine-ScrollArea-thumb, 
 					&[data-orientation="horizontal"] .mantine-ScrollArea-thumb`]: {
-						backgroundColor: colors.brandPrimary[2],
+						backgroundColor: colors.brandPrimary[0],
 					},
 				},
 
@@ -179,9 +183,17 @@ export const theme: MantineThemeOverride = {
 			styles: ({ colors }) => {
 				return {
 					day: {
+						'&:hover': {
+							color: colors.brandSecondary[0],
+						},
 						'&[data-selected]': {
-							background: colors.brandSecondary[1],
+							background: colors.brandPrimary[0],
+							'&:hover': {
+								color: colors.white[0],
+								background: colors.brandSecondary[0],
+							},
 						},
+
 					},
 				};
 			},
@@ -192,7 +204,7 @@ export const theme: MantineThemeOverride = {
 					item: {
 						'&[data-selected]': {
 							'&, &:hover': {
-								background: colors.brandSecondary[1],
+								background: colors.brandSecondary[0],
 								color: colors.white[0],
 							},
 						},