diff --git a/src/components/Header/SubHeader.tsx b/src/components/Header/SubHeader.tsx index 046a7dc0..765933bc 100644 --- a/src/components/Header/SubHeader.tsx +++ b/src/components/Header/SubHeader.tsx @@ -11,7 +11,7 @@ import { useLogQueryStyles } from './styles'; import { useMatch } from 'react-router-dom'; const SubHeader: FC = () => { const { classes } = useLogQueryStyles(); - const { container, innerContainer, homeIcon, activeBtn } = classes; + const { container, innerContainer, homeIcon } = classes; const { state: { subLogQuery }, } = useHeaderContext(); @@ -43,11 +43,13 @@ const SubHeader: FC = () => { Streams {streamName} - {useMatch('/:streamName/stats') && Stats } + {useMatch('/:streamName/stats') && Stats } - {useMatch('/:streamName/logs') && Logs } + {useMatch('/:streamName/logs') && Logs } - {useMatch('/:streamName/query') && Query } + {useMatch('/:streamName/query') && Query } + + {useMatch('/:streamName/config') && Config } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index a140d28f..d41ef3d0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -29,14 +29,14 @@ const Header: FC = (props) => { return ( - - Parseable Logo + + Parseable Logo subNavbarTogle.set((state) => !state)} - size={'sm'} + size={24} /> diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx index 969a5a41..b1a1d90d 100644 --- a/src/components/Header/styles.tsx +++ b/src/components/Header/styles.tsx @@ -20,17 +20,20 @@ export const useHeaderStyles = createStyles((theme) => { }, logoContainer: { display: 'flex', - alignItems: 'self-end', - width: NAVBAR_WIDTH, justifyContent: 'space-between', - // padding: spacing.md, + alignItems: 'center', + padding: spacing.md, + paddingRight:0, + width: NAVBAR_WIDTH, + height: "24px", + }, imageSty: { - marginLeft: spacing.md, + }, burgerIcon: { - size: '24px', - color: theme.colors.gray[7], + + }, navContainer: { width: `calc(100% - ${NAVBAR_WIDTH}px)`, @@ -55,16 +58,10 @@ export const useLogQueryStyles = createStyles((theme) => { innerContainer: { display: 'flex', - paddingTop: spacing.xxs, color: colors.gray[6], }, homeIcon: { size: '24px', - strokeWidth: 1.0, - }, - activeBtn: { - color: colors.brandPrimary[0], - textDecoration: 'underline', }, intervalBtn: { diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index e36be286..e539687e 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -49,6 +49,7 @@ const Navbar: FC = (props) => { const [currentPage, setCurrentPage] = useState('/logs'); const [opened, { open, close }] = useDisclosure(false); const [ deleteStream, setDeleteStream] = useState(''); + const [disableLink, setDisableLink] = useState(false); const { container, linkBtnActive, @@ -71,7 +72,7 @@ const Navbar: FC = (props) => { const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false); const [openedDelete, { close:closeDelete, open:openDelete}] = useDisclosure(); let location = useLocation(); - const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDatalogStraeam} = useDeleteLogStream(); + const {data:deleteData, loading:deleteLoading, error:deleteError, deleteLogStreamFun , resetData: resetDeleteStraeam} = useDeleteLogStream(); useEffect(() => { const listener = subNavbarTogle.subscribe(setIsSubNavbarOpen); @@ -96,10 +97,27 @@ const Navbar: FC = (props) => { } = useHeaderContext(); useEffect(() => { - if (streamName) { + if(streams && streams.length!==0 && !streams.find((stream)=>stream.name===streamName)&& streamName && streamName===deleteStream){ + + navigate(`/${streams[0].name}/query`); + return; + } + else if(streamName&&streams && streams.length!==0 && !streams.find((stream)=>stream.name===streamName) ){ + notifications.show({ + id: 'error-data', + color: 'red', + title: 'Error Occured', + message: `${streamName} stream not found`, + icon: , + autoClose: 5000, + }); + + navigate(`/${streams[0].name}/query`); + return; + } + else if (streamName && streams?.length!==0 && streams?.find((stream)=>stream.name===streamName)) { setActiveStream(streamName); setSearchValue(streamName); - const now = dayjs(); subLogQuery.set((state) => { state.streamName = streamName || ''; @@ -155,6 +173,20 @@ const Navbar: FC = (props) => { autoClose: 2000, }); } + if(streams && streams.length===0){ + notifications.update({ + id: 'load-data', + color: 'red', + title: 'No Streams', + message: 'No Streams Found in your account', + icon: , + autoClose: 2000, + }); + setActiveStream(''); + setSearchValue(''); + setDisableLink(true); + navigate(`/`); + } }, [streams, error, loading]); const handleCloseDelete = () => { closeDelete(); @@ -188,7 +220,7 @@ const Navbar: FC = (props) => { icon: , autoClose: 1000, }); - resetDatalogStraeam(); + resetDeleteStraeam(); resetStreamArray(); getData(); return; @@ -238,6 +270,7 @@ const Navbar: FC = (props) => { label={link.label} icon={} sx={{ paddingLeft: 53 }} + disabled={disableLink} onClick={() => { navigate(`/${activeStream}${link.pathname}`); setCurrentPage(link.pathname); @@ -255,6 +288,7 @@ const Navbar: FC = (props) => { sx={{ paddingLeft: 53 }} onClick={openDelete} className={ linkBtn} + disabled={disableLink} /> {error &&
{error}
} {error && ( diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts index 99c87677..5732647d 100644 --- a/src/hooks/useQueryLogs.ts +++ b/src/hooks/useQueryLogs.ts @@ -139,7 +139,11 @@ export const useQueryLogs = () => { return; } - + if (typeof data === 'string' && data.includes('Stream is not initialized yet')) { + _dataRef.current = []; + return; + } + console.log(logsQueryRes); setError('Failed to query log'); } catch { setError('Failed to query log'); diff --git a/src/hooks/useQueryResult.ts b/src/hooks/useQueryResult.ts index 6f42618d..55855e2e 100644 --- a/src/hooks/useQueryResult.ts +++ b/src/hooks/useQueryResult.ts @@ -26,7 +26,7 @@ export const useQueryResult = () => { if (typeof data === 'string' && data.includes('Stream is not initialized yet')) { setData({ - data: [], + data: [data], }); return; } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 55052dd7..c8b8b698 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,10 +1,34 @@ +import { EmptySimple } from '@/components/Empty'; +import { Text, Button, Center } from '@mantine/core'; +import { IconExternalLink } from '@tabler/icons-react'; import type { FC } from 'react'; import { Navigate, useLocation } from 'react-router-dom'; +import { useHomeStyles } from './styles'; const Home: FC = () => { const location = useLocation(); - const pathname = location.state?.from?.pathname ?? '/'; - return ; + const pathname = location.state?.from?.pathname; + + const { classes } = useHomeStyles(); + const { container, messageStyle ,btnStyle} = classes; + if (pathname) { + return ; + } else { + return ( +
+ + No Stream found on this account + +
+ ); + } }; export default Home; diff --git a/src/pages/Home/styles.tsx b/src/pages/Home/styles.tsx new file mode 100644 index 00000000..bfd0bdd5 --- /dev/null +++ b/src/pages/Home/styles.tsx @@ -0,0 +1,26 @@ +import { NAVBAR_WIDTH } from '@/constants/theme'; +import { createStyles } from '@mantine/core'; +export const useHomeStyles = createStyles((theme) => { + const { spacing ,colors} = theme; + return { + container: { + height: '100%', + width: `calc(100% - ${NAVBAR_WIDTH}px)`, + paddingTop: spacing.xl, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + messageStyle: { + marginTop: spacing.md, + color: colors.dimmed[0], + }, + btnStyle: { + marginTop: spacing.md, + color: colors.white, + backgroundColor: colors.brandPrimary[0], + }, + + }; +}); + diff --git a/src/pages/Logs/LogTable.tsx b/src/pages/Logs/LogTable.tsx index e7152bd6..3b64282b 100644 --- a/src/pages/Logs/LogTable.tsx +++ b/src/pages/Logs/LogTable.tsx @@ -248,7 +248,7 @@ const LogTable: FC = () => { ) : ( - + ) ) : ( diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 564f60a4..5972cbb6 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -2,7 +2,7 @@ import React, { FC, useEffect } from 'react'; import Editor from '@monaco-editor/react'; import { useQueryPageContext } from './Context'; import { useHeaderContext } from '@/layouts/MainLayout/Context'; -import { Box, Button, Text, px } from '@mantine/core'; +import { Box, Button, Text, Tooltip, px } from '@mantine/core'; import { useQueryResult } from '@/hooks/useQueryResult'; import { ErrorMarker, errChecker } from './ErrorMarker'; import { notifications } from '@mantine/notifications'; @@ -64,6 +64,12 @@ const QueryCodeEditor: FC = () => { function handleEditorDidMount(editor: any, monaco: any) { editorRef.current = editor; monacoRef.current = monaco; + editor.addCommand( + monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter, + async () => { + runQuery(); + }, + ); } const runQuery = () => { resetData(); @@ -122,12 +128,18 @@ const QueryCodeEditor: FC = () => { Query - + + + diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx index c311c72d..7fdc0d54 100644 --- a/src/pages/Stats/Status.tsx +++ b/src/pages/Stats/Status.tsx @@ -38,6 +38,7 @@ const Status: FC = () => { useDocumentTitle('Parseable | Login'); const [statusFIXEDDURATIONS, setStatusFIXEDDURATIONS] = useMountedState(0); const [status, setStatus] = useMountedState("Loading...."); + const [statusSuccess, setStatusSuccess] = useMountedState(true); FIXED_DURATIONS const { state: { subLogQuery }, @@ -103,10 +104,12 @@ const Status: FC = () => { useEffect(() => { if (queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]) { setStatus(`${queryResult?.data[0]["COUNT(UInt8(1))"]} events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`); + setStatusSuccess(true); return; } if (errorQueryResult) { setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS-1].name}`); + setStatusSuccess(false); return; } if(queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]&&queryResult?.data[0]["COUNT(UInt8(1))"]===0){ @@ -118,10 +121,12 @@ const Status: FC = () => { } else{ setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`); + setStatusSuccess(false); } } else{ - setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`); + setStatus(`Not Recieved any events`); + setStatusSuccess(false); return; } }, [queryResult, errorQueryResult]); @@ -135,12 +140,13 @@ const Status: FC = () => { genterateText, genterateTextResult, StatsContainer, + statusTextFailed, } = classes; return ( - Status: {status} + Status: {status} @@ -163,7 +169,7 @@ const Status: FC = () => { ? !errorStat ? dataStat?.ingestion?.count ? convert(dataStat.ingestion.count) - : 'NotFound' + : '0' : 'ERROR' : 'Loading...', description: `No of events received: ${dataStat?.ingestion.count}`, @@ -204,15 +210,15 @@ const Status: FC = () => { value: !loadingStat ? !errorStat ? dataStat?.ingestion?.size - ? `${( + ? `${(100- (parseInt(dataStat.storage.size.split(' ')[0]) / parseInt(dataStat.ingestion.size.split(' ')[0])) * - 100 + 100 ).toPrecision(4)} %` : 'NotFound' : 'ERROR' : 'Loading...', - description: 'Compression percentage= storage used / size of events *100 ', + description: 'Compression percentage= 100 - storage used / size of events *100', title: 'Compression ', }} /> diff --git a/src/pages/Stats/styles.tsx b/src/pages/Stats/styles.tsx index ee26d57f..4afb68b0 100644 --- a/src/pages/Stats/styles.tsx +++ b/src/pages/Stats/styles.tsx @@ -37,6 +37,9 @@ export const useStatusStyles = createStyles((theme) => { statusTextResult: { color: '#00CC14', }, + statusTextFailed:{ + color: '#FF0000', + }, genterateContiner: { marginRight: spacing.sm, },