url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Server Threshold Tab

Browse Source 
- Add a new tab for "Server Threshold" to the Alert Templates dashboard, to allow users to manage server threshold configurations.
This commit is contained in:
Tola Leng
2025-08-09 20:06:40 +07:00
parent 34dccb763d
commit 92e5f3f074
5 changed files with 235 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/settings/alerts-templates/form/ServerThresholdFields.tsx
+121
View File
@@ -0,0 +1,121 @@
import React from "react";
import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Control } from "react-hook-form";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
interface ServerThresholdFieldsProps {
control: Control<any>;
}
export const ServerThresholdFields: React.FC<ServerThresholdFieldsProps> = ({ control }) => {
return (
<div className="space-y-6">
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium">Server Resource Thresholds</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={control}
name="cpu_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>CPU Threshold (%)</FormLabel>
<FormControl>
<Input
type="number"
min="0"
max="100"
placeholder="85"
{...field}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl>
<FormDescription>
CPU usage percentage that triggers an alert
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={control}
name="ram_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>RAM Threshold (%)</FormLabel>
<FormControl>
<Input
type="number"
min="0"
max="100"
placeholder="80"
{...field}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl>
<FormDescription>
Memory usage percentage that triggers an alert
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={control}
name="disk_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Disk Threshold (%)</FormLabel>
<FormControl>
<Input
type="number"
min="0"
max="100"
placeholder="90"
{...field}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl>
<FormDescription>
Disk usage percentage that triggers an alert
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={control}
name="network_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Network Threshold (%)</FormLabel>
<FormControl>
<Input
type="number"
min="0"
max="100"
placeholder="75"
{...field}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl>
<FormDescription>
Network usage percentage that triggers an alert
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
</Card>
</div>
);
};