GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 13:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed flakiness in alert list actions - delete, edit, clone & toggle (#5237)

Browse Source 
* fix: fixed flakiness in alert list actions - delete, edit, clone & toggle

* fix: added onhover dropdown open and close
This commit is contained in:
SagarRajput-7 2024-06-19 12:10:43 +05:30 committed by GitHub
parent c0195e9dc9
commit b69e97d7b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/DropDown/DropDown.tsx
View File

@ -3,6 +3,7 @@ import './DropDown.styles.scss';
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd';
import { useIsDarkMode } from 'hooks/useDarkMode';
import { useState } from 'react';
function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
const isDarkMode = useIsDarkMode();
@ -14,12 +15,24 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
}),
);
const [isDdOpen, setDdOpen] = useState<boolean>(false);
return (
<Dropdown menu={{ items }}>
<Dropdown
menu={{
items,
onMouseEnter: (): void => setDdOpen(true),
onMouseLeave: (): void => setDdOpen(false),
}}
open={isDdOpen}
>
<Button
type="link"
className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
onClick={(e): void => e.preventDefault()}
onClick={(e): void => {
e.preventDefault();
setDdOpen(true);
}}
>
<EllipsisOutlined className="dropdown-icon" />
</Button>

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

@ -55,6 +55,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
role,
);
const [editLoader, setEditLoader] = useState<boolean>(false);
const [cloneLoader, setCloneLoader] = useState<boolean>(false);
const params = useUrlQuery();
const orderColumnParam = params.get('columnKey');
const orderQueryParam = params.get('order');
@ -113,6 +116,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
}, [featureResponse, handleError]);
const onEditHandler = (record: GettableAlert) => (): void => {
setEditLoader(true);
featureResponse
.refetch()
.then(() => {
@ -129,9 +133,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
params.set(QueryParams.ruleId, record.id.toString());
setEditLoader(false);
history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
})
.catch(handleError);
.catch(handleError)
.finally(() => setEditLoader(false));
};
const onCloneHandler = (
@ -143,33 +149,41 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
};
const apiReq = { data: copyAlert };
const response = await saveAlertApi(apiReq);
try {
setCloneLoader(true);
const response = await saveAlertApi(apiReq);
if (response.statusCode === 200) {
notificationsApi.success({
message: 'Success',
description: 'Alert cloned successfully',
});
if (response.statusCode === 200) {
notificationsApi.success({
message: 'Success',
description: 'Alert cloned successfully',
});
const { data: refetchData, status } = await refetch();
if (status === 'success' && refetchData.payload) {
setData(refetchData.payload || []);
setTimeout(() => {
const clonedAlert = refetchData.payload[refetchData.payload.length - 1];
params.set(QueryParams.ruleId, String(clonedAlert.id));
history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
}, 2000);
}
if (status === 'error') {
const { data: refetchData, status } = await refetch();
if (status === 'success' && refetchData.payload) {
setData(refetchData.payload || []);
setTimeout(() => {
const clonedAlert = refetchData.payload[refetchData.payload.length - 1];
params.set(QueryParams.ruleId, String(clonedAlert.id));
history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
}, 2000);
}
if (status === 'error') {
notificationsApi.error({
message: t('something_went_wrong'),
});
}
} else {
notificationsApi.error({
message: t('something_went_wrong'),
message: 'Error',
description: response.error || t('something_went_wrong'),
});
}
} else {
notificationsApi.error({
message: 'Error',
description: response.error || t('something_went_wrong'),
});
} catch (error) {
handleError();
console.error(error);
} finally {
setCloneLoader(false);
}
};
@ -314,10 +328,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
setData={setData}
id={id}
/>,
<ColumnButton key="2" onClick={onEditHandler(record)} type="link">
<ColumnButton
key="2"
onClick={onEditHandler(record)}
type="link"
loading={editLoader}
>
Edit
</ColumnButton>,
<ColumnButton key="3" onClick={onCloneHandler(record)} type="link">
<ColumnButton
key="3"
onClick={onCloneHandler(record)}
type="link"
loading={cloneLoader}
>
Clone
</ColumnButton>,
<DeleteAlert

3
frontend/src/container/ListAlertRules/styles.ts
View File

@ -27,5 +27,8 @@ export const ColumnButton = styled(ButtonComponent)`
padding-left: 0;
padding-right: 0;
margin-right: 1.5em;
width: 100%;
display: flex;
align-items: center;
}
`;