calejocontrol
/
CalejoControl
1
0
Fork 0
Code Issues Pull Requests 4 Packages Projects Releases Wiki Activity

Improve protocol mappings UI with human-readable names 

- Update displayProtocolMappings to show station/equipment/data type names from tag metadata
- Ensure tag metadata is loaded before displaying protocol mappings
- Update table headers to indicate Name & ID format
- Users now see descriptive names instead of raw IDs in the mappings table

Co-authored-by: openhands <openhands@all-hands.dev>
This commit is contained in:
openhands 2025-11-08 11:20:04 +00:00
parent 5a2cdc2324
commit 86e92f6111
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dashboard/templates.py
View File

@ -563,9 +563,9 @@ DASHBOARD_HTML = """
<tr style="background: #f8f9fa;">
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">ID</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Protocol</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Station</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Equipment</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Data Type</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Station (Name & ID)</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Equipment (Name & ID)</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Data Type (Name & ID)</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Protocol Address</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Database Source</th>
<th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Actions</th>

20
static/protocol_mapping.js
View File

@ -111,6 +111,11 @@ function selectProtocol(protocol) {
async function loadProtocolMappings() {
try {
// Ensure tag metadata is loaded first
if (tagMetadata.stations.length === 0 || tagMetadata.dataTypes.length === 0) {
await loadTagMetadata();
}
const params = new URLSearchParams();
if (currentProtocolFilter !== 'all') {
params.append('protocol_type', currentProtocolFilter);
@ -140,13 +145,22 @@ function displayProtocolMappings(mappings) {
}
mappings.forEach(mapping => {
// Look up human-readable names from tag metadata
const station = tagMetadata.stations.find(s => s.id === mapping.station_id);
const equipment = tagMetadata.equipment.find(e => e.id === mapping.equipment_id);
const dataType = tagMetadata.dataTypes.find(dt => dt.id === mapping.data_type_id);
const stationDisplay = station ? `${station.name} (${station.id})` : (mapping.station_id || '-');
const equipmentDisplay = equipment ? `${equipment.name} (${equipment.id})` : (mapping.equipment_id || '-');
const dataTypeDisplay = dataType ? `${dataType.name} (${dataType.id})` : (mapping.data_type_id || '-');
const row = document.createElement('tr');
row.innerHTML = `
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.id}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.protocol_type}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.station_id || '-'}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.equipment_id || '-'}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.data_type_id || '-'}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${stationDisplay}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${equipmentDisplay}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${dataTypeDisplay}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.protocol_address}</td>
<td style="padding: 10px; border: 1px solid #ddd;">${mapping.db_source}</td>
<td style="padding: 10px; border: 1px solid #ddd;">