Fix: inspector empty states and diagnostic button accessibility
Lint / Python (flake8) (push) Successful in 57s
Lint / JS (eslint) (push) Successful in 7s
Security / Python Security (bandit) (push) Successful in 45s
Test / Python Tests (pytest) (push) Successful in 1m13s
Lint / Notify on failure (push) Has been skipped
Lint / Deploy (push) Successful in 3s
Lint / Python (flake8) (push) Successful in 57s
Lint / JS (eslint) (push) Successful in 7s
Security / Python Security (bandit) (push) Successful in 45s
Test / Python Tests (pytest) (push) Successful in 1m13s
Lint / Notify on failure (push) Has been skipped
Lint / Deploy (push) Successful in 3s
- Replace .empty-state (removed class) with TDS lt-empty-state--sm in both error branches of renderInspector() and loadInspector() - Diagnostic run button: add aria-label, apply lt-btn TDS classes for consistent styling instead of custom btn-diag-only styling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -320,7 +320,9 @@ function renderPanel(swName, idx) {
|
||||
_apiData.hosts && _apiData.hosts[d.lldp.system_name]);
|
||||
const diagHtml = hasDiagTarget ? `
|
||||
<div class="diag-bar">
|
||||
<button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
|
||||
<button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
|
||||
data-sw="${escHtml(swName)}" data-idx="${idx}"
|
||||
aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
|
||||
<span class="diag-status" id="diag-status"></span>
|
||||
</div>
|
||||
<div class="diag-results" id="diag-results"></div>` : '';
|
||||
@@ -433,7 +435,7 @@ function renderInspector(data) {
|
||||
}
|
||||
|
||||
if (!Object.keys(switches).length) {
|
||||
main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
|
||||
main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -460,7 +462,7 @@ async function loadInspector() {
|
||||
renderInspector(data);
|
||||
} catch (e) {
|
||||
document.getElementById('inspector-main').innerHTML =
|
||||
'<p class="empty-state">Failed to load inspector data.</p>';
|
||||
'<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
|
||||
lt.toast.error('Failed to load inspector data');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user