Add screenshot viewing button to scan detail page

Display screenshot button in port table when a service has a captured
screenshot. Button opens screenshot in new tab with correct path
including the screenshot directory.
This commit is contained in:
2025-11-20 10:07:24 -06:00
parent 05f846809e
commit 6d5005403c

View File

@@ -331,6 +331,7 @@
<th>Product</th> <th>Product</th>
<th>Version</th> <th>Version</th>
<th>Status</th> <th>Status</th>
<th>Screenshot</th>
</tr> </tr>
</thead> </thead>
<tbody id="site-${siteIdx}-ip-${ipIdx}-ports"></tbody> <tbody id="site-${siteIdx}-ip-${ipIdx}-ports"></tbody>
@@ -344,10 +345,11 @@
const ports = ip.ports || []; const ports = ip.ports || [];
if (ports.length === 0) { if (ports.length === 0) {
portsContainer.innerHTML = '<tr class="scan-row"><td colspan="7" class="text-center text-muted">No ports found</td></tr>'; portsContainer.innerHTML = '<tr class="scan-row"><td colspan="8" class="text-center text-muted">No ports found</td></tr>';
} else { } else {
ports.forEach(port => { ports.forEach(port => {
const service = port.services && port.services.length > 0 ? port.services[0] : null; const service = port.services && port.services.length > 0 ? port.services[0] : null;
const screenshotPath = service && service.screenshot_path ? service.screenshot_path : null;
const row = document.createElement('tr'); const row = document.createElement('tr');
row.classList.add('scan-row'); // Fix white row bug row.classList.add('scan-row'); // Fix white row bug
@@ -359,6 +361,7 @@
<td>${service ? service.product || '-' : '-'}</td> <td>${service ? service.product || '-' : '-'}</td>
<td class="mono">${service ? service.version || '-' : '-'}</td> <td class="mono">${service ? service.version || '-' : '-'}</td>
<td>${port.expected ? '<span class="badge badge-good">Expected</span>' : '<span class="badge badge-warning">Unexpected</span>'}</td> <td>${port.expected ? '<span class="badge badge-good">Expected</span>' : '<span class="badge badge-warning">Unexpected</span>'}</td>
<td>${screenshotPath ? `<a href="/output/${screenshotPath.replace(/^\/?(?:app\/)?output\/?/, '')}" target="_blank" class="btn btn-sm btn-outline-primary" title="View Screenshot"><i class="bi bi-image"></i></a>` : '-'}</td>
`; `;
portsContainer.appendChild(row); portsContainer.appendChild(row);
}); });