GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-17 00:35:52 +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 { EllipsisOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd'; import { Button, Dropdown, MenuProps } from 'antd';
import { useIsDarkMode } from 'hooks/useDarkMode'; import { useIsDarkMode } from 'hooks/useDarkMode';
import { useState } from 'react';
function DropDown({ element }: { element: JSX.Element[] }): JSX.Element { function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();
@ -14,12 +15,24 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
}), }),
); );
const [isDdOpen, setDdOpen] = useState<boolean>(false);
return ( return (
<Dropdown menu={{ items }}> <Dropdown
menu={{
items,
onMouseEnter: (): void => setDdOpen(true),
onMouseLeave: (): void => setDdOpen(false),
}}
open={isDdOpen}
>
<Button <Button
type="link" type="link"
className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'} className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
onClick={(e): void => e.preventDefault()} onClick={(e): void => {
e.preventDefault();
setDdOpen(true);
}}
> >
<EllipsisOutlined className="dropdown-icon" /> <EllipsisOutlined className="dropdown-icon" />
</Button> </Button>

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

@ -55,6 +55,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
role, role,
); );
const [editLoader, setEditLoader] = useState<boolean>(false);
const [cloneLoader, setCloneLoader] = useState<boolean>(false);
const params = useUrlQuery(); const params = useUrlQuery();
const orderColumnParam = params.get('columnKey'); const orderColumnParam = params.get('columnKey');
const orderQueryParam = params.get('order'); const orderQueryParam = params.get('order');
@ -113,6 +116,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
}, [featureResponse, handleError]); }, [featureResponse, handleError]);
const onEditHandler = (record: GettableAlert) => (): void => { const onEditHandler = (record: GettableAlert) => (): void => {
setEditLoader(true);
featureResponse featureResponse
.refetch() .refetch()
.then(() => { .then(() => {
@ -129,9 +133,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
params.set(QueryParams.ruleId, record.id.toString()); params.set(QueryParams.ruleId, record.id.toString());
setEditLoader(false);
history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`); history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
}) })
.catch(handleError); .catch(handleError)
.finally(() => setEditLoader(false));
}; };
const onCloneHandler = ( const onCloneHandler = (
@ -143,6 +149,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
}; };
const apiReq = { data: copyAlert }; const apiReq = { data: copyAlert };
try {
setCloneLoader(true);
const response = await saveAlertApi(apiReq); const response = await saveAlertApi(apiReq);
if (response.statusCode === 200) { if (response.statusCode === 200) {
@ -171,6 +179,12 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
description: response.error || t('something_went_wrong'), description: response.error || t('something_went_wrong'),
}); });
} }
} catch (error) {
handleError();
console.error(error);
} finally {
setCloneLoader(false);
}
}; };
const handleSearch = useDebouncedFn((e: unknown) => { const handleSearch = useDebouncedFn((e: unknown) => {
@ -314,10 +328,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
setData={setData} setData={setData}
id={id} id={id}
/>, />,
<ColumnButton key="2" onClick={onEditHandler(record)} type="link"> <ColumnButton
key="2"
onClick={onEditHandler(record)}
type="link"
loading={editLoader}
>
Edit Edit
</ColumnButton>, </ColumnButton>,
<ColumnButton key="3" onClick={onCloneHandler(record)} type="link"> <ColumnButton
key="3"
onClick={onCloneHandler(record)}
type="link"
loading={cloneLoader}
>
Clone Clone
</ColumnButton>, </ColumnButton>,
<DeleteAlert <DeleteAlert

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

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