From e70b23cbe58e28a3c47a89eb09b1cbafb2310f40 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 12 Aug 2025 14:49:13 +0700
Subject: [PATCH] Add placeholders to Service Uptime templates

- Adds support for new placeholders in the Service Uptime Monitoring alert templates. The following placeholders are now available:
-- ${ip_host}: The IP address or hostname of the service.
-- ${service_type}: The type of the service (e.g., HTTP, PING, TCP, DNS).
-- ${port}: The port the service is running on.
-- ${domain}: The domain name of the service.
-- ${region_agent}: The regional agent monitoring the service.
---
 .../form/PlaceholdersTabContent.tsx           | 178 +++++++++++++++++-
 .../notification/templateProcessor.ts         |  19 +-
 application/src/services/templateService.ts   |   4 +-
 3 files changed, 181 insertions(+), 20 deletions(-)

diff --git a/application/src/components/settings/alerts-templates/form/PlaceholdersTabContent.tsx b/application/src/components/settings/alerts-templates/form/PlaceholdersTabContent.tsx
index f54461b..adc3f22 100644
--- a/application/src/components/settings/alerts-templates/form/PlaceholdersTabContent.tsx
+++ b/application/src/components/settings/alerts-templates/form/PlaceholdersTabContent.tsx
@@ -71,15 +71,151 @@ export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({
             
             <FormField
               control={control}
-              name="threshold_placeholder"
+              name="url_placeholder"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Threshold Placeholder</FormLabel>
+                  <FormLabel>URL Placeholder</FormLabel>
                   <FormControl>
-                    <Input placeholder="${threshold}" {...field} />
+                    <Input placeholder="${url}" {...field} />
                   </FormControl>
                   <FormDescription className="text-xs">
-                    Used for threshold values in alerts
+                    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>
@@ -111,14 +247,38 @@ export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({
                 <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">${"{threshold}"}</code>
-                <p className="text-xs text-muted-foreground mt-1">Service threshold value</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>
@@ -129,4 +289,4 @@ export const PlaceholdersTabContent: React.FC<PlaceholdersTabContentProps> = ({
       </Card>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/application/src/services/notification/templateProcessor.ts b/application/src/services/notification/templateProcessor.ts
index 2450d62..acc0d29 100644
--- a/application/src/services/notification/templateProcessor.ts
+++ b/application/src/services/notification/templateProcessor.ts
@@ -32,12 +32,9 @@ export function processTemplate(
     
     // Skip replacement if template is empty
     if (!templateText) {
-     // console.log("Empty template for status:", status);
       return generateDefaultMessage(service.name, status, responseTime);
     }
-    
-   // console.log("Using template text:", templateText);
-    
+        
     // Replace placeholders with actual values
     let message = templateText
       .replace(/\${service_name}/g, service.name || 'Unknown Service')
@@ -50,16 +47,20 @@ export function processTemplate(
       message = message.replace(/\${response_time}/g, 'N/A');
     }
     
-    // Replace any other placeholders
+    // Replace service-specific placeholders
     message = message
-      .replace(/\${threshold}/g, service.threshold || 'N/A')
       .replace(/\${url}/g, service.url || 'N/A')
+      .replace(/\${host}/g, service.host || 'N/A')
+      .replace(/\${service_type}/g, service.type?.toUpperCase() || 'N/A')
+      .replace(/\${port}/g, service.port ? service.port.toString() : 'N/A')
+      .replace(/\${domain}/g, service.domain || 'N/A')
+      .replace(/\${region_name}/g, service.region_name || 'Default')
+      .replace(/\${agent_id}/g, service.agent_id ? service.agent_id.toString() : '1')
+      .replace(/\${uptime}/g, service.uptime ? `${service.uptime}%` : 'N/A')
       .replace(/\${time}/g, new Date().toLocaleString());
-      
-   // console.log("Processed template message:", message);
+      ;
     return message;
   } catch (error) {
-   // console.error("Error processing template:", error);
     return generateDefaultMessage(service.name, status, responseTime);
   }
 }
diff --git a/application/src/services/templateService.ts b/application/src/services/templateService.ts
index 0206482..47f8ae1 100644
--- a/application/src/services/templateService.ts
+++ b/application/src/services/templateService.ts
@@ -1,4 +1,3 @@
-
 import { pb } from "@/lib/pocketbase";
 import { 
   serverNotificationTemplateService, 
@@ -122,7 +121,8 @@ export const templateTypeConfigs = {
     description: 'Templates for service uptime monitoring alerts',
     placeholders: [
       '${service_name}', '${status}', '${response_time}', '${url}', 
-      '${uptime}', '${downtime}', '${time}'
+      '${host}', '${service_type}', '${port}', '${domain}', 
+      '${region_name}', '${agent_id}', '${uptime}', '${time}'
     ]
   },
   ssl: {