♿ — Fix not-OK domains display if javascript is disabled

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## [Unreleased]
 
+- 💄 — Show only not-OK domains by default in domains list, to reduce the load on browser
+- ♿️ — Fix not-OK domains display if javascript is disabled
+
 ## 0.5.0
 
 Date: 2024-09-26
@@ -68,7 +71,7 @@ Date: 2024-06-24
 
 - 💄📯 — Improve notifications and result(s) pages
 - 🔊 — Add level of log before the log message
-— 🔊 — Add a warning messages in the logs if there is no tasks in database. (fix #41)
+- 🔊 — Add a warning message in the logs if there is no tasks in database. (fix #41)
 - ✨ — Add command to generate example configuration (fix #38)
 - 📝 — Improve documentation
 - ✨ — Add command to warn if it’s been long since last viewing an agent (fix #49)

argos/server/templates/domains.html

@@ -12,15 +12,17 @@
                     </a>
                 </li>
             </ul>
-            <ul>
+            {# djlint:off H021 #}
+            <ul id="status-selector" style="display: none;">{# djlint:on #}
                 <li>
                     <label for="select-status">Show domains with status:</label>
                     <select id="select-status">
-                        <option value="all">All</option>
+                        <option value="not-ok" selected>Not OK</option>
                         <option value="ok">✅ OK</option>
                         <option value="warning">⚠️ Warning</option>
                         <option value="critical">❌ Critical</option>
                         <option value="unknown">❔ Unknown</option>
+                        <option value="all">All</option>
                     </select>
                 </li>
             </ul>
@@ -36,7 +38,7 @@
 
             <tbody id="domains-body">
                 {% for (domain, status) in domains %}
-                <tr data-status={{ status }}>
+                <tr data-status="{{ status }}">
                     <td>
                         <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
                             {{ domain }}
@@ -65,6 +67,14 @@
                 document.querySelectorAll('[data-status]').forEach((item) => {
                     item.style.display = null;
                 })
+            } else if (e.currentTarget.value === 'not-ok') {
+                document.querySelectorAll('[data-status]').forEach((item) => {
+                    if (item.dataset.status !== 'ok') {
+                        item.style.display = null;
+                    } else {
+                        item.style.display = 'none';
+                    }
+                })
             } else {
                 document.querySelectorAll('[data-status]').forEach((item) => {
                     if (item.dataset.status === e.currentTarget.value) {
@@ -75,5 +85,13 @@
                 })
             }
         });
+        document.querySelectorAll('[data-status]').forEach((item) => {
+            if (item.dataset.status !== 'ok') {
+                item.style.display = null;
+            } else {
+                item.style.display = 'none';
+            }
+        })
+        document.getElementById('status-selector').style.display = null;
     </script>
 {% endblock content %}