final update and config page

src/api/constants.ts

@@ -4,6 +4,8 @@ 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`;
+export const LOG_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/alert`;
+export const LOG_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`;
+export const LOG_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`;
+export const DELETE_STREAMS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}`;
+

src/api/logStream.ts

@@ -1,10 +1,11 @@
 import { Axios } from './axios';
 import {
+	DELETE_STREAMS_URL,
 	LOG_STREAMS_SCHEMA_URL,
 	LOG_STREAM_LIST_URL,
-	STATS_STREAMS_ALERTS_URL,
-	STATS_STREAMS_RETRNTION_URL,
-	STATS_STREAMS_STATS_URL,
+	LOG_STREAMS_ALERTS_URL,
+	LOG_STREAMS_RETRNTION_URL,
+	LOG_STREAMS_STATS_URL,
 } from './constants';
 import { LogStreamData, LogStreamSchemaData } from '@/@types/parseable/api/stream';
 
@@ -17,13 +18,25 @@ export const getLogStreamSchema = (streamName: string) => {
 };
 
 export const getLogStreamAlerts = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_ALERTS_URL(streamName));
+	return Axios().get(LOG_STREAMS_ALERTS_URL(streamName));
+};
+
+export const putLogStreamAlerts = (streamName: string, data: any) => {
+	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), data);
 };
 
 export const getLogStreamRetention = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_RETRNTION_URL(streamName));
+	return Axios().get(LOG_STREAMS_RETRNTION_URL(streamName));
+};
+
+export const putLogStreamRetention = (streamName: string, data: any) => {
+	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), data);
 };
 
 export const getLogStreamStats = (streamName: string) => {
-	return Axios().get(STATS_STREAMS_STATS_URL(streamName));
+	return Axios().get(LOG_STREAMS_STATS_URL(streamName));
 };
+
+export const deleteLogStream = (streamName: string) => {
+	return Axios().delete(DELETE_STREAMS_URL(streamName));
+}

src/components/Navbar/index.tsx

@@ -1,5 +1,5 @@
 import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
-import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core';
+import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image, Button, TextInput } from '@mantine/core';
 import {
 	IconZoomCode,
 	IconReportAnalytics,
@@ -12,6 +12,7 @@ import {
 	IconBinaryTree2,
 	IconTableShortcut,
 	IconSettings,
+	IconTrash,
 } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
 import docImage from '@/assets/images/doc.webp';
@@ -27,6 +28,7 @@ import useMountedState from '@/hooks/useMountedState';
 import dayjs from 'dayjs';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { LOGIN_ROUTE } from '@/constants/routes';
+import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
 
 const links = [
 	{ icon: IconZoomCode, label: 'Query', pathname: '/query' },
@@ -40,11 +42,13 @@ type NavbarProps = Omit<MantineNavbarProps, 'children'>;
 const Navbar: FC<NavbarProps> = (props) => {
 	const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
 	const navigate = useNavigate();
-	const { data: streams, loading, error, getData } = useGetLogStreamList();
+	const { data: streams, loading, error, getData, resetData:resetStreamArray} = useGetLogStreamList();
 	const [activeStream, setActiveStream] = useState('');
 	const [searchValue, setSearchValue] = useState('');
 	const { classes } = useNavbarStyles();
 	const [currentPage, setCurrentPage] = useState('/logs');
+	const [opened, { open, close }] = useDisclosure(false);
+	const [ deleteStream, setDeleteStream] = useState('');
 	const {
 		container,
 		linkBtnActive,
@@ -65,8 +69,9 @@ const Navbar: FC<NavbarProps> = (props) => {
 		state: { subNavbarTogle },
 	} = useHeaderContext();
 	const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false);
-	const [opened, { close, open }] = useDisclosure();
+	const [openedDelete, { close:closeDelete, open:openDelete}] = useDisclosure();
 	let location = useLocation();
+	const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDatalogStraeam} = useDeleteLogStream();
 
 	useEffect(() => {
 		const listener = subNavbarTogle.subscribe(setIsSubNavbarOpen);
@@ -151,6 +156,59 @@ const Navbar: FC<NavbarProps> = (props) => {
 			});
 		}
 	}, [streams, error, loading]);
+	const handleCloseDelete = () => {
+		closeDelete();
+		setDeleteStream('');
+	};
+	const handleDelete = () => {
+		deleteLogStreamFun(deleteStream||"");
+		closeDelete();
+	};
+
+	useEffect(() => {
+		if (deleteLoading) {
+			notifications.show({
+				id: 'delete-data',
+				loading: true,
+				color: '#545BEB',
+				title: 'Deleting Stream',
+				message: 'Stream will be deleted.',
+				autoClose: false,
+				withCloseButton: false,
+
+			});
+			return;
+		}
+		if (deleteData && !deleteLoading) {
+			notifications.update({
+				id: 'delete-data',
+				color: 'green',
+				title: 'Stream was deleted',
+				message: 'Successfully Deleted!!',
+				icon: <IconCheck size="1rem" />,
+				autoClose: 1000,
+			});
+			resetDatalogStraeam();
+			resetStreamArray();
+			getData();
+			return;
+		}
+		if (deleteError) {
+			notifications.update({
+				id: 'delete-data',
+				color: 'red',
+				title: 'Error Occured',
+				message: 'Error Occured while deleting stream',
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 2000,
+			});
+			return;
+		}
+		if(streams && streams.length!==0 && deleteStream===streamName){
+			navigate(`/${streams[0].name}/query`);
+		}
+
+	}, [deleteData, deleteError, deleteLoading,streams]);
 
 	return (
 		<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth + 20} hidden={isSubNavbarOpen}>
@@ -190,7 +248,14 @@ const Navbar: FC<NavbarProps> = (props) => {
 							}
 						/>
 					);
-				})}
+						})}
+				<NavLink
+				label={"Delete"}
+				icon={<IconTrash size="1.3rem" stroke={1.2} />}
+				sx={{ paddingLeft: 53 }}
+				onClick={openDelete}
+				className={ linkBtn}
+			/>
 				{error && <div>{error}</div>}
 				{error && (
 					<NavLink
@@ -219,6 +284,30 @@ const Navbar: FC<NavbarProps> = (props) => {
 					onClick={onSignOut}
 				/>
 			</MantineNavbar.Section>
+			<Modal withinPortal size="md" opened={openedDelete} onClose={handleCloseDelete} title={"Delete Stream"}centered>
+				<Text>Are you sure you want to delete this stream?</Text>
+				<TextInput
+				 type="text" 
+				onChange={(e) => {
+					console.log(e.target.value);
+					setDeleteStream(e.target.value);
+				}
+				}
+				 placeholder= {`Type the name of the stream to confirm. i.e: ${streamName}`} />
+
+				<Box mt={10} display="flex" sx={{justifyContent:"end"}}>
+				<Button variant="filled" color='red' sx={{margin:"12px"}} disabled={deleteStream===streamName?false:true}
+					onClick={handleDelete}
+					>
+						Delete
+					</Button>
+					<Button onClick={handleCloseDelete} variant='filled' color='green'sx={{margin:"12px"}}>
+						Cancel
+					</Button>
+
+				</Box>
+
+			</Modal>
 			<Modal withinPortal opened={opened} onClose={close} withCloseButton={false} size="sm" centered>
 				<Text className={helpTitle}>Need any help?</Text>
 				<Text className={helpDescription}>Here you can find useful resources and information.</Text>

src/hooks/useDeleteLogStream.ts

@@ -0,0 +1,39 @@
+import { deleteLogStream } from '@/api/logStream';
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+
+export const useDeleteLogStream = () => {
+	const [data, setData] = useMountedState<any | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const deleteLogStreamFun = async (streamName: string) => {
+		try {
+			setLoading(true);
+			setError(null);
+			const res = await deleteLogStream(streamName);
+
+			switch (res.status) {
+				case StatusCodes.OK: {
+					const streams = res.data;
+
+					setData(streams);
+					break;
+				}
+				default: {
+					setError('Failed to get ALert');
+				}
+			}
+		} catch {
+			setError('Failed to get ALert');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, deleteLogStreamFun, resetData };
+};

src/hooks/useGetLogStreamList.ts

@@ -33,10 +33,13 @@ export const useGetLogStreamList = () => {
 			setLoading(false);
 		}
 	};
+	const resetData = () => {
+		setData(null);
+	};
 
 	useEffect(() => {
 		getData();
 	}, []);
 
-	return { data, error, loading, getData };
+	return { data, error, loading, getData ,resetData};
 };

src/hooks/usePutLogStreamAlerts.ts

@@ -0,0 +1,39 @@
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+import { putLogStreamAlerts } from '@/api/logStream';
+
+export const usePutLogStreamAlerts = () => {
+	const [data, setData] = useMountedState<{
+		data: any;
+	} | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const putAlertsData = async (streamName :string, payload:any) => {
+		try {
+			setLoading(true);
+			setError(null);
+
+			const [logsAlertsRes] = await Promise.all([putLogStreamAlerts(streamName, payload)]);
+
+			const data = logsAlertsRes.data;
+
+			if (logsAlertsRes.status === StatusCodes.OK) {
+				setData({ data });
+				return;
+			}
+
+			setError(logsAlertsRes.data);
+		} catch (error: any) {
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, putAlertsData, resetData };
+};

src/hooks/usePutLogStreamRetention.ts

@@ -0,0 +1,39 @@
+import { StatusCodes } from 'http-status-codes';
+import useMountedState from './useMountedState';
+import { putLogStreamRetention } from '@/api/logStream';
+
+export const usePutLogStreamRetention = () => {
+	const [data, setData] = useMountedState<{
+		data: any;
+	} | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const putRetentionData = async (streamName :string, payload:any) => {
+		try {
+			setLoading(true);
+			setError(null);
+
+			const [logRetentionRes] = await Promise.all([putLogStreamRetention(streamName, payload)]);
+
+			const data = logRetentionRes.data;
+
+			if (logRetentionRes.status === StatusCodes.OK) {
+				setData({ data });
+				return;
+			}
+
+			setError(logRetentionRes.data);
+		} catch (error: any) {
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, putRetentionData, resetData };
+};

src/hooks/useQueryLogs.ts

@@ -13,7 +13,7 @@ export const useQueryLogs = () => {
 	const _dataRef = useRef<Log[] | null>(null);
 
 	const [error, setError] = useMountedState<string | null>(null);
-	const [loading, setLoading] = useMountedState<boolean>(true);
+	const [loading, setLoading] = useMountedState<boolean>(false);
 	const [pageLogData, setPageLogData] = useMountedState<LogsData | null>(null);
 	const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({ 
 		search: '', 

src/hooks/useQueryResult.ts

@@ -8,7 +8,7 @@ export const useQueryResult = () => {
 		data: any;
 	} | null>(null);
 	const [error, setError] = useMountedState<string | null>(null);
-	const [loading, setLoading] = useMountedState<boolean>(true);
+	const [loading, setLoading] = useMountedState<boolean>(false);
 
 	const getQueryData = async (logsQuery: LogsQuery, query = '') => {
 		try {