= (props) => {
) : (
- Error
+ <>
)}
|
diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx
index 808f0b2d..52b7a5ad 100644
--- a/src/pages/AccessManagement/RoleTR.tsx
+++ b/src/pages/AccessManagement/RoleTR.tsx
@@ -27,7 +27,7 @@ interface RoleTRProps {
id: string;
method: string;
};
- deleteUserMutation: (data: { userName: string }) => void;
+ deleteUserMutation: (data: { userName: string, onSuccess?: () => void; }) => void;
updateUserPasswordIsError: boolean;
getUserRolesIsError: boolean;
getUserRolesIsLoading: boolean;
@@ -35,6 +35,7 @@ interface RoleTRProps {
updateUserPasswordIsLoading: boolean;
udpateUserPasswordData: AxiosResponse | undefined;
resetPasswordError: string;
+ getUserRefetch: () => void;
}
const RoleTR: FC = (props) => {
@@ -117,7 +118,7 @@ const RoleTR: FC = (props) => {
};
const handleDelete = () => {
- deleteUserMutation({ userName: user.id });
+ deleteUserMutation({ userName: user.id, onSuccess: props.getUserRefetch });
closeDelete();
setUserInput('');
};
@@ -173,7 +174,7 @@ const RoleTR: FC = (props) => {
) : getUserRolesIsLoading ? (
'loading..'
) : getUserRolesData?.data ? (
-
+
{getBadges()}
= (props) => {
) : (
- Error
+ <>
)}
|
diff --git a/src/pages/AccessManagement/Users.tsx b/src/pages/AccessManagement/Users.tsx
index 1483d129..816ee207 100644
--- a/src/pages/AccessManagement/Users.tsx
+++ b/src/pages/AccessManagement/Users.tsx
@@ -74,6 +74,7 @@ const Users: FC = () => {
updateUserPasswordIsLoading={updateUserPasswordIsLoading}
udpateUserPasswordData={udpateUserPasswordData}
resetPasswordError={resetPasswordError}
+ getUserRefetch={getUserRefetch}
/>
);
})
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 37e07281..654fd62e 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -4,7 +4,6 @@ import { IconChevronRight, IconExternalLink } from '@tabler/icons-react';
import { useEffect, type FC, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDocumentTitle } from '@mantine/hooks';
-import { useLogStream } from '@/hooks/useLogStream';
import { useGetStreamMetadata } from '@/hooks/useGetStreamMetadata';
import { HumanizeNumber, formatBytes } from '@/utils/formatBytes';
import { LogStreamRetention, LogStreamStat } from '@/@types/parseable/api/stream';
@@ -35,29 +34,24 @@ const Home: FC = () => {
useDocumentTitle('Parseable | Streams');
const classes = homeStyles;
const { container } = classes;
- const { getLogStreamListData, getLogStreamListIsLoading, getLogStreamListIsError } = useLogStream();
const {
methods: { streamChangeCleanup },
+ state: { userSpecficStreams }
} = useHeaderContext();
const navigate = useNavigate();
const { getStreamMetadata, metaData } = useGetStreamMetadata();
- const streams = Array.isArray(getLogStreamListData?.data)
- ? getLogStreamListData?.data.map((stream) => stream.name) || []
- : [];
-
useEffect(() => {
- if (streams.length === 0) return;
- getStreamMetadata(streams);
- }, [getLogStreamListData?.data]);
+ if (!Array.isArray(userSpecficStreams) || userSpecficStreams.length === 0) return;
+ getStreamMetadata(userSpecficStreams.map((stream) => stream.name));
+ }, [userSpecficStreams]);
const navigateToStream = useCallback((stream: string) => {
streamChangeCleanup(stream);
navigate(`/${stream}/logs`);
}, []);
- if (getLogStreamListIsError || getLogStreamListIsLoading) return null; // implement loading state
- if (streams.length === 0) return ;
+ if (Array.isArray(userSpecficStreams) && userSpecficStreams.length === 0) return ;
return (
diff --git a/src/pages/Logs/AlertsModal.tsx b/src/pages/Logs/AlertsModal.tsx
index be9b1f5e..285d221d 100644
--- a/src/pages/Logs/AlertsModal.tsx
+++ b/src/pages/Logs/AlertsModal.tsx
@@ -3,23 +3,44 @@ import { useLogsPageContext } from './logsContextProvider';
import { Text } from '@mantine/core';
import classes from './styles/Logs.module.css';
import { Editor } from '@monaco-editor/react';
+import { useCallback, useEffect, useState } from 'react';
+import { useAlertsEditor, useGetAlerts } from '@/hooks/useAlertsEditor';
+import { notifyError } from '@/utils/notification';
const ModalTitle = () => {
return Alerts;
};
-type AlertsModalProps = {
- data: any;
- handleChange: (value: string | undefined) => void;
- handleSubmit: () => void;
-};
-
-const AlertsModal = (props: AlertsModalProps) => {
+const AlertsModal = () => {
+ const [alertConfig, setAlertConfig] = useState('');
const {
- state: { alertsModalOpen },
+ state: { alertsModalOpen, currentStream },
methods: { closeAlertsModal },
} = useLogsPageContext();
+ const { getLogAlertData } = useGetAlerts(currentStream);
+ const { updateLogStreamAlerts } = useAlertsEditor(currentStream);
+
+ const onSubmit = useCallback(() => {
+ if (alertConfig) {
+ let parsedConfig;
+ try {
+ parsedConfig = JSON.parse(alertConfig);
+ } catch (e) {
+ return notifyError({ message: 'Unable to parse config' });
+ }
+ updateLogStreamAlerts(parsedConfig);
+ } else {
+ return notifyError({ message: 'Unable to parse config' });
+ }
+ }, [alertConfig]);
+
+ useEffect(() => {
+ if (getLogAlertData?.data) {
+ setAlertConfig(JSON.stringify(getLogAlertData?.data, null, 2));
+ }
+ }, [getLogAlertData?.data]);
+
return (
{
{
/>
-
diff --git a/src/pages/Logs/LogTable.tsx b/src/pages/Logs/LogTable.tsx
index 16c47a2e..db630d92 100644
--- a/src/pages/Logs/LogTable.tsx
+++ b/src/pages/Logs/LogTable.tsx
@@ -17,6 +17,7 @@ import {
Loader,
Group,
Stack,
+ Tooltip,
} from '@mantine/core';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import type { FC } from 'react';
@@ -70,11 +71,11 @@ const TotalLogsCount = (props: TotalLogsCountProps) => {
const { totalCount, loadedCount } = props;
if (typeof totalCount !== 'number' || typeof loadedCount !== 'number') return ;
+ const renderTotalCount = useCallback(() => ({HumanizeNumber(totalCount)}), [totalCount]);
return (
-
- {`Showing ${loadedCount < LOAD_LIMIT ? loadedCount : LOAD_LIMIT} out of ${HumanizeNumber(
- totalCount,
- )} records`}
+
+ {`Showing ${loadedCount < LOAD_LIMIT ? loadedCount : LOAD_LIMIT} out of`}
+ {renderTotalCount()}
);
};
@@ -127,6 +128,8 @@ const LogTable: FC = () => {
};
const currentStreamName = subLogQuery.get().streamName;
+ const startTime = subLogQuery.get().startTime;
+ const endTime = subLogQuery.get().endTime;
const { fetchQueryMutation } = useQueryResult();
const fetchCount = useCallback(() => {
const queryContext = subLogQuery.get();
@@ -137,8 +140,8 @@ const LogTable: FC = () => {
if (queryContext && query?.length > 0) {
const logsQuery = {
streamName: queryContext.streamName,
- startTime: queryContext.startTime,
- endTime: queryContext.endTime,
+ startTime: startTime,
+ endTime: endTime,
access: [],
};
fetchQueryMutation.mutate({
@@ -146,7 +149,7 @@ const LogTable: FC = () => {
query,
});
}
- }, [currentStreamName, isQuerySearchActive, custSearchQuery]);
+ }, [currentStreamName, isQuerySearchActive, custSearchQuery, startTime, endTime]);
useEffect(() => {
resetQuerySearch();
@@ -257,7 +260,7 @@ const LogTable: FC = () => {
if (pageOffset === 0 && subLogQuery.get()) {
fetchCount();
}
- }, [currentStreamName, isQuerySearchActive, custSearchQuery]);
+ }, [currentStreamName, isQuerySearchActive, custSearchQuery, startTime, endTime]);
useEffect(() => {
const streamErrorListener = subLogStreamError.subscribe(setLogStreamError);
diff --git a/src/pages/Logs/RetentionModal.tsx b/src/pages/Logs/RetentionModal.tsx
index 2576d79c..25b14ea9 100644
--- a/src/pages/Logs/RetentionModal.tsx
+++ b/src/pages/Logs/RetentionModal.tsx
@@ -3,29 +3,50 @@ import { useLogsPageContext } from './logsContextProvider';
import { Text } from '@mantine/core';
import classes from './styles/Logs.module.css';
import { Editor } from '@monaco-editor/react';
+import { useCallback, useEffect, useState } from 'react';
+import { useCacheToggle } from '@/hooks/useCacheToggle';
+import { useGetRetention, useRetentionEditor } from '@/hooks/useRetentionEditor';
+import { notifyError } from '@/utils/notification';
const ModalTitle = () => {
return Settings;
};
-type RetentionModalProps = {
- data: any;
- handleChange: (value: string | undefined) => void;
- handleSubmit: () => void;
- handleCacheToggle: () => void;
- isCacheEnabled: boolean;
-};
-
-const RententionModal = (props: RetentionModalProps) => {
+const RententionModal = () => {
+ const [retentionConfig, setRetentionConfig] = useState('');
const {
- state: { retentionModalOpen },
+ state: { retentionModalOpen, currentStream },
methods: { closeRetentionModal },
} = useLogsPageContext();
- const { isCacheEnabled, handleCacheToggle } = props;
+ const { handleCacheToggle, isCacheEnabled } = useCacheToggle(currentStream);
+
+ const { getLogRetentionData } = useGetRetention(currentStream);
+ const {updateLogStreamRetention} = useRetentionEditor(currentStream);
+
const switchStyles = {
track: isCacheEnabled ? classes.trackStyle : {},
};
+ const onSubmit = useCallback(() => {
+ if (retentionConfig) {
+ let parsedConfig;
+ try {
+ parsedConfig = JSON.parse(retentionConfig);
+ } catch (e) {
+ return notifyError({ message: 'Unable to parse config' });
+ }
+ updateLogStreamRetention(parsedConfig);
+ } else {
+ return notifyError({ message: 'Unable to parse config' });
+ }
+ }, []);
+
+ useEffect(() => {
+ if (getLogRetentionData?.data) {
+ setRetentionConfig(JSON.stringify(getLogRetentionData?.data, null, 2));
+ }
+ }, [getLogRetentionData?.data]);
+
return (
{
Retention
{
/>
-
diff --git a/src/pages/Logs/index.tsx b/src/pages/Logs/index.tsx
index 9cef4972..86a3d220 100644
--- a/src/pages/Logs/index.tsx
+++ b/src/pages/Logs/index.tsx
@@ -11,9 +11,6 @@ import { useLogsPageContext } from './logsContextProvider';
import PrimaryToolbar from './PrimaryToolbar';
import SecondaryToolbar from './SecondaryToolbar';
import { useHeaderContext } from '@/layouts/MainLayout/Context';
-import { useAlertsEditor } from '@/hooks/useAlertsEditor';
-import { useRetentionEditor } from '@/hooks/useRetentionEditor';
-import { useCacheToggle } from '@/hooks/useCacheToggle';
const Logs: FC = () => {
useDocumentTitle('Parseable | Logs');
@@ -21,24 +18,14 @@ const Logs: FC = () => {
state: { maximized },
} = useHeaderContext();
const {
- state: { liveTailToggled, currentStream },
+ state: { liveTailToggled },
} = useLogsPageContext();
- const { handleAlertQueryChange, submitAlertQuery, getLogAlertData } = useAlertsEditor(currentStream);
- const { handleRetentionQueryChange, submitRetentionQuery, getLogRetentionData } = useRetentionEditor(currentStream);
- const { handleCacheToggle, isCacheEnabled } = useCacheToggle(currentStream);
-
return (
-
-
+
+
{!maximized && (
<>
diff --git a/src/utils/notification.ts b/src/utils/notification.ts
index 661005b6..69e289e5 100644
--- a/src/utils/notification.ts
+++ b/src/utils/notification.ts
@@ -1,11 +1,11 @@
import type { NotificationData } from '@mantine/notifications';
import { showNotification } from '@mantine/notifications';
-export const notifyError = (payload: NotificationData) => {
- const title = ['string', 'undefined'].includes(typeof payload?.title) ? payload?.title : 'Oops!';
+export const notifyError = (payload?: NotificationData) => {
+ const title = payload?.title || 'Oops!';
const message = payload?.message || 'Something went wrong!.';
const color = payload?.color || 'red';
- const autoClose = payload?.autoClose || 6000;
+ const autoClose = payload?.autoClose || 3000;
showNotification({
...payload,
title,
@@ -15,23 +15,26 @@ export const notifyError = (payload: NotificationData) => {
})
};
-export const notify = (payload: NotificationData) => {
- const color = payload.color || 'green';
- const autoClose = payload.autoClose || 6000;
+export const notifySuccess = (payload?: NotificationData) => {
+ const title = payload?.title || 'Success!';
+ const message = payload?.message || 'Done';
+ const color = payload?.color || 'green';
+ const autoClose = payload?.autoClose || 3000;
showNotification({
...payload,
+ title,
+ message,
color,
autoClose,
- });
-};
-
-export const notifyApi = (payload: NotificationData, customTitle: boolean = true) => {
- const autoClose = payload.autoClose ?? 3000;
- const title = customTitle && payload.color === 'green' ? 'Success' : 'Error';
+ })
+};
+export const notify = (payload: NotificationData) => {
+ const color = payload.color || 'green';
+ const autoClose = payload.autoClose || 3000;
showNotification({
...payload,
+ color,
autoClose,
- title,
});
-};
+};
\ No newline at end of file
|