Fetching stream logs and more

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

@@ -0,0 +1,7 @@
+export type LogsQuery = {
+	streamName: string;
+	startTime?: Date;
+	endTime?: Date;
+	limit?: number;
+	page?: number;
+};

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

@@ -1 +1,15 @@
+import { Field } from '../dataType';
+
 export type LogStreamData = Array<{ name: string }>;
+
+export type LogStreamSchemaData = {
+	fields: Array<Field>;
+	metadata: Record<string, string>;
+};
+
+export type LogsData = Array<{
+	p_timestamp: string;
+	p_metadata: string;
+	p_tags: string;
+	[key: string]: string | number | null | Date;
+}>;

src/@types/parseable/dataType.ts

@@ -0,0 +1,69 @@
+//TODO: Need to check if this is proper
+export interface Field {
+	name: string;
+	data_type: DataType;
+	nullable: boolean;
+	dict_id: number;
+	dict_is_ordered: boolean;
+	metadata: { [key: string]: string };
+}
+
+export type Timestamp = { Timestamp: [TimeUnit, string | null] };
+export type Time32 = { Time32: TimeUnit };
+export type Time64 = { Time64: TimeUnit };
+export type Duration = { Duration: TimeUnit };
+export type Interval = { Interval: IntervalUnit };
+export type FixedSizeBinary = { FixedSizeBinary: number };
+export type List = { List: Field };
+export type FixedSizeList = { FixedSizeList: [Field, number] };
+export type LargeList = { LargeList: Field };
+export type Struct = { Struct: Field };
+export type Union = { Union: [Field[], number[], UnionMode] };
+export type Dictionary = { Dictionary: [DataType, DataType] };
+export type Decimal128 = { Decimal128: [number, number] };
+export type Decimal256 = { Decimal256: [number, number] };
+export type MAP = { Map: [Field, boolean] };
+export type RunEndEncoded = { RunEndEncoded: [Field, Field] };
+
+export type DataType =
+	| 'Null'
+	| 'Boolean'
+	| 'Int8'
+	| 'Int16'
+	| 'Int32'
+	| 'Int64'
+	| 'UInt8'
+	| 'UInt16'
+	| 'UInt32'
+	| 'UInt64'
+	| 'Float16'
+	| 'Float32'
+	| 'Float64'
+	| 'LargeBinary'
+	| 'Utf8'
+	| 'LargeUtf8'
+	| 'Date32'
+	| 'Date64'
+	| 'Binary'
+	| Timestamp
+	| Time32
+	| Time64
+	| Duration
+	| Interval
+	| FixedSizeBinary
+	| List
+	| FixedSizeList
+	| LargeList
+	| Struct
+	| Union
+	| Dictionary
+	| Decimal128
+	| Decimal256
+	| MAP
+	| RunEndEncoded;
+
+export type TimeUnit = 'Second' | 'Millisecond' | 'Microsecond' | 'Nanosecond';
+
+export type IntervalUnit = 'YearMonth' | 'DayTime' | 'MonthDayNano';
+
+export type UnionMode = 'Sparse' | 'Dense';

src/api/constants.ts

@@ -2,3 +2,6 @@ const API_V1 = 'api/v1';
 
 export const HEALTH_LIVENESS_URL = `${API_V1}/liveness`;
 export const LOG_STREAM_LIST_URL = `${API_V1}/logstream`;
+export const LOG_STREAMS_SCHEMA_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/schema`;
+export const LOG_STREAMS_QUERY_URL = `${API_V1}/query`;
+export const QUERY_URL = 'api/v1/query';

src/api/logStream.ts

@@ -1,7 +1,11 @@
 import { Axios } from './axios';
-import { LOG_STREAM_LIST_URL } from './constants';
-import { LogStreamData } from '@/@types/parseable/api/stream';
+import { LOG_STREAMS_SCHEMA_URL, LOG_STREAM_LIST_URL } from './constants';
+import { LogStreamData, LogStreamSchemaData } from '@/@types/parseable/api/stream';
 
 export const getLogStreamList = () => {
 	return Axios().get<LogStreamData>(LOG_STREAM_LIST_URL);
 };
+
+export const getLogStreamSchema = (streamName: string) => {
+	return Axios().get<LogStreamSchemaData>(LOG_STREAMS_SCHEMA_URL(streamName));
+};

src/api/query.ts

@@ -0,0 +1,41 @@
+import { Axios } from './axios';
+import { LOG_STREAMS_QUERY_URL, QUERY_URL } from './constants';
+import { LogsQuery } from '@/@types/parseable/api/query';
+import dayjs from 'dayjs';
+
+export const getQueryLogs = (logsQuery: LogsQuery) => {
+	const startOfDay = dayjs().startOf('day');
+	const {
+		streamName,
+		startTime = startOfDay.toDate(),
+		endTime = startOfDay.endOf('day').toDate(),
+		limit = 30,
+		page = 1,
+	} = logsQuery;
+
+	const offset = limit * page - limit;
+
+	const query = `SELECT * FROM ${streamName} ORDER BY p_timestamp DESC LIMIT ${limit} OFFSET ${offset}`;
+	return Axios().post(
+		QUERY_URL,
+		{
+			query,
+			startTime,
+			endTime,
+		},
+		{},
+	);
+};
+
+export const getQueryLogsTotalCount = (logsQuery: LogsQuery) => {
+	const startOfDay = dayjs().startOf('day');
+	const { streamName, startTime = startOfDay.toDate(), endTime = startOfDay.endOf('day').toDate() } = logsQuery;
+
+	const query = `SELECT COUNT(*) as 'totalCount' FROM ${streamName}`;
+
+	return Axios().post(LOG_STREAMS_QUERY_URL, {
+		query,
+		startTime,
+		endTime,
+	});
+};

src/components/Button/Retry.tsx

@@ -0,0 +1,21 @@
+import { Button, ButtonProps, px } from '@mantine/core';
+import { IconReload } from '@tabler/icons-react';
+import { FC } from 'react';
+import { useButtonStyles } from './styles';
+
+type RetryProps = ButtonProps & {
+	onClick: () => void;
+};
+
+export const RetryBtn: FC<RetryProps> = (props) => {
+	const { className, ...restProps } = props;
+
+	const { classes, cx } = useButtonStyles();
+	const { retryBtn } = classes;
+
+	return (
+		<Button className={cx([retryBtn, className])} rightIcon={<IconReload size={px('0.8rem')} />} {...restProps}>
+			Reload
+		</Button>
+	);
+};

src/components/Button/styles.tsx

@@ -0,0 +1,13 @@
+import { createStyles } from '@mantine/core';
+
+export const useButtonStyles = createStyles((theme) => {
+	const { colors, primaryColor } = theme;
+
+	const pColor = colors[primaryColor][1];
+
+	return {
+		retryBtn: {
+			backgroundColor: pColor,
+		},
+	};
+});

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">
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl" withBorder={false}>
 			<Link to={HOME_ROUTE} style={{ height: 25 }}>
 				<Image maw={HEADER_HEIGHT * 2.5} mx="auto" src={logoInvert} alt="Parseable Logo" />
 			</Link>

src/components/Header/styles.tsx

@@ -14,7 +14,6 @@ export const useHeaderStyles = createStyles((theme) => {
 			alignItems: 'center',
 			justifyContent: 'space-between',
 			paddingLeft: spacing.lg,
-			border: 'none',
 		},
 
 		actionsContainer: {

src/components/Mantine/theme.tsx

@@ -1,4 +1,4 @@
-import type { CSSObject, MantineTheme, MantineThemeOverride } from '@mantine/core';
+import type { CSSObject, MantineThemeOverride } from '@mantine/core';
 import { heights, widths, sizing } from './sizing';
 
 const globalStyles = (): CSSObject => {
@@ -41,8 +41,114 @@ export const theme: MantineThemeOverride = {
 		},
 	},
 	components: {
+		Pagination: {
+			styles: ({ colors }) => {
+				return {
+					control: {
+						'&[data-active=true]': {
+							background: colors.brandSecondary[1],
+
+							':hover': {
+								background: colors.brandSecondary[1],
+							},
+						},
+					},
+				};
+			},
+		},
+		Checkbox: {
+			styles: ({ colors }) => {
+				const pColor = colors.brandSecondary[1];
+
+				return {
+					labelWrapper: {
+						width: '100%',
+					},
+					label: {
+						cursor: 'pointer',
+					},
+					input: {
+						cursor: 'pointer',
+						':hover': {
+							borderColor: pColor,
+						},
+
+						'&:checked': {
+							backgroundColor: pColor,
+							borderColor: pColor,
+						},
+					},
+				};
+			},
+		},
+		ScrollArea: {
+			styles: ({ colors }) => ({
+				scrollbar: {
+					[`&[data-orientation="vertical"] .mantine-ScrollArea-thumb, 
+					&[data-orientation="horizontal"] .mantine-ScrollArea-thumb`]: {
+						backgroundColor: colors.brandPrimary[2],
+					},
+				},
+
+				corner: {
+					opacity: 1,
+					background: colors.gray[0],
+				},
+			}),
+		},
+		Table: {
+			styles: ({ spacing, radius, colors, fontSizes, other: { fontWeights } }) => ({
+				root: {
+					borderRadius: radius.md,
+					background: colors.white,
+					borderCollapse: 'separate',
+					borderSpacing: 0,
+					padding: `${spacing.md} ${spacing.sm}`,
+					height: 20,
+
+					'& tr th': {
+						background: colors.gray[2],
+						borderBottom: 'none !important',
+						padding: '0 !important',
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+					},
+
+					'& tr th span': {
+						display: 'inline-block',
+						fontSize: fontSizes.sm,
+						fontWeight: fontWeights.semibold,
+						padding: spacing.sm,
+						textAlign: 'center',
+						width: '100%',
+					},
+
+					'& tr th:first-of-type': {
+						borderTopLeftRadius: radius.sm,
+						borderBottomLeftRadius: radius.sm,
+					},
+
+					'& tr th:last-of-type': {
+						borderTopRightRadius: radius.sm,
+						borderBottomRightRadius: radius.sm,
+					},
+				},
+			}),
+		},
+		Drawer: {
+			defaultProps: ({ colors }) => {
+				return {
+					withinPortal: true,
+					overlayProps: {
+						color: colors.gray[3],
+						opacity: 0.55,
+						blur: 3,
+					},
+				};
+			},
+		},
 		Modal: {
-			defaultProps: ({ colors }: MantineTheme) => ({
+			defaultProps: ({ colors }) => ({
 				withinPortal: true,
 				overlayProps: {
 					color: colors.gray[3],
@@ -52,7 +158,7 @@ export const theme: MantineThemeOverride = {
 			}),
 		},
 		Highlight: {
-			defaultProps: ({ colors, other }: MantineTheme) => ({
+			defaultProps: ({ colors, other }) => ({
 				highlightStyles: {
 					color: colors.dark,
 					background: colors.yellow[3],

src/components/Navbar/styles.tsx

@@ -12,7 +12,6 @@ export const useNavbarStyles = createStyles((theme) => {
 			background: pColor,
 			paddingTop: spacing.lg,
 			flexDirection: 'column',
-			border: 'none',
 			alignItems: 'center',
 		},
 

src/components/Table/index.tsx

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithRef, FC } from 'react';
+
+type ThProps = {
+	text: string;
+	onSort?: () => void;
+};
+
+export const Th: FC<ThProps> = (props) => {
+	const { text } = props;
+
+	return (
+		<th>
+			<span>{text}</span>
+		</th>
+	);
+};
+
+type TheadProps = ComponentPropsWithRef<'thead'>;
+
+export const Thead: FC<TheadProps> = (props) => {
+	const { children, ...restProps } = props;
+
+	return (
+		<thead {...restProps}>
+			<tr>{children}</tr>
+		</thead>
+	);
+};
+
+type TbodyProps = ComponentPropsWithRef<'tbody'>;
+
+export const Tbody: FC<TbodyProps> = (props) => {
+	const { children, ...restProps } = props;
+
+	return <tbody {...restProps}>{children}</tbody>;
+};