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

refactor(ListAlert): update styles and button layout (#5931)

Browse Source
This commit is contained in:
Sudeep MP 2024-09-12 20:33:22 +01:00 committed by GitHub
parent 90b5f88413
commit 6c446226eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
/* eslint-disable react/display-name */ /* eslint-disable react/display-name */
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { Input, Typography } from 'antd'; import { Flex, Input, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table/interface'; import type { ColumnsType } from 'antd/es/table/interface';
import saveAlertApi from 'api/alerts/save'; import saveAlertApi from 'api/alerts/save';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
@ -34,12 +34,7 @@ import { GettableAlert } from 'types/api/alerts/get';
import AppReducer from 'types/reducer/app'; import AppReducer from 'types/reducer/app';
import DeleteAlert from './DeleteAlert'; import DeleteAlert from './DeleteAlert';
import { import { Button, ColumnButton, SearchContainer } from './styles';
Button,
ButtonContainer,
ColumnButton,
SearchContainer,
} from './styles';
import Status from './TableComponents/Status'; import Status from './TableComponents/Status';
import ToggleAlertState from './ToggleAlertState'; import ToggleAlertState from './ToggleAlertState';
import { alertActionLogEvent, filterAlerts } from './utils'; import { alertActionLogEvent, filterAlerts } from './utils';
@ -373,21 +368,25 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
onChange={handleSearch} onChange={handleSearch}
defaultValue={searchString} defaultValue={searchString}
/> />
<ButtonContainer> <Flex gap={12}>
{addNewAlert && (
<Button
type="primary"
onClick={onClickNewAlertHandler}
icon={<PlusOutlined />}
>
New Alert
</Button>
)}
<TextToolTip <TextToolTip
{...{ {...{
text: `More details on how to create alerts`, text: `More details on how to create alerts`,
url: url:
'https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts', 'https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts',
urlText: 'Learn More',
}} }}
/> />
</Flex>
{addNewAlert && (
<Button onClick={onClickNewAlertHandler} icon={<PlusOutlined />}>
New Alert
</Button>
)}
</ButtonContainer>
</SearchContainer> </SearchContainer>
<DynamicColumnTable <DynamicColumnTable
tablesource={TableDataSource.Alert} tablesource={TableDataSource.Alert}

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

@ -9,12 +9,6 @@ export const SearchContainer = styled.div`
gap: 2rem; gap: 2rem;
} }
`; `;
export const ButtonContainer = styled.div`
&&& {
display: flex;
align-items: center;
}
`;
export const Button = styled(ButtonComponent)` export const Button = styled(ButtonComponent)`
&&& { &&& {