From 8abd5dedacde708b60354638919d6f1c130df002 Mon Sep 17 00:00:00 2001
From: Jordan Wages <jordan@jordanwages.com>
Date: Fri, 18 Jul 2025 22:25:25 -0500
Subject: [PATCH] Refactor UI with dropdown selectors

---
 templates/index.html  | 97 ++++++++++++++++++-------------------------
 tests/test_reports.py | 12 +++---
 2 files changed, 46 insertions(+), 63 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index c4f63d1..222e347 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,81 +8,64 @@
 <body class="section">
   <div class="container">
     <h1 class="title">ngxstat Reports</h1>
-    <div class="columns">
-      <div class="column is-one-quarter">
-        <aside class="menu">
-          <p class="menu-label">Intervals</p>
-          <ul class="menu-list" id="interval-list">
+    <div class="field is-grouped">
+      <div class="control has-icons-left">
+        <div class="select is-small">
+          <select id="interval-select">
             {% for interval in intervals %}
-            <li>
-              <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>
+            <option value="{{ interval }}">{{ interval.title() }}</option>
             {% endfor %}
-          </ul>
-          <p class="menu-label">Domains</p>
-          <ul class="menu-list" id="domain-list">
-            <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>
+          </select>
+        </div>
+        <span class="icon is-small is-left"><i data-feather="clock"></i></span>
       </div>
-      <div class="column">
-        <iframe id="report-frame" src="" style="width:100%;height:80vh;border:none;"></iframe>
+      <div class="control has-icons-left">
+        <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>
+    <iframe id="report-frame" src="" style="width:100%;border:none;"></iframe>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
   <script>
-    const intervalLinks = document.querySelectorAll('#interval-list a');
-    const domainLinks = document.querySelectorAll('#domain-list a');
-    let currentInterval = intervalLinks.length ? intervalLinks[0].dataset.interval : '';
-    let currentDomain = '';
+    const intervalSelect = document.getElementById('interval-select');
+    const domainSelect = document.getElementById('domain-select');
+    const iframe = document.getElementById('report-frame');
 
-    function setActive(list, el) {
-      list.forEach(a => a.classList.remove('is-primary'));
-      if (el) el.classList.add('is-primary');
-    }
+    let currentInterval = intervalSelect.value;
+    let currentDomain = domainSelect.value;
 
     function updateFrame() {
       let path = currentInterval;
       if (currentDomain) {
         path = 'domains/' + currentDomain + '/' + currentInterval;
       }
-      document.getElementById('report-frame').src = path + '/index.html';
+      iframe.src = path + '/index.html';
     }
-    intervalLinks.forEach(a => {
-      a.addEventListener('click', e => {
-        e.preventDefault();
-        currentInterval = a.dataset.interval;
-        setActive(intervalLinks, a);
-        updateFrame();
-      });
+
+    intervalSelect.addEventListener('change', () => {
+      currentInterval = intervalSelect.value;
+      updateFrame();
     });
-    domainLinks.forEach(a => {
-      a.addEventListener('click', e => {
-        e.preventDefault();
-        currentDomain = a.dataset.domain;
-        setActive(domainLinks, a);
-        updateFrame();
-      });
+
+    domainSelect.addEventListener('change', () => {
+      currentDomain = domainSelect.value;
+      updateFrame();
     });
-    setActive(intervalLinks, intervalLinks[0]);
-    setActive(domainLinks, domainLinks[0]);
+
+    iframe.addEventListener('load', () => {
+      try {
+        iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
+      } catch (e) {}
+    });
+
     updateFrame();
     feather.replace();
   </script>
diff --git a/tests/test_reports.py b/tests/test_reports.py
index 5a1deef..dfd2c6d 100644
--- a/tests/test_reports.py
+++ b/tests/test_reports.py
@@ -151,10 +151,10 @@ def test_generate_root_index(tmp_path, sample_reports, monkeypatch):
     assert index_file.exists()
     content = index_file.read_text()
 
-    # check for interval links
-    assert 'data-interval="hourly"' in content
-    assert 'data-interval="daily"' in content
+    # check for interval options
+    assert '<option value="hourly">' in content
+    assert '<option value="daily">' in content
 
-    # check for domain links
-    assert 'data-domain="foo.com"' in content
-    assert 'data-domain="bar.com"' in content
+    # check for domain options
+    assert '<option value="foo.com">' in content
+    assert '<option value="bar.com">' in content
