Alerting: Add confirmation modals for deleting notifier (#25303)

* Add confirm modals for deleting notifier
* Update public/app/features/alerting/NotificationsListPage.tsx

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
This commit is contained in:
Sofia Papagiannaki 2020-06-03 11:04:38 +03:00 committed by GitHub
parent 17d3bb4287
commit d040daa1cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 10 deletions

View File

@ -5,6 +5,7 @@ import { AppEvents } from '@grafana/data';
import { IScope } from 'angular';
import { promiseToDigest } from '../../core/utils/promiseToDigest';
import config from 'app/core/config';
import { CoreEvents } from 'app/types';
export class AlertNotificationEditCtrl {
theForm: any;
@ -118,6 +119,20 @@ export class AlertNotificationEditCtrl {
}
deleteNotification() {
appEvents.emit(CoreEvents.showConfirmModal, {
title: 'Delete',
text: 'Do you want to delete this notification channel?',
text2: `Deleting this notification channel will not delete from alerts any references to it`,
icon: 'trash-alt',
confirmText: 'Delete',
yesText: 'Delete',
onConfirm: () => {
this.deleteNotificationConfirmed();
},
});
}
deleteNotificationConfirmed() {
promiseToDigest(this.$scope)(
getBackendSrv()
.delete(`/api/alert-notifications/${this.model.id}`)

View File

@ -3,22 +3,21 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import Page from 'app/core/components/Page/Page';
import { getBackendSrv } from '@grafana/runtime';
import { useAsyncFn } from 'react-use';
import { appEvents } from 'app/core/core';
import { useNavModel } from 'app/core/hooks/useNavModel';
import { HorizontalGroup, Button, LinkButton } from '@grafana/ui';
import { CoreEvents } from 'app/types';
import { AlertNotification } from 'app/types/alerting';
const deleteNotification = async (id: number) => {
return await getBackendSrv().delete(`/api/alert-notifications/${id}`);
};
const getNotifications = async () => {
return await getBackendSrv().get(`/api/alert-notifications`);
};
const NotificationsListPage: FC = () => {
const navModel = useNavModel('channels');
const [notifications, setNotifications] = useState<AlertNotification[]>([]);
const getNotifications = async () => {
return await getBackendSrv().get(`/api/alert-notifications`);
};
const [state, fetchNotifications] = useAsyncFn(getNotifications);
useEffect(() => {
fetchNotifications().then(res => {
@ -26,6 +25,26 @@ const NotificationsListPage: FC = () => {
});
}, []);
const deleteNotification = (id: number) => {
appEvents.emit(CoreEvents.showConfirmModal, {
title: 'Delete',
text: 'Do you want to delete this notification channel?',
text2: `Deleting this notification channel will not delete from alerts any references to it`,
icon: 'trash-alt',
confirmText: 'Delete',
yesText: 'Delete',
onConfirm: async () => {
deleteNotificationConfirmed(id);
},
});
};
const deleteNotificationConfirmed = async (id: number) => {
await getBackendSrv().delete(`/api/alert-notifications/${id}`);
const notifications = await fetchNotifications();
setNotifications(notifications);
};
return (
<Page navModel={navModel}>
<Page.Contents>
@ -70,8 +89,6 @@ const NotificationsListPage: FC = () => {
size="sm"
onClick={() => {
deleteNotification(notification.id);
setNotifications(notifications.filter(notify => notify.id !== notification.id));
fetchNotifications();
}}
/>
</HorizontalGroup>