106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { SlideModal, IconButton } from 'UI';
|
|
import { init, edit, save, remove } from 'Duck/alerts';
|
|
import { fetchList as fetchWebhooks } from 'Duck/webhook';
|
|
import AlertForm from '../AlertForm';
|
|
import { connect } from 'react-redux';
|
|
import { setShowAlerts } from 'Duck/dashboard';
|
|
import { EMAIL, SLACK, WEBHOOK } from 'App/constants/schedule';
|
|
import { confirm } from 'UI';
|
|
|
|
interface Props {
|
|
showModal?: boolean;
|
|
metricId?: number;
|
|
onClose?: () => void;
|
|
webhooks: any;
|
|
fetchWebhooks: Function;
|
|
save: Function;
|
|
remove: Function;
|
|
init: Function;
|
|
edit: Function;
|
|
}
|
|
function AlertFormModal(props: Props) {
|
|
const { metricId = null, showModal = false, webhooks } = props;
|
|
const [showForm, setShowForm] = useState(false);
|
|
|
|
useEffect(() => {
|
|
props.fetchWebhooks();
|
|
}, []);
|
|
|
|
const slackChannels = webhooks
|
|
.filter((hook) => hook.type === SLACK)
|
|
.map(({ webhookId, name }) => ({ value: webhookId, text: name }))
|
|
.toJS();
|
|
const hooks = webhooks
|
|
.filter((hook) => hook.type === WEBHOOK)
|
|
.map(({ webhookId, name }) => ({ value: webhookId, text: name }))
|
|
.toJS();
|
|
|
|
const saveAlert = (instance) => {
|
|
const wasUpdating = instance.exists();
|
|
props.save(instance).then(() => {
|
|
if (!wasUpdating) {
|
|
toggleForm(null, false);
|
|
}
|
|
if (props.onClose) {
|
|
props.onClose();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onDelete = async (instance) => {
|
|
if (
|
|
await confirm({
|
|
header: 'Confirm',
|
|
confirmButton: 'Yes, delete',
|
|
confirmation: `Are you sure you want to permanently delete this alert?`,
|
|
})
|
|
) {
|
|
props.remove(instance.alertId).then(() => {
|
|
toggleForm(null, false);
|
|
});
|
|
}
|
|
};
|
|
|
|
const toggleForm = (instance, state) => {
|
|
if (instance) {
|
|
props.init(instance);
|
|
}
|
|
return setShowForm(state ? state : !showForm);
|
|
};
|
|
|
|
return (
|
|
<SlideModal
|
|
title={
|
|
<div className="flex items-center">
|
|
<span className="mr-3">{'Create Alert'}</span>
|
|
</div>
|
|
}
|
|
isDisplayed={showModal}
|
|
onClose={props.onClose}
|
|
size="medium"
|
|
content={
|
|
showModal && (
|
|
<AlertForm
|
|
metricId={metricId}
|
|
edit={props.edit}
|
|
slackChannels={slackChannels}
|
|
webhooks={hooks}
|
|
onSubmit={saveAlert}
|
|
onClose={props.onClose}
|
|
onDelete={onDelete}
|
|
style={{ width: '580px', height: '100vh - 200px' }}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
(state) => ({
|
|
webhooks: state.getIn(['webhooks', 'list']),
|
|
instance: state.getIn(['alerts', 'instance']),
|
|
}),
|
|
{ init, edit, save, remove, fetchWebhooks, setShowAlerts }
|
|
)(AlertFormModal);
|