Fix discovery to protocol mapping integration

- Fix global function references between discovery.js and protocol_mapping.js
- Add 'Apply All as Protocol Signals' functionality to discovery results
- Implement bulk signal creation from discovery results
- Add proper CSS styling for discovery results and notifications
- Expose key functions to global scope for cross-script communication
- Improve modal auto-population with better timing and error handling

Now discovery results properly:
- Populate the signal form when clicking 'Use This Signal'
- Create all signals at once when clicking 'Apply All as Protocol Signals'
- Show clear notifications for success/failure
- Refresh the protocol signals display automatically
This commit is contained in:
openhands 2025-11-09 14:18:45 +00:00
parent f0d6aca5ed
commit a639e3159a
3 changed files with 147 additions and 3 deletions

View File

@ -229,6 +229,87 @@ DASHBOARD_HTML = """
.log-entry.info { .log-entry.info {
color: #007acc; color: #007acc;
} }
/* Discovery Results Styling */
.discovery-result-card {
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px;
margin-bottom: 10px;
background: #f8f9fa;
}
.discovery-result-card .signal-info {
margin-bottom: 10px;
}
.discovery-result-card .signal-tags {
margin: 5px 0;
}
.discovery-result-card .signal-details {
display: flex;
gap: 15px;
font-size: 14px;
color: #666;
}
.use-signal-btn {
background: #007acc;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.use-signal-btn:hover {
background: #005a9e;
}
.apply-all-btn {
background: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
margin-top: 15px;
}
.apply-all-btn:hover {
background: #218838;
}
.discovery-notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px;
border-radius: 4px;
z-index: 10000;
max-width: 300px;
}
.discovery-notification.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.discovery-notification.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.discovery-notification.warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -115,8 +115,8 @@ class SimplifiedProtocolDiscovery {
console.log('Auto-populating signal form with:', signalData); console.log('Auto-populating signal form with:', signalData);
// Use the simplified protocol mapping function // Use the simplified protocol mapping function
if (typeof autoPopulateSignalForm === 'function') { if (typeof window.autoPopulateSignalForm === 'function') {
autoPopulateSignalForm(signalData); window.autoPopulateSignalForm(signalData);
} else { } else {
console.error('Simplified protocol mapping functions not loaded'); console.error('Simplified protocol mapping functions not loaded');
this.showNotification('Protocol mapping system not available', 'error'); this.showNotification('Protocol mapping system not available', 'error');
@ -222,6 +222,65 @@ class SimplifiedProtocolDiscovery {
this.autoPopulateSignalForm(signal); this.autoPopulateSignalForm(signal);
} }
}); });
// Add "Apply All" button
const applyAllButton = document.createElement('button');
applyAllButton.className = 'apply-all-btn';
applyAllButton.textContent = 'Apply All as Protocol Signals';
applyAllButton.style.marginTop = '15px';
applyAllButton.style.padding = '10px 20px';
applyAllButton.style.background = '#28a745';
applyAllButton.style.color = 'white';
applyAllButton.style.border = 'none';
applyAllButton.style.borderRadius = '4px';
applyAllButton.style.cursor = 'pointer';
applyAllButton.style.fontWeight = 'bold';
applyAllButton.onclick = () => {
this.applyAllAsProtocolSignals(suggestedSignals);
};
resultsContainer.appendChild(applyAllButton);
}
// Apply all discovered signals as protocol signals
async applyAllAsProtocolSignals(signals) {
console.log('Applying all discovered signals as protocol signals:', signals);
let successCount = 0;
let errorCount = 0;
for (const signal of signals) {
try {
const response = await fetch('/api/v1/dashboard/protocol-signals', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(signal)
});
const data = await response.json();
if (data.success) {
successCount++;
console.log(`✓ Created signal: ${signal.signal_name}`);
} else {
errorCount++;
console.error(`✗ Failed to create signal: ${signal.signal_name}`, data.detail);
}
} catch (error) {
errorCount++;
console.error(`✗ Error creating signal: ${signal.signal_name}`, error);
}
}
// Show results
const message = `Created ${successCount} signals successfully. ${errorCount > 0 ? `${errorCount} failed.` : ''}`;
this.showNotification(message, errorCount > 0 ? 'warning' : 'success');
// Refresh the protocol signals display
if (typeof window.loadAllSignals === 'function') {
window.loadAllSignals();
}
} }
// Tag-based signal search // Tag-based signal search

View File

@ -355,3 +355,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Load initial data // Load initial data
loadAllSignals(); loadAllSignals();
}); });
// Expose functions to global scope for discovery integration
window.autoPopulateSignalForm = autoPopulateSignalForm;
window.loadAllSignals = loadAllSignals;