Tola Leng
d4636d5436
- Add support for the `${error_message}` placeholder in uptime service notifications
313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
|
|
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 PlaceholdersTabContentProps {
|
|
control: Control<any>;
|
|
}
|
|
|
|
export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({ control }) => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Template Placeholders</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={control}
|
|
name="service_name_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Service Name Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${service_name}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service name in messages
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="response_time_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Response Time Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${response_time}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for response time in milliseconds
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="status_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Status Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${status}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service status (UP, DOWN, etc.)
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="url_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>URL Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${url}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service URL
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="host_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Host/IP Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${host}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service host or IP address
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="service_type_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Service Type Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${service_type}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service type (HTTP, PING, TCP, DNS)
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="port_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Port Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${port}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service port number
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="domain_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Domain Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${domain}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for domain name (DNS services)
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="region_name_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Region Name Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${region_name}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for regional agent name
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="agent_id_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Agent ID Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${agent_id}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for regional agent ID
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="uptime_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Uptime Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${uptime}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for service uptime percentage
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="time_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Time Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${time}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for current date and time
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={control}
|
|
name="error_message_placeholder"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Error Message Placeholder</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="${error_message}" {...field} />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">
|
|
Used for error details when service is down
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Placeholder Usage Guide</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground mb-3">
|
|
These placeholders will be replaced with actual values when notifications are sent:
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{service_name}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">The name of the service</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{response_time}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Response time in milliseconds</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{status}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service status (UP, DOWN)</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{url}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service URL</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{host}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service host or IP address</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{service_type}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service type (HTTP, PING, TCP, DNS)</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{port}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service port number</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{domain}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Domain name (DNS services)</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{region_name}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Regional agent name</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{agent_id}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Regional agent ID</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{uptime}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Service uptime percentage</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{time}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Current date and time</p>
|
|
</div>
|
|
<div className="bg-muted/30 p-2 rounded">
|
|
<code className="text-xs">${"{error_message}"}</code>
|
|
<p className="text-xs text-muted-foreground mt-1">Error details when service is down</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}; |