parseablehq · nitisht · Jan 4, 2024 · Jan 3, 2024
diff --git a/src/api/caching.ts b/src/api/caching.ts
@@ -0,0 +1,10 @@
+import { Axios } from './axios';
+import { CACHING_STATUS_URL } from './constants';
+
+export const getCachingStatus = (streamName: string) => {
+	return Axios().get(CACHING_STATUS_URL(streamName));
+};
+
+export const updateCaching = (streamName: string, type: boolean) => {
+	return Axios().put(CACHING_STATUS_URL(streamName), type, { headers: { 'Content-Type': 'application/json' } });
+};
diff --git a/src/api/constants.ts b/src/api/constants.ts
@@ -23,12 +23,12 @@ export const DEFAULT_ROLE_URL = `${API_V1}/role/default`;
 export const ROLES_LIST_URL = `${API_V1}/role`;
 export const ROLE_URL = (roleName: string) => `${ROLES_LIST_URL}/${roleName}`;
 
-
-//USERS LOGIN
-
+// USERS LOGIN
 export const LOGIN_URL = `${API_V1}/o/login?redirect=${window.location.origin}`;
 
 // LLM queries
 export const LLM_QUERY_URL = `${API_V1}/llm`;
 export const IS_LLM_ACTIVE_URL = `${LLM_QUERY_URL}/isactive`;
 
+// caching
+export const CACHING_STATUS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/cache`;
diff --git a/src/hooks/useGetCacheStatus.tsx b/src/hooks/useGetCacheStatus.tsx
@@ -0,0 +1,37 @@
+import useMountedState from './useMountedState';
+import { StatusCodes } from 'http-status-codes';
+import { getCachingStatus } from '@/api/caching';
+
+export const useGetCacheStatus = () => {
+	const [data, setData] = useMountedState<boolean | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const getCacheStatus = async (streamName: string) => {
+		setLoading(true);
+		try {
+			const res = await getCachingStatus(streamName);
+
+			switch (res.status) {
+				case StatusCodes.OK: {
+					setData(res.data);
+					break;
+				}
+				default: {
+					setError('Failed to get cache status');
+					console.error(res);
+				}
+			}
+		} catch (error) {
+			setError('Failed to get cache status');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, getCacheStatus, resetData };
+};
diff --git a/src/hooks/usePutCache.tsx b/src/hooks/usePutCache.tsx
@@ -0,0 +1,37 @@
+import useMountedState from './useMountedState';
+import { StatusCodes } from 'http-status-codes';
+import { updateCaching } from '@/api/caching';
+
+export const usePutCache = () => {
+	const [data, setData] = useMountedState<boolean | null>(null);
+	const [error, setError] = useMountedState<string | null>(null);
+	const [loading, setLoading] = useMountedState<boolean>(false);
+
+	const updateCache = async (streamName: string, type: boolean) => {
+		setLoading(true);
+		try {
+			const res = await updateCaching(streamName, type);
+
+			switch (res.status) {
+				case StatusCodes.OK: {
+					setData(res.data);
+					break;
+				}
+				default: {
+					setError('Failed to change cache setting');
+					console.error(res);
+				}
+			}
+		} catch (error) {
+			setError('Failed to change cache setting');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetData = () => {
+		setData(null);
+	};
+
+	return { data, error, loading, updateCache, resetData };
+};
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
@@ -11,11 +11,19 @@ import { IconCheck, IconFileAlert } from '@tabler/icons-react';
 import { usePutLogStreamRetention } from '@/hooks/usePutLogStreamRetention';
 import { useGetLogStreamAlert } from '@/hooks/useGetLogStreamAlert';
 import { useGetLogStreamRetention } from '@/hooks/useGetLogStreamRetention';
+import { useGetCacheStatus } from '@/hooks/useGetCacheStatus';
+import { usePutCache } from '@/hooks/usePutCache';
 
 const Config: FC = () => {
 	useDocumentTitle('Parseable | Config');
+
+	const { data, getCacheStatus } = useGetCacheStatus();
+	usePutCache();
+	const { error: updateCacheError, updateCache } = usePutCache();
+
 	const [alertQuery, setAlertQuery] = useMountedState<string>('');
 	const [retentionQuery, setRetentionQuery] = useMountedState<string>('');
+
 	const {
 		state: { subLogQuery },
 	} = useHeaderContext();
@@ -97,10 +105,11 @@ const Config: FC = () => {
 	};
 
 	useEffect(() => {
-		if(!subLogQuery.get().streamName) return;
+		if (!subLogQuery.get().streamName) return;
 		getLogAlert(subLogQuery.get().streamName);
 		getLogRetention(subLogQuery.get().streamName);
-	}, []);
+		getCacheStatus(subLogQuery.get().streamName);
+	}, [subLogQuery.get().streamName]);
 
 	useEffect(() => {
 		const subQuery = subLogQuery.subscribe((value: any) => {
@@ -211,54 +220,45 @@ const Config: FC = () => {
 			});
 			resetRetentionData();
 		}
-	}, [resultRetentionData, retentionError, retentionLoading]);
+		if (updateCacheError) {
+			notifications.update({
+				id: 'load-data',
+				loading: false,
+				color: 'red',
+				title: 'Error occurred',
+				message: `Error occurred, failed to change cache setting`,
+				icon: <IconFileAlert size="1rem" />,
+				autoClose: 3000,
+			});
+		}
+	}, [resultRetentionData, retentionError, retentionLoading, updateCacheError]);
 
 	const { classes } = useConfigStyles();
-	const { container, submitBtn, accordionSt, innerContainer } = classes;
+	const { container, submitBtn, accordionSt, innerContainer, containerWrapper, primaryBtn } = classes;
+
 	return (
 		<Box className={container}>
-			<Box className={innerContainer}>
-				<Accordion defaultValue="" variant="contained" radius="md" w={'90%'} className={accordionSt}>
-					<Accordion.Item value="Alert">
-						<Accordion.Control>Alert</Accordion.Control>
-						<Accordion.Panel>
-							<Box>
-								<Box sx={{ height: '500px' }}>
-									<Editor
-										onChange={handleAlertQueryEditorChange}
-										value={alertQuery}
-										defaultLanguage="json"
-										options={{
-											scrollBeyondLastLine: false,
-											readOnly: false,
-											fontSize: 12,
-											wordWrap: 'on',
-											minimap: { enabled: false },
-											automaticLayout: true,
-											mouseWheelZoom: true,
-											glyphMargin: true,
-										}}
-									/>
-								</Box>
-								<Button className={submitBtn} onClick={onSubmitAlertQuery}>
-									Submit
-								</Button>
-							</Box>
-						</Accordion.Panel>
-					</Accordion.Item>
-				</Accordion>
-			</Box>
-			{!subLogQuery.get().access?.some((access: string) => ['PutRetention'].includes(access)) ? null : (
+			<Button
+				variant="filled"
+				className={primaryBtn}
+				onClick={async () => {
+					await updateCache(subLogQuery.get().streamName, !data);
+					await getCacheStatus(subLogQuery.get().streamName);
+				}}>
+				{data ? 'Disable Cache' : 'Enable Cache'}
+			</Button>
+
+			<Box className={containerWrapper}>
 				<Box className={innerContainer}>
-					<Accordion defaultValue="" variant="contained" radius="md" w={'90%'} className={accordionSt}>
-						<Accordion.Item value="Retention">
-							<Accordion.Control>Retention</Accordion.Control>
+					<Accordion defaultValue="" variant="contained" radius="md" w={'100%'} className={accordionSt}>
+						<Accordion.Item value="Alert">
+							<Accordion.Control>Alert</Accordion.Control>
 							<Accordion.Panel>
 								<Box>
 									<Box sx={{ height: '500px' }}>
 										<Editor
-											onChange={handleRetentionQueryEditorChange}
-											value={retentionQuery}
+											onChange={handleAlertQueryEditorChange}
+											value={alertQuery}
 											defaultLanguage="json"
 											options={{
 												scrollBeyondLastLine: false,
@@ -272,15 +272,48 @@ const Config: FC = () => {
 											}}
 										/>
 									</Box>
-									<Button className={submitBtn} onClick={onSubmitRetentionQuery}>
+									<Button className={submitBtn} onClick={onSubmitAlertQuery}>
 										Submit
 									</Button>
 								</Box>
 							</Accordion.Panel>
 						</Accordion.Item>
 					</Accordion>
 				</Box>
-			)}
+				{!subLogQuery.get().access?.some((access: string) => ['PutRetention'].includes(access)) ? null : (
+					<Box className={innerContainer}>
+						<Accordion defaultValue="" variant="contained" radius="md" w={'100%'} className={accordionSt}>
+							<Accordion.Item value="Retention">
+								<Accordion.Control>Retention</Accordion.Control>
+								<Accordion.Panel>
+									<Box>
+										<Box sx={{ height: '500px' }}>
+											<Editor
+												onChange={handleRetentionQueryEditorChange}
+												value={retentionQuery}
+												defaultLanguage="json"
+												options={{
+													scrollBeyondLastLine: false,
+													readOnly: false,
+													fontSize: 12,
+													wordWrap: 'on',
+													minimap: { enabled: false },
+													automaticLayout: true,
+													mouseWheelZoom: true,
+													glyphMargin: true,
+												}}
+											/>
+										</Box>
+										<Button className={submitBtn} onClick={onSubmitRetentionQuery}>
+											Submit
+										</Button>
+									</Box>
+								</Accordion.Panel>
+							</Accordion.Item>
+						</Accordion>
+					</Box>
+				)}
+			</Box>
 		</Box>
 	);
 };

diff --git a/src/pages/Config/styles.tsx b/src/pages/Config/styles.tsx
@@ -1,13 +1,26 @@
 import { createStyles } from '@mantine/core';
 export const useConfigStyles = createStyles((theme) => {
-	const { spacing ,colors} = theme;
-	const { widths, } = theme.other;
+	const { spacing, colors } = theme;
+	const { widths } = theme.other;
 	return {
 		container: {
 			display: 'flex',
-			margin: spacing.md,
+			flexDirection: 'column',
 			flex: 1,
+			margin: spacing.xl,
+			gap: spacing.lg,
 		},
+		containerWrapper: {
+			display: 'flex',
+			gap: '20px',
+		},
+		primaryBtn: {
+			marginTop: spacing.md,
+			backgroundColor: theme.colors.brandPrimary[0],
+			color: theme.colors.white,
+			width: 'max-content',
+		},
+
 		submitBtn: {
 			marginTop: spacing.md,
 			backgroundColor: theme.colors.brandPrimary[0],
@@ -17,15 +30,13 @@ export const useConfigStyles = createStyles((theme) => {
 			borderRadius: '60px',
 			border: 'none',
 			'& .mantine-Accordion-item': {
-				border:`${widths.px} ${colors.gray[1]} solid`,
+				border: `${widths.px} ${colors.gray[1]} solid`,
 			},
 		},
 		innerContainer: {
 			width: '50%',
 			justifyContent: 'center',
 			display: 'flex',
 		},
-
 	};
 });
-