Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(notifications): WIP add schema and modal

Browse Source
This commit is contained in:
Mauricio Siu
2024-07-09 01:14:09 -06:00
parent 675fbb7692
commit 680811357b
14 changed files with 4361 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

577
components/dashboard/settings/notifications/add-notification.tsx Normal file
View File

@@ -0,0 +1,577 @@
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { AlertTriangle, Mail } from "lucide-react";
import {
DiscordIcon,
SlackIcon,
TelegramIcon,
} from "@/components/icons/notification-icons";
import { Switch } from "@/components/ui/switch";
const baseDatabaseSchema = z.object({
name: z.string().min(1, "Name required"),
appDeploy: z.boolean().default(false),
userJoin: z.boolean().default(false),
appBuilderError: z.boolean().default(false),
databaseBackup: z.boolean().default(false),
dokployRestart: z.boolean().default(false),
});
const mySchema = z.discriminatedUnion("type", [
z
.object({
type: z.literal("slack"),
webhookUrl: z.string().min(1),
channel: z.string().min(1),
})
.merge(baseDatabaseSchema),
z
.object({
type: z.literal("telegram"),
botToken: z.string().min(1),
chatId: z.string().min(1),
})
.merge(baseDatabaseSchema),
z
.object({
type: z.literal("discord"),
webhookUrl: z.string().min(1),
})
.merge(baseDatabaseSchema),
z
.object({
type: z.literal("email"),
smtpServer: z.string().min(1),
smtpPort: z.string().min(1),
username: z.string().min(1),
password: z.string().min(1),
toAddresses: z.array(z.string()).min(1),
})
.merge(baseDatabaseSchema),
]);
const notificationsMap = {
slack: {
icon: <SlackIcon />,
label: "Slack",
},
telegram: {
icon: <TelegramIcon />,
label: "Telegram",
},
discord: {
icon: <DiscordIcon />,
label: "Discord",
},
email: {
icon: <Mail size={29} className="text-muted-foreground" />,
label: "Email",
},
};
type AddNotification = z.infer<typeof mySchema>;
export const AddNotification = () => {
const utils = api.useUtils();
const [visible, setVisible] = useState(false);
const slackMutation = api.notification.createSlack.useMutation();
const telegramMutation = api.notification.createTelegram.useMutation();
const discordMutation = api.notification.createDiscord.useMutation();
const emailMutation = api.notification.createEmail.useMutation();
const form = useForm<AddNotification>({
defaultValues: {
type: "slack",
webhookUrl: "",
channel: "",
},
resolver: zodResolver(mySchema),
});
useEffect(() => {
form.reset();
}, [form, form.reset, form.formState.isSubmitSuccessful]);
const type = form.watch("type");
const activeMutation = {
slack: slackMutation,
telegram: telegramMutation,
discord: discordMutation,
email: emailMutation,
};
const onSubmit = async (data: AddNotification) => {
const {
appBuilderError,
appDeploy,
dokployRestart,
databaseBackup,
userJoin,
} = data;
let promise: Promise<unknown> | null = null;
if (data.type === "slack") {
promise = slackMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
webhookUrl: data.webhookUrl,
channel: data.channel,
name: data.name,
});
} else if (data.type === "telegram") {
promise = telegramMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
botToken: data.botToken,
chatId: data.chatId,
name: data.name,
});
} else if (data.type === "discord") {
promise = discordMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
webhookUrl: data.webhookUrl,
name: data.name,
});
} else if (data.type === "email") {
promise = emailMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
smtpServer: data.smtpServer,
smtpPort: data.smtpPort,
username: data.username,
password: data.password,
toAddresses: data.toAddresses,
name: data.name,
});
}
if (promise) {
await promise
.then(async () => {
toast.success("Notification Created");
form.reset({
type: "slack",
webhookUrl: "",
});
setVisible(false);
await utils.notification.all.invalidate();
})
.catch(() => {
toast.error("Error to create a notification");
});
}
};
return (
<Dialog open={visible} onOpenChange={setVisible}>
<DialogTrigger className="" asChild>
<Button>Add Notification</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-3xl">
<DialogHeader>
<DialogTitle>Add Notification</DialogTitle>
<DialogDescription>
Create new notifications providers for multiple
</DialogDescription>
</DialogHeader>
{/* {isError && <AlertBlock type="error">{error?.message}</AlertBlock>} */}
<Form {...form}>
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-8 "
>
<FormField
control={form.control}
defaultValue={form.control._defaultValues.type}
name="type"
render={({ field }) => (
<FormItem className="space-y-3">
<FormLabel className="text-muted-foreground">
Select a provider
</FormLabel>
<FormControl>
<RadioGroup
onValueChange={field.onChange}
defaultValue={field.value}
className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
>
{Object.entries(notificationsMap).map(([key, value]) => (
<FormItem
key={key}
className="flex w-full items-center space-x-3 space-y-0"
>
<FormControl className="w-full">
<div>
<RadioGroupItem
value={key}
id={key}
className="peer sr-only"
/>
<Label
htmlFor={key}
className="flex flex-col gap-2 items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
>
{value.icon}
{value.label}
</Label>
</div>
</FormControl>
</FormItem>
))}
</RadioGroup>
</FormControl>
<FormMessage />
{activeMutation[field.value].isError && (
<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
<AlertTriangle className="text-red-600 dark:text-red-400" />
<span className="text-sm text-red-600 dark:text-red-400">
{activeMutation[field.value].error?.message}
</span>
</div>
)}
</FormItem>
)}
/>
<div className="flex flex-col gap-4">
<FormLabel className="text-lg font-semibold leading-none tracking-tight">
Fill the next fields.
</FormLabel>
<div className="flex flex-col gap-2">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{type === "slack" && (
<>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Webhook URL</FormLabel>
<FormControl>
<Input
placeholder="https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="channel"
render={({ field }) => (
<FormItem>
<FormLabel>Channel</FormLabel>
<FormControl>
<Input placeholder="Channel" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "telegram" && (
<>
<FormField
control={form.control}
name="botToken"
render={({ field }) => (
<FormItem>
<FormLabel>Bot Token</FormLabel>
<FormControl>
<Input
placeholder="123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="chatId"
render={({ field }) => (
<FormItem>
<FormLabel>Chat ID</FormLabel>
<FormControl>
<Input placeholder="Chat ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "discord" && (
<>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Webhook URL</FormLabel>
<FormControl>
<Input
placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "email" && (
<>
<FormField
control={form.control}
name="smtpServer"
render={({ field }) => (
<FormItem>
<FormLabel>SMTP Server</FormLabel>
<FormControl>
<Input placeholder="smtp.gmail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="smtpPort"
render={({ field }) => (
<FormItem>
<FormLabel>SMTP Port</FormLabel>
<FormControl>
<Input placeholder="587" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="username" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="******************"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="toAddresses"
render={({ field }) => (
<FormItem>
<FormLabel>To Addresses</FormLabel>
<FormControl>
<Input placeholder="email@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
</div>
</div>
<div className="flex flex-col">
<FormLabel className="text-lg font-semibold leading-none tracking-tight">
Select the actions.
</FormLabel>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="appDeploy"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<FormLabel>App Deploy</FormLabel>
<FormDescription>
Trigger the action when a app is deployed.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="userJoin"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<FormLabel>User Join</FormLabel>
<FormDescription>
Trigger the action when a user joins the app.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="databaseBackup"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<FormLabel>Database Backup</FormLabel>
<FormDescription>
Trigger the action when a database backup is created.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="dokployRestart"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<FormLabel>Deploy Restart</FormLabel>
<FormDescription>
Trigger the action when a deploy is restarted.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
</div>
</div>
</form>
<DialogFooter>
<Button
isLoading={form.formState.isSubmitting}
form="hook-form"
type="submit"
>
Create
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
};

61
components/dashboard/settings/notifications/delete-notification.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from "react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { api } from "@/utils/api";
import { TrashIcon } from "lucide-react";
import { toast } from "sonner";
interface Props {
destinationId: string;
}
export const DeleteDestination = ({ destinationId }: Props) => {
const { mutateAsync, isLoading } = api.destination.remove.useMutation();
const utils = api.useUtils();
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
destination
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={async () => {
await mutateAsync({
destinationId,
})
.then(() => {
utils.destination.all.invalidate();
toast.success("Destination delete succesfully");
})
.catch(() => {
toast.error("Error to delete destination");
});
}}
>
Confirm
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
};

63
components/dashboard/settings/notifications/show-notifications.tsx Normal file
View File

@@ -0,0 +1,63 @@
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { api } from "@/utils/api";
import { BellRing } from "lucide-react";
import { AddNotification } from "./add-notification";
export const ShowNotifications = () => {
const { data } = api.notification.all.useQuery();
return (
<div className="w-full">
<Card className="h-full bg-transparent">
<CardHeader>
<CardTitle className="text-xl">Notifications</CardTitle>
<CardDescription>
Add your providers to receive notifications, like Discord, Slack,
Telegram, Email, etc.
</CardDescription>
</CardHeader>
<CardContent className="space-y-2 pt-4">
{data?.length === 0 ? (
<div className="flex flex-col items-center gap-3">
<BellRing className="size-8 self-center text-muted-foreground" />
<span className="text-base text-muted-foreground">
To send notifications is required to set at least 1 provider.
</span>
<AddNotification />
</div>
) : (
<div className="flex flex-col gap-4">
{data?.map((destination, index) => (
<div
key={destination.notificationId}
className="flex items-center justify-between border p-3.5 rounded-lg"
>
<span className="text-sm text-muted-foreground">
{index + 1}. {destination.name}
</span>
{/* <div className="flex flex-row gap-1">
<UpdateDestination
destinationId={destination.destinationId}
/>
<DeleteDestination
destinationId={destination.destinationId}
/>
</div> */}
</div>
))}
<div>
<AddNotification />
</div>
</div>
)}
</CardContent>
</Card>
</div>
);
};

90
components/icons/notification-icons.tsx Normal file
View File

@@ -0,0 +1,90 @@
interface Props {
className?: string;
}
export const SlackIcon = ({ className }: Props) => {
return (
<>
<svg
viewBox="0 0 2447.6 2452.5"
className="size-8"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-rule="evenodd" fill-rule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="#36c5f0"
/>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="#2eb67d"
/>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="#ecb22e"
/>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="#e01e5a"
/>
</g>
</svg>
</>
);
};
export const TelegramIcon = ({ className }: Props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="48px"
height="48px"
className="size-9"
>
<linearGradient
id="BiF7D16UlC0RZ_VqXJHnXa"
x1="9.858"
x2="38.142"
y1="9.858"
y2="38.142"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#33bef0" />
<stop offset="1" stop-color="#0a85d9" />
</linearGradient>
<path
fill="url(#BiF7D16UlC0RZ_VqXJHnXa)"
d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
/>
<path
d="M10.119,23.466c8.155-3.695,17.733-7.704,19.208-8.284c3.252-1.279,4.67,0.028,4.448,2.113 c-0.273,2.555-1.567,9.99-2.363,15.317c-0.466,3.117-2.154,4.072-4.059,2.863c-1.445-0.917-6.413-4.17-7.72-5.282 c-0.891-0.758-1.512-1.608-0.88-2.474c0.185-0.253,0.658-0.763,0.921-1.017c1.319-1.278,1.141-1.553-0.454-0.412 c-0.19,0.136-1.292,0.935-1.745,1.237c-1.11,0.74-2.131,0.78-3.862,0.192c-1.416-0.481-2.776-0.852-3.634-1.223 C8.794,25.983,8.34,24.272,10.119,23.466z"
opacity=".05"
/>
<path
d="M10.836,23.591c7.572-3.385,16.884-7.264,18.246-7.813c3.264-1.318,4.465-0.536,4.114,2.011 c-0.326,2.358-1.483,9.654-2.294,14.545c-0.478,2.879-1.874,3.513-3.692,2.337c-1.139-0.734-5.723-3.754-6.835-4.633 c-0.86-0.679-1.751-1.463-0.71-2.598c0.348-0.379,2.27-2.234,3.707-3.614c0.833-0.801,0.536-1.196-0.469-0.508 c-1.843,1.263-4.858,3.262-5.396,3.625c-1.025,0.69-1.988,0.856-3.664,0.329c-1.321-0.416-2.597-0.819-3.262-1.078 C9.095,25.618,9.075,24.378,10.836,23.591z"
opacity=".07"
/>
<path
fill="#fff"
d="M11.553,23.717c6.99-3.075,16.035-6.824,17.284-7.343c3.275-1.358,4.28-1.098,3.779,1.91 c-0.36,2.162-1.398,9.319-2.226,13.774c-0.491,2.642-1.593,2.955-3.325,1.812c-0.833-0.55-5.038-3.331-5.951-3.984 c-0.833-0.595-1.982-1.311-0.541-2.721c0.513-0.502,3.874-3.712,6.493-6.21c0.343-0.328-0.088-0.867-0.484-0.604 c-3.53,2.341-8.424,5.59-9.047,6.013c-0.941,0.639-1.845,0.932-3.467,0.466c-1.226-0.352-2.423-0.772-2.889-0.932 C9.384,25.282,9.81,24.484,11.553,23.717z"
/>
</svg>
);
};
export const DiscordIcon = ({ className }: Props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="48px"
height="48px"
className="size-9"
>
<path
fill="#536dfe"
d="M39.248,10.177c-2.804-1.287-5.812-2.235-8.956-2.778c-0.057-0.01-0.114,0.016-0.144,0.068 c-0.387,0.688-0.815,1.585-1.115,2.291c-3.382-0.506-6.747-0.506-10.059,0c-0.3-0.721-0.744-1.603-1.133-2.291 c-0.03-0.051-0.087-0.077-0.144-0.068c-3.143,0.541-6.15,1.489-8.956,2.778c-0.024,0.01-0.045,0.028-0.059,0.051 c-5.704,8.522-7.267,16.835-6.5,25.044c0.003,0.04,0.026,0.079,0.057,0.103c3.763,2.764,7.409,4.442,10.987,5.554 c0.057,0.017,0.118-0.003,0.154-0.051c0.846-1.156,1.601-2.374,2.248-3.656c0.038-0.075,0.002-0.164-0.076-0.194 c-1.197-0.454-2.336-1.007-3.432-1.636c-0.087-0.051-0.094-0.175-0.014-0.234c0.231-0.173,0.461-0.353,0.682-0.534 c0.04-0.033,0.095-0.04,0.142-0.019c7.201,3.288,14.997,3.288,22.113,0c0.047-0.023,0.102-0.016,0.144,0.017 c0.22,0.182,0.451,0.363,0.683,0.536c0.08,0.059,0.075,0.183-0.012,0.234c-1.096,0.641-2.236,1.182-3.434,1.634 c-0.078,0.03-0.113,0.12-0.075,0.196c0.661,1.28,1.415,2.498,2.246,3.654c0.035,0.049,0.097,0.07,0.154,0.052 c3.595-1.112,7.241-2.79,11.004-5.554c0.033-0.024,0.054-0.061,0.057-0.101c0.917-9.491-1.537-17.735-6.505-25.044 C39.293,10.205,39.272,10.187,39.248,10.177z M16.703,30.273c-2.168,0-3.954-1.99-3.954-4.435s1.752-4.435,3.954-4.435 c2.22,0,3.989,2.008,3.954,4.435C20.658,28.282,18.906,30.273,16.703,30.273z M31.324,30.273c-2.168,0-3.954-1.99-3.954-4.435 s1.752-4.435,3.954-4.435c2.22,0,3.989,2.008,3.954,4.435C35.278,28.282,33.544,30.273,31.324,30.273z"
/>
</svg>
);
};

7
components/layouts/settings-layout.tsx
View File

@@ -65,6 +65,12 @@ export const SettingsLayout = ({ children }: Props) => {
icon: Server,
href: "/dashboard/settings/cluster",
},
{
title: "Notifications",
label: "",
icon: Bell,
href: "/dashboard/settings/notifications",
},
]
: []),
]}
@@ -79,6 +85,7 @@ export const SettingsLayout = ({ children }: Props) => {
import Link from "next/link";
import {
Activity,
Bell,
Database,
Route,
Server,

64
drizzle/0019_careless_hardball.sql Normal file
View File

@@ -0,0 +1,64 @@
CREATE TABLE IF NOT EXISTS "discord" (
"discordId" text PRIMARY KEY NOT NULL,
"webhookUrl" text NOT NULL
);
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "email" (
"emailId" text PRIMARY KEY NOT NULL,
"smtpServer" text NOT NULL,
"smtpPort" text NOT NULL,
"username" text NOT NULL,
"password" text NOT NULL,
"toAddress" text[] NOT NULL
);
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "notification" (
"notificationId" text PRIMARY KEY NOT NULL,
"name" text NOT NULL,
"appDeploy" boolean DEFAULT false NOT NULL,
"userJoin" boolean DEFAULT false NOT NULL,
"appBuildError" boolean DEFAULT false NOT NULL,
"databaseBackup" boolean DEFAULT false NOT NULL,
"dokployRestart" boolean DEFAULT false NOT NULL,
"createdAt" text NOT NULL,
"slackId" text,
"telegramId" text,
"discordId" text,
"emailId" text
);
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "slack" (
"slackId" text PRIMARY KEY NOT NULL,
"webhookUrl" text NOT NULL,
"channel" text NOT NULL
);
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "telegram" (
"telegramId" text PRIMARY KEY NOT NULL,
"botToken" text NOT NULL,
"chatId" text NOT NULL
);
--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "notification" ADD CONSTRAINT "notification_slackId_slack_slackId_fk" FOREIGN KEY ("slackId") REFERENCES "public"."slack"("slackId") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "notification" ADD CONSTRAINT "notification_telegramId_telegram_telegramId_fk" FOREIGN KEY ("telegramId") REFERENCES "public"."telegram"("telegramId") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "notification" ADD CONSTRAINT "notification_discordId_discord_discordId_fk" FOREIGN KEY ("discordId") REFERENCES "public"."discord"("discordId") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "notification" ADD CONSTRAINT "notification_emailId_email_emailId_fk" FOREIGN KEY ("emailId") REFERENCES "public"."email"("emailId") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;

2896
drizzle/meta/0019_snapshot.json Normal file
View File

File diff suppressed because it is too large Load Diff

7
drizzle/meta/_journal.json
View File

@@ -134,6 +134,13 @@
"when": 1719928377858,
"tag": "0018_careful_killmonger",
"breakpoints": true
},
{
"idx": 19,
"version": "6",
"when": 1720507012671,
"tag": "0019_careless_hardball",
"breakpoints": true
}
]
}

42
pages/dashboard/settings/notifications.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { ShowDestinations } from "@/components/dashboard/settings/destination/show-destinations";
import { ShowNotifications } from "@/components/dashboard/settings/notifications/show-notifications";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { SettingsLayout } from "@/components/layouts/settings-layout";
import { validateRequest } from "@/server/auth/auth";
import type { GetServerSidePropsContext } from "next";
import React, { type ReactElement } from "react";
const Page = () => {
return (
<div className="flex flex-col gap-4 w-full">
<ShowNotifications />
</div>
);
};
export default Page;
Page.getLayout = (page: ReactElement) => {
return (
<DashboardLayout tab={"settings"}>
<SettingsLayout>{page}</SettingsLayout>
</DashboardLayout>
);
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ serviceId: string }>,
) {
const { user, session } = await validateRequest(ctx.req, ctx.res);
if (!user || user.rol === "user") {
return {
redirect: {
permanent: true,
destination: "/",
},
};
}
return {
props: {},
};
}

2
server/api/root.ts
View File

@@ -23,6 +23,7 @@ import { dockerRouter } from "./routers/docker";
import { composeRouter } from "./routers/compose";
import { registryRouter } from "./routers/registry";
import { clusterRouter } from "./routers/cluster";
import { notificationRouter } from "./routers/notification";
/**
* This is the primary router for your server.
@@ -54,6 +55,7 @@ export const appRouter = createTRPCRouter({
port: portRouter,
registry: registryRouter,
cluster: clusterRouter,
notification: notificationRouter,
});
// export type definition of API

150
server/api/routers/notification.ts Normal file
View File

@@ -0,0 +1,150 @@
import {
adminProcedure,
createTRPCRouter,
protectedProcedure,
} from "@/server/api/trpc";
import { db } from "@/server/db";
import {
apiCreateDestination,
apiCreateDiscord,
apiCreateEmail,
apiCreateSlack,
apiCreateTelegram,
apiFindOneNotification,
apiUpdateDestination,
} from "@/server/db/schema";
import { HeadBucketCommand, S3Client } from "@aws-sdk/client-s3";
import { TRPCError } from "@trpc/server";
import { updateDestinationById } from "../services/destination";
import {
createDiscordNotification,
createEmailNotification,
createSlackNotification,
createTelegramNotification,
findNotificationById,
removeNotificationById,
} from "../services/notification";
export const notificationRouter = createTRPCRouter({
createSlack: adminProcedure
.input(apiCreateSlack)
.mutation(async ({ input }) => {
try {
return await createSlackNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
cause: error,
});
}
}),
createTelegram: adminProcedure
.input(apiCreateTelegram)
.mutation(async ({ input }) => {
try {
return await createTelegramNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
cause: error,
});
}
}),
createDiscord: adminProcedure
.input(apiCreateDiscord)
.mutation(async ({ input }) => {
try {
return await createDiscordNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
cause: error,
});
}
}),
createEmail: adminProcedure
.input(apiCreateEmail)
.mutation(async ({ input }) => {
try {
return await createEmailNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
cause: error,
});
}
}),
removeNotification: adminProcedure
.input(apiFindOneNotification)
.mutation(async ({ input }) => {
try {
return await removeNotificationById(input.notificationId);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to delete this notification",
});
}
}),
one: protectedProcedure
.input(apiFindOneNotification)
.query(async ({ input }) => {
const notification = await findNotificationById(input.notificationId);
return notification;
}),
testConnection: adminProcedure
.input(apiCreateDestination)
.mutation(async ({ input }) => {
const { secretAccessKey, bucket, region, endpoint, accessKey } = input;
const s3Client = new S3Client({
region: region,
...(endpoint && {
endpoint: endpoint,
}),
credentials: {
accessKeyId: accessKey,
secretAccessKey: secretAccessKey,
},
forcePathStyle: true,
});
const headBucketCommand = new HeadBucketCommand({ Bucket: bucket });
try {
await s3Client.send(headBucketCommand);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to connect to bucket",
cause: error,
});
}
}),
all: adminProcedure.query(async () => {
return await db.query.notifications.findMany({
with: {
slack: true,
telegram: true,
discord: true,
email: true,
},
});
}),
update: adminProcedure
.input(apiUpdateDestination)
.mutation(async ({ input }) => {
try {
return await updateDestinationById(input.destinationId, input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update this destination",
cause: error,
});
}
}),
});

241
server/api/services/notification.ts Normal file
View File

@@ -0,0 +1,241 @@
import { db } from "@/server/db";
import {
type apiCreateDiscord,
type apiCreateEmail,
type apiCreateSlack,
type apiCreateTelegram,
discord,
email,
notifications,
slack,
telegram,
} from "@/server/db/schema";
import { TRPCError } from "@trpc/server";
import { eq } from "drizzle-orm";
export type Notification = typeof notifications.$inferSelect;
export const createSlackNotification = async (
input: typeof apiCreateSlack._type,
) => {
await db.transaction(async (tx) => {
const newSlack = await tx
.insert(slack)
.values({
channel: input.channel,
webhookUrl: input.webhookUrl,
})
.returning()
.then((value) => value[0]);
if (!newSlack) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting slack",
});
}
const newDestination = await tx
.insert(notifications)
.values({
slackId: newSlack.slackId,
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting notification",
});
}
return newDestination;
});
};
export const createTelegramNotification = async (
input: typeof apiCreateTelegram._type,
) => {
await db.transaction(async (tx) => {
const newTelegram = await tx
.insert(telegram)
.values({
botToken: input.botToken,
chatId: input.chatId,
})
.returning()
.then((value) => value[0]);
if (!newTelegram) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting telegram",
});
}
const newDestination = await tx
.insert(notifications)
.values({
telegramId: newTelegram.telegramId,
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting notification",
});
}
return newDestination;
});
};
export const createDiscordNotification = async (
input: typeof apiCreateDiscord._type,
) => {
await db.transaction(async (tx) => {
const newDiscord = await tx
.insert(discord)
.values({
webhookUrl: input.webhookUrl,
})
.returning()
.then((value) => value[0]);
if (!newDiscord) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting discord",
});
}
const newDestination = await tx
.insert(notifications)
.values({
discordId: newDiscord.discordId,
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting notification",
});
}
return newDestination;
});
};
export const createEmailNotification = async (
input: typeof apiCreateEmail._type,
) => {
await db.transaction(async (tx) => {
const newEmail = await tx
.insert(email)
.values({
smtpServer: input.smtpServer,
smtpPort: input.smtpPort,
username: input.username,
password: input.password,
toAddresses: input.toAddresses,
})
.returning()
.then((value) => value[0]);
if (!newEmail) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting email",
});
}
const newDestination = await tx
.insert(notifications)
.values({
emailId: newEmail.emailId,
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Inserting notification",
});
}
return newDestination;
});
};
export const findNotificationById = async (notificationId: string) => {
const notification = await db.query.notifications.findFirst({
where: eq(notifications.notificationId, notificationId),
with: {
slack: true,
telegram: true,
discord: true,
email: true,
},
});
if (!notification) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Notification not found",
});
}
return notification;
};
export const removeNotificationById = async (notificationId: string) => {
const result = await db
.delete(notifications)
.where(eq(notifications.notificationId, notificationId))
.returning();
return result[0];
};
export const updateDestinationById = async (
notificationId: string,
notificationData: Partial<Notification>,
) => {
const result = await db
.update(notifications)
.set({
...notificationData,
})
.where(eq(notifications.notificationId, notificationId))
.returning();
return result[0];
};

1
server/db/schema/index.ts
View File

@@ -21,3 +21,4 @@ export * from "./redis";
export * from "./shared";
export * from "./compose";
export * from "./registry";
export * from "./notification";

160
server/db/schema/notification.ts Normal file
View File

@@ -0,0 +1,160 @@
import { nanoid } from "nanoid";
import { boolean, pgTable, text } from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";
import { z } from "zod";
import { createInsertSchema } from "drizzle-zod";
export const notifications = pgTable("notification", {
notificationId: text("notificationId")
.notNull()
.primaryKey()
.$defaultFn(() => nanoid()),
name: text("name").notNull(),
appDeploy: boolean("appDeploy").notNull().default(false),
userJoin: boolean("userJoin").notNull().default(false),
appBuildError: boolean("appBuildError").notNull().default(false),
databaseBackup: boolean("databaseBackup").notNull().default(false),
dokployRestart: boolean("dokployRestart").notNull().default(false),
createdAt: text("createdAt")
.notNull()
.$defaultFn(() => new Date().toISOString()),
slackId: text("slackId").references(() => slack.slackId, {
onDelete: "cascade",
}),
telegramId: text("telegramId").references(() => telegram.telegramId, {
onDelete: "cascade",
}),
discordId: text("discordId").references(() => discord.discordId, {
onDelete: "cascade",
}),
emailId: text("emailId").references(() => email.emailId, {
onDelete: "cascade",
}),
});
export const slack = pgTable("slack", {
slackId: text("slackId")
.notNull()
.primaryKey()
.$defaultFn(() => nanoid()),
webhookUrl: text("webhookUrl").notNull(),
channel: text("channel").notNull(),
});
export const telegram = pgTable("telegram", {
telegramId: text("telegramId")
.notNull()
.primaryKey()
.$defaultFn(() => nanoid()),
botToken: text("botToken").notNull(),
chatId: text("chatId").notNull(),
});
export const discord = pgTable("discord", {
discordId: text("discordId")
.notNull()
.primaryKey()
.$defaultFn(() => nanoid()),
webhookUrl: text("webhookUrl").notNull(),
});
export const email = pgTable("email", {
emailId: text("emailId")
.notNull()
.primaryKey()
.$defaultFn(() => nanoid()),
smtpServer: text("smtpServer").notNull(),
smtpPort: text("smtpPort").notNull(),
username: text("username").notNull(),
password: text("password").notNull(),
toAddresses: text("toAddress").array().notNull(),
});
export const notificationsRelations = relations(notifications, ({ one }) => ({
slack: one(slack, {
fields: [notifications.slackId],
references: [slack.slackId],
}),
telegram: one(telegram, {
fields: [notifications.telegramId],
references: [telegram.telegramId],
}),
discord: one(discord, {
fields: [notifications.discordId],
references: [discord.discordId],
}),
email: one(email, {
fields: [notifications.emailId],
references: [email.emailId],
}),
}));
export const notificationsSchema = createInsertSchema(notifications);
export const apiCreateSlack = notificationsSchema
.pick({
appBuildError: true,
databaseBackup: true,
dokployRestart: true,
name: true,
appDeploy: true,
userJoin: true,
})
.extend({
webhookUrl: z.string().min(1),
channel: z.string().min(1),
})
.required();
export const apiCreateTelegram = notificationsSchema
.pick({
appBuildError: true,
databaseBackup: true,
dokployRestart: true,
name: true,
appDeploy: true,
userJoin: true,
})
.extend({
botToken: z.string().min(1),
chatId: z.string().min(1),
})
.required();
export const apiCreateDiscord = notificationsSchema
.pick({
appBuildError: true,
databaseBackup: true,
dokployRestart: true,
name: true,
appDeploy: true,
userJoin: true,
})
.extend({
webhookUrl: z.string().min(1),
})
.required();
export const apiCreateEmail = notificationsSchema
.pick({
appBuildError: true,
databaseBackup: true,
dokployRestart: true,
name: true,
appDeploy: true,
userJoin: true,
})
.extend({
smtpServer: z.string().min(1),
smtpPort: z.string().min(1),
username: z.string().min(1),
password: z.string().min(1),
toAddresses: z.array(z.string()).min(1),
})
.required();
export const apiFindOneNotification = notificationsSchema
.pick({
notificationId: true,
})
.required();