parseablehq · nitisht · Jul 24, 2023 · Jul 21, 2023 · Jul 21, 2023 · Jul 24, 2023
diff --git a/.github/workflows/cla.yaml b/.github/workflows/cla.yaml
@@ -1,9 +1,9 @@
-name: "CLA Assistant"
+name: 'CLA Assistant'
 on:
   issue_comment:
     types: [created]
   pull_request_target:
-    types: [opened,closed,synchronize]
+    types: [opened, closed, synchronize]
 
 # explicitly configure permissions, in case your GITHUB_TOKEN workflow permissions are set to read-only in repository settings
 permissions:
@@ -16,7 +16,7 @@ jobs:
   CLAAssistant:
     runs-on: ubuntu-latest
     steps:
-      - name: "CLA Assistant"
+      - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         uses: contributor-assistant/github-action@v2.3.0
         env:

diff --git a/index.html b/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
-    <link rel="icon" href="/favicon.ico" />
+	<head>
+		<meta charset="UTF-8" />
+		<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+		<link rel="icon" href="/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Parseable Log Storage</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Parseable Log Storage</title>
 
-    <!--
+		<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+		<link rel="manifest" href="/manifest.json" />
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>
diff --git a/signatures/version1/cla.json b/signatures/version1/cla.json
@@ -1,28 +1,28 @@
 {
-  "signedContributors": [
-    {
-      "name": "Ryiski",
-      "id": 47484379,
-      "comment_id": 1564572383,
-      "created_at": "2023-05-26T15:34:15Z",
-      "repoId": 523035254,
-      "pullRequestNo": 62
-    },
-    {
-      "name": "kartik-gupta-ij",
-      "id": 84975264,
-      "comment_id": 1625309802,
-      "created_at": "2023-07-07T12:02:14Z",
-      "repoId": 523035254,
-      "pullRequestNo": 70
-    },
-    {
-      "name": "nitisht",
-      "id": 5156139,
-      "comment_id": 1625358492,
-      "created_at": "2023-07-07T12:41:06Z",
-      "repoId": 523035254,
-      "pullRequestNo": 71
-    }
-  ]
-}
+	"signedContributors": [
+		{
+			"name": "Ryiski",
+			"id": 47484379,
+			"comment_id": 1564572383,
+			"created_at": "2023-05-26T15:34:15Z",
+			"repoId": 523035254,
+			"pullRequestNo": 62
+		},
+		{
+			"name": "kartik-gupta-ij",
+			"id": 84975264,
+			"comment_id": 1625309802,
+			"created_at": "2023-07-07T12:02:14Z",
+			"repoId": 523035254,
+			"pullRequestNo": 70
+		},
+		{
+			"name": "nitisht",
+			"id": 5156139,
+			"comment_id": 1625358492,
+			"created_at": "2023-07-07T12:41:06Z",
+			"repoId": 523035254,
+			"pullRequestNo": 71
+		}
+	]
+}
diff --git a/src/@types/parseable/api/stream.ts b/src/@types/parseable/api/stream.ts
@@ -6,3 +6,24 @@ export type LogStreamSchemaData = {
 	fields: Array<Field>;
 	metadata: Record<string, string>;
 };
+export type LogStreamStat = {
+	ingestion: {
+		count: number;
+		format: string;
+		size: string;
+	};
+	storage: {
+		format: string;
+		size: string;
+	};
+	stream: string;
+	time: string;
+};
+
+export type action = {
+	description: string;
+	action: string;
+	duration: string;
+};
+
+export type LogStreamRetention = Array<action>;
diff --git a/src/api/constants.ts b/src/api/constants.ts
@@ -4,3 +4,6 @@ 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_QUERY_URL = `${API_V1}/query`;
+export const STATS_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/alert`;
+export const STATS_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`;
+export const STATS_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`;
diff --git a/src/api/logStream.ts b/src/api/logStream.ts
@@ -1,5 +1,11 @@
 import { Axios } from './axios';
-import { LOG_STREAMS_SCHEMA_URL, LOG_STREAM_LIST_URL } from './constants';
+import {
+	LOG_STREAMS_SCHEMA_URL,
+	LOG_STREAM_LIST_URL,
+	STATS_STREAMS_ALERTS_URL,
+	STATS_STREAMS_RETRNTION_URL,
+	STATS_STREAMS_STATS_URL,
+} from './constants';
 import { LogStreamData, LogStreamSchemaData } from '@/@types/parseable/api/stream';
 
 export const getLogStreamList = () => {
@@ -9,3 +15,15 @@ export const getLogStreamList = () => {
 export const getLogStreamSchema = (streamName: string) => {
 	return Axios().get<LogStreamSchemaData>(LOG_STREAMS_SCHEMA_URL(streamName));
 };
+
+export const getLogStreamAlerts = (streamName: string) => {
+	return Axios().get(STATS_STREAMS_ALERTS_URL(streamName));
+};
+
+export const getLogStreamRetention = (streamName: string) => {
+	return Axios().get(STATS_STREAMS_RETRNTION_URL(streamName));
+};
+
+export const getLogStreamStats = (streamName: string) => {
+	return Axios().get(STATS_STREAMS_STATS_URL(streamName));
+};
diff --git a/src/api/query.ts b/src/api/query.ts
@@ -19,8 +19,7 @@ export const getQueryLogs = (logsQuery: LogsQuery) => {
 };
 
 export const getQueryResult = (logsQuery: LogsQuery, query = '') => {
-	const { startTime, endTime} = logsQuery;
-
+	const { startTime, endTime } = logsQuery;
 
 	return Axios().post(
 		LOG_QUERY_URL,
@@ -31,4 +30,4 @@ export const getQueryResult = (logsQuery: LogsQuery, query = '') => {
 		},
 		{},
 	);
-};
+};
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -15,8 +15,6 @@ type ErrorHandlerFn = (error: Error, info: { componentStack: string }) => void;
 const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children }) => {
 	const errorHandler: ErrorHandlerFn = (error, info) => {
 		// TODO: Send Errors to parseable maybe ?
-
-
 	};
 
 	return (

diff --git a/src/components/Header/SubHeader.tsx b/src/components/Header/SubHeader.tsx
@@ -1,7 +1,7 @@
 import useMountedState from '@/hooks/useMountedState';
 import { Box, Breadcrumbs, Button, Menu, Text, TextInput, UnstyledButton, px } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
-import { IconClock,IconRefresh, IconReload , IconRefreshOff, IconSearch } from '@tabler/icons-react';
+import { IconClock, IconRefresh, IconReload, IconRefreshOff, IconSearch } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import ms from 'ms';
 import type { ChangeEvent, FC, KeyboardEvent } from 'react';
@@ -17,7 +17,6 @@ const SubHeader: FC = () => {
 	} = useHeaderContext();
 	const [streamName, setStreamName] = useMountedState(subLogQuery.get().streamName);
 
-
 	useEffect(() => {
 		const listener = subLogQuery.subscribe((state) => {
 			setStreamName(state.streamName);
@@ -30,23 +29,45 @@ const SubHeader: FC = () => {
 			<Box>
 				<Box className={innerContainer}>
 					<Breadcrumbs separator=">">
-						<svg className={homeIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-							<path d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.6C12.29 3.26 11.71 3.26 11.33 3.6L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z" fill="#211F1F" />
+						<svg
+							className={homeIcon}
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none">
+							<path
+								d="M9.99998 19V14H14V19C14 19.55 14.45 20 15 20H18C18.55 20 19 19.55 19 19V12H20.7C21.16 12 21.38 11.43 21.03 11.13L12.67 3.6C12.29 3.26 11.71 3.26 11.33 3.6L2.96998 11.13C2.62998 11.43 2.83998 12 3.29998 12H4.99998V19C4.99998 19.55 5.44998 20 5.99998 20H8.99998C9.54998 20 9.99998 19.55 9.99998 19Z"
+								fill="#211F1F"
+							/>
 						</svg>
-						<Text >Streams </Text>
-						<Text >{streamName}</Text>
-						<Text className={activeBtn}> {useMatch("/:streamName/logs") ? "Logs" : "Query"} </Text>
+						<Text>Streams </Text>
+						<Text>{streamName}</Text>
+						{useMatch('/:streamName/stats') && <Text className={activeBtn}>Stats </Text>}
+
+						{useMatch('/:streamName/logs') && <Text className={activeBtn}>Logs </Text>}
+
+						{useMatch('/:streamName/query') && <Text className={activeBtn}>Query </Text>}
 					</Breadcrumbs>
 				</Box>
 			</Box>
 
 			<Box>
 				<Box className={innerContainer}>
-					{useMatch("/:streamName/logs") && <Search />}
-					{useMatch("/:streamName/logs") && <RefreshNow />}
+					{useMatch('/:streamName/stats') && <RefreshNow />}
+
+					{useMatch('/:streamName/logs') && <>
+						<Search />
+						<RefreshNow />
+						<TimeRange />
+						<RefreshInterval />
+					</>}
+
+					{useMatch('/:streamName/query') && <>
+						<TimeRange />
+						<RefreshInterval />
+					</>}
 
-					<TimeRange />
-					<RefreshInterval />
 				</Box>
 			</Box>
 		</Box>
@@ -58,7 +79,7 @@ const Search: FC = () => {
 		state: { subLogSearch },
 	} = useHeaderContext();
 
-	const [searchValue, setSearchValue] = useMountedState("");
+	const [searchValue, setSearchValue] = useMountedState('');
 	const { classes } = useLogQueryStyles();
 
 	useEffect(() => {
@@ -108,7 +129,6 @@ const RefreshNow: FC = () => {
 		state: { subLogQuery, subLogSelectedTimeRange },
 	} = useHeaderContext();
 
-
 	const onRefresh = () => {
 		if (subLogSelectedTimeRange.get().includes('Past')) {
 			const now = dayjs();
@@ -123,9 +143,8 @@ const RefreshNow: FC = () => {
 	const { refreshNowBtn } = classes;
 
 	return (
-
 		<Button className={refreshNowBtn} onClick={onRefresh}>
-			<IconReload  size={px('1.2rem')} stroke={1.5} />
+			<IconReload size={px('1.2rem')} stroke={1.5} />
 		</Button>
 	);
 };

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -7,14 +7,14 @@ import { FC, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useHeaderStyles } from './styles';
 import SubHeader from './SubHeader';
-import {useHeaderContext} from '@/layouts/MainLayout/Context';
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
 import useMountedState from '@/hooks/useMountedState';
 
 type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
 
 const Header: FC<HeaderProps> = (props) => {
 	const { classes } = useHeaderStyles();
-	const { container, logoContainer, burgerIcon ,navContainer, imageSty} = classes;
+	const { container, logoContainer, burgerIcon, navContainer, imageSty } = classes;
 	const {
 		state: { subNavbarTogle },
 	} = useHeaderContext();
@@ -35,17 +35,15 @@ const Header: FC<HeaderProps> = (props) => {
 				<Burger
 					className={burgerIcon}
 					opened={isSubNavbarOpen}
-					onClick={() =>subNavbarTogle.set((state) => !state)}
-					size={"sm"}
+					onClick={() => subNavbarTogle.set((state) => !state)}
+					size={'sm'}
 				/>
 			</Box>
-		<Box className={navContainer}>
-			<SubHeader/>
-		</Box>
-
+			<Box className={navContainer}>
+				<SubHeader />
+			</Box>
 		</MantineHeader>
 	);
 };
 
-
 export default Header;