Implemented notification modal.
This commit is contained in:
Skorpios committed
1 parent
7eea24a63e
commit
b44d142920
2 files changed
+427
-1
No files matched your search
@@ -23,6 +23,7 @@ import Radio from "../../../Components/Inputs/Radio";
|
||||
import Checkbox from "../../../Components/Inputs/Checkbox";
|
||||
import Select from "../../../Components/Inputs/Select";
|
||||
import ConfigBox from "../../../Components/ConfigBox";
|
||||
import NotificationIntegrationModal from "../Details/Components/NotificationIntegrationModal/NotificationIntegrationModal";
|
||||
const CreateMonitor = () => {
|
||||
const MS_PER_MINUTE = 60000;
|
||||
const SELECT_VALUES = [
|
||||
@@ -80,6 +81,11 @@ const CreateMonitor = () => {
|
||||
];
|
||||
|
||||
// State
|
||||
const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
|
||||
|
||||
const handleOpenNotificationModal = () => {
|
||||
setIsNotificationModalOpen(true);
|
||||
};
|
||||
const [errors, setErrors] = useState({});
|
||||
const [https, setHttps] = useState(true);
|
||||
const [monitor, setMonitor] = useState({
|
||||
@@ -411,7 +417,7 @@ const CreateMonitor = () => {
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleAddNotification}
|
||||
onClick={handleOpenNotificationModal}
|
||||
>
|
||||
Notification Integration
|
||||
</Button>
|
||||
@@ -512,6 +518,13 @@ const CreateMonitor = () => {
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<NotificationIntegrationModal
|
||||
open={isNotificationModalOpen}
|
||||
onClose={() => setIsNotificationModalOpen(false)}
|
||||
monitor={monitor}
|
||||
setMonitor={setMonitor}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
+413
@@ -0,0 +1,413 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Stack,
|
||||
Typography,
|
||||
Box,
|
||||
Tabs,
|
||||
Tab,
|
||||
Divider
|
||||
} from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import TextInput from "../../../../../../src/Components/Inputs/TextInput";
|
||||
import Checkbox from "../../../../../../src/Components/Inputs/Checkbox";
|
||||
|
||||
// Tab Panel component
|
||||
function TabPanel({ children, value, index, ...other }) {
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`notification-tabpanel-${index}`}
|
||||
aria-labelledby={`notification-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ pt: 3 }}>
|
||||
{children}
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const NotificationIntegrationModal = ({
|
||||
open,
|
||||
onClose,
|
||||
monitor,
|
||||
setMonitor
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const [tabValue, setTabValue] = useState(0);
|
||||
const [integrations, setIntegrations] = useState({
|
||||
slack: monitor?.notifications?.some(n => n.type === "slack") || false,
|
||||
slackWebhook: monitor?.notifications?.find(n => n.type === "slack")?.webhook || "",
|
||||
discord: monitor?.notifications?.some(n => n.type === "discord") || false,
|
||||
discordWebhook: monitor?.notifications?.find(n => n.type === "discord")?.webhook || "",
|
||||
telegram: monitor?.notifications?.some(n => n.type === "telegram") || false,
|
||||
telegramToken: monitor?.notifications?.find(n => n.type === "telegram")?.token || "",
|
||||
telegramChatId: monitor?.notifications?.find(n => n.type === "telegram")?.chatId || "",
|
||||
webhook: monitor?.notifications?.some(n => n.type === "webhook") || false,
|
||||
webhookUrl: monitor?.notifications?.find(n => n.type === "webhook")?.url || "",
|
||||
});
|
||||
|
||||
const testNotificationButtonStyle = {
|
||||
textDecoration: 'underline',
|
||||
color: '#344054',
|
||||
textTransform: 'none',
|
||||
padding: '0 !important',
|
||||
margin: 0,
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 'normal',
|
||||
backgroundColor: 'transparent !important',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent !important',
|
||||
textDecoration: 'underline'
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
minWidth: '0 !important',
|
||||
boxShadow: 'none !important',
|
||||
border: 'none !important'
|
||||
};
|
||||
|
||||
const handleChangeTab = (event, newValue) => {
|
||||
setTabValue(newValue);
|
||||
};
|
||||
|
||||
const handleIntegrationChange = (type, checked) => {
|
||||
setIntegrations(prev => ({
|
||||
...prev,
|
||||
[type]: checked
|
||||
}));
|
||||
};
|
||||
|
||||
const handleInputChange = (type, value) => {
|
||||
setIntegrations(prev => ({
|
||||
...prev,
|
||||
[type]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleTestNotification = (type) => {
|
||||
console.log(`Testing ${type} notification`);
|
||||
// Here you would implement the actual test notification functionality
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// Create notifications array based on selected integrations
|
||||
const notifications = [...(monitor?.notifications || [])];
|
||||
|
||||
// Filter out existing integrations that will be updated
|
||||
const existingTypes = ["slack", "discord", "telegram", "webhook"];
|
||||
const filteredNotifications = notifications.filter(
|
||||
notification => !existingTypes.includes(notification.type)
|
||||
);
|
||||
|
||||
// Add selected integrations
|
||||
if (integrations.slack) {
|
||||
filteredNotifications.push({
|
||||
type: "slack",
|
||||
webhook: integrations.slackWebhook
|
||||
});
|
||||
}
|
||||
|
||||
if (integrations.discord) {
|
||||
filteredNotifications.push({
|
||||
type: "discord",
|
||||
webhook: integrations.discordWebhook
|
||||
});
|
||||
}
|
||||
|
||||
if (integrations.telegram) {
|
||||
filteredNotifications.push({
|
||||
type: "telegram",
|
||||
token: integrations.telegramToken,
|
||||
chatId: integrations.telegramChatId
|
||||
});
|
||||
}
|
||||
|
||||
if (integrations.webhook) {
|
||||
filteredNotifications.push({
|
||||
type: "webhook",
|
||||
url: integrations.webhookUrl
|
||||
});
|
||||
}
|
||||
|
||||
// Update monitor with new notifications
|
||||
setMonitor(prev => ({
|
||||
...prev,
|
||||
notifications: filteredNotifications
|
||||
}));
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
fullWidth
|
||||
maxWidth="md"
|
||||
sx={{
|
||||
'& .MuiDialog-paper': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: '#344054'
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
<DialogContent>
|
||||
<Box sx={{ display: 'flex', height: '500px' }}>
|
||||
{/* Left sidebar with tabs */}
|
||||
<Box sx={{
|
||||
borderRight: 1,
|
||||
borderColor: 'divider',
|
||||
minWidth: '200px',
|
||||
pr: 20
|
||||
}}>
|
||||
<Typography variant="subtitle1" sx={{ my: 2, fontWeight: 'bold', fontSize: '0.9rem', color: '#344054'}}>
|
||||
Add or edit notifications
|
||||
</Typography>
|
||||
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
variant="scrollable"
|
||||
value={tabValue}
|
||||
onChange={handleChangeTab}
|
||||
aria-label="Notification tabs"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'& .MuiTab-root': {
|
||||
alignItems: 'flex-start',
|
||||
px: 2,
|
||||
fontSize: '0.9rem',
|
||||
color: theme.palette.primary.contrastText,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
border: 'none',
|
||||
borderBottom: 'none',
|
||||
borderRight: 'none',
|
||||
'&.Mui-selected': {
|
||||
color: theme.palette.primary.contrastText,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
opacity: 1,
|
||||
border: 'none',
|
||||
borderBottom: 'none',
|
||||
borderRight: 'none'
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.tertiary.main,
|
||||
border: 'none'
|
||||
}
|
||||
},
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab label="Slack" />
|
||||
<Tab label="Discord" />
|
||||
<Tab label="Telegram" />
|
||||
<Tab label="Webhooks" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Right side content */}
|
||||
<Box sx={{ flex: 1, pl: 15 }}>
|
||||
{/* Slack Tab */}
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Slack</Typography>
|
||||
<Typography sx={{ mt: 1, mb: 3 }}>
|
||||
To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: 3 }}>
|
||||
<Checkbox
|
||||
id="enable-slack"
|
||||
label="Enable Slack notifications"
|
||||
isChecked={integrations.slack}
|
||||
onChange={(e) => handleIntegrationChange('slack', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography sx={{ mb: 4, fontWeight: 'bold' }}>Webhook URL</Typography>
|
||||
<TextInput
|
||||
id="slack-webhook"
|
||||
type="text"
|
||||
placeholder="https://hooks.slack.com/services/..."
|
||||
value={integrations.slackWebhook}
|
||||
onChange={(e) => handleInputChange('slackWebhook', e.target.value)}
|
||||
disabled={!integrations.slack}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('slack')}
|
||||
disabled={!integrations.slack || !integrations.slackWebhook}
|
||||
sx={testNotificationButtonStyle}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Discord Tab */}
|
||||
<TabPanel value={tabValue} index={1}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Discord</Typography>
|
||||
<Typography sx={{ mt: 1, mb: 3 }}>
|
||||
To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord's incoming Webhooks feature.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: 3 }}>
|
||||
<Checkbox
|
||||
id="enable-discord"
|
||||
label="Enable Discord notifications"
|
||||
isChecked={integrations.discord}
|
||||
onChange={(e) => handleIntegrationChange('discord', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography sx={{ mb: 4, fontWeight: 'bold' }}>Discord Webhook URL</Typography>
|
||||
<TextInput
|
||||
id="discord-webhook"
|
||||
type="text"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
value={integrations.discordWebhook}
|
||||
onChange={(e) => handleInputChange('discordWebhook', e.target.value)}
|
||||
disabled={!integrations.discord}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('discord')}
|
||||
disabled={!integrations.discord || !integrations.discordWebhook}
|
||||
sx={testNotificationButtonStyle}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Telegram Tab */}
|
||||
<TabPanel value={tabValue} index={2}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Telegram</Typography>
|
||||
<Typography sx={{ mt: 1, mb: 3 }}>
|
||||
To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: 3 }}>
|
||||
<Checkbox
|
||||
id="enable-telegram"
|
||||
label="Enable Telegram notifications"
|
||||
isChecked={integrations.telegram}
|
||||
onChange={(e) => handleIntegrationChange('telegram', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography sx={{ mb: 4, fontWeight: 'bold' }}>Your bot token</Typography>
|
||||
<TextInput
|
||||
id="telegram-token"
|
||||
type="text"
|
||||
placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
|
||||
value={integrations.telegramToken}
|
||||
onChange={(e) => handleInputChange('telegramToken', e.target.value)}
|
||||
disabled={!integrations.telegram}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography sx={{ mb: 4, fontWeight: 'bold' }}>Your Chat ID</Typography>
|
||||
<TextInput
|
||||
id="telegram-chat-id"
|
||||
type="text"
|
||||
placeholder="-1001234567890"
|
||||
value={integrations.telegramChatId}
|
||||
onChange={(e) => handleInputChange('telegramChatId', e.target.value)}
|
||||
disabled={!integrations.telegram}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('telegram')}
|
||||
disabled={!integrations.telegram || !integrations.telegramToken || !integrations.telegramChatId}
|
||||
sx={testNotificationButtonStyle}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Webhooks Tab */}
|
||||
<TabPanel value={tabValue} index={3}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{ fontWeight: 'bold' }}>Webhooks</Typography>
|
||||
<Typography sx={{ mt: 1, mb: 3 }}>
|
||||
You can set up a custom webhook to receive notifications when incidents occur.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: 3 }}>
|
||||
<Checkbox
|
||||
id="enable-webhook"
|
||||
label="Enable Webhook notifications"
|
||||
isChecked={integrations.webhook}
|
||||
onChange={(e) => handleIntegrationChange('webhook', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography sx={{ mb: 4, fontWeight: 'bold' }}>Webhook URL</Typography>
|
||||
<TextInput
|
||||
id="webhook-url"
|
||||
type="text"
|
||||
placeholder="https://your-server.com/webhook"
|
||||
value={integrations.webhookUrl}
|
||||
onChange={(e) => handleInputChange('webhookUrl', e.target.value)}
|
||||
disabled={!integrations.webhook}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('webhook')}
|
||||
disabled={!integrations.webhook || !integrations.webhookUrl}
|
||||
sx={testNotificationButtonStyle}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: theme.spacing(4) }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationIntegrationModal;
|
||||
Reference in new issue
Block a user