GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-10-18 04:11:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: antdv5 notfications (#2161)

Browse Source 
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
GitStart 2023-02-02 14:08:32 +08:00 committed by GitHub
parent 17f32e9765
commit 846da08cbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 744 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/AppRoutes/Private.tsx
View File

@ -47,6 +47,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
const dispatch = useDispatch<Dispatch<AppActions>>();
const [notifications, NotificationElement] = notification.useNotification();
const currentRoute = mapRoutes.get('current');
const navigateToLoginIfNotLoggedIn = (isLoggedIn = isLoggedInState): void => {
@ -106,7 +108,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
} else {
Logout();
notification.error({
notifications.error({
message: response.error || t('something_went_wrong'),
});
}
@ -155,7 +157,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
// NOTE: disabling this rule as there is no need to have div
// eslint-disable-next-line react/jsx-no-useless-fragment
return <>{children}</>;
return (
<>
{NotificationElement}
{children}
</>
);
}
interface PrivateRouteProps {

7
frontend/src/components/Logs/CopyClipboardHOC.tsx
View File

@ -7,14 +7,14 @@ function CopyClipboardHOC({
children,
}: CopyClipboardHOCProps): JSX.Element {
const [value, setCopy] = useCopyToClipboard();
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (value.value) {
notification.success({
notifications.success({
message: 'Copied to clipboard',
});
}
}, [value]);
}, [value, notifications]);
const onClick = useCallback((): void => {
setCopy(textToCopy);
@ -22,6 +22,7 @@ function CopyClipboardHOC({
return (
<span onClick={onClick} onKeyDown={onClick} role="button" tabIndex={0}>
{NotificationElement}
<Popover
placement="top"
content={<span style={{ fontSize: '0.9rem' }}>Copy to clipboard</span>}

4
frontend/src/components/Logs/LogItem/index.tsx
View File

@ -79,6 +79,7 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
const dispatch = useDispatch();
const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
const [, setCopy] = useCopyToClipboard();
const [notifications, NotificationElement] = notification.useNotification();
const handleDetailedView = useCallback(() => {
dispatch({
@ -89,13 +90,14 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
const handleCopyJSON = (): void => {
setCopy(JSON.stringify(logData, null, 2));
notification.success({
notifications.success({
message: 'Copied to clipboard',
});
};
return (
<Container>
{NotificationElement}
<div>
<div>
{'{'}

38
frontend/src/container/AllError/index.tsx
View File

@ -127,14 +127,15 @@ function AllErrors(): JSX.Element {
enabled: !loading,
},
]);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (data?.error) {
notification.error({
notifications.error({
message: data.error || t('something_went_wrong'),
});
}
}, [data?.error, data?.payload, t]);
}, [data?.error, data?.payload, t, notifications]);
const getDateValue = (value: string): JSX.Element => (
<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>
@ -379,21 +380,24 @@ function AllErrors(): JSX.Element {
);
return (
<Table
tableLayout="fixed"
dataSource={data?.payload as Exception[]}
columns={columns}
rowKey="firstSeen"
loading={isLoading || false || errorCountResponse.status === 'loading'}
pagination={{
pageSize: getUpdatedPageSize,
responsive: true,
current: getUpdatedOffset / 10 + 1,
position: ['bottomLeft'],
total: errorCountResponse.data?.payload || 0,
}}
onChange={onChangeHandler}
/>
<>
{NotificationElement}
<Table
tableLayout="fixed"
dataSource={data?.payload as Exception[]}
columns={columns}
rowKey="firstSeen"
loading={isLoading || false || errorCountResponse.status === 'loading'}
pagination={{
pageSize: getUpdatedPageSize,
responsive: true,
current: getUpdatedOffset / 10 + 1,
position: ['bottomLeft'],
total: errorCountResponse.data?.payload || 0,
}}
onChange={onChangeHandler}
/>
</>
);
}

8
frontend/src/container/AppLayout/index.tsx
View File

@ -91,6 +91,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
const latestVersionCounter = useRef(0);
const latestConfigCounter = useRef(0);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (
getUserLatestVersionResponse.isFetched &&
@ -105,7 +107,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
isError: true,
},
});
notification.error({
notifications.error({
message: t('oops_something_went_wrong_version'),
});
}
@ -123,7 +125,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
isError: true,
},
});
notification.error({
notifications.error({
message: t('oops_something_went_wrong_version'),
});
}
@ -219,12 +221,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
getDynamicConfigsResponse.data,
getDynamicConfigsResponse.isFetched,
getDynamicConfigsResponse.isSuccess,
notifications,
]);
const isToDisplayLayout = isLoggedIn;
return (
<Layout>
{NotificationElement}
{isToDisplayLayout && <Header />}
<Layout>
{isToDisplayLayout && <SideNav />}

7
frontend/src/container/ErrorDetails/index.tsx
View File

@ -77,13 +77,15 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
[],
);
const [notifications, NotificationElement] = notification.useNotification();
const onClickErrorIdHandler = async (
id: string,
timestamp: string,
): Promise<void> => {
try {
if (id.length === 0) {
notification.error({
notifications.error({
message: 'Error Id cannot be empty',
});
return;
@ -95,7 +97,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
);
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong'),
});
}
@ -116,6 +118,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
return (
<>
{NotificationElement}
<Typography>{errorDetail.exceptionType}</Typography>
<Typography>{errorDetail.exceptionMessage}</Typography>
<Divider />

33
frontend/src/container/FormAlertRules/ChannelSelect/index.tsx
View File

@ -20,12 +20,14 @@ function ChannelSelect({
const { loading, payload, error, errorMessage } = useFetch(getChannels);
const [notifications, NotificationElement] = notification.useNotification();
const handleChange = (value: string[]): void => {
onSelectChannels(value);
};
if (error && errorMessage !== '') {
notification.error({
notifications.error({
message: 'Error',
description: errorMessage,
});
@ -48,19 +50,22 @@ function ChannelSelect({
return children;
};
return (
<StyledSelect
status={error ? 'error' : ''}
mode="multiple"
style={{ width: '100%' }}
placeholder={t('placeholder_channel_select')}
value={currentValue}
onChange={(value): void => {
handleChange(value as string[]);
}}
optionLabelProp="label"
>
{renderOptions()}
</StyledSelect>
<>
{NotificationElement}
<StyledSelect
status={error ? 'error' : ''}
mode="multiple"
style={{ width: '100%' }}
placeholder={t('placeholder_channel_select')}
value={currentValue}
onChange={(value): void => {
handleChange(value as string[]);
}}
optionLabelProp="label"
>
{renderOptions()}
</StyledSelect>
</>
);
}

6
frontend/src/container/FormAlertRules/QuerySection.tsx
View File

@ -163,10 +163,11 @@ function QuerySection({
...allQueries,
});
};
const [notifications, NotificationElement] = notification.useNotification();
const addMetricQuery = useCallback(() => {
if (Object.keys(metricQueries).length > 5) {
notification.error({
notifications.error({
message: t('metric_query_max_limit'),
});
return;
@ -191,7 +192,7 @@ function QuerySection({
expression: queryLabel,
};
setMetricQueries({ ...queries });
}, [t, getNextQueryLabel, metricQueries, setMetricQueries]);
}, [t, getNextQueryLabel, metricQueries, setMetricQueries, notifications]);
const addFormula = useCallback(() => {
// defaulting to F1 as only one formula is supported
@ -350,6 +351,7 @@ function QuerySection({
};
return (
<>
{NotificationElement}
<StepHeading> {t('alert_form_step1')}</StepHeading>
<FormContainer>
<div style={{ display: 'flex' }}>{renderTabs(alertType)}</div>

61
frontend/src/container/FormAlertRules/index.tsx
View File

@ -190,12 +190,14 @@ function FormAlertRules({
});
}
};
const [notifications, NotificationElement] = notification.useNotification();
const validatePromParams = useCallback((): boolean => {
let retval = true;
if (queryCategory !== EQueryType.PROM) return retval;
if (!promQueries || Object.keys(promQueries).length === 0) {
notification.error({
notifications.error({
message: 'Error',
description: t('promql_required'),
});
@ -204,7 +206,7 @@ function FormAlertRules({
Object.keys(promQueries).forEach((key) => {
if (promQueries[key].query === '') {
notification.error({
notifications.error({
message: 'Error',
description: t('promql_required'),
});
@ -213,14 +215,14 @@ function FormAlertRules({
});
return retval;
}, [t, promQueries, queryCategory]);
}, [t, promQueries, queryCategory, notifications]);
const validateChQueryParams = useCallback((): boolean => {
let retval = true;
if (queryCategory !== EQueryType.CLICKHOUSE) return retval;
if (!chQueries || Object.keys(chQueries).length === 0) {
notification.error({
notifications.error({
message: 'Error',
description: t('chquery_required'),
});
@ -229,7 +231,7 @@ function FormAlertRules({
Object.keys(chQueries).forEach((key) => {
if (chQueries[key].rawQuery === '') {
notification.error({
notifications.error({
message: 'Error',
description: t('chquery_required'),
});
@ -238,14 +240,14 @@ function FormAlertRules({
});
return retval;
}, [t, chQueries, queryCategory]);
}, [t, chQueries, queryCategory, notifications]);
const validateQBParams = useCallback((): boolean => {
let retval = true;
if (queryCategory !== EQueryType.QUERY_BUILDER) return true;
if (!metricQueries || Object.keys(metricQueries).length === 0) {
notification.error({
notifications.error({
message: 'Error',
description: t('condition_required'),
});
@ -253,7 +255,7 @@ function FormAlertRules({
}
if (!alertDef.condition?.target) {
notification.error({
notifications.error({
message: 'Error',
description: t('target_missing'),
});
@ -262,7 +264,7 @@ function FormAlertRules({
Object.keys(metricQueries).forEach((key) => {
if (metricQueries[key].metricName === '') {
notification.error({
notifications.error({
message: 'Error',
description: t('metricname_missing', { where: metricQueries[key].name }),
});
@ -272,7 +274,7 @@ function FormAlertRules({
Object.keys(formulaQueries).forEach((key) => {
if (formulaQueries[key].expression === '') {
notification.error({
notifications.error({
message: 'Error',
description: t('expression_missing', formulaQueries[key].name),
});
@ -280,11 +282,11 @@ function FormAlertRules({
}
});
return retval;
}, [t, alertDef, queryCategory, metricQueries, formulaQueries]);
}, [t, alertDef, queryCategory, metricQueries, formulaQueries, notifications]);
const isFormValid = useCallback((): boolean => {
if (!alertDef.alert || alertDef.alert === '') {
notification.error({
notifications.error({
message: 'Error',
description: t('alertname_required'),
});
@ -300,7 +302,14 @@ function FormAlertRules({
}
return validateQBParams();
}, [t, validateQBParams, validateChQueryParams, alertDef, validatePromParams]);
}, [
t,
validateQBParams,
validateChQueryParams,
alertDef,
validatePromParams,
notifications,
]);
const preparePostData = (): AlertDef => {
const postableAlert: AlertDef = {
@ -348,7 +357,7 @@ function FormAlertRules({
const response = await saveAlertApi(apiReq);
if (response.statusCode === 200) {
notification.success({
notifications.success({
message: 'Success',
description:
!ruleId || ruleId === 0 ? t('rule_created') : t('rule_edited'),
@ -361,19 +370,26 @@ function FormAlertRules({
history.replace(ROUTES.LIST_ALL_ALERT);
}, 2000);
} else {
notification.error({
notifications.error({
message: 'Error',
description: response.error || t('unexpected_error'),
});
}
} catch (e) {
notification.error({
notifications.error({
message: 'Error',
description: t('unexpected_error'),
});
}
setLoading(false);
}, [t, isFormValid, ruleId, ruleCache, memoizedPreparePostData]);
}, [
t,
isFormValid,
ruleId,
ruleCache,
memoizedPreparePostData,
notifications,
]);
const onSaveHandler = useCallback(async () => {
const content = (
@ -407,30 +423,30 @@ function FormAlertRules({
if (response.statusCode === 200) {
const { payload } = response;
if (payload?.alertCount === 0) {
notification.error({
notifications.error({
message: 'Error',
description: t('no_alerts_found'),
});
} else {
notification.success({
notifications.success({
message: 'Success',
description: t('rule_test_fired'),
});
}
} else {
notification.error({
notifications.error({
message: 'Error',
description: response.error || t('unexpected_error'),
});
}
} catch (e) {
notification.error({
notifications.error({
message: 'Error',
description: t('unexpected_error'),
});
}
setLoading(false);
}, [t, isFormValid, memoizedPreparePostData]);
}, [t, isFormValid, memoizedPreparePostData, notifications]);
const renderBasicInfo = (): JSX.Element => (
<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
@ -467,6 +483,7 @@ function FormAlertRules({
);
return (
<>
{NotificationElement}
{Element}
<PanelContainer>
<StyledLeftContainer flex="5 1 600px">

11
frontend/src/container/GeneralSettings/GeneralSettings.tsx
View File

@ -172,6 +172,8 @@ function GeneralSettings({
logsTtlValuesPayload.status === 'pending' ? 1000 : null,
);
const [notifications, NotificationElement] = notification.useNotification();
const onModalToggleHandler = (type: TTTLType): void => {
if (type === 'metrics') setModalMetrics((modal) => !modal);
if (type === 'traces') setModalTraces((modal) => !modal);
@ -186,14 +188,14 @@ function GeneralSettings({
const onClickSaveHandler = useCallback(
(type: TTTLType) => {
if (!setRetentionPermission) {
notification.error({
notifications.error({
message: `Sorry you don't have permission to make these changes`,
});
return;
}
onModalToggleHandler(type);
},
[setRetentionPermission],
[setRetentionPermission, notifications],
);
const s3Enabled = useMemo(
@ -352,7 +354,7 @@ function GeneralSettings({
let hasSetTTLFailed = false;
if (setTTLResponse.statusCode === 409) {
hasSetTTLFailed = true;
notification.error({
notifications.error({
message: 'Error',
description: t('retention_request_race_condition'),
placement: 'topRight',
@ -390,7 +392,7 @@ function GeneralSettings({
});
}
} catch (error) {
notification.error({
notifications.error({
message: 'Error',
description: t('retention_failed_message'),
placement: 'topRight',
@ -591,6 +593,7 @@ function GeneralSettings({
return (
<>
{NotificationElement}
{Element}
<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
<ErrorTextContainer>

58
frontend/src/container/GridGraphLayout/index.tsx
View File

@ -204,6 +204,8 @@ function GridGraph(props: Props): JSX.Element {
[widgets, onDragSelect],
);
const [notifications, NotificationElement] = notification.useNotification();
const onEmptyWidgetHandler = useCallback(async () => {
try {
const id = 'empty';
@ -219,22 +221,25 @@ function GridGraph(props: Props): JSX.Element {
...(data.layout || []),
];
await UpdateDashboard({
data,
generateWidgetId: id,
graphType: 'EMPTY_WIDGET',
selectedDashboard,
layout,
isRedirected: false,
});
await UpdateDashboard(
{
data,
generateWidgetId: id,
graphType: 'EMPTY_WIDGET',
selectedDashboard,
layout,
isRedirected: false,
},
notifications,
);
setLayoutFunction(layout);
} catch (error) {
notification.error({
notifications.error({
message: error instanceof Error ? error.toString() : 'Something went wrong',
});
}
}, [data, selectedDashboard, setLayoutFunction]);
}, [data, selectedDashboard, setLayoutFunction, notifications]);
const onLayoutChangeHandler = async (layout: Layout[]): Promise<void> => {
setLayoutFunction(layout);
@ -255,7 +260,7 @@ function GridGraph(props: Props): JSX.Element {
toggleAddWidget(true);
})
.catch(() => {
notification.error(t('something_went_wrong'));
notifications.error(t('something_went_wrong'));
});
} else {
toggleAddWidget(true);
@ -263,26 +268,29 @@ function GridGraph(props: Props): JSX.Element {
}
} catch (error) {
if (typeof error === 'string') {
notification.error({
notifications.error({
message: error || t('something_went_wrong'),
});
}
}
}, [layouts, onEmptyWidgetHandler, t, toggleAddWidget]);
}, [layouts, onEmptyWidgetHandler, t, toggleAddWidget, notifications]);
return (
<GraphLayoutContainer
{...{
addPanelLoading,
layouts,
onAddPanelHandler,
onLayoutChangeHandler,
onLayoutSaveHandler,
saveLayoutState,
widgets,
setLayout,
}}
/>
<>
{NotificationElement}
<GraphLayoutContainer
{...{
addPanelLoading,
layouts,
onAddPanelHandler,
onLayoutChangeHandler,
onLayoutSaveHandler,
saveLayoutState,
widgets,
setLayout,
}}
/>
</>
);
}

23
frontend/src/container/GridGraphLayout/utils.ts
View File

@ -1,4 +1,4 @@
import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import updateDashboardApi from 'api/dashboard/update';
import {
ClickHouseQueryTemplate,
@ -12,14 +12,17 @@ import store from 'store';
import { Dashboard } from 'types/api/dashboard/getAll';
import { EQueryType } from 'types/common/dashboard';
export const UpdateDashboard = async ({
data,
graphType,
generateWidgetId,
layout,
selectedDashboard,
isRedirected,
}: UpdateDashboardProps): Promise<Dashboard | undefined> => {
export const UpdateDashboard = async (
{
data,
graphType,
generateWidgetId,
layout,
selectedDashboard,
isRedirected,
}: UpdateDashboardProps,
notify: NotificationInstance,
): Promise<Dashboard | undefined> => {
const updatedSelectedDashboard: Dashboard = {
...selectedDashboard,
data: {
@ -89,7 +92,7 @@ export const UpdateDashboard = async ({
if (response.statusCode === 200) {
return response.payload;
}
notification.error({
notify.error({
message: response.error || 'Something went wrong',
});
return undefined;

11
frontend/src/container/Licenses/ApplyLicenseForm.tsx
View File

@ -26,10 +26,12 @@ function ApplyLicenseForm({
enabled: false,
});
const [notifications, NotificationElement] = notification.useNotification();
const onFinish = async (values: unknown | { key: string }): Promise<void> => {
const params = values as { key: string };
if (params.key === '' || !params.key) {
notification.error({
notifications.error({
message: 'Error',
description: t('enter_license_key'),
});
@ -53,18 +55,18 @@ function ApplyLicenseForm({
payload: featureFlagsResponse.data.payload,
});
}
notification.success({
notifications.success({
message: 'Success',
description: t('license_applied'),
});
} else {
notification.error({
notifications.error({
message: 'Error',
description: response.error || t('unexpected_error'),
});
}
} catch (e) {
notification.error({
notifications.error({
message: 'Error',
description: t('unexpected_error'),
});
@ -74,6 +76,7 @@ function ApplyLicenseForm({
return (
<ApplyFormContainer>
{NotificationElement}
<ApplyForm layout="inline" onFinish={onFinish}>
<LicenseInput labelAlign="left" name="key">
<Input

5
frontend/src/container/ListAlertRules/ListAlert.tsx
View File

@ -30,6 +30,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
role,
);
const [notificationsApi, NotificationElement] = notification.useNotification();
useInterval(() => {
(async (): Promise<void> => {
const { data: refetchData, status } = await refetch();
@ -37,7 +39,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
setData(refetchData?.payload || []);
}
if (status === 'error') {
notification.error({
notificationsApi.error({
message: t('something_went_wrong'),
});
}
@ -145,6 +147,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
return (
<>
{NotificationElement}
{Element}
<ButtonContainer>

27
frontend/src/container/ListAlertRules/ToggleAlertState.tsx
View File

@ -20,6 +20,8 @@ function ToggleAlertState({
payload: undefined,
});
const [notifications, NotificationElement] = notification.useNotification();
const defaultErrorMessage = 'Something went wrong';
const onToggleHandler = async (
@ -58,7 +60,7 @@ function ToggleAlertState({
loading: false,
payload: response.payload,
}));
notification.success({
notifications.success({
message: 'Success',
});
} else {
@ -69,7 +71,7 @@ function ToggleAlertState({
errorMessage: response.error || defaultErrorMessage,
}));
notification.error({
notifications.error({
message: response.error || defaultErrorMessage,
});
}
@ -81,21 +83,24 @@ function ToggleAlertState({
errorMessage: defaultErrorMessage,
}));
notification.error({
notifications.error({
message: defaultErrorMessage,
});
}
};
return (
<ColumnButton
disabled={apiStatus.loading || false}
loading={apiStatus.loading || false}
onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
type="link"
>
{disabled ? 'Enable' : 'Disable'}
</ColumnButton>
<>
{NotificationElement}
<ColumnButton
disabled={apiStatus.loading || false}
loading={apiStatus.loading || false}
onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
type="link"
>
{disabled ? 'Enable' : 'Disable'}
</ColumnButton>
</>
);
}

29
frontend/src/container/ListAlertRules/index.tsx
View File

@ -17,28 +17,38 @@ function ListAlertRules(): JSX.Element {
cacheTime: 0,
});
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (status === 'error' || (status === 'success' && data.statusCode >= 400)) {
notification.error({
notifications.error({
message: data?.error || t('something_went_wrong'),
});
}
}, [data?.error, data?.statusCode, status, t]);
}, [data?.error, data?.statusCode, status, t, notifications]);
// api failed to load the data
if (isError) {
return <div>{data?.error || t('something_went_wrong')}</div>;
return (
<div>
{NotificationElement}
{data?.error || t('something_went_wrong')}
</div>
);
}
// api is successful but error is present
if (status === 'success' && data.statusCode >= 400) {
return (
<ListAlert
{...{
allAlertRules: [],
refetch,
}}
/>
<>
{NotificationElement}
<ListAlert
{...{
allAlertRules: [],
refetch,
}}
/>
</>
);
}
@ -49,6 +59,7 @@ function ListAlertRules(): JSX.Element {
return (
<Space direction="vertical" size="large" style={{ width: '100%' }}>
{NotificationElement}
<ReleaseNote path={location.pathname} />
<ListAlert
{...{

109
frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
View File

@ -41,6 +41,8 @@ function ImportJSON({
const [editorValue, setEditorValue] = useState<string>('');
const [notifications, NotificationElement] = notification.useNotification();
const onChangeHandler: UploadProps['onChange'] = (info) => {
const { fileList } = info;
const reader = new FileReader();
@ -106,7 +108,7 @@ function ImportJSON({
}, 10);
} else {
setIsCreateDashboardError(true);
notification.error({
notifications.error({
message:
response.error ||
t('something_went_wrong', {
@ -130,58 +132,61 @@ function ImportJSON({
);
return (
<Modal
open={isImportJSONModalVisible}
centered
maskClosable
destroyOnClose
width="70vw"
onCancel={onModalHandler}
title={
<>
<Typography.Title level={4}>{t('import_json')}</Typography.Title>
<Typography>{t('import_dashboard_by_pasting')}</Typography>
</>
}
footer={
<FooterContainer>
<Button
disabled={editorValue.length === 0}
onClick={onClickLoadJsonHandler}
loading={dashboardCreating}
>
{t('load_json')}
</Button>
{isCreateDashboardError && getErrorNode(t('error_loading_json'))}
</FooterContainer>
}
>
<div>
<Space direction="horizontal">
<Upload
accept=".json"
showUploadList={false}
multiple={false}
onChange={onChangeHandler}
beforeUpload={(): boolean => false}
action="none"
data={jsonData}
>
<Button type="primary">{t('upload_json_file')}</Button>
</Upload>
{isUploadJSONError && <>{getErrorNode(t('error_upload_json'))}</>}
</Space>
<>
{NotificationElement}
<Modal
open={isImportJSONModalVisible}
centered
maskClosable
destroyOnClose
width="70vw"
onCancel={onModalHandler}
title={
<>
<Typography.Title level={4}>{t('import_json')}</Typography.Title>
<Typography>{t('import_dashboard_by_pasting')}</Typography>
</>
}
footer={
<FooterContainer>
<Button
disabled={editorValue.length === 0}
onClick={onClickLoadJsonHandler}
loading={dashboardCreating}
>
{t('load_json')}
</Button>
{isCreateDashboardError && getErrorNode(t('error_loading_json'))}
</FooterContainer>
}
>
<div>
<Space direction="horizontal">
<Upload
accept=".json"
showUploadList={false}
multiple={false}
onChange={onChangeHandler}
beforeUpload={(): boolean => false}
action="none"
data={jsonData}
>
<Button type="primary">{t('upload_json_file')}</Button>
</Upload>
{isUploadJSONError && <>{getErrorNode(t('error_upload_json'))}</>}
</Space>
<EditorContainer>
<Typography.Paragraph>{t('paste_json_below')}</Typography.Paragraph>
<Editor
onChange={(newValue): void => setEditorValue(newValue)}
value={editorValue}
language="json"
/>
</EditorContainer>
</div>
</Modal>
<EditorContainer>
<Typography.Paragraph>{t('paste_json_below')}</Typography.Paragraph>
<Editor
onChange={(newValue): void => setEditorValue(newValue)}
value={editorValue}
language="json"
/>
</EditorContainer>
</div>
</Modal>
</>
);
}

19
frontend/src/container/Login/index.tsx
View File

@ -42,6 +42,8 @@ function Login({
const [precheckInProcess, setPrecheckInProcess] = useState(false);
const [precheckComplete, setPrecheckComplete] = useState(false);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (withPassword === 'Y') {
setPrecheckComplete(true);
@ -62,15 +64,15 @@ function Login({
useEffect(() => {
if (ssoerror !== '') {
notification.error({
notifications.error({
message: t('failed_to_login'),
});
}
}, [ssoerror, t]);
}, [ssoerror, t, notifications]);
const onNextHandler = async (): Promise<void> => {
if (!email) {
notification.error({
notifications.error({
message: t('invalid_email'),
});
return;
@ -88,18 +90,18 @@ function Login({
if (isUser) {
setPrecheckComplete(true);
} else {
notification.error({
notifications.error({
message: t('invalid_account'),
});
}
} else {
notification.error({
notifications.error({
message: t('invalid_config'),
});
}
} catch (e) {
console.log('failed to call precheck Api', e);
notification.error({ message: t('unexpected_error') });
notifications.error({ message: t('unexpected_error') });
}
setPrecheckInProcess(false);
};
@ -144,14 +146,14 @@ function Login({
);
history.push(ROUTES.APPLICATION);
} else {
notification.error({
notifications.error({
message: response.error || t('unexpected_error'),
});
}
setIsLoading(false);
} catch (error) {
setIsLoading(false);
notification.error({
notifications.error({
message: t('unexpected_error'),
});
}
@ -183,6 +185,7 @@ function Login({
return (
<FormWrapper>
{NotificationElement}
<FormContainer onSubmit={onSubmitHandler}>
<Title level={4}>{t('login_page_title')}</Title>
<ParentContainer>

7
frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
View File

@ -36,6 +36,8 @@ function SearchFields({
const keyPrefixRef = useRef(hashCode(JSON.stringify(fieldsQuery)));
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
const updatedFieldsQuery = createParsedQueryStructure([
...parsedQuery,
@ -81,7 +83,7 @@ function SearchFields({
const flatParsedQuery = flatten(fieldsQuery);
if (!fieldsQueryIsvalid(flatParsedQuery)) {
notification.error({
notifications.error({
message: 'Please enter a valid criteria for each of the selected fields',
});
return;
@ -90,7 +92,7 @@ function SearchFields({
keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
updateParsedQuery(flatParsedQuery);
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery]);
}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery, notifications]);
const clearFilters = useCallback((): void => {
keyPrefixRef.current = hashCode(JSON.stringify([]));
@ -100,6 +102,7 @@ function SearchFields({
return (
<>
{NotificationElement}
<QueryBuilder
key={keyPrefixRef.current}
keyPrefix={keyPrefixRef.current}

9
frontend/src/container/MySettings/Password/index.tsx
View File

@ -23,6 +23,8 @@ function PasswordContainer(): JSX.Element {
ns: 'settings',
});
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (currentPassword && !isPasswordValid(currentPassword)) {
setIsPasswordPolicyError(true);
@ -52,13 +54,13 @@ function PasswordContainer(): JSX.Element {
});
if (statusCode === 200) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
} else {
notification.error({
notifications.error({
message:
error ||
t('something_went_wrong', {
@ -70,7 +72,7 @@ function PasswordContainer(): JSX.Element {
} catch (error) {
setIsLoading(false);
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -80,6 +82,7 @@ function PasswordContainer(): JSX.Element {
return (
<Space direction="vertical" size="large">
{NotificationElement}
<Typography.Title level={3}>
{t('change_password', {
ns: 'settings',

9
frontend/src/container/MySettings/UpdateName/index.tsx
View File

@ -21,6 +21,8 @@ function UpdateName(): JSX.Element {
const [changedName, setChangedName] = useState<string>(user?.name || '');
const [loading, setLoading] = useState<boolean>(false);
const [notifications, NotificationElement] = notification.useNotification();
if (!user || !org) {
return <div />;
}
@ -34,7 +36,7 @@ function UpdateName(): JSX.Element {
});
if (statusCode === 200) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
@ -51,7 +53,7 @@ function UpdateName(): JSX.Element {
},
});
} else {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -59,7 +61,7 @@ function UpdateName(): JSX.Element {
}
setLoading(false);
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -70,6 +72,7 @@ function UpdateName(): JSX.Element {
return (
<div>
{NotificationElement}
<Space direction="vertical" size="middle">
<Typography>Name</Typography>
<NameInput

9
frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
View File

@ -22,6 +22,8 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
(state) => state.dashboards,
);
const [notifications, NotificationElement] = notification.useNotification();
const [selectedDashboard] = dashboards;
const { data } = selectedDashboard;
@ -31,7 +33,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
const emptyLayout = data.layout?.find((e) => e.i === 'empty');
if (emptyLayout === undefined) {
notification.error({
notifications.error({
message: 'Please click on Add Panel Button',
});
return;
@ -43,18 +45,19 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
`${history.location.pathname}/new?graphType=${name}&widgetId=${emptyLayout.i}`,
);
} catch (error) {
notification.error({
notifications.error({
message: 'Something went wrong',
});
}
},
[data, toggleAddWidget],
[data, toggleAddWidget, notifications],
);
const isDarkMode = useIsDarkMode();
const fillColor: React.CSSProperties['color'] = isDarkMode ? 'white' : 'black';
return (
<Container>
{NotificationElement}
{menuItems.map(({ name, Icon, display }) => (
<Card
onClick={(event): void => {

12
frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx
View File

@ -1,6 +1,7 @@
import { blue, red } from '@ant-design/colors';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Modal, Row, Space, Table, Tag } from 'antd';
import { Button, Modal, notification, Row, Space, Table, Tag } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import React, { useRef, useState } from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
@ -24,6 +25,8 @@ function VariablesSetting({
(state) => state.dashboards,
);
const [notifications, NotificationElement] = notification.useNotification();
const [selectedDashboard] = dashboards;
const {
@ -74,8 +77,7 @@ function VariablesSetting({
if (oldName) {
delete newVariables[oldName];
}
updateDashboardVariables(newVariables);
updateDashboardVariables(newVariables, notifications);
onDoneVariableViewMode();
};
@ -87,7 +89,7 @@ function VariablesSetting({
const handleDeleteConfirm = (): void => {
const newVariables = { ...variables };
if (variableToDelete?.current) delete newVariables[variableToDelete?.current];
updateDashboardVariables(newVariables);
updateDashboardVariables(newVariables, notifications);
variableToDelete.current = null;
setDeleteVariableModal(false);
};
@ -137,6 +139,7 @@ function VariablesSetting({
return (
<>
{NotificationElement}
{variableViewMode ? (
<VariableItem
variableData={{ ...variableEditData } as IDashboardVariable}
@ -178,6 +181,7 @@ function VariablesSetting({
interface DispatchProps {
updateDashboardVariables: (
props: Record<string, IDashboardVariable>,
notify: NotificationInstance,
) => (dispatch: Dispatch<AppActions>) => void;
}

10
frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx
View File

@ -1,4 +1,5 @@
import { Row } from 'antd';
import { notification, Row } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import { map, sortBy } from 'lodash-es';
import React, { useState } from 'react';
import { connect, useSelector } from 'react-redux';
@ -25,6 +26,7 @@ function DashboardVariableSelection({
const [update, setUpdate] = useState<boolean>(false);
const [lastUpdatedVar, setLastUpdatedVar] = useState<string>('');
const [notifications, NotificationElement] = notification.useNotification();
const onVarChanged = (name: string): void => {
setLastUpdatedVar(name);
@ -45,7 +47,7 @@ function DashboardVariableSelection({
): void => {
const updatedVariablesData = { ...variables };
updatedVariablesData[name].selectedValue = value;
updateDashboardVariables(updatedVariablesData);
updateDashboardVariables(updatedVariablesData, notifications);
onVarChanged(name);
};
const onAllSelectedUpdate = (
@ -54,12 +56,13 @@ function DashboardVariableSelection({
): void => {
const updatedVariablesData = { ...variables };
updatedVariablesData[name].allSelected = value;
updateDashboardVariables(updatedVariablesData);
updateDashboardVariables(updatedVariablesData, notifications);
onVarChanged(name);
};
return (
<Row style={{ gap: '1rem' }}>
{NotificationElement}
{map(sortBy(Object.keys(variables)), (variableName) => (
<VariableItem
key={`${variableName}${variables[variableName].modificationUUID}`}
@ -81,6 +84,7 @@ function DashboardVariableSelection({
interface DispatchProps {
updateDashboardVariables: (
props: Parameters<typeof UpdateDashboardVariables>[0],
notify: NotificationInstance,
) => (dispatch: Dispatch<AppActions>) => void;
}

57
frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx
View File

@ -32,10 +32,11 @@ function ShareModal({
const [isViewJSON, setIsViewJSON] = useState<boolean>(false);
const { t } = useTranslation(['dashboard', 'common']);
const [state, setCopy] = useCopyToClipboard();
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (state.error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -43,13 +44,13 @@ function ShareModal({
}
if (state.value) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
}
}, [state.error, state.value, t]);
}, [state.error, state.value, t, notifications]);
const selectedDataCleaned = cleardQueryData(selectedData);
const GetFooterComponent = useMemo(() => {
@ -83,28 +84,34 @@ function ShareModal({
}, [isViewJSON, jsonValue, selectedData, selectedDataCleaned, setCopy, t]);
return (
<Modal
open={isJSONModalVisible}
onCancel={(): void => {
onToggleHandler();
setIsViewJSON(false);
}}
width="70vw"
centered
title={t('share', {
ns: 'common',
})}
okText={t('download_json')}
cancelText={t('cancel')}
destroyOnClose
footer={GetFooterComponent}
>
{!isViewJSON ? (
<Typography>{t('export_dashboard')}</Typography>
) : (
<Editor onChange={(value): void => setJSONValue(value)} value={jsonValue} />
)}
</Modal>
<>
{NotificationElement}
<Modal
open={isJSONModalVisible}
onCancel={(): void => {
onToggleHandler();
setIsViewJSON(false);
}}
width="70vw"
centered
title={t('share', {
ns: 'common',
})}
okText={t('download_json')}
cancelText={t('cancel')}
destroyOnClose
footer={GetFooterComponent}
>
{!isViewJSON ? (
<Typography>{t('export_dashboard')}</Typography>
) : (
<Editor
onChange={(value): void => setJSONValue(value)}
value={jsonValue}
/>
)}
</Modal>
</>
);
}

6
frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/index.tsx
View File

@ -37,6 +37,7 @@ function QueryBuilderQueryContainer({
metricsBuilderQueries,
selectedGraph,
}: IQueryBuilderQueryContainerProps): JSX.Element | null {
const [notifications, NotificationElement] = notification.useNotification();
const handleQueryBuilderQueryChange = ({
queryIndex,
aggregateFunction,
@ -113,7 +114,7 @@ function QueryBuilderQueryContainer({
};
const addQueryHandler = (): void => {
if (!canCreateQueryAndFormula(queryData)) {
notification.error({
notifications.error({
message:
'Unable to create query. You can create at max 10 queries and formulae.',
});
@ -130,7 +131,7 @@ function QueryBuilderQueryContainer({
const addFormulaHandler = (): void => {
if (!canCreateQueryAndFormula(queryData)) {
notification.error({
notifications.error({
message:
'Unable to create formula. You can create at max 10 queries and formulae.',
});
@ -155,6 +156,7 @@ function QueryBuilderQueryContainer({
}
return (
<>
{NotificationElement}
{metricsBuilderQueries.queryBuilder.map((q, idx) => (
<MetricsBuilder
key={q.name}

9
frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx
View File

@ -21,6 +21,8 @@ function AddDomain({ refetch }: Props): JSX.Element {
const { org } = useSelector<AppState, AppReducer>((state) => state.app);
const [notifications, NotificationElement] = notification.useNotification();
const onCreateHandler = async (): Promise<void> => {
try {
const response = await createDomainApi({
@ -29,19 +31,19 @@ function AddDomain({ refetch }: Props): JSX.Element {
});
if (response.statusCode === 200) {
notification.success({
notifications.success({
message: 'Your domain has been added successfully.',
duration: 15,
});
setIsDomain(false);
refetch();
} else {
notification.error({
notifications.error({
message: t('common:something_went_wrong'),
});
}
} catch (error) {
notification.error({
notifications.error({
message: t('common:something_went_wrong'),
});
}
@ -49,6 +51,7 @@ function AddDomain({ refetch }: Props): JSX.Element {
return (
<>
{NotificationElement}
<Container>
<Typography.Title level={3}>
{t('authenticated_domains', {

9
frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx
View File

@ -31,6 +31,8 @@ function EditSSO({
const { t } = useTranslation(['common']);
const [notifications, NotificationElement] = notification.useNotification();
const onFinishHandler = useCallback(() => {
form
.validateFields()
@ -44,11 +46,11 @@ function EditSSO({
});
})
.catch(() => {
notification.error({
notifications.error({
message: t('something_went_wrong', { ns: 'common' }),
});
});
}, [form, onRecordUpdateHandler, record, t]);
}, [form, onRecordUpdateHandler, record, t, notifications]);
const onResetHandler = useCallback(() => {
form.resetFields();
@ -61,7 +63,7 @@ function EditSSO({
initialValues={record}
onFinishFailed={(error): void => {
error.errorFields.forEach(({ errors }) => {
notification.error({
notifications.error({
message:
errors[0].toString() || t('something_went_wrong', { ns: 'common' }),
});
@ -73,6 +75,7 @@ function EditSSO({
autoComplete="off"
form={form}
>
{NotificationElement}
{renderFormInputs(record)}
<Space
style={{ width: '100%', justifyContent: 'flex-end' }}

18
frontend/src/container/OrganizationSettings/AuthDomains/index.tsx
View File

@ -56,6 +56,8 @@ function AuthDomains(): JSX.Element {
enabled: org !== null,
});
const [notifications, NotificationElement] = notification.useNotification();
const assignSsoMethod = useCallback(
(typ: AuthDomain['ssoType']): void => {
setCurrentDomain({ ...currentDomain, ssoType: typ } as AuthDomain);
@ -76,7 +78,7 @@ function AuthDomains(): JSX.Element {
const response = await updateDomain(record);
if (response.statusCode === 200) {
notification.success({
notifications.success({
message: t('saml_settings', {
ns: 'organizationsettings',
}),
@ -87,7 +89,7 @@ function AuthDomains(): JSX.Element {
return true;
}
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -95,7 +97,7 @@ function AuthDomains(): JSX.Element {
return false;
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -103,7 +105,7 @@ function AuthDomains(): JSX.Element {
return false;
}
},
[refetch, t, onCloseHandler],
[refetch, t, onCloseHandler, notifications],
);
const onOpenHandler = useCallback(
@ -142,19 +144,19 @@ function AuthDomains(): JSX.Element {
});
if (response.statusCode === 200) {
notification.success({
notifications.success({
message: t('common:success'),
});
refetch();
} else {
notification.error({
notifications.error({
message: t('common:something_went_wrong'),
});
}
},
});
},
[refetch, t],
[refetch, t, notifications],
);
const onClickLicenseHandler = useCallback(() => {
@ -247,6 +249,7 @@ function AuthDomains(): JSX.Element {
if (!isLoading && data?.payload?.length === 0) {
return (
<Space direction="vertical" size="middle">
{NotificationElement}
<AddDomain refetch={refetch} />
<Modal
@ -278,6 +281,7 @@ function AuthDomains(): JSX.Element {
return (
<>
{NotificationElement}
<Modal
centered
title="Configure Authentication Method"

8
frontend/src/container/OrganizationSettings/DisplayName/index.tsx
View File

@ -21,6 +21,7 @@ function DisplayName({
const { name } = (org || [])[index];
const [isLoading, setIsLoading] = useState<boolean>(false);
const dispatch = useDispatch<Dispatch<AppActions>>();
const [notifications, NotificationElement] = notification.useNotification();
const onSubmit = async ({ name: orgName }: OnSubmitProps): Promise<void> => {
try {
@ -31,7 +32,7 @@ function DisplayName({
orgId,
});
if (statusCode === 200) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
@ -44,7 +45,7 @@ function DisplayName({
},
});
} else {
notification.error({
notifications.error({
message:
error ||
t('something_went_wrong', {
@ -55,7 +56,7 @@ function DisplayName({
setIsLoading(false);
} catch (error) {
setIsLoading(false);
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -75,6 +76,7 @@ function DisplayName({
onFinish={onSubmit}
autoComplete="off"
>
{NotificationElement}
<Form.Item name="name" label="Display name" rules={[{ required: true }]}>
<Input size="large" placeholder={t('signoz')} disabled={isLoading} />
</Form.Item>

13
frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx
View File

@ -36,19 +36,21 @@ function EditMembersDetails({
[],
);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (state.error) {
notification.error({
notifications.error({
message: t('something_went_wrong'),
});
}
if (state.value) {
notification.success({
notifications.success({
message: t('success'),
});
}
}, [state.error, state.value, t]);
}, [state.error, state.value, t, notifications]);
const onPasswordChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
(event) => {
@ -67,7 +69,7 @@ function EditMembersDetails({
if (response.statusCode === 200) {
setPasswordLink(getPasswordLink(response.payload.token));
} else {
notification.error({
notifications.error({
message:
response.error ||
t('something_went_wrong', {
@ -79,7 +81,7 @@ function EditMembersDetails({
} catch (error) {
setIsLoading(false);
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -89,6 +91,7 @@ function EditMembersDetails({
return (
<Space direction="vertical" size="large">
{NotificationElement}
<Space direction="horizontal">
<Title>Email address</Title>
<Input

14
frontend/src/container/OrganizationSettings/Members/index.tsx
View File

@ -39,6 +39,7 @@ function UserFunction({
const { t } = useTranslation(['common']);
const [isDeleteLoading, setIsDeleteLoading] = useState<boolean>(false);
const [isUpdateLoading, setIsUpdateLoading] = useState<boolean>(false);
const [notifications, NotificationElement] = notification.useNotification();
const onUpdateDetailsHandler = (): void => {
setDataSource((data) => {
@ -88,14 +89,14 @@ function UserFunction({
if (response.statusCode === 200) {
onDelete();
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
setIsDeleteModalVisible(false);
} else {
notification.error({
notifications.error({
message:
response.error ||
t('something_went_wrong', {
@ -107,7 +108,7 @@ function UserFunction({
} catch (error) {
setIsDeleteLoading(false);
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -134,13 +135,13 @@ function UserFunction({
updateRoleResponse.statusCode === 200
) {
onUpdateDetailsHandler();
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
} else {
notification.error({
notifications.error({
message:
editUserResponse.error ||
updateRoleResponse.error ||
@ -151,7 +152,7 @@ function UserFunction({
}
setIsUpdateLoading(false);
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -162,6 +163,7 @@ function UserFunction({
return (
<>
{NotificationElement}
<Space direction="horizontal">
<Typography.Link
onClick={(): void => onModalToggleHandler(setIsModalVisible, true)}

18
frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx
View File

@ -25,22 +25,23 @@ function PendingInvitesContainer(): JSX.Element {
const [isInvitingMembers, setIsInvitingMembers] = useState<boolean>(false);
const { t } = useTranslation(['organizationsettings', 'common']);
const [state, setText] = useCopyToClipboard();
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (state.error) {
notification.error({
notifications.error({
message: state.error.message,
});
}
if (state.value) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
}
}, [state.error, state.value, t]);
}, [state.error, state.value, t, notifications]);
const getPendingInvitesResponse = useQuery({
queryFn: () => getPendingInvites(),
@ -112,13 +113,13 @@ function PendingInvitesContainer(): JSX.Element {
...dataSource.slice(index + 1, dataSource.length),
]);
}
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
} else {
notification.error({
notifications.error({
message:
response.error ||
t('something_went_wrong', {
@ -127,7 +128,7 @@ function PendingInvitesContainer(): JSX.Element {
});
}
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -192,7 +193,7 @@ function PendingInvitesContainer(): JSX.Element {
});
if (statusCode !== 200) {
notification.error({
notifications.error({
message:
error ||
t('something_went_wrong', {
@ -212,7 +213,7 @@ function PendingInvitesContainer(): JSX.Element {
toggleModal(false);
}, 2000);
} catch (error) {
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -222,6 +223,7 @@ function PendingInvitesContainer(): JSX.Element {
return (
<div>
{NotificationElement}
<Modal
title={t('invite_team_members')}
open={isInviteTeamMemberModalOpen}

132
frontend/src/container/ResetPassword/index.tsx
View File

@ -24,6 +24,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
const { search } = useLocation();
const params = new URLSearchParams(search);
const token = params.get('token');
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (!token) {
@ -53,14 +54,14 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
});
if (response.statusCode === 200) {
notification.success({
notifications.success({
message: t('success', {
ns: 'common',
}),
});
history.push(ROUTES.LOGIN);
} else {
notification.error({
notifications.error({
message:
response.error ||
t('something_went_wrong', {
@ -72,7 +73,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
setLoading(false);
} catch (error) {
setLoading(false);
notification.error({
notifications.error({
message: t('something_went_wrong', {
ns: 'common',
}),
@ -82,70 +83,73 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
return (
<WelcomeLeftContainer version={version}>
<FormWrapper>
<form onSubmit={handleSubmit}>
<Title level={4}>Reset Your Password</Title>
<>
{NotificationElement}
<FormWrapper>
<form onSubmit={handleSubmit}>
<Title level={4}>Reset Your Password</Title>
<div>
<Label htmlFor="Password">Password</Label>
<Input.Password
value={password}
onChange={(e): void => {
setState(e.target.value, setPassword);
}}
required
id="currentPassword"
/>
</div>
<div>
<Label htmlFor="ConfirmPassword">Confirm Password</Label>
<Input.Password
value={confirmPassword}
onChange={(e): void => {
const updateValue = e.target.value;
setState(updateValue, setConfirmPassword);
if (password !== updateValue) {
setConfirmPasswordError(true);
} else {
setConfirmPasswordError(false);
}
}}
required
id="UpdatePassword"
/>
{confirmPasswordError && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
<div>
<Label htmlFor="Password">Password</Label>
<Input.Password
value={password}
onChange={(e): void => {
setState(e.target.value, setPassword);
}}
>
Passwords don’t match. Please try again
</Typography.Paragraph>
)}
</div>
required
id="currentPassword"
/>
</div>
<div>
<Label htmlFor="ConfirmPassword">Confirm Password</Label>
<Input.Password
value={confirmPassword}
onChange={(e): void => {
const updateValue = e.target.value;
setState(updateValue, setConfirmPassword);
if (password !== updateValue) {
setConfirmPasswordError(true);
} else {
setConfirmPasswordError(false);
}
}}
required
id="UpdatePassword"
/>
<ButtonContainer>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
loading={loading}
disabled={
loading ||
!password ||
!confirmPassword ||
confirmPasswordError ||
token === null
}
>
Get Started
</Button>
</ButtonContainer>
</form>
</FormWrapper>
{confirmPasswordError && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
Passwords don’t match. Please try again
</Typography.Paragraph>
)}
</div>
<ButtonContainer>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
loading={loading}
disabled={
loading ||
!password ||
!confirmPassword ||
confirmPasswordError ||
token === null
}
>
Get Started
</Button>
</ButtonContainer>
</form>
</FormWrapper>
</>
</WelcomeLeftContainer>
);
}

7
frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
View File

@ -38,6 +38,8 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
(userSelectedFilter.get(name) || []).find((e) => e === keyValue) !==
undefined;
const [notifications, NotificationElement] = notification.useNotification();
// eslint-disable-next-line sonarjs/cognitive-complexity
const onCheckHandler = async (): Promise<void> => {
try {
@ -141,12 +143,12 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
} else {
setIsLoading(false);
notification.error({
notifications.error({
message: response.error || 'Something went wrong',
});
}
} catch (error) {
notification.error({
notifications.error({
message: (error as AxiosError).toString() || 'Something went wrong',
});
setIsLoading(false);
@ -161,6 +163,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
return (
<CheckBoxContainer>
{NotificationElement}
<Checkbox
disabled={isLoading || filterLoading}
onClick={onCheckHandler}

4
frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx
View File

@ -28,6 +28,7 @@ function TraceID(): JSX.Element {
);
const [isLoading, setIsLoading] = useState(false);
const [userEnteredValue, setUserEnteredValue] = useState<string>('');
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
setUserEnteredValue(selectedFilter.get('traceID')?.[0] || '');
}, [selectedFilter]);
@ -91,7 +92,7 @@ function TraceID(): JSX.Element {
);
}
} catch (error) {
notification.error({
notifications.error({
message: (error as AxiosError).toString() || 'Something went wrong',
});
} finally {
@ -108,6 +109,7 @@ function TraceID(): JSX.Element {
};
return (
<div>
{NotificationElement}
<Search
placeholder="Filter by Trace ID"
onSearch={onSearch}

11
frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
View File

@ -53,6 +53,8 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
const defaultErrorMessage = 'Something went wrong';
const [notifications, NotificationElement] = notification.useNotification();
// eslint-disable-next-line sonarjs/cognitive-complexity
const onExpandHandler: React.MouseEventHandler<HTMLDivElement> = async (e) => {
try {
@ -119,14 +121,14 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
spansAggregate.orderParam,
);
} else {
notification.error({
notifications.error({
message: response.error || defaultErrorMessage,
});
}
setIsLoading(false);
} catch (error) {
notification.error({
notifications.error({
message: (error as AxiosError).toString() || defaultErrorMessage,
});
}
@ -225,13 +227,13 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
spansAggregate.orderParam,
);
} else {
notification.error({
notifications.error({
message: response.error || 'Something went wrong',
});
}
setIsLoading(false);
} catch (error) {
notification.error({
notifications.error({
message: (error as AxiosError).toString(),
});
setIsLoading(false);
@ -295,6 +297,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
return (
<>
{NotificationElement}
{PanelName !== 'duration' && <Divider plain style={{ margin: 0 }} />}
<Card bordered={false}>

26
frontend/src/container/TriggeredAlerts/index.tsx
View File

@ -17,6 +17,7 @@ function TriggeredAlerts(): JSX.Element {
payload: [],
});
const { t } = useTranslation(['common']);
const [notifications, NotificationElement] = notification.useNotification();
const fetchData = useCallback(async () => {
try {
@ -61,18 +62,28 @@ function TriggeredAlerts(): JSX.Element {
useEffect(() => {
if (groupState.error) {
notification.error({
notifications.error({
message: groupState.errorMessage || t('something_went_wrong'),
});
}
}, [groupState.error, groupState.errorMessage, t]);
}, [groupState.error, groupState.errorMessage, t, notifications]);
if (groupState.error) {
return <TriggerComponent allAlerts={[]} />;
return (
<>
{NotificationElement}
<TriggerComponent allAlerts={[]} />
</>
);
}
if (groupState.loading || groupState.payload === undefined) {
return <Spinner height="75vh" tip="Loading Alerts..." />;
return (
<>
{NotificationElement}
<Spinner height="75vh" tip="Loading Alerts..." />
</>
);
}
// commented the reduce() call as we no longer use /alerts/groups
@ -84,7 +95,12 @@ function TriggeredAlerts(): JSX.Element {
// return [...acc, ...curr.alerts];
// }, initialAlerts);
return <TriggerComponent allAlerts={groupState.payload} />;
return (
<>
{NotificationElement}
<TriggerComponent allAlerts={groupState.payload} />
</>
);
}
export default TriggeredAlerts;

24
frontend/src/pages/EditRules/index.tsx
View File

@ -26,21 +26,28 @@ function EditRules(): JSX.Element {
enabled: isValidRuleId,
});
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (!isValidRuleId) {
notification.error({
notifications.error({
message: 'Rule Id is required',
});
history.replace(ROUTES.LIST_ALL_ALERT);
}
}, [isValidRuleId, ruleId]);
}, [isValidRuleId, ruleId, notifications]);
if (
(isError && !isValidRuleId) ||
ruleId == null ||
(data?.payload?.data === undefined && !isLoading)
) {
return <div>{data?.error || t('something_went_wrong')}</div>;
return (
<div>
{NotificationElement}
{data?.error || t('something_went_wrong')}
</div>
);
}
if (isLoading || !data?.payload) {
@ -48,10 +55,13 @@ function EditRules(): JSX.Element {
}
return (
<EditRulesContainer
ruleId={parseInt(ruleId, 10)}
initialValue={data.payload.data}
/>
<>
{NotificationElement}
<EditRulesContainer
ruleId={parseInt(ruleId, 10)}
initialValue={data.payload.data}
/>
</>
);
}

6
frontend/src/pages/Metrics/index.tsx
View File

@ -30,14 +30,15 @@ function Metrics({ getService }: MetricsProps): JSX.Element {
error,
errorMessage,
} = useSelector<AppState, MetricReducer>((state) => state.metrics);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (error) {
notification.error({
notifications.error({
message: errorMessage,
});
}
}, [error, errorMessage]);
}, [error, errorMessage, notifications]);
const selectedTags = useMemo(
() =>
@ -90,6 +91,7 @@ function Metrics({ getService }: MetricsProps): JSX.Element {
return (
<Space direction="vertical" style={{ width: '100%' }}>
{NotificationElement}
<ReleaseNote path={location.pathname} />
<ResourceAttributesFilter />

310
frontend/src/pages/SignUp/SignUp.tsx
View File

@ -56,6 +56,8 @@ function SignUp({ version }: SignUpProps): JSX.Element {
enabled: token !== null,
});
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
if (
getInviteDetailsResponse.status === 'success' &&
@ -73,7 +75,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
getInviteDetailsResponse.data?.error
) {
const { error } = getInviteDetailsResponse.data;
notification.error({
notifications.error({
message: error,
});
}
@ -82,6 +84,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
getInviteDetailsResponse.data?.error,
getInviteDetailsResponse.status,
getInviteDetailsResponse,
notifications,
]);
const setState = (
@ -122,17 +125,17 @@ function SignUp({ version }: SignUpProps): JSX.Element {
callback(userResponse);
}
} else {
notification.error({
notifications.error({
message: loginResponse.error || t('unexpected_error'),
});
}
} else {
notification.error({
notifications.error({
message: response.error || t('unexpected_error'),
});
}
} catch (error) {
notification.error({
notifications.error({
message: t('unexpected_error'),
});
}
@ -150,7 +153,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
if (editResponse.statusCode === 200) {
history.push(ROUTES.APPLICATION);
} else {
notification.error({
notifications.error({
message: editResponse.error || t('unexpected_error'),
});
}
@ -159,7 +162,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
e: React.FormEvent<HTMLFormElement>,
): Promise<void> => {
if (!params.get('token')) {
notification.error({
notifications.error({
message: t('token_required'),
});
return;
@ -182,7 +185,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
if (response.payload?.ssoUrl) {
window.location.href = response.payload?.ssoUrl;
} else {
notification.error({
notifications.error({
message: t('failed_to_initiate_login'),
});
// take user to login page as there is nothing to do here
@ -190,12 +193,12 @@ function SignUp({ version }: SignUpProps): JSX.Element {
}
}
} else {
notification.error({
notifications.error({
message: response.error || t('unexpected_error'),
});
}
} catch (error) {
notification.error({
notifications.error({
message: t('unexpected_error'),
});
}
@ -227,7 +230,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
setLoading(false);
} catch (error) {
notification.error({
notifications.error({
message: t('unexpected_error'),
});
setLoading(false);
@ -263,164 +266,169 @@ function SignUp({ version }: SignUpProps): JSX.Element {
return (
<WelcomeLeftContainer version={version}>
<FormWrapper>
<form onSubmit={!precheck.sso ? handleSubmit : handleSubmitSSO}>
<Title level={4}>Create your account</Title>
<div>
<Label htmlFor="signupEmail">{t('label_email')}</Label>
<Input
placeholder={t('placeholder_email')}
type="email"
autoFocus
value={email}
onChange={(e): void => {
setState(e.target.value, setEmail);
}}
required
id="signupEmail"
disabled={isDetailsDisable}
/>
</div>
{isNameVisible && (
<>
{NotificationElement}
<FormWrapper>
<form onSubmit={!precheck.sso ? handleSubmit : handleSubmitSSO}>
<Title level={4}>Create your account</Title>
<div>
<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>
<Label htmlFor="signupEmail">{t('label_email')}</Label>
<Input
placeholder={t('placeholder_firstname')}
value={firstName}
placeholder={t('placeholder_email')}
type="email"
autoFocus
value={email}
onChange={(e): void => {
setState(e.target.value, setFirstName);
setState(e.target.value, setEmail);
}}
required
id="signupFirstName"
id="signupEmail"
disabled={isDetailsDisable}
/>
</div>
)}
<div>
<Label htmlFor="organizationName">{t('label_orgname')}</Label>
<Input
placeholder={t('placeholder_orgname')}
value={organizationName}
onChange={(e): void => {
setState(e.target.value, setOrganizationName);
}}
required
id="organizationName"
disabled={isDetailsDisable}
/>
</div>
{!precheck.sso && (
{isNameVisible && (
<div>
<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>
<Input
placeholder={t('placeholder_firstname')}
value={firstName}
onChange={(e): void => {
setState(e.target.value, setFirstName);
}}
required
id="signupFirstName"
disabled={isDetailsDisable}
/>
</div>
)}
<div>
<Label htmlFor="Password">{t('label_password')}</Label>
<Input.Password
value={password}
<Label htmlFor="organizationName">{t('label_orgname')}</Label>
<Input
placeholder={t('placeholder_orgname')}
value={organizationName}
onChange={(e): void => {
setState(e.target.value, setPassword);
setState(e.target.value, setOrganizationName);
}}
required
id="currentPassword"
id="organizationName"
disabled={isDetailsDisable}
/>
</div>
)}
{!precheck.sso && (
<div>
<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>
<Input.Password
value={confirmPassword}
onChange={(e): void => {
const updateValue = e.target.value;
setState(updateValue, setConfirmPassword);
{!precheck.sso && (
<div>
<Label htmlFor="Password">{t('label_password')}</Label>
<Input.Password
value={password}
onChange={(e): void => {
setState(e.target.value, setPassword);
}}
required
id="currentPassword"
/>
</div>
)}
{!precheck.sso && (
<div>
<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>
<Input.Password
value={confirmPassword}
onChange={(e): void => {
const updateValue = e.target.value;
setState(updateValue, setConfirmPassword);
}}
required
id="confirmPassword"
/>
{confirmPasswordError && (
<Typography.Paragraph
italic
id="password-confirm-error"
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
{t('failed_confirm_password')}
</Typography.Paragraph>
)}
{isPasswordPolicyError && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
{isPasswordNotValidMessage}
</Typography.Paragraph>
)}
</div>
)}
{isPreferenceVisible && (
<>
<MarginTop marginTop="2.4375rem">
<Space>
<Switch
onChange={(value): void =>
onSwitchHandler(value, setHasOptedUpdates)
}
checked={hasOptedUpdates}
/>
<Typography>{t('prompt_keepme_posted')} </Typography>
</Space>
</MarginTop>
<MarginTop marginTop="0.5rem">
<Space>
<Switch
onChange={(value): void => onSwitchHandler(value, setIsAnonymous)}
checked={isAnonymous}
/>
<Typography>{t('prompt_anonymise')}</Typography>
</Space>
</MarginTop>
</>
)}
{isPreferenceVisible && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
required
id="confirmPassword"
/>
>
This will create an admin account. If you are not an admin, please ask
your admin for an invite link
</Typography.Paragraph>
)}
{confirmPasswordError && (
<Typography.Paragraph
italic
id="password-confirm-error"
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
{t('failed_confirm_password')}
</Typography.Paragraph>
)}
{isPasswordPolicyError && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
{isPasswordNotValidMessage}
</Typography.Paragraph>
)}
</div>
)}
{isPreferenceVisible && (
<>
<MarginTop marginTop="2.4375rem">
<Space>
<Switch
onChange={(value): void => onSwitchHandler(value, setHasOptedUpdates)}
checked={hasOptedUpdates}
/>
<Typography>{t('prompt_keepme_posted')} </Typography>
</Space>
</MarginTop>
<MarginTop marginTop="0.5rem">
<Space>
<Switch
onChange={(value): void => onSwitchHandler(value, setIsAnonymous)}
checked={isAnonymous}
/>
<Typography>{t('prompt_anonymise')}</Typography>
</Space>
</MarginTop>
</>
)}
{isPreferenceVisible && (
<Typography.Paragraph
italic
style={{
color: '#D89614',
marginTop: '0.50rem',
}}
>
This will create an admin account. If you are not an admin, please ask
your admin for an invite link
</Typography.Paragraph>
)}
<ButtonContainer>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
loading={loading}
disabled={
loading ||
!email ||
!organizationName ||
(!precheck.sso && (!password || !confirmPassword)) ||
(!isDetailsDisable && !firstName) ||
confirmPasswordError ||
isPasswordPolicyError
}
>
{t('button_get_started')}
</Button>
</ButtonContainer>
</form>
</FormWrapper>
<ButtonContainer>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
loading={loading}
disabled={
loading ||
!email ||
!organizationName ||
(!precheck.sso && (!password || !confirmPassword)) ||
(!isDetailsDisable && !firstName) ||
confirmPasswordError ||
isPasswordPolicyError
}
>
{t('button_get_started')}
</Button>
</ButtonContainer>
</form>
</FormWrapper>
</>
</WelcomeLeftContainer>
);
}

68
frontend/src/pages/Trace/index.tsx
View File

@ -1,4 +1,5 @@
import { Card } from 'antd';
import { Card, notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import ROUTES from 'constants/routes';
import Filters from 'container/Trace/Filters';
import TraceGraph from 'container/Trace/Graph';
@ -52,21 +53,26 @@ function Trace({
isFilterExclude,
} = useSelector<AppState, TraceReducer>((state) => state.traces);
useEffect(() => {
getInitialFilter(minTime, maxTime);
}, [maxTime, minTime, getInitialFilter, isChanged]);
const [notifications, NotificationElement] = notification.useNotification();
useEffect(() => {
getSpansAggregate({
maxTime,
minTime,
selectedFilter,
current: spansAggregate.currentPage,
pageSize: spansAggregate.pageSize,
selectedTags,
order: spansAggregate.order,
orderParam: spansAggregate.orderParam,
});
getInitialFilter(minTime, maxTime, notifications);
}, [maxTime, minTime, getInitialFilter, isChanged, notifications]);
useEffect(() => {
getSpansAggregate(
{
maxTime,
minTime,
selectedFilter,
current: spansAggregate.currentPage,
pageSize: spansAggregate.pageSize,
selectedTags,
order: spansAggregate.order,
orderParam: spansAggregate.orderParam,
},
notifications,
);
}, [
selectedTags,
selectedFilter,
@ -77,19 +83,23 @@ function Trace({
spansAggregate.pageSize,
spansAggregate.order,
spansAggregate.orderParam,
notifications,
]);
useEffect(() => {
getSpans({
end: maxTime,
function: selectedFunction,
groupBy: selectedGroupBy,
selectedFilter,
selectedTags,
start: minTime,
step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
isFilterExclude,
});
getSpans(
{
end: maxTime,
function: selectedFunction,
groupBy: selectedGroupBy,
selectedFilter,
selectedTags,
start: minTime,
step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
isFilterExclude,
},
notifications,
);
}, [
selectedFunction,
selectedGroupBy,
@ -99,6 +109,7 @@ function Trace({
minTime,
getSpans,
isFilterExclude,
notifications,
]);
useEffect(
@ -128,6 +139,7 @@ function Trace({
return (
<>
{NotificationElement}
<Search />
<Container>
<div>
@ -155,11 +167,15 @@ function Trace({
}
interface DispatchProps {
getSpansAggregate: (props: GetSpansAggregateProps) => void;
getSpans: (props: GetSpansProps) => void;
getSpansAggregate: (
props: GetSpansAggregateProps,
notify: NotificationInstance,
) => void;
getSpans: (props: GetSpansProps, notify: NotificationInstance) => void;
getInitialFilter: (
minTime: GlobalReducer['minTime'],
maxTime: GlobalReducer['maxTime'],
notify: NotificationInstance,
) => void;
}

5
frontend/src/store/actions/dashboard/updatedDashboardVariables.ts
View File

@ -1,4 +1,4 @@
import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import update from 'api/dashboard/update';
import { Dispatch } from 'redux';
import store from 'store/index';
@ -8,6 +8,7 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
export const UpdateDashboardVariables = (
variables: Record<string, IDashboardVariable>,
notify: NotificationInstance,
): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch: Dispatch<AppActions>,
): Promise<void> => {
@ -28,7 +29,7 @@ export const UpdateDashboardVariables = (
});
if (response.statusCode !== 200) {
notification.error({
notify.error({
message: response.error,
});
}

5
frontend/src/store/actions/trace/getInitialFilter.ts
View File

@ -1,4 +1,4 @@
import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import getFiltersApi from 'api/trace/getFilters';
import xor from 'lodash-es/xor';
import { Dispatch, Store } from 'redux';
@ -29,6 +29,7 @@ import {
export const GetInitialTraceFilter = (
minTime: GlobalReducer['minTime'],
maxTime: GlobalReducer['maxTime'],
notify: NotificationInstance,
): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
@ -166,7 +167,7 @@ export const GetInitialTraceFilter = (
},
});
} else {
notification.error({
notify.error({
message: response.error || 'Something went wrong',
});
}

5
frontend/src/store/actions/trace/getInitialSpansAggregate.ts
View File

@ -1,4 +1,4 @@
import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import getSpansAggregate from 'api/trace/getSpansAggregate';
import { Dispatch, Store } from 'redux';
import { AppState } from 'store/reducers';
@ -12,6 +12,7 @@ import { updateURL } from './util';
export const GetSpansAggregate = (
props: GetSpansAggregateProps,
notify: NotificationInstance,
): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
@ -91,7 +92,7 @@ export const GetSpansAggregate = (
spansAggregate.orderParam,
);
} else {
notification.error({
notify.error({
message: response.error || 'Something went wrong',
});

5
frontend/src/store/actions/trace/getSpans.ts
View File

@ -1,4 +1,4 @@
import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import getSpans from 'api/trace/getSpans';
import { Dispatch, Store } from 'redux';
import { AppState } from 'store/reducers';
@ -12,6 +12,7 @@ import { Props } from 'types/api/trace/getSpans';
export const GetSpans = (
props: GetSpansProps,
notify: NotificationInstance,
): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
@ -72,7 +73,7 @@ export const GetSpans = (
},
});
} else {
notification.error({
notify.error({
message: response.error || defaultMessage,
});
dispatch({