IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: add confirmation modal for deleting notification policies (#47819)

Browse Source
This commit is contained in:
Gilles De Mey 2022-04-19 15:55:54 +02:00 committed by GitHub
parent a068712ac2
commit 69eb6efd6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
View File

@ -1,5 +1,5 @@
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Button, HorizontalGroup, IconButton } from '@grafana/ui'; import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui';
import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes'; import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
import { prepareItems } from '../../utils/dynamicTable'; import { prepareItems } from '../../utils/dynamicTable';
import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable'; import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
@ -75,6 +75,7 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
alertManagerSourceName, alertManagerSourceName,
}) => { }) => {
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
const [expandedId, setExpandedId] = useState<string | number>(); const [expandedId, setExpandedId] = useState<string | number>();
const permissions = getNotificationsPermissions(alertManagerSourceName); const permissions = getNotificationsPermissions(alertManagerSourceName);
const canEditRoutes = contextSrv.hasPermission(permissions.update); const canEditRoutes = contextSrv.hasPermission(permissions.update);
@ -135,27 +136,40 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
}; };
return ( return (
<HorizontalGroup> <>
<Button <HorizontalGroup>
aria-label="Edit route" <Button
icon="pen" aria-label="Edit route"
onClick={expandWithCustomContent} icon="pen"
size="sm" onClick={expandWithCustomContent}
type="button" size="sm"
variant="secondary" type="button"
> variant="secondary"
Edit >
</Button> Edit
<IconButton </Button>
aria-label="Delete route" <IconButton
name="trash-alt" aria-label="Delete route"
onClick={() => { name="trash-alt"
onClick={() => {
setShowDeleteModal(true);
}}
type="button"
/>
</HorizontalGroup>
<ConfirmModal
isOpen={showDeleteModal}
title="Delete notification policy"
body="Deleting this notification policy will permanently remove it. Are you sure you want to delete this policy?"
confirmText="Yes, delete"
icon="exclamation-triangle"
onConfirm={() => {
const newRoutes = deleteRoute(routes, item.data); const newRoutes = deleteRoute(routes, item.data);
onChange(newRoutes); onChange(newRoutes);
}} }}
type="button" onDismiss={() => setShowDeleteModal(false)}
/> />
</HorizontalGroup> </>
); );
}, },
size: '100px', size: '100px',