725 lines
31 KiB
HTML
725 lines
31 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Webhook Management - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.webhook-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.webhook-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid #007bff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.webhook-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.webhook-active { border-left-color: #28a745; }
|
|
.webhook-inactive { border-left-color: #6c757d; }
|
|
.webhook-error { border-left-color: #dc3545; }
|
|
.webhook-pending { border-left-color: #ffc107; }
|
|
.webhook-status {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
.status-active { background: #28a745; animation: pulse 2s infinite; }
|
|
.status-inactive { background: #6c757d; }
|
|
.status-error { background: #dc3545; }
|
|
.status-pending { background: #ffc107; }
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
100% { opacity: 1; }
|
|
}
|
|
.webhook-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
}
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
.webhook-logs {
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
.log-entry {
|
|
font-family: monospace;
|
|
font-size: 0.85rem;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.log-success { color: #28a745; }
|
|
.log-error { color: #dc3545; }
|
|
.log-warning { color: #ffc107; }
|
|
.log-info { color: #17a2b8; }
|
|
.webhook-form {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.payload-preview {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
white-space: pre-wrap;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.test-result {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
display: none;
|
|
}
|
|
.test-success {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.test-error {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
.webhook-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
.event-selector {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
.event-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f1f1f1;
|
|
}
|
|
.event-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.security-settings {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.delivery-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.delivery-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.delivery-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.delivery-label {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
margin-top: 5px;
|
|
}
|
|
.retry-indicator {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 0.8rem;
|
|
display: inline-block;
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4><i class="fas fa-webhook"></i> Webhook Management</h4>
|
|
<h6>Configure and monitor webhook endpoints</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#webhookModal">
|
|
<i class="fas fa-plus"></i> Add Webhook
|
|
</button>
|
|
<button class="btn btn-info me-2" id="testAllWebhooks">
|
|
<i class="fas fa-vial"></i> Test All
|
|
</button>
|
|
<button class="btn btn-success" id="refreshWebhooks">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Webhook Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="webhook-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5><i class="fas fa-broadcast-tower"></i> Webhook Monitoring</h5>
|
|
<p>Manage webhook endpoints for real-time data synchronization and event notifications</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="delivery-stats">
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">12</div>
|
|
<div class="delivery-label">Active Webhooks</div>
|
|
</div>
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">98.7%</div>
|
|
<div class="delivery-label">Success Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Webhook List -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-list"></i> Configured Webhooks</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Active Webhook -->
|
|
<div class="webhook-card webhook-active">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h6><span class="webhook-status status-active"></span>Patient Registration Webhook</h6>
|
|
<p><strong>URL:</strong> https://external-system.com/api/patient-webhook</p>
|
|
<p><strong>Events:</strong> patient.created, patient.updated</p>
|
|
<small class="text-muted">Last delivery: 2 minutes ago | Next retry: N/A</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="webhook-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">247</div>
|
|
<div class="stat-label">Delivered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">3</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">145ms</div>
|
|
<div class="stat-label">Avg Response</div>
|
|
</div>
|
|
</div>
|
|
<div class="webhook-actions">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="testWebhook(1)">
|
|
<i class="fas fa-vial"></i> Test
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info" onclick="viewLogs(1)">
|
|
<i class="fas fa-list-alt"></i> Logs
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="editWebhook(1)">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Webhook -->
|
|
<div class="webhook-card webhook-error">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h6><span class="webhook-status status-error"></span>Lab Results Webhook</h6>
|
|
<p><strong>URL:</strong> https://lab-system.com/api/results-webhook</p>
|
|
<p><strong>Events:</strong> lab_result.completed, lab_result.critical</p>
|
|
<small class="text-muted">Last delivery: 1 hour ago | Error: Connection timeout</small>
|
|
<div class="retry-indicator">
|
|
<i class="fas fa-redo"></i> Retrying in 15 minutes (Attempt 3/5)
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="webhook-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">89</div>
|
|
<div class="stat-label">Delivered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">12</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">2.3s</div>
|
|
<div class="stat-label">Avg Response</div>
|
|
</div>
|
|
</div>
|
|
<div class="webhook-actions">
|
|
<button class="btn btn-sm btn-outline-warning" onclick="retryWebhook(2)">
|
|
<i class="fas fa-redo"></i> Retry
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="viewErrors(2)">
|
|
<i class="fas fa-exclamation-triangle"></i> Errors
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="editWebhook(2)">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pending Webhook -->
|
|
<div class="webhook-card webhook-pending">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h6><span class="webhook-status status-pending"></span>Appointment Webhook</h6>
|
|
<p><strong>URL:</strong> https://scheduling-system.com/api/appointment-webhook</p>
|
|
<p><strong>Events:</strong> appointment.scheduled, appointment.cancelled</p>
|
|
<small class="text-muted">Pending verification | Created: 10 minutes ago</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="webhook-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">0</div>
|
|
<div class="stat-label">Delivered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">0</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">-</div>
|
|
<div class="stat-label">Avg Response</div>
|
|
</div>
|
|
</div>
|
|
<div class="webhook-actions">
|
|
<button class="btn btn-sm btn-outline-success" onclick="verifyWebhook(3)">
|
|
<i class="fas fa-check"></i> Verify
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="testWebhook(3)">
|
|
<i class="fas fa-vial"></i> Test
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="editWebhook(3)">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inactive Webhook -->
|
|
<div class="webhook-card webhook-inactive">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h6><span class="webhook-status status-inactive"></span>Billing Webhook</h6>
|
|
<p><strong>URL:</strong> https://billing-system.com/api/billing-webhook</p>
|
|
<p><strong>Events:</strong> bill.created, payment.received</p>
|
|
<small class="text-muted">Disabled by user | Last active: 2 days ago</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="webhook-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">1,247</div>
|
|
<div class="stat-label">Delivered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">23</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">234ms</div>
|
|
<div class="stat-label">Avg Response</div>
|
|
</div>
|
|
</div>
|
|
<div class="webhook-actions">
|
|
<button class="btn btn-sm btn-outline-success" onclick="enableWebhook(4)">
|
|
<i class="fas fa-play"></i> Enable
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info" onclick="viewLogs(4)">
|
|
<i class="fas fa-list-alt"></i> Logs
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="editWebhook(4)">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<!-- Webhook Statistics -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-chart-bar"></i> Delivery Statistics</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="delivery-stats">
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">1,583</div>
|
|
<div class="delivery-label">Total Deliveries</div>
|
|
</div>
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">38</div>
|
|
<div class="delivery-label">Failed Deliveries</div>
|
|
</div>
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">287ms</div>
|
|
<div class="delivery-label">Avg Response Time</div>
|
|
</div>
|
|
<div class="delivery-card">
|
|
<div class="delivery-value">5</div>
|
|
<div class="delivery-label">Pending Retries</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-clock"></i> Recent Activity</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="webhook-logs">
|
|
<div class="log-entry log-success">
|
|
[14:32:15] SUCCESS: Patient webhook delivered (200ms)
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:31:42] SUCCESS: Lab result webhook delivered (145ms)
|
|
</div>
|
|
<div class="log-entry log-error">
|
|
[14:30:18] ERROR: Appointment webhook failed (timeout)
|
|
</div>
|
|
<div class="log-entry log-warning">
|
|
[14:29:55] WARNING: Billing webhook slow response (2.3s)
|
|
</div>
|
|
<div class="log-entry log-info">
|
|
[14:29:30] INFO: New webhook endpoint registered
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:28:45] SUCCESS: Patient webhook delivered (189ms)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-bolt"></i> Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-primary btn-sm" onclick="testAllWebhooks()">
|
|
<i class="fas fa-vial"></i> Test All Webhooks
|
|
</button>
|
|
<button class="btn btn-outline-warning btn-sm" onclick="retryFailedWebhooks()">
|
|
<i class="fas fa-redo"></i> Retry Failed
|
|
</button>
|
|
<button class="btn btn-outline-info btn-sm" onclick="exportWebhookLogs()">
|
|
<i class="fas fa-download"></i> Export Logs
|
|
</button>
|
|
<button class="btn btn-outline-success btn-sm" onclick="validateAllWebhooks()">
|
|
<i class="fas fa-check-circle"></i> Validate All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Webhook Modal -->
|
|
<div class="modal fade" id="webhookModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="fas fa-plus"></i> Add New Webhook</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="webhookForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Webhook Name</label>
|
|
<input type="text" class="form-control" id="webhookName" placeholder="Enter webhook name">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Endpoint URL</label>
|
|
<input type="url" class="form-control" id="webhookUrl" placeholder="https://example.com/webhook">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group mb-3">
|
|
<label>Description</label>
|
|
<textarea class="form-control" id="webhookDescription" rows="2" placeholder="Describe the webhook purpose"></textarea>
|
|
</div>
|
|
|
|
<div class="event-selector">
|
|
<h6>Select Events</h6>
|
|
<div class="event-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" value="patient.created"> Patient Created
|
|
</label>
|
|
<span class="badge bg-info">High Volume</span>
|
|
</div>
|
|
<div class="event-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" value="patient.updated"> Patient Updated
|
|
</label>
|
|
<span class="badge bg-info">High Volume</span>
|
|
</div>
|
|
<div class="event-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" value="appointment.scheduled"> Appointment Scheduled
|
|
</label>
|
|
<span class="badge bg-warning">Medium Volume</span>
|
|
</div>
|
|
<div class="event-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" value="lab_result.completed"> Lab Result Completed
|
|
</label>
|
|
<span class="badge bg-success">Low Volume</span>
|
|
</div>
|
|
<div class="event-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" value="bill.created"> Bill Created
|
|
</label>
|
|
<span class="badge bg-warning">Medium Volume</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="security-settings">
|
|
<h6><i class="fas fa-shield-alt"></i> Security Settings</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Secret Key</label>
|
|
<input type="text" class="form-control" id="webhookSecret" placeholder="Optional secret key">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Authentication</label>
|
|
<select class="form-control" id="webhookAuth">
|
|
<option value="none">None</option>
|
|
<option value="basic">Basic Auth</option>
|
|
<option value="bearer">Bearer Token</option>
|
|
<option value="api_key">API Key</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Retry Attempts</label>
|
|
<select class="form-control" id="retryAttempts">
|
|
<option value="3">3 attempts</option>
|
|
<option value="5">5 attempts</option>
|
|
<option value="10">10 attempts</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label>Timeout (seconds)</label>
|
|
<input type="number" class="form-control" id="webhookTimeout" value="30" min="5" max="300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" id="webhookActive" checked>
|
|
<label class="form-check-label" for="webhookActive">
|
|
Activate webhook immediately
|
|
</label>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="test-result" id="testResult"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-outline-primary" id="testWebhookBtn">
|
|
<i class="fas fa-vial"></i> Test Webhook
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="saveWebhookBtn">
|
|
<i class="fas fa-save"></i> Save Webhook
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Test individual webhook
|
|
window.testWebhook = function(webhookId) {
|
|
alert('Testing webhook #' + webhookId + '...');
|
|
// Simulate test result
|
|
setTimeout(function() {
|
|
alert('Webhook test completed successfully!');
|
|
}, 2000);
|
|
};
|
|
|
|
// View webhook logs
|
|
window.viewLogs = function(webhookId) {
|
|
alert('Opening logs for webhook #' + webhookId + '...');
|
|
};
|
|
|
|
// Edit webhook
|
|
window.editWebhook = function(webhookId) {
|
|
$('#webhookModal').modal('show');
|
|
// Pre-populate form with webhook data
|
|
};
|
|
|
|
// Retry webhook
|
|
window.retryWebhook = function(webhookId) {
|
|
alert('Retrying webhook #' + webhookId + '...');
|
|
};
|
|
|
|
// View errors
|
|
window.viewErrors = function(webhookId) {
|
|
alert('Opening error details for webhook #' + webhookId + '...');
|
|
};
|
|
|
|
// Verify webhook
|
|
window.verifyWebhook = function(webhookId) {
|
|
alert('Verifying webhook #' + webhookId + '...');
|
|
};
|
|
|
|
// Enable webhook
|
|
window.enableWebhook = function(webhookId) {
|
|
alert('Enabling webhook #' + webhookId + '...');
|
|
};
|
|
|
|
// Test webhook in modal
|
|
$('#testWebhookBtn').click(function() {
|
|
var url = $('#webhookUrl').val();
|
|
if (!url) {
|
|
alert('Please enter a webhook URL first');
|
|
return;
|
|
}
|
|
|
|
$('#testResult').removeClass('test-success test-error').addClass('test-success').show();
|
|
$('#testResult').html('<i class="fas fa-check"></i> Webhook test successful! Response time: 234ms');
|
|
});
|
|
|
|
// Save webhook
|
|
$('#saveWebhookBtn').click(function() {
|
|
var name = $('#webhookName').val();
|
|
var url = $('#webhookUrl').val();
|
|
|
|
if (!name || !url) {
|
|
alert('Please fill in required fields');
|
|
return;
|
|
}
|
|
|
|
alert('Webhook saved successfully!');
|
|
$('#webhookModal').modal('hide');
|
|
location.reload();
|
|
});
|
|
|
|
// Quick action functions
|
|
window.testAllWebhooks = function() {
|
|
alert('Testing all active webhooks...');
|
|
};
|
|
|
|
window.retryFailedWebhooks = function() {
|
|
alert('Retrying all failed webhook deliveries...');
|
|
};
|
|
|
|
window.exportWebhookLogs = function() {
|
|
alert('Exporting webhook logs...');
|
|
};
|
|
|
|
window.validateAllWebhooks = function() {
|
|
alert('Validating all webhook endpoints...');
|
|
};
|
|
|
|
// Refresh webhooks
|
|
$('#refreshWebhooks').click(function() {
|
|
location.reload();
|
|
});
|
|
|
|
// Test all webhooks button
|
|
$('#testAllWebhooks').click(function() {
|
|
testAllWebhooks();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|