mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-17 15:36:50 +00:00
Finisch Notification Settings System
This commit is contained in:
headlesdev
parent
61a9442443
commit
22c7ce29e3
@ -2,7 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import useNotifications from "@/hooks/useNotifications"
|
||||
import { CircleHelp, Server, Smartphone } from "lucide-react"
|
||||
import { Check, CircleHelp, Copy, Server, Smartphone } from "lucide-react"
|
||||
|
||||
interface NotificationSettingsProps {
|
||||
onError: (message: string) => void
|
||||
@ -18,6 +18,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
} = useNotifications()
|
||||
const [applicationsSettings, setApplicationsSettings] = useState<any>(null)
|
||||
const [serverSettings, setServerSettings] = useState<any>(null)
|
||||
const [copiedVariable, setCopiedVariable] = useState<string | null>(null)
|
||||
const [serverCollapsed, setServerCollapsed] = useState(true)
|
||||
const [applicationCollapsed, setApplicationCollapsed] = useState(true)
|
||||
|
||||
const fetchNotificationSettings = async () => {
|
||||
const applicationsSettings = await getNotificationApplicationsSettings()
|
||||
@ -26,23 +29,23 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
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,
|
||||
statusChange: true,
|
||||
cpuLimit: 80,
|
||||
gpuLimit: 80,
|
||||
memoryLimit: 80,
|
||||
diskLimit: 80,
|
||||
temperatureLimit: 80,
|
||||
notificationTextStatus: "{servername} went {status}",
|
||||
notificationTextCpu: "{servername} CPU usage is high at {cpu}%",
|
||||
notificationTextGpu: "{servername} GPU usage is high at {gpu}%",
|
||||
notificationTextMemory: "{servername} Memory usage is high at {memory}%",
|
||||
notificationTextDisk: "{servername} Disk usage is high at {disk}%",
|
||||
notificationTextTemperature: "{servername} Temperature is high at {temperature}°C",
|
||||
notificationCpu: true,
|
||||
notificationGpu: true,
|
||||
notificationMemory: true,
|
||||
notificationDisk: true,
|
||||
notificationTemperature: true,
|
||||
},
|
||||
)
|
||||
|
||||
@ -50,10 +53,10 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
applicationsSettings || {
|
||||
enabled: false,
|
||||
statusChange: false,
|
||||
latencyLimit: 0,
|
||||
notificationTextStatus: "",
|
||||
notificationTextLatency: "",
|
||||
notificationLatency: false,
|
||||
latencyLimit: 1000,
|
||||
notificationTextStatus: "{appname} went {status}",
|
||||
notificationTextLatency: "{appname} latency is high at {latency}ms",
|
||||
notificationLatency: true,
|
||||
},
|
||||
)
|
||||
}
|
||||
@ -63,8 +66,37 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
}, [])
|
||||
|
||||
const saveNotificationSettings = async () => {
|
||||
await editNotificationServerSettings(serverSettings)
|
||||
await editNotificationApplicationsSettings(applicationsSettings)
|
||||
const response = editNotificationServerSettings(serverSettings)
|
||||
if (typeof response === "string") {
|
||||
onError && onError(response)
|
||||
return
|
||||
}
|
||||
|
||||
const response2 = editNotificationApplicationsSettings(applicationsSettings)
|
||||
if (typeof response2 === "string") {
|
||||
onError && onError(response2)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const successMessage = await response
|
||||
const successMessage2 = await response2
|
||||
console.log(successMessage, successMessage2)
|
||||
if (onSuccess && successMessage && successMessage2) {
|
||||
onSuccess("Notification settings saved successfully")
|
||||
}
|
||||
} catch (apiError: any) {
|
||||
onError && onError(apiError)
|
||||
}
|
||||
}
|
||||
|
||||
const copyToClipboard = async (text: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopiedVariable(text)
|
||||
setTimeout(() => setCopiedVariable(null), 2000)
|
||||
} catch (err) {
|
||||
console.error("Failed to copy text: ", err)
|
||||
}
|
||||
}
|
||||
|
||||
const ResourceThresholdRow = ({
|
||||
@ -88,43 +120,58 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
onMessageChange: (value: string) => void
|
||||
disabled: boolean
|
||||
}) => (
|
||||
<div className="card bg-base-100 shadow-sm border border-base-300">
|
||||
<div className="card bg-base-100 shadow-sm border border-base-300 mb-3">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-4">
|
||||
<div className="flex items-center gap-3 lg:w-48">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary checkbox-sm"
|
||||
checked={checked}
|
||||
onChange={onCheckedChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className="font-medium text-sm">{label}</span>
|
||||
<div className="space-y-4">
|
||||
{/* Header Row - Checkbox and Threshold */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={checked}
|
||||
onChange={onCheckedChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className="font-medium">{label}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-base-content/70">Threshold:</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
className="input input-bordered input-sm w-20 text-center"
|
||||
value={value}
|
||||
onChange={(e) => onValueChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
min="0"
|
||||
max={unit === "°C" ? "200" : "100"}
|
||||
/>
|
||||
<span className="text-sm font-medium text-base-content/80">{unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 lg:w-32">
|
||||
<input
|
||||
type="number"
|
||||
className="input input-bordered input-sm w-20"
|
||||
value={value}
|
||||
onChange={(e) => onValueChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className="text-sm text-base-content/70">{unit}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{/* Message Template Row */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-base-content/80">Notification Message:</span>
|
||||
<div
|
||||
className="tooltip tooltip-right"
|
||||
data-tip="Use template variables like {servername}, {status}, etc."
|
||||
>
|
||||
<CircleHelp className="w-4 h-4 text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered input-sm flex-1"
|
||||
placeholder={`${label} alert message...`}
|
||||
className="input input-bordered input-sm w-full"
|
||||
placeholder={`Enter ${label.toLowerCase()} notification message...`}
|
||||
value={message}
|
||||
onChange={(e) => onMessageChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className="tooltip" data-tip="Notification message template">
|
||||
<CircleHelp className="w-4 h-4 text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,54 +179,66 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
||||
{/* Header */}
|
||||
<div className="text-center lg:text-left">
|
||||
<h2 className="text-lg font-bold">Notification Settings</h2>
|
||||
<p className="text-sm opacity-70">Configure monitoring alerts for your servers and applications</p>
|
||||
</div>
|
||||
<div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
|
||||
{/* Header */}
|
||||
<div className="text-center lg:text-left mb-6">
|
||||
<h2 className="text-xl font-bold">Notification Settings</h2>
|
||||
<p className="text-sm opacity-70 mt-1">Configure monitoring alerts for your servers and applications</p>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid gap-6 mt-4">
|
||||
{/* Server Monitoring Section */}
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className="card-body">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Server className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold">Server Monitoring</h3>
|
||||
<p className="text-sm opacity-70">Monitor server resources and performance</p>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
{/* Server Monitoring Section */}
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className={`card-body p-6 ${serverCollapsed ? "pb-2" : ""}`}>
|
||||
<div
|
||||
className={`flex items-center gap-3 ${serverCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
|
||||
onClick={() => setServerCollapsed(!serverCollapsed)}
|
||||
>
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Server className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold">Server Monitoring</h3>
|
||||
<p className="text-sm opacity-70">Monitor server resources and performance</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
serverSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
|
||||
}`}
|
||||
>
|
||||
{serverSettings?.enabled ? "Active" : "Inactive"}
|
||||
</span>
|
||||
<div className={`transition-transform duration-200 ${serverCollapsed ? "" : "rotate-180"}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`transition-all duration-300 overflow-hidden ${serverCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
|
||||
>
|
||||
{/* Master Toggle */}
|
||||
<div className="card bg-base-200 mb-6">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-primary toggle-lg"
|
||||
checked={serverSettings?.enabled}
|
||||
onChange={() => setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })}
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold">Enable Server Monitoring</h3>
|
||||
<p className="text-sm text-base-content/70">Turn on global server monitoring</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`badge ${serverSettings?.enabled ? "badge-success" : "badge-neutral"}`}>
|
||||
{serverSettings?.enabled ? "Active" : "Inactive"}
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-primary"
|
||||
checked={serverSettings?.enabled}
|
||||
onChange={() => setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })}
|
||||
/>
|
||||
<div>
|
||||
<h4 className="font-semibold">Enable Server Monitoring</h4>
|
||||
<p className="text-sm text-base-content/70">Turn on global server monitoring notifications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Change Alerts */}
|
||||
<div className={`space-y-4 ${!serverSettings?.enabled ? "opacity-50" : ""}`}>
|
||||
{/* Settings Content */}
|
||||
<div className={`space-y-6 ${!serverSettings?.enabled ? "opacity-50" : ""}`}>
|
||||
{/* Status Change Alerts */}
|
||||
<div className="card bg-base-200">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-4">
|
||||
@ -209,7 +268,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
}
|
||||
disabled={!serverSettings?.enabled}
|
||||
/>
|
||||
<div className="tooltip" data-tip="Notification message template">
|
||||
<div className="tooltip tooltip-left" data-tip="Notification message template">
|
||||
<CircleHelp className="w-4 h-4 text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
@ -218,13 +277,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
</div>
|
||||
|
||||
{/* Resource Thresholds */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h4 className="text-base font-semibold">Resource Thresholds</h4>
|
||||
<div className="badge badge-outline badge-sm">Configure limits</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-base font-semibold mb-4">Resource Thresholds</h4>
|
||||
<div className="space-y-0">
|
||||
<ResourceThresholdRow
|
||||
label="CPU Usage"
|
||||
checked={serverSettings?.notificationCpu}
|
||||
@ -261,9 +316,11 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
}
|
||||
value={serverSettings?.memoryLimit}
|
||||
onValueChange={(value) => setServerSettings({ ...serverSettings, memoryLimit: value })}
|
||||
unit="GB"
|
||||
unit="%"
|
||||
message={serverSettings?.notificationTextMemory}
|
||||
onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextMemory: value })}
|
||||
onMessageChange={(value) =>
|
||||
setServerSettings({ ...serverSettings, notificationTextMemory: value })
|
||||
}
|
||||
disabled={!serverSettings?.enabled}
|
||||
/>
|
||||
|
||||
@ -301,50 +358,105 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Server Variables Reference */}
|
||||
<div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<CircleHelp className="w-4 h-4 text-primary" />
|
||||
<h5 className="text-sm font-semibold">Available Server Variables</h5>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
{[
|
||||
{ var: "{servername}", desc: "Server name or hostname" },
|
||||
{ var: "{status}", desc: "Current server status" },
|
||||
{ var: "{cpu}", desc: "CPU usage percentage" },
|
||||
{ var: "{gpu}", desc: "GPU usage percentage" },
|
||||
{ var: "{memory}", desc: "Memory usage percentage" },
|
||||
{ var: "{disk}", desc: "Disk usage percentage" },
|
||||
{ var: "{temperature}", desc: "Temperature in Celsius" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.var}
|
||||
className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
|
||||
onClick={() => copyToClipboard(item.var)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-mono text-xs font-semibold text-primary">{item.var}</div>
|
||||
<div className="text-xs text-base-content/70">{item.desc}</div>
|
||||
</div>
|
||||
<div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{copiedVariable === item.var ? (
|
||||
<Check className="w-3 h-3 text-success" />
|
||||
) : (
|
||||
<Copy className="w-3 h-3 text-base-content/50" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Application Monitoring Section */}
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className="card-body">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-secondary/10 rounded-lg">
|
||||
<Smartphone className="w-6 h-6 text-secondary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold">Application Monitoring</h3>
|
||||
<p className="text-sm opacity-70">Monitor application performance and availability</p>
|
||||
</div>
|
||||
{/* Application Monitoring Section */}
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className={`card-body p-6 ${applicationCollapsed ? "pb-2" : ""}`}>
|
||||
<div
|
||||
className={`flex items-center gap-3 ${applicationCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
|
||||
onClick={() => setApplicationCollapsed(!applicationCollapsed)}
|
||||
>
|
||||
<div className="p-2 bg-secondary/10 rounded-lg">
|
||||
<Smartphone className="w-6 h-6 text-secondary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold">Application Monitoring</h3>
|
||||
<p className="text-sm opacity-70">Configure application monitoring notifications</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
|
||||
}`}
|
||||
>
|
||||
{applicationsSettings?.enabled ? "Active" : "Inactive"}
|
||||
</span>
|
||||
<div className={`transition-transform duration-200 ${applicationCollapsed ? "" : "rotate-180"}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`transition-all duration-300 overflow-hidden ${applicationCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
|
||||
>
|
||||
{/* Master Toggle */}
|
||||
<div className="card bg-base-200 mb-6">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-secondary toggle-lg"
|
||||
checked={applicationsSettings?.enabled}
|
||||
onChange={() =>
|
||||
setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold">Enable Application Monitoring</h3>
|
||||
<p className="text-sm text-base-content/70">Turn on global application monitoring</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`badge ${applicationsSettings?.enabled ? "badge-success" : "badge-neutral"}`}>
|
||||
{applicationsSettings?.enabled ? "Active" : "Inactive"}
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-secondary"
|
||||
checked={applicationsSettings?.enabled}
|
||||
onChange={() =>
|
||||
setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<h4 className="font-semibold">Enable Application Monitoring</h4>
|
||||
<p className="text-sm text-base-content/70">Turn on global application monitoring</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Application Settings */}
|
||||
<div className={`space-y-4 ${!applicationsSettings?.enabled ? "opacity-50" : ""}`}>
|
||||
<div className={`space-y-6 ${!applicationsSettings?.enabled ? "opacity-50" : ""}`}>
|
||||
{/* Status Change Alerts */}
|
||||
<div className="card bg-base-200">
|
||||
<div className="card-body p-4">
|
||||
@ -378,7 +490,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
}
|
||||
disabled={!applicationsSettings?.enabled}
|
||||
/>
|
||||
<div className="tooltip" data-tip="Notification message template">
|
||||
<div className="tooltip tooltip-left" data-tip="Notification message template">
|
||||
<CircleHelp className="w-4 h-4 text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
@ -386,13 +498,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latency Threshold */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h4 className="text-base font-semibold">Performance Thresholds</h4>
|
||||
<div className="badge badge-outline badge-sm">Configure limits</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Thresholds */}
|
||||
<div>
|
||||
<h4 className="text-base font-semibold mb-4">Performance Thresholds</h4>
|
||||
<ResourceThresholdRow
|
||||
label="Latency Threshold"
|
||||
checked={applicationsSettings?.notificationLatency}
|
||||
@ -403,7 +511,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
})
|
||||
}
|
||||
value={applicationsSettings?.latencyLimit}
|
||||
onValueChange={(value) => setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })}
|
||||
onValueChange={(value) =>
|
||||
setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })
|
||||
}
|
||||
unit="ms"
|
||||
message={applicationsSettings?.notificationTextLatency}
|
||||
onMessageChange={(value) =>
|
||||
@ -412,14 +522,53 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
disabled={!applicationsSettings?.enabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Application Variables Reference */}
|
||||
<div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
|
||||
<div className="card-body p-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<CircleHelp className="w-4 h-4 text-secondary" />
|
||||
<h5 className="text-sm font-semibold">Available Application Variables</h5>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{[
|
||||
{ var: "{appname}", desc: "Application name" },
|
||||
{ var: "{status}", desc: "Application status" },
|
||||
{ var: "{latency}", desc: "Application latency in ms" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.var}
|
||||
className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
|
||||
onClick={() => copyToClipboard(item.var)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-mono text-xs font-semibold text-secondary">{item.var}</div>
|
||||
<div className="text-xs text-base-content/70">{item.desc}</div>
|
||||
</div>
|
||||
<div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{copiedVariable === item.var ? (
|
||||
<Check className="w-3 h-3 text-success" />
|
||||
) : (
|
||||
<Copy className="w-3 h-3 text-base-content/50" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button className="btn btn-primary" onClick={saveNotificationSettings}>Save Settings</button>
|
||||
</div>
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end">
|
||||
<button className="btn btn-primary" onClick={saveNotificationSettings}>
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -97,7 +97,7 @@ const useNotifications = () => {
|
||||
const editNotificationApplicationsSettings = (settings: any): Promise<string> | string => {
|
||||
return axios.post('/api/notifications/settings_applications_edit', settings)
|
||||
.then((response) => {
|
||||
return response.data.notificationSettings;
|
||||
return response.data.notification;
|
||||
})
|
||||
.catch(err => {
|
||||
throw err.response?.data?.error || 'An error occurred';
|
||||
@ -107,7 +107,7 @@ const useNotifications = () => {
|
||||
const editNotificationServerSettings = (settings: any): Promise<string> | string => {
|
||||
return axios.post('/api/notifications/settings_server_edit', settings)
|
||||
.then((response) => {
|
||||
return response.data.notificationSettings;
|
||||
return response.data.notification;
|
||||
})
|
||||
.catch(err => {
|
||||
throw err.response?.data?.error || 'An error occurred';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user