422 lines
23 KiB
HTML
422 lines
23 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ source.name }} - {% trans "Source Details" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 mb-0">{{ source.name }}</h1>
|
|
<div class="btn-group">
|
|
<a href="{% url 'source_update' source.pk %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-edit"></i> {% trans "Edit" %}
|
|
</a>
|
|
{% comment %} <a href="{% url 'generate_api_keys' source.pk %}" class="btn btn-warning">
|
|
<i class="fas fa-key"></i> Generate Keys
|
|
</a> {% endcomment %}
|
|
<button id="toggle-source-status"
|
|
type="button"
|
|
class="btn btn-outline-{{ source.is_active|yesno:'warning,success' }}"
|
|
hx-post="{% url 'toggle_source_status' source.pk %}"
|
|
hx-target="#toggle-source-status"
|
|
hx-select="#toggle-source-status"
|
|
hx-select-oob="#source-status"
|
|
hx-swap="outerHTML"
|
|
hx-confirm="{% blocktrans %}Are you sure you want to {{ source.is_active|yesno:'deactivate,activate' }} this source?{% endblocktrans %}">
|
|
<i class="fas fa-{{ source.is_active|yesno:'pause,play' }}"></i>
|
|
{{ source.is_active|yesno:'Deactivate,Activate' }}
|
|
</button>
|
|
<a href="{% url 'source_delete' source.pk %}" class="btn btn-outline-danger">
|
|
<i class="fas fa-trash"></i> {% trans "Delete" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source Information -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">{% trans "Source Information" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Name" %}</label>
|
|
<div class="fw-bold">{{ source.name }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Type" %}</label>
|
|
<div>
|
|
<span class="badge bg-info">{{ source.get_source_type_display }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if source.description %}
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Description") }}</label>
|
|
<div>{{ source.description|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Contact Email") }}</label>
|
|
<div>
|
|
{% if source.contact_email %}
|
|
<a href="mailto:{{ source.contact_email }}">{{ source.contact_email }}</a>
|
|
{% else %}
|
|
<span class="text-muted">{{ _("Not specified") }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Contact Phone") }}</label>
|
|
<div>
|
|
{% if source.contact_phone %}
|
|
{{ source.contact_phone }}
|
|
{% else %}
|
|
<span class="text-muted">{{ _("Not specified") }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Status") }}</label>
|
|
<div id="source-status">
|
|
{% if source.is_active %}
|
|
<span class="badge bg-success">{{ _("Active") }}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ _("Inactive") }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Requires Authentication" %}</label>
|
|
<div>
|
|
{% if source.requires_auth %}
|
|
<span class="badge bg-warning">{% trans "Yes" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if source.webhook_url %}
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Webhook URL" %}</label>
|
|
<div><code>{{ source.webhook_url }}</code></div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if source.api_timeout %}
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("API Timeout") }}</label>
|
|
<div>{{ source.api_timeout }} {{ _("seconds") }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if source.notes %}
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Notes") }}</label>
|
|
<div>{{ source.notes|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Created") }}</label>
|
|
<div>{{ source.created_at|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{{ _("Last Updated") }}</label>
|
|
<div>{{ source.updated_at|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<!-- API Credentials -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">{% trans "API Credentials" %}</h6>
|
|
</div>
|
|
<div id="api-credentials" class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "API Key" %}</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="{{ source.api_key }}" readonly>
|
|
<button type="button" class="btn btn-outline-secondary"
|
|
hx-post="{% url 'copy_to_clipboard' %}"
|
|
hx-vals='{"text": "{{ source.api_key }}"}'
|
|
title="{% trans "Copy to clipboard" %}">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "API Secret" %}</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" value="{{ source.api_secret }}" readonly id="api-secret">
|
|
<button type="button" class="btn btn-outline-secondary" onclick="toggleSecretVisibility()">
|
|
<i class="fas fa-eye" id="secret-toggle-icon"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary"
|
|
hx-post="{% url 'copy_to_clipboard' %}"
|
|
hx-vals='{"text": "{{ source.api_secret }}"}'
|
|
title="{% trans "Copy to clipboard" %}">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<a hx-post="{% url 'generate_api_keys' source.pk %}" hx-target="#api-credentials" hx-select="#api-credentials" hx-swap="outerHTML" class="btn btn-main-action btn-sm">
|
|
<i class="fas fa-key"></i> {% trans "Generate New Keys" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">{% trans "Integration Statistics" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Total API Calls" %}</label>
|
|
<div class="h5 mb-0">{{ total_logs }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Successful Calls" %}</label>
|
|
<div class="h5 mb-0 text-success">{{ successful_logs }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Failed Calls" %}</label>
|
|
<div class="h5 mb-0 text-danger">{{ failed_logs }}</div>
|
|
</div>
|
|
{% if total_logs > 0 %}
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">{% trans "Success Rate" %}</label>
|
|
<div class="h5 mb-0">
|
|
{% widthratio successful_logs total_logs 100 %}%
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Integration Logs -->
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">{% trans "Recent Integration Logs" %}</h6>
|
|
<small class="text-muted">{% trans "Last 10 logs" %}</small>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if integration_logs %}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>{% trans "Timestamp" %}</th>
|
|
<th>{% trans "Method" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Response Time" %}</th>
|
|
<th>{% trans "Details" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for log in integration_logs %}
|
|
<tr>
|
|
<td>
|
|
<small>{{ log.created_at|date:"M d, Y H:i:s" }}</small>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary">{{ log.method }}</span>
|
|
</td>
|
|
<td>
|
|
{% if log.status_code >= 200 and log.status_code < 300 %}
|
|
<span class="badge bg-success">{{ log.status_code }}</span>
|
|
{% elif log.status_code >= 400 %}
|
|
<span class="badge bg-danger">{{ log.status_code }}</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">{{ log.status_code }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if log.response_time_ms %}
|
|
<small>{{ log.response_time_ms }}ms</small>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if log.request_data %}
|
|
<button type="button" class="btn btn-sm btn-outline-info"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#logDetailModal{{ log.id }}"
|
|
title="View details">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
{% else %}
|
|
<span class="text-muted">{{ _("No data") }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-clipboard-list fa-2x text-muted mb-3"></i>
|
|
<p class="text-muted">{{ _("No integration logs found") }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Detail Modals -->
|
|
{% for log in integration_logs %}
|
|
{% if log.request_data %}
|
|
<div class="modal fade" id="logDetailModal{{ log.id }}" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Integration Log Details" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<strong>{{ _("Timestamp:") }}:</strong><br>
|
|
{{ log.created_at|date:"M d, Y H:i:s" }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<strong>{{ _("Method:") }}:</strong><br>
|
|
<span class="badge bg-secondary">{{ log.method }}</span>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<strong>{{ _("Status Code:") }}:</strong><br>
|
|
{% if log.status_code >= 200 and log.status_code < 300 %}
|
|
<span class="badge bg-success">{{ log.status_code }}</span>
|
|
{% elif log.status_code >= 400 %}
|
|
<span class="badge bg-danger">{{ log.status_code }}</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">{{ log.status_code }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<strong>{{ _("Response Time:") }}:</strong><br>
|
|
{% if log.response_time_ms %}
|
|
{{ log.response_time_ms }}ms
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="mb-3">
|
|
<strong>{{ _("Request Data:") }}:</strong>
|
|
<pre class="bg-light p-2 rounded"><code>{{ log.request_data|pprint }}</code></pre>
|
|
</div>
|
|
{% if log.response_data %}
|
|
<div class="mb-3">
|
|
<strong>{{ _("Response Data:") }}:</strong>
|
|
<pre class="bg-light p-2 rounded"><code>{{ log.response_data|pprint }}</code></pre>
|
|
</div>
|
|
{% endif %}
|
|
{% if log.error_message %}
|
|
<div class="mb-3">
|
|
<strong>{{ _("Error Message:") }}:</strong>
|
|
<div class="alert alert-danger">{{ log.error_message }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
function toggleSecretVisibility() {
|
|
const secretInput = document.getElementById('api-secret');
|
|
const toggleIcon = document.getElementById('secret-toggle-icon');
|
|
|
|
if (secretInput.type === 'password') {
|
|
secretInput.type = 'text';
|
|
toggleIcon.classList.remove('fa-eye');
|
|
toggleIcon.classList.add('fa-eye-slash');
|
|
} else {
|
|
secretInput.type = 'password';
|
|
toggleIcon.classList.remove('fa-eye-slash');
|
|
toggleIcon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
// Handle HTMX copy to clipboard feedback
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
if (evt.detail.successful && evt.detail.target.matches('[hx-post*="copy_to_clipboard"]')) {
|
|
const button = evt.detail.target;
|
|
const originalIcon = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-check"></i>';
|
|
button.classList.remove('btn-outline-secondary');
|
|
button.classList.add('btn-success');
|
|
|
|
setTimeout(() => {
|
|
button.innerHTML = originalIcon;
|
|
button.classList.remove('btn-success');
|
|
button.classList.add('btn-outline-secondary');
|
|
}, 2000);
|
|
}
|
|
});
|
|
|
|
// Auto-refresh after status toggle
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
if (evt.detail.successful && evt.detail.target.matches('[hx-post*="toggle_source_status"]')) {
|
|
// Reload the page after a short delay to show updated status
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 500);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|