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

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

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,6 +136,7 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
}; };
return ( return (
<>
<HorizontalGroup> <HorizontalGroup>
<Button <Button
aria-label="Edit route" aria-label="Edit route"
@ -150,12 +152,24 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
aria-label="Delete route" aria-label="Delete route"
name="trash-alt" name="trash-alt"
onClick={() => { onClick={() => {
const newRoutes = deleteRoute(routes, item.data); setShowDeleteModal(true);
onChange(newRoutes);
}} }}
type="button" type="button"
/> />
</HorizontalGroup> </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);
onChange(newRoutes);
}}
onDismiss={() => setShowDeleteModal(false)}
/>
</>
); );
}, },
size: '100px', size: '100px',