491 lines
20 KiB
HTML
491 lines
20 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Test Connection - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.connection-test {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.test-result {
|
|
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);
|
|
}
|
|
.test-success {
|
|
border-left-color: #28a745;
|
|
background: #d4edda;
|
|
}
|
|
.test-error {
|
|
border-left-color: #dc3545;
|
|
background: #f8d7da;
|
|
}
|
|
.test-warning {
|
|
border-left-color: #ffc107;
|
|
background: #fff3cd;
|
|
}
|
|
.connection-details {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
}
|
|
.test-progress {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.spinner {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #007bff;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.endpoint-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
.status-online { background: #28a745; }
|
|
.status-offline { background: #dc3545; }
|
|
.status-warning { background: #ffc107; }
|
|
.status-unknown { background: #6c757d; }
|
|
.test-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.metric-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.log-entry {
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
border-left: 3px solid #dee2e6;
|
|
}
|
|
.log-info { border-left-color: #17a2b8; }
|
|
.log-success { border-left-color: #28a745; }
|
|
.log-error { border-left-color: #dc3545; }
|
|
.log-warning { border-left-color: #ffc107; }
|
|
</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-plug"></i> Test Connection</h4>
|
|
<h6>Test and validate external system connections</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'integration:external_system_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Systems
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Test Interface -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-network-wired"></i> Connection Test</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="connection-test">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>System Information</h6>
|
|
<div class="connection-details">
|
|
<p><strong>System Name:</strong> Epic EMR Integration</p>
|
|
<p><strong>Type:</strong> HL7 FHIR API</p>
|
|
<p><strong>Base URL:</strong> https://api.epic.com/fhir/r4</p>
|
|
<p><strong>Authentication:</strong> OAuth 2.0</p>
|
|
<p><strong>Status:</strong> <span class="status-indicator status-online"></span>Active</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Test Configuration</h6>
|
|
<div class="form-group mb-3">
|
|
<label>Test Type</label>
|
|
<select class="form-control" id="testType">
|
|
<option value="basic">Basic Connectivity</option>
|
|
<option value="auth">Authentication Test</option>
|
|
<option value="endpoints">Endpoint Validation</option>
|
|
<option value="data">Data Exchange Test</option>
|
|
<option value="full">Full Integration Test</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label>Timeout (seconds)</label>
|
|
<input type="number" class="form-control" value="30" min="5" max="300">
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" id="verboseLogging">
|
|
<label class="form-check-label" for="verboseLogging">
|
|
Enable verbose logging
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<button type="button" class="btn btn-primary btn-lg" id="startTest">
|
|
<i class="fas fa-play"></i> Start Connection Test
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-lg ms-2" id="stopTest" style="display: none;">
|
|
<i class="fas fa-stop"></i> Stop Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Progress -->
|
|
<div class="test-progress" id="testProgress">
|
|
<div class="spinner"></div>
|
|
<h6>Testing connection...</h6>
|
|
<p id="progressText">Initializing test...</p>
|
|
</div>
|
|
|
|
<!-- Test Results -->
|
|
<div id="testResults" style="display: none;">
|
|
<h6>Test Results</h6>
|
|
<div class="test-result test-success">
|
|
<h6><i class="fas fa-check-circle"></i> Connection Successful</h6>
|
|
<p>Successfully connected to Epic EMR Integration system</p>
|
|
<small class="text-muted">Test completed at: January 20, 2024 14:30:25</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Metrics -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-chart-line"></i> Performance Metrics</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="test-metrics">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="responseTime">--</div>
|
|
<div class="metric-label">Response Time (ms)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="throughput">--</div>
|
|
<div class="metric-label">Throughput (req/sec)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="successRate">--</div>
|
|
<div class="metric-label">Success Rate (%)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="errorCount">--</div>
|
|
<div class="metric-label">Error Count</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<!-- Endpoint Status -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-list"></i> Endpoint Status</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="endpoint-card">
|
|
<h6><span class="status-indicator status-online"></span>Patient API</h6>
|
|
<p>/Patient</p>
|
|
<small class="text-muted">Last tested: 5 minutes ago</small>
|
|
</div>
|
|
<div class="endpoint-card">
|
|
<h6><span class="status-indicator status-online"></span>Observation API</h6>
|
|
<p>/Observation</p>
|
|
<small class="text-muted">Last tested: 5 minutes ago</small>
|
|
</div>
|
|
<div class="endpoint-card">
|
|
<h6><span class="status-indicator status-warning"></span>Medication API</h6>
|
|
<p>/Medication</p>
|
|
<small class="text-muted">Slow response detected</small>
|
|
</div>
|
|
<div class="endpoint-card">
|
|
<h6><span class="status-indicator status-offline"></span>Appointment API</h6>
|
|
<p>/Appointment</p>
|
|
<small class="text-muted">Connection timeout</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-tools"></i> Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-sync"></i> Refresh Status
|
|
</button>
|
|
<button class="btn btn-outline-success btn-sm">
|
|
<i class="fas fa-download"></i> Export Results
|
|
</button>
|
|
<button class="btn btn-outline-info btn-sm">
|
|
<i class="fas fa-history"></i> View History
|
|
</button>
|
|
<button class="btn btn-outline-warning btn-sm">
|
|
<i class="fas fa-cog"></i> Configure Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Tests -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-clock"></i> Recent Tests</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group list-group-flush">
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1">Full Integration Test</h6>
|
|
<small>2 hours ago</small>
|
|
</div>
|
|
<span class="badge bg-success">Passed</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1">Authentication Test</h6>
|
|
<small>4 hours ago</small>
|
|
</div>
|
|
<span class="badge bg-success">Passed</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1">Endpoint Validation</h6>
|
|
<small>6 hours ago</small>
|
|
</div>
|
|
<span class="badge bg-warning">Warning</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-1">Basic Connectivity</h6>
|
|
<small>8 hours ago</small>
|
|
</div>
|
|
<span class="badge bg-danger">Failed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Log -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-terminal"></i> Test Log</h5>
|
|
<div class="card-tools">
|
|
<button class="btn btn-sm btn-outline-secondary" id="clearLog">
|
|
<i class="fas fa-trash"></i> Clear Log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="testLog" style="max-height: 300px; overflow-y: auto;">
|
|
<div class="log-entry log-info">
|
|
[14:25:10] INFO: Connection test initialized
|
|
</div>
|
|
<div class="log-entry log-info">
|
|
[14:25:11] INFO: Testing basic connectivity to https://api.epic.com/fhir/r4
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:25:12] SUCCESS: Connection established successfully
|
|
</div>
|
|
<div class="log-entry log-info">
|
|
[14:25:13] INFO: Testing authentication with OAuth 2.0
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:25:15] SUCCESS: Authentication successful
|
|
</div>
|
|
<div class="log-entry log-info">
|
|
[14:25:16] INFO: Validating API endpoints
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:25:18] SUCCESS: Patient API endpoint validated
|
|
</div>
|
|
<div class="log-entry log-success">
|
|
[14:25:20] SUCCESS: Observation API endpoint validated
|
|
</div>
|
|
<div class="log-entry log-warning">
|
|
[14:25:22] WARNING: Medication API response time exceeded threshold (2.5s)
|
|
</div>
|
|
<div class="log-entry log-error">
|
|
[14:25:25] ERROR: Appointment API connection timeout after 30 seconds
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
var testRunning = false;
|
|
var testInterval;
|
|
|
|
// Start test button
|
|
$('#startTest').click(function() {
|
|
if (!testRunning) {
|
|
startConnectionTest();
|
|
}
|
|
});
|
|
|
|
// Stop test button
|
|
$('#stopTest').click(function() {
|
|
if (testRunning) {
|
|
stopConnectionTest();
|
|
}
|
|
});
|
|
|
|
function startConnectionTest() {
|
|
testRunning = true;
|
|
$('#startTest').hide();
|
|
$('#stopTest').show();
|
|
$('#testResults').hide();
|
|
$('#testProgress').show();
|
|
|
|
// Clear previous metrics
|
|
$('#responseTime, #throughput, #successRate, #errorCount').text('--');
|
|
|
|
// Simulate test progress
|
|
var steps = [
|
|
'Initializing connection test...',
|
|
'Testing basic connectivity...',
|
|
'Validating authentication...',
|
|
'Checking API endpoints...',
|
|
'Testing data exchange...',
|
|
'Analyzing performance metrics...',
|
|
'Generating test report...'
|
|
];
|
|
|
|
var currentStep = 0;
|
|
testInterval = setInterval(function() {
|
|
if (currentStep < steps.length) {
|
|
$('#progressText').text(steps[currentStep]);
|
|
addLogEntry('INFO', steps[currentStep]);
|
|
currentStep++;
|
|
} else {
|
|
completeTest();
|
|
}
|
|
}, 2000);
|
|
}
|
|
|
|
function stopConnectionTest() {
|
|
testRunning = false;
|
|
clearInterval(testInterval);
|
|
$('#startTest').show();
|
|
$('#stopTest').hide();
|
|
$('#testProgress').hide();
|
|
addLogEntry('WARNING', 'Connection test stopped by user');
|
|
}
|
|
|
|
function completeTest() {
|
|
testRunning = false;
|
|
clearInterval(testInterval);
|
|
$('#startTest').show();
|
|
$('#stopTest').hide();
|
|
$('#testProgress').hide();
|
|
$('#testResults').show();
|
|
|
|
// Update metrics with sample data
|
|
$('#responseTime').text('245');
|
|
$('#throughput').text('12.5');
|
|
$('#successRate').text('87.5');
|
|
$('#errorCount').text('2');
|
|
|
|
addLogEntry('SUCCESS', 'Connection test completed successfully');
|
|
}
|
|
|
|
function addLogEntry(level, message) {
|
|
var timestamp = new Date().toLocaleTimeString();
|
|
var logClass = 'log-' + level.toLowerCase();
|
|
var logEntry = '<div class="log-entry ' + logClass + '">[' + timestamp + '] ' + level + ': ' + message + '</div>';
|
|
$('#testLog').append(logEntry);
|
|
$('#testLog').scrollTop($('#testLog')[0].scrollHeight);
|
|
}
|
|
|
|
// Clear log button
|
|
$('#clearLog').click(function() {
|
|
$('#testLog').empty();
|
|
});
|
|
|
|
// Quick action buttons
|
|
$('.btn-outline-primary').click(function() {
|
|
location.reload();
|
|
});
|
|
|
|
$('.btn-outline-success').click(function() {
|
|
alert('Exporting test results...');
|
|
});
|
|
|
|
$('.btn-outline-info').click(function() {
|
|
alert('Opening test history...');
|
|
});
|
|
|
|
$('.btn-outline-warning').click(function() {
|
|
alert('Opening test configuration...');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|