223 lines
8.7 KiB
HTML
223 lines
8.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Discovery Integration Test</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.test-section {
|
||
|
|
margin: 20px 0;
|
||
|
|
padding: 15px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 6px;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background: #007acc;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background: #005a9e;
|
||
|
|
}
|
||
|
|
.log {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
max-height: 200px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.success { color: green; }
|
||
|
|
.error { color: red; }
|
||
|
|
.info { color: blue; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Discovery Integration Test</h1>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Test 1: Check if Functions are Available</h2>
|
||
|
|
<button onclick="testFunctionAvailability()">Check Function Availability</button>
|
||
|
|
<div id="function-test" class="log"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Test 2: Simulate Discovery Results</h2>
|
||
|
|
<button onclick="simulateDiscovery()">Simulate Discovery Scan</button>
|
||
|
|
<div id="discovery-results" class="log"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Test 3: Test Auto-Population</h2>
|
||
|
|
<button onclick="testAutoPopulation()">Test Auto-Population</button>
|
||
|
|
<div id="auto-population-test" class="log"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Test 4: Test API Endpoints</h2>
|
||
|
|
<button onclick="testAPIEndpoints()">Test API Endpoints</button>
|
||
|
|
<div id="api-test" class="log"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function logMessage(elementId, message, type = 'info') {
|
||
|
|
const element = document.getElementById(elementId);
|
||
|
|
const timestamp = new Date().toLocaleTimeString();
|
||
|
|
element.innerHTML += `<div class="${type}">[${timestamp}] ${message}</div>`;
|
||
|
|
element.scrollTop = element.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
function testFunctionAvailability() {
|
||
|
|
const logElement = 'function-test';
|
||
|
|
logMessage(logElement, 'Testing function availability...', 'info');
|
||
|
|
|
||
|
|
const functions = [
|
||
|
|
'autoPopulateSignalForm',
|
||
|
|
'loadAllSignals',
|
||
|
|
'showAddSignalModal',
|
||
|
|
'saveSignal'
|
||
|
|
];
|
||
|
|
|
||
|
|
functions.forEach(funcName => {
|
||
|
|
const isAvailable = typeof window[funcName] === 'function';
|
||
|
|
const status = isAvailable ? '✓ AVAILABLE' : '✗ NOT AVAILABLE';
|
||
|
|
const type = isAvailable ? 'success' : 'error';
|
||
|
|
logMessage(logElement, `${funcName}: ${status}`, type);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function simulateDiscovery() {
|
||
|
|
const logElement = 'discovery-results';
|
||
|
|
logMessage(logElement, 'Simulating discovery scan...', 'info');
|
||
|
|
|
||
|
|
// Simulate discovered device
|
||
|
|
const discoveredDevice = {
|
||
|
|
device_id: 'test_device_001',
|
||
|
|
protocol_type: 'modbus_tcp',
|
||
|
|
device_name: 'Test Water Pump',
|
||
|
|
address: '192.168.1.200',
|
||
|
|
port: 502,
|
||
|
|
data_point: 'Speed',
|
||
|
|
protocol_address: '40001'
|
||
|
|
};
|
||
|
|
|
||
|
|
logMessage(logElement, `Discovered device: ${discoveredDevice.device_name}`, 'success');
|
||
|
|
logMessage(logElement, `Protocol: ${discoveredDevice.protocol_type} at ${discoveredDevice.protocol_address}`, 'info');
|
||
|
|
|
||
|
|
// Convert to signal format
|
||
|
|
const signalData = convertEndpointToSignal(discoveredDevice);
|
||
|
|
logMessage(logElement, 'Converted to signal format:', 'info');
|
||
|
|
logMessage(logElement, ` Signal Name: ${signalData.signal_name}`, 'info');
|
||
|
|
logMessage(logElement, ` Tags: ${signalData.tags.join(', ')}`, 'info');
|
||
|
|
logMessage(logElement, ` Protocol: ${signalData.protocol_type}`, 'info');
|
||
|
|
logMessage(logElement, ` Address: ${signalData.protocol_address}`, 'info');
|
||
|
|
logMessage(logElement, ` DB Source: ${signalData.db_source}`, 'info');
|
||
|
|
|
||
|
|
// Store for later use
|
||
|
|
window.testSignalData = signalData;
|
||
|
|
|
||
|
|
logMessage(logElement, 'Signal data stored in window.testSignalData', 'success');
|
||
|
|
}
|
||
|
|
|
||
|
|
function convertEndpointToSignal(endpoint) {
|
||
|
|
const signalName = `${endpoint.device_name} ${endpoint.data_point}`;
|
||
|
|
const tags = [
|
||
|
|
`device:${endpoint.device_name.toLowerCase().replace(/[^a-z0-9]/g, '_')}`,
|
||
|
|
`protocol:${endpoint.protocol_type}`,
|
||
|
|
`data_point:${endpoint.data_point.toLowerCase().replace(/[^a-z0-9]/g, '_')}`,
|
||
|
|
'discovered:true',
|
||
|
|
'test:true'
|
||
|
|
];
|
||
|
|
|
||
|
|
const dbSource = `measurements.${endpoint.device_name.toLowerCase().replace(/[^a-z0-9]/g, '_')}_${endpoint.data_point.toLowerCase().replace(/[^a-z0-9]/g, '_')}`;
|
||
|
|
|
||
|
|
return {
|
||
|
|
signal_name: signalName,
|
||
|
|
tags: tags,
|
||
|
|
protocol_type: endpoint.protocol_type,
|
||
|
|
protocol_address: endpoint.protocol_address,
|
||
|
|
db_source: dbSource
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function testAutoPopulation() {
|
||
|
|
const logElement = 'auto-population-test';
|
||
|
|
|
||
|
|
if (!window.testSignalData) {
|
||
|
|
logMessage(logElement, 'No test signal data available. Run Test 2 first.', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
logMessage(logElement, 'Testing auto-population...', 'info');
|
||
|
|
|
||
|
|
// Check if autoPopulateSignalForm is available
|
||
|
|
if (typeof window.autoPopulateSignalForm !== 'function') {
|
||
|
|
logMessage(logElement, 'ERROR: autoPopulateSignalForm function not available!', 'error');
|
||
|
|
logMessage(logElement, 'This means the protocol_mapping.js file is not loaded or has errors.', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
logMessage(logElement, 'Calling autoPopulateSignalForm with test data...', 'info');
|
||
|
|
|
||
|
|
try {
|
||
|
|
window.autoPopulateSignalForm(window.testSignalData);
|
||
|
|
logMessage(logElement, '✓ autoPopulateSignalForm called successfully', 'success');
|
||
|
|
logMessage(logElement, 'The "Add New Signal" modal should open with pre-filled data.', 'info');
|
||
|
|
} catch (error) {
|
||
|
|
logMessage(logElement, `✗ Error calling autoPopulateSignalForm: ${error.message}`, 'error');
|
||
|
|
logMessage(logElement, `Stack trace: ${error.stack}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function testAPIEndpoints() {
|
||
|
|
const logElement = 'api-test';
|
||
|
|
logMessage(logElement, 'Testing API endpoints...', 'info');
|
||
|
|
|
||
|
|
const endpoints = [
|
||
|
|
'/api/v1/dashboard/protocol-signals',
|
||
|
|
'/api/v1/dashboard/discovery/scan',
|
||
|
|
'/api/v1/dashboard/discovery/status'
|
||
|
|
];
|
||
|
|
|
||
|
|
for (const endpoint of endpoints) {
|
||
|
|
try {
|
||
|
|
logMessage(logElement, `Testing ${endpoint}...`, 'info');
|
||
|
|
const response = await fetch(endpoint);
|
||
|
|
const status = response.status;
|
||
|
|
const statusText = response.statusText;
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
logMessage(logElement, `✓ ${endpoint}: ${status} ${statusText}`, 'success');
|
||
|
|
} else {
|
||
|
|
logMessage(logElement, `✗ ${endpoint}: ${status} ${statusText}`, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
logMessage(logElement, `✗ ${endpoint}: ${error.message}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|