mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-09 19:29:45 -06:00
Made tabs configure ready.
This commit is contained in:
Skorpios
@@ -14,25 +14,98 @@ import TextInput from "../Inputs/TextInput";
|
||||
import Checkbox from "../Inputs/Checkbox";
|
||||
import TabPanel from "./TabPanel";
|
||||
|
||||
// Configuration for notification tabs
|
||||
const NOTIFICATION_TYPES = [
|
||||
{
|
||||
id: 'slack',
|
||||
label: 'Slack',
|
||||
description: 'To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.',
|
||||
fields: [
|
||||
{
|
||||
id: 'webhook',
|
||||
label: 'Webhook URL',
|
||||
placeholder: 'https://hooks.slack.com/services/...',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'discord',
|
||||
label: 'Discord',
|
||||
description: 'To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord\'s incoming Webhooks feature.',
|
||||
fields: [
|
||||
{
|
||||
id: 'webhook',
|
||||
label: 'Discord Webhook URL',
|
||||
placeholder: 'https://discord.com/api/webhooks/...',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'telegram',
|
||||
label: 'Telegram',
|
||||
description: '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.',
|
||||
fields: [
|
||||
{
|
||||
id: 'token',
|
||||
label: 'Your bot token',
|
||||
placeholder: '123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
id: 'chatId',
|
||||
label: 'Your Chat ID',
|
||||
placeholder: '-1001234567890',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'webhook',
|
||||
label: 'Webhooks',
|
||||
description: 'You can set up a custom webhook to receive notifications when incidents occur.',
|
||||
fields: [
|
||||
{
|
||||
id: 'url',
|
||||
label: 'Webhook URL',
|
||||
placeholder: 'https://your-server.com/webhook',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const NotificationIntegrationModal = ({
|
||||
open,
|
||||
onClose,
|
||||
monitor,
|
||||
setMonitor
|
||||
setMonitor,
|
||||
// Optional prop to configure available notification types
|
||||
notificationTypes = NOTIFICATION_TYPES
|
||||
}) => {
|
||||
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 || "",
|
||||
});
|
||||
|
||||
// Initialize integrations state based on available notification types
|
||||
const initializeIntegrationsState = () => {
|
||||
const state = {};
|
||||
|
||||
notificationTypes.forEach(type => {
|
||||
// Add enabled flag for each notification type
|
||||
state[type.id] = monitor?.notifications?.some(n => n.type === type.id) || false;
|
||||
|
||||
// Add state for each field in the notification type
|
||||
type.fields.forEach(field => {
|
||||
const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
|
||||
state[fieldKey] = monitor?.notifications?.find(n => n.type === type.id)?.[field.id] || "";
|
||||
});
|
||||
});
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
const [integrations, setIntegrations] = useState(initializeIntegrationsState());
|
||||
|
||||
const handleChangeTab = (event, newValue) => {
|
||||
setTabValue(newValue);
|
||||
@@ -61,39 +134,30 @@ const NotificationIntegrationModal = ({
|
||||
//notifications array for selected integrations
|
||||
const notifications = [...(monitor?.notifications || [])];
|
||||
|
||||
const existingTypes = ["slack", "discord", "telegram", "webhook"];
|
||||
// Get all notification types IDs
|
||||
const existingTypes = notificationTypes.map(type => type.id);
|
||||
|
||||
// Filter out notifications that are configurable in this modal
|
||||
const filteredNotifications = notifications.filter(
|
||||
notification => !existingTypes.includes(notification.type)
|
||||
);
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
// Add each enabled notification with its configured fields
|
||||
notificationTypes.forEach(type => {
|
||||
if (integrations[type.id]) {
|
||||
const notificationObject = {
|
||||
type: type.id
|
||||
};
|
||||
|
||||
// Add each field value to the notification object
|
||||
type.fields.forEach(field => {
|
||||
const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
|
||||
notificationObject[field.id] = integrations[fieldKey];
|
||||
});
|
||||
|
||||
filteredNotifications.push(notificationObject);
|
||||
}
|
||||
});
|
||||
|
||||
// Update monitor with new notifications
|
||||
setMonitor(prev => ({
|
||||
@@ -141,234 +205,74 @@ const NotificationIntegrationModal = ({
|
||||
onChange={handleChangeTab}
|
||||
aria-label="Notification tabs"
|
||||
>
|
||||
<Tab label="Slack" orientation="vertical" />
|
||||
<Tab label="Discord" orientation="vertical" />
|
||||
<Tab label="Telegram" orientation="vertical" />
|
||||
<Tab label="Webhooks" orientation="vertical" />
|
||||
{notificationTypes.map((type, index) => (
|
||||
<Tab key={type.id} label={type.label} orientation="vertical" />
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Right side content */}
|
||||
<Box sx={{ flex: 1, pl: theme.spacing(7.5) }}>
|
||||
{/* Slack Tab */}
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>Slack</Typography>
|
||||
<Typography sx={{
|
||||
mt: theme.spacing(0.5),
|
||||
mb: theme.spacing(1.5),
|
||||
color: theme.palette.primary.contrastTextTertiary
|
||||
}}>
|
||||
To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: theme.spacing(1.5) }}>
|
||||
<Checkbox
|
||||
id="enable-slack"
|
||||
label="Enable Slack notifications"
|
||||
isChecked={integrations.slack}
|
||||
onChange={(e) => handleIntegrationChange('slack', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
{notificationTypes.map((type, index) => (
|
||||
<TabPanel key={type.id} value={tabValue} index={index}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>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: theme.spacing(1) }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('slack')}
|
||||
disabled={!integrations.slack || !integrations.slackWebhook}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Discord Tab */}
|
||||
<TabPanel value={tabValue} index={1}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>Discord</Typography>
|
||||
<Typography sx={{
|
||||
mt: theme.spacing(0.5),
|
||||
mb: theme.spacing(1.5),
|
||||
color: theme.palette.primary.contrastTextTertiary
|
||||
}}>
|
||||
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: theme.spacing(1.5) }}>
|
||||
<Checkbox
|
||||
id="enable-discord"
|
||||
label="Enable Discord notifications"
|
||||
isChecked={integrations.discord}
|
||||
onChange={(e) => handleIntegrationChange('discord', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
}}>{type.label}</Typography>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>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: theme.spacing(1) }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('discord')}
|
||||
disabled={!integrations.discord || !integrations.discordWebhook}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Telegram Tab */}
|
||||
<TabPanel value={tabValue} index={2}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>Telegram</Typography>
|
||||
<Typography sx={{
|
||||
mt: theme.spacing(0.5),
|
||||
mb: theme.spacing(1.5),
|
||||
color: theme.palette.primary.contrastTextTertiary
|
||||
}}>
|
||||
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: theme.spacing(1.5) }}>
|
||||
<Checkbox
|
||||
id="enable-telegram"
|
||||
label="Enable Telegram notifications"
|
||||
isChecked={integrations.telegram}
|
||||
onChange={(e) => handleIntegrationChange('telegram', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>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: theme.spacing(1) }}>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>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: theme.spacing(1) }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('telegram')}
|
||||
disabled={!integrations.telegram || !integrations.telegramToken || !integrations.telegramChatId}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
|
||||
{/* Webhooks Tab */}
|
||||
<TabPanel value={tabValue} index={3}>
|
||||
<Typography variant="subtitle1" component="h4" sx={{
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>Webhooks</Typography>
|
||||
<Typography sx={{
|
||||
mt: theme.spacing(0.5),
|
||||
mb: theme.spacing(1.5),
|
||||
color: theme.palette.primary.contrastTextTertiary
|
||||
}}>
|
||||
You can set up a custom webhook to receive notifications when incidents occur.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: theme.spacing(1.5) }}>
|
||||
<Checkbox
|
||||
id="enable-webhook"
|
||||
label="Enable Webhook notifications"
|
||||
isChecked={integrations.webhook}
|
||||
onChange={(e) => handleIntegrationChange('webhook', e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>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: theme.spacing(1) }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification('webhook')}
|
||||
disabled={!integrations.webhook || !integrations.webhookUrl}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
mt: theme.spacing(0.5),
|
||||
mb: theme.spacing(1.5),
|
||||
color: theme.palette.primary.contrastTextTertiary
|
||||
}}>
|
||||
{type.description}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ pl: theme.spacing(1.5) }}>
|
||||
<Checkbox
|
||||
id={`enable-${type.id}`}
|
||||
label={`Enable ${type.label} notifications`}
|
||||
isChecked={integrations[type.id]}
|
||||
onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{type.fields.map(field => {
|
||||
const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
|
||||
|
||||
return (
|
||||
<Box key={field.id} sx={{ mt: theme.spacing(1) }}>
|
||||
<Typography sx={{
|
||||
mb: theme.spacing(2),
|
||||
fontWeight: 'bold',
|
||||
color: theme.palette.primary.contrastTextSecondary
|
||||
}}>{field.label}</Typography>
|
||||
<TextInput
|
||||
id={`${type.id}-${field.id}`}
|
||||
type={field.type}
|
||||
placeholder={field.placeholder}
|
||||
value={integrations[fieldKey]}
|
||||
onChange={(e) => handleInputChange(fieldKey, e.target.value)}
|
||||
disabled={!integrations[type.id]}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
|
||||
<Box sx={{ mt: theme.spacing(1) }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={() => handleTestNotification(type.id)}
|
||||
disabled={!integrations[type.id] || !type.fields.every(field => {
|
||||
const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
|
||||
return integrations[fieldKey];
|
||||
})}
|
||||
>
|
||||
Test notification
|
||||
</Button>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user