diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index b0b192ee..57cfc033 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -94,7 +94,7 @@ const Navbar: FC = (props) => { if (streamName) { setActiveStream(streamName); setSearchValue(streamName); - if (currentPage !== location.pathname) { + const now = dayjs(); subLogQuery.set((state) => { state.streamName = streamName || ''; @@ -107,8 +107,6 @@ const Navbar: FC = (props) => { state.filters = {}; }); subRefreshInterval.set(null); - setCurrentPage(location.pathname); - } } else if (streams && Boolean(streams.length)) { navigate(`/${streams[0].name}/query`); } @@ -117,7 +115,7 @@ const Navbar: FC = (props) => { const handleChange = (value: string) => { setActiveStream(value); setSearchValue(value); - navigate(`/${value}/logs`); + navigate(`/${value}${currentPage}`); }; useEffect(() => { @@ -184,6 +182,7 @@ const Navbar: FC = (props) => { sx={{ paddingLeft: 53 }} onClick={() => { navigate(`/${activeStream}${link.pathname}`); + setCurrentPage(link.pathname); }} key={link.label} className={ diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 3f8420c5..04545b5d 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -44,9 +44,16 @@ const QueryCodeEditor: FC = () => { useEffect(() => { const listener = subSchemaToggle.subscribe(setIsSchemaOpen); const refreshIntervalListener = subRefreshInterval.subscribe(setRefreshInterval); + const subQueryListener = subLogQuery.subscribe((state) => { + if (state.streamName) { + setQuery(`SELECT * FROM ${state.streamName} LIMIT 100;`); + result.set(''); + } + }); return () => { listener(); refreshIntervalListener(); + subQueryListener(); }; }, [subSchemaToggle.get()]); diff --git a/src/pages/Query/QuerySchemaList.tsx b/src/pages/Query/QuerySchemaList.tsx index 059be4db..92ab6698 100644 --- a/src/pages/Query/QuerySchemaList.tsx +++ b/src/pages/Query/QuerySchemaList.tsx @@ -15,14 +15,25 @@ const QuerySchemaList: FC = () => { state: { subSchemaToggle }, } = useQueryPageContext(); + useEffect(() => { - if (subLogQuery.get().streamName) { + const subSchemaToggleListener = subSchemaToggle.subscribe((state) => { + if (state) { + getDataSchema(subLogQuery.get().streamName); + } + }); + const subQueryListener = subLogQuery.subscribe((state) => { if (querySchema) { resetData(); } - getDataSchema(subLogQuery.get().streamName); - } - }, [subLogQuery.get()]); + getDataSchema(state.streamName); + }); + return () => { + subQueryListener(); + subSchemaToggleListener(); + }; + }, [querySchema]); + const renderList = querySchema?.fields.map((field, index) => { if (typeof field.data_type === 'string') @@ -61,7 +72,7 @@ const QuerySchemaList: FC = () => { - + diff --git a/src/pages/Stats/Alerts.tsx b/src/pages/Stats/Alerts.tsx index 70b1102a..0d474dc8 100644 --- a/src/pages/Stats/Alerts.tsx +++ b/src/pages/Stats/Alerts.tsx @@ -2,11 +2,12 @@ import { useGetLogStreamAlert } from '@/hooks/useGetLogStreamAlert'; import { useHeaderContext } from '@/layouts/MainLayout/Context'; import { Box, Button, Modal, ScrollArea, Text, px } from '@mantine/core'; import { useDisclosure, useDocumentTitle } from '@mantine/hooks'; -import { FC, useEffect } from 'react'; +import { FC, useEffect, useRef } from 'react'; import { useAlertsStyles } from './styles'; import { IconArrowsMaximize } from '@tabler/icons-react'; import { Prism } from '@mantine/prism'; import useMountedState from '@/hooks/useMountedState'; +import { heights } from '@/components/Mantine/sizing'; const Alerts: FC = () => { useDocumentTitle('Parseable | Login'); @@ -15,52 +16,77 @@ const Alerts: FC = () => { } = useHeaderContext(); const { data, error, loading, getLogAlert, resetData } = useGetLogStreamAlert(); const [opened, { open, close }] = useDisclosure(false); - const [Alert, setAlert] = useMountedState({name: "Loading...."}); + const [Alert, setAlert] = useMountedState({ name: 'Loading....' }); + const AlertsWrapper = useRef(null); + const [editorHeight, setEditorHeight] = useMountedState(0); useEffect(() => { - getLogAlert(subLogQuery.get().streamName); + const subQueryListener = subLogQuery.subscribe((state) => { + if (data) { + resetData(); + } + getLogAlert(state.streamName); + }); return () => { - resetData(); + subQueryListener(); }; - }, [subLogQuery]); - + }, [data]); + useEffect(() => { + if (data) { + resetData(); + } + getLogAlert(subLogQuery.get().streamName); + }, []); + + useEffect(() => { + setEditorHeight(AlertsWrapper.current?.offsetTop ? AlertsWrapper.current?.offsetTop + 15 : 0); + }, [heights.full, AlertsWrapper]); const { classes } = useAlertsStyles(); - const { container, headContainer, alertsText, alertsContainer, alertContainer, expandButton } = classes; - + const { container, headContainer, alertsText, alertsContainer, alertContainer, expandButton } = + classes; + return ( - + Alerts - {!loading - ? error - ? 'ERROR' - : data - ? data.alerts.map((item: any,index:number) => { - return ( - - Name: {item.name} - - - ); - }) - : 'Not found' - : 'Loading'} + + + + ); + }) + ) : ( + No Alert set for {subLogQuery.get().streamName} + ) + ) : ( + 'Loading' + )} - {JSON.stringify(Alert,null,2)} + {JSON.stringify(Alert, null, 2)} - + ); }; - export default Alerts; diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx index 2d0bad20..1eb556de 100644 --- a/src/pages/Stats/Status.tsx +++ b/src/pages/Stats/Status.tsx @@ -140,7 +140,7 @@ const Status: FC = () => { - Genterated at : {!loadingStat + Generated at : {!loadingStat ? errorStat ? 'ERROR' : dataStat @@ -246,7 +246,7 @@ const StatCard: FC = (props) => { - + diff --git a/src/pages/Stats/styles.tsx b/src/pages/Stats/styles.tsx index d5015f33..ee26d57f 100644 --- a/src/pages/Stats/styles.tsx +++ b/src/pages/Stats/styles.tsx @@ -54,7 +54,7 @@ export const useStatusStyles = createStyles((theme) => { display: 'flex', flexDirection: 'row', padding: spacing.md, - borderBottom: `${widths.px} ${colors.gray[1]} solid`, + paddingBottom: 0, justifyContent: 'space-between', }, }; @@ -106,18 +106,30 @@ export const useStatCardStyles = createStyles((theme) => { }); export const useAlertsStyles = createStyles((theme) => { - const { colors, other, spacing, fontSizes } = theme; + const { colors, other, spacing, fontSizes,radius } = theme; const { fontWeights, widths ,sizing} = other; + const defaultRadius = radius[theme.defaultRadius as string]; + return { container: { - height: '50%', + overflow: 'auto', + borderRadius: defaultRadius, + margin: spacing.md, + border: `${widths.px} ${colors.gray[1]} solid`, + }, headContainer: { padding: spacing.md, + width: '100%', height: '55px', + top: 0, + position: "sticky", + backgroundColor: colors.white, + zIndex: 1, borderBottom: `${widths.px} ${colors.gray[1]} solid`, + }, alertsText: { fontSize: fontSizes.md,
FeildField Type