diff --git a/app/api/notifications/settings_applications_edit/route.ts b/app/api/notifications/settings_applications_edit/route.ts index 72221f0..8162781 100644 --- a/app/api/notifications/settings_applications_edit/route.ts +++ b/app/api/notifications/settings_applications_edit/route.ts @@ -5,7 +5,7 @@ import { z } from "zod/v4" const schema = z.object({ enabled: z.boolean(), statusChange: z.boolean(), - latencyLimit: z.number().min(0).max(100), + latencyLimit: z.number().min(0).max(10000), notificationTextStatus: z.string(), notificationTextLatency: z.string(), notificationLatency: z.boolean(), diff --git a/components/cards/settings/NotificationSettings.tsx b/components/cards/settings/NotificationSettings.tsx index 4a5060c..6fb7abd 100644 --- a/components/cards/settings/NotificationSettings.tsx +++ b/components/cards/settings/NotificationSettings.tsx @@ -1,25 +1,427 @@ -"use client"; +"use client" -import { useState } from "react"; +import { useEffect, useState } from "react" +import useNotifications from "@/hooks/useNotifications" +import { CircleHelp, Server, Smartphone } from "lucide-react" interface NotificationSettingsProps { - onError: (message: string) => void; - onSuccess: (message: string) => void; + onError: (message: string) => void + onSuccess: (message: string) => void } export const NotificationSettings = ({ onError, onSuccess }: NotificationSettingsProps) => { - const [enabled, setEnabled] = useState(false); + const { + getNotificationApplicationsSettings, + getNotificationServerSettings, + editNotificationApplicationsSettings, + editNotificationServerSettings, + } = useNotifications() + const [applicationsSettings, setApplicationsSettings] = useState(null) + const [serverSettings, setServerSettings] = useState(null) - return ( -
-
-
-
-

Notification Settings

-

Manage your notification settings

-
-
-
-
+ const fetchNotificationSettings = async () => { + const applicationsSettings = await getNotificationApplicationsSettings() + const serverSettings = await getNotificationServerSettings() + + setServerSettings( + serverSettings || { + enabled: false, + statusChange: false, + cpuLimit: 0, + gpuLimit: 0, + memoryLimit: 0, + diskLimit: 0, + temperatureLimit: 0, + notificationTextStatus: "", + notificationTextCpu: "", + notificationTextGpu: "", + notificationTextMemory: "", + notificationTextDisk: "", + notificationTextTemperature: "", + notificationCpu: false, + notificationGpu: false, + notificationMemory: false, + notificationDisk: false, + notificationTemperature: false, + }, ) -} \ No newline at end of file + + setApplicationsSettings( + applicationsSettings || { + enabled: false, + statusChange: false, + latencyLimit: 0, + notificationTextStatus: "", + notificationTextLatency: "", + notificationLatency: false, + }, + ) + } + + useEffect(() => { + fetchNotificationSettings() + }, []) + + const saveNotificationSettings = async () => { + await editNotificationServerSettings(serverSettings) + await editNotificationApplicationsSettings(applicationsSettings) + } + + const ResourceThresholdRow = ({ + label, + checked, + onCheckedChange, + value, + onValueChange, + unit, + message, + onMessageChange, + disabled, + }: { + label: string + checked: boolean + onCheckedChange: () => void + value: number + onValueChange: (value: string) => void + unit: string + message: string + onMessageChange: (value: string) => void + disabled: boolean + }) => ( +
+
+
+
+ + {label} +
+ +
+ onValueChange(e.target.value)} + disabled={disabled} + /> + {unit} +
+ +
+ onMessageChange(e.target.value)} + disabled={disabled} + /> +
+ +
+
+
+
+
+ ) + + return ( +
+
+ {/* Header */} +
+

Notification Settings

+

Configure monitoring alerts for your servers and applications

+
+ + {/* Main Content */} +
+ {/* Server Monitoring Section */} +
+
+
+
+ +
+
+

Server Monitoring

+

Monitor server resources and performance

+
+
+ + {/* Master Toggle */} +
+
+
+
+ setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })} + /> +
+

Enable Server Monitoring

+

Turn on global server monitoring

+
+
+
+ {serverSettings?.enabled ? "Active" : "Inactive"} +
+
+
+
+ + {/* Status Change Alerts */} +
+
+
+
+
+ + setServerSettings({ ...serverSettings, statusChange: !serverSettings.statusChange }) + } + disabled={!serverSettings?.enabled} + /> +
+ Status Change Alerts +

Get notified when server status changes

+
+
+
+ + setServerSettings({ ...serverSettings, notificationTextStatus: e.target.value }) + } + disabled={!serverSettings?.enabled} + /> +
+ +
+
+
+
+
+ + {/* Resource Thresholds */} +
+
+

Resource Thresholds

+
Configure limits
+
+ +
+ + setServerSettings({ ...serverSettings, notificationCpu: !serverSettings.notificationCpu }) + } + value={serverSettings?.cpuLimit} + onValueChange={(value) => setServerSettings({ ...serverSettings, cpuLimit: value })} + unit="%" + message={serverSettings?.notificationTextCpu} + onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextCpu: value })} + disabled={!serverSettings?.enabled} + /> + + + setServerSettings({ ...serverSettings, notificationGpu: !serverSettings.notificationGpu }) + } + value={serverSettings?.gpuLimit} + onValueChange={(value) => setServerSettings({ ...serverSettings, gpuLimit: value })} + unit="%" + message={serverSettings?.notificationTextGpu} + onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextGpu: value })} + disabled={!serverSettings?.enabled} + /> + + + setServerSettings({ ...serverSettings, notificationMemory: !serverSettings.notificationMemory }) + } + value={serverSettings?.memoryLimit} + onValueChange={(value) => setServerSettings({ ...serverSettings, memoryLimit: value })} + unit="GB" + message={serverSettings?.notificationTextMemory} + onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextMemory: value })} + disabled={!serverSettings?.enabled} + /> + + + setServerSettings({ ...serverSettings, notificationDisk: !serverSettings.notificationDisk }) + } + value={serverSettings?.diskLimit} + onValueChange={(value) => setServerSettings({ ...serverSettings, diskLimit: value })} + unit="%" + message={serverSettings?.notificationTextDisk} + onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextDisk: value })} + disabled={!serverSettings?.enabled} + /> + + + setServerSettings({ + ...serverSettings, + notificationTemperature: !serverSettings.notificationTemperature, + }) + } + value={serverSettings?.temperatureLimit} + onValueChange={(value) => setServerSettings({ ...serverSettings, temperatureLimit: value })} + unit="°C" + message={serverSettings?.notificationTextTemperature} + onMessageChange={(value) => + setServerSettings({ ...serverSettings, notificationTextTemperature: value }) + } + disabled={!serverSettings?.enabled} + /> +
+
+
+
+
+ + {/* Application Monitoring Section */} +
+
+
+
+ +
+
+

Application Monitoring

+

Monitor application performance and availability

+
+
+ + {/* Master Toggle */} +
+
+
+
+ + setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled }) + } + /> +
+

Enable Application Monitoring

+

Turn on global application monitoring

+
+
+
+ {applicationsSettings?.enabled ? "Active" : "Inactive"} +
+
+
+
+ + {/* Application Settings */} +
+ {/* Status Change Alerts */} +
+
+
+
+ + setApplicationsSettings({ + ...applicationsSettings, + statusChange: !applicationsSettings.statusChange, + }) + } + disabled={!applicationsSettings?.enabled} + /> +
+ Status Change Alerts +

Get notified when application status changes

+
+
+
+ + setApplicationsSettings({ ...applicationsSettings, notificationTextStatus: e.target.value }) + } + disabled={!applicationsSettings?.enabled} + /> +
+ +
+
+
+
+
+ + {/* Latency Threshold */} +
+
+

Performance Thresholds

+
Configure limits
+
+ + + setApplicationsSettings({ + ...applicationsSettings, + notificationLatency: !applicationsSettings.notificationLatency, + }) + } + value={applicationsSettings?.latencyLimit} + onValueChange={(value) => setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })} + unit="ms" + message={applicationsSettings?.notificationTextLatency} + onMessageChange={(value) => + setApplicationsSettings({ ...applicationsSettings, notificationTextLatency: value }) + } + disabled={!applicationsSettings?.enabled} + /> +
+
+
+
+ + {/* Action Buttons */} +
+ +
+
+
+
+ ) +} diff --git a/hooks/useNotifications.ts b/hooks/useNotifications.ts index 7e81b43..d47eaa9 100644 --- a/hooks/useNotifications.ts +++ b/hooks/useNotifications.ts @@ -74,6 +74,46 @@ const useNotifications = () => { }); } + const getNotificationApplicationsSettings = (): Promise | string => { + return axios.get('/api/notifications/settings_applications_get') + .then((response) => { + return response.data.notification; + }) + .catch(err => { + throw err.response?.data?.error || 'An error occurred'; + }); + } + + const getNotificationServerSettings = (): Promise | string => { + return axios.get('/api/notifications/settings_server_get') + .then((response) => { + return response.data.notification; + }) + .catch(err => { + throw err.response?.data?.error || 'An error occurred'; + }); + } + + const editNotificationApplicationsSettings = (settings: any): Promise | string => { + return axios.post('/api/notifications/settings_applications_edit', settings) + .then((response) => { + return response.data.notificationSettings; + }) + .catch(err => { + throw err.response?.data?.error || 'An error occurred'; + }); + } + + const editNotificationServerSettings = (settings: any): Promise | string => { + return axios.post('/api/notifications/settings_server_edit', settings) + .then((response) => { + return response.data.notificationSettings; + }) + .catch(err => { + throw err.response?.data?.error || 'An error occurred'; + }); + } + return { notifications, loading, @@ -82,7 +122,11 @@ const useNotifications = () => { loadNotifications, testNotification, getNotificationTest, - notificationTest + notificationTest, + getNotificationApplicationsSettings, + getNotificationServerSettings, + editNotificationApplicationsSettings, + editNotificationServerSettings }; }