wagesj45/ngxstat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #20 from wagesj45/codex/update-ui/ux-for-duration-and-server-selection

Browse source 
Refactor index page selectors
This commit is contained in:
Jordan Wages 2025-07-18 22:25:37 -05:00 • committed by GitHub
commit a2f11f25e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

97
templates/index.html
View file

@ -8,81 +8,64 @@
<body class="section"> <body class="section">
<div class="container"> <div class="container">
<h1 class="title">ngxstat Reports</h1> <h1 class="title">ngxstat Reports</h1>
<div class="columns"> <div class="field is-grouped">
<div class="column is-one-quarter"> <div class="control has-icons-left">
<aside class="menu"> <div class="select is-small">
<p class="menu-label">Intervals</p> <select id="interval-select">
<ul class="menu-list" id="interval-list">
{% for interval in intervals %} {% for interval in intervals %}
<li> <option value="{{ interval }}">{{ interval.title() }}</option>
<a class="button is-small is-fullwidth" href="#" data-interval="{{ interval }}">
<span class="icon"><i data-feather="clock"></i></span>
<span>{{ interval.title() }}</span>
</a>
</li>
{% endfor %} {% endfor %}
</ul> </select>
<p class="menu-label">Domains</p> </div>
<ul class="menu-list" id="domain-list"> <span class="icon is-small is-left"><i data-feather="clock"></i></span>
<li>
<a class="button is-small is-fullwidth" href="#" data-domain="">
<span class="icon"><i data-feather="globe"></i></span>
<span>All Domains</span>
</a>
</li>
{% for domain in domains %}
<li>
<a class="button is-small is-fullwidth" href="#" data-domain="{{ domain }}">
<span class="icon"><i data-feather="server"></i></span>
<span>{{ domain }}</span>
</a>
</li>
{% endfor %}
</ul>
</aside>
</div> </div>
<div class="column"> <div class="control has-icons-left">
<iframe id="report-frame" src="" style="width:100%;height:80vh;border:none;"></iframe> <div class="select is-small">
<select id="domain-select">
<option value="">All Domains</option>
{% for domain in domains %}
<option value="{{ domain }}">{{ domain }}</option>
{% endfor %}
</select>
</div>
<span class="icon is-small is-left"><i data-feather="server"></i></span>
</div> </div>
</div> </div>
<iframe id="report-frame" src="" style="width:100%;border:none;"></iframe>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script> <script>
const intervalLinks = document.querySelectorAll('#interval-list a'); const intervalSelect = document.getElementById('interval-select');
const domainLinks = document.querySelectorAll('#domain-list a'); const domainSelect = document.getElementById('domain-select');
let currentInterval = intervalLinks.length ? intervalLinks[0].dataset.interval : ''; const iframe = document.getElementById('report-frame');
let currentDomain = '';
function setActive(list, el) { let currentInterval = intervalSelect.value;
list.forEach(a => a.classList.remove('is-primary')); let currentDomain = domainSelect.value;
if (el) el.classList.add('is-primary');
}
function updateFrame() { function updateFrame() {
let path = currentInterval; let path = currentInterval;
if (currentDomain) { if (currentDomain) {
path = 'domains/' + currentDomain + '/' + currentInterval; path = 'domains/' + currentDomain + '/' + currentInterval;
} }
document.getElementById('report-frame').src = path + '/index.html'; iframe.src = path + '/index.html';
} }
intervalLinks.forEach(a => {
a.addEventListener('click', e => { intervalSelect.addEventListener('change', () => {
e.preventDefault(); currentInterval = intervalSelect.value;
currentInterval = a.dataset.interval; updateFrame();
setActive(intervalLinks, a);
updateFrame();
});
}); });
domainLinks.forEach(a => {
a.addEventListener('click', e => { domainSelect.addEventListener('change', () => {
e.preventDefault(); currentDomain = domainSelect.value;
currentDomain = a.dataset.domain; updateFrame();
setActive(domainLinks, a);
updateFrame();
});
}); });
setActive(intervalLinks, intervalLinks[0]);
setActive(domainLinks, domainLinks[0]); iframe.addEventListener('load', () => {
try {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
} catch (e) {}
});
updateFrame(); updateFrame();
feather.replace(); feather.replace();
</script> </script>

12
tests/test_reports.py
View file

@ -151,10 +151,10 @@ def test_generate_root_index(tmp_path, sample_reports, monkeypatch):
assert index_file.exists() assert index_file.exists()
content = index_file.read_text() content = index_file.read_text()
# check for interval links # check for interval options
assert 'data-interval="hourly"' in content assert '<option value="hourly">' in content
assert 'data-interval="daily"' in content assert '<option value="daily">' in content
# check for domain links # check for domain options
assert 'data-domain="foo.com"' in content assert '<option value="foo.com">' in content
assert 'data-domain="bar.com"' in content assert '<option value="bar.com">' in content