101 lines
No EOL
2.9 KiB
TypeScript
101 lines
No EOL
2.9 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/Confirmation';
|
|
|
|
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>
|
|
{/* <IconButton
|
|
circle
|
|
size="small"
|
|
icon="plus"
|
|
outline
|
|
id="add-button"
|
|
onClick={ () => toggleForm({}, true) }
|
|
/> */}
|
|
</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) |