From 5bc04162c34e0137a4a337073698611d5a86db5f Mon Sep 17 00:00:00 2001
From: Vermaas <vermaas@astron.nl>
Date: Fri, 17 Jan 2025 10:39:39 +0100
Subject: [PATCH] add filter box for services

---
 atdb/atdb/static/taskdatabase/style.css       |  2 +-
 .../static/taskdatabase/style.css             |  2 +-
 .../templates/taskdatabase/base.html          | 31 +++++++++++++------
 .../taskdatabase/filter/search_services.html  |  7 +++++
 .../templates/taskdatabase/index.html         |  2 +-
 .../taskdatabase/monitoring_page.html         |  2 ++
 atdb/taskdatabase/views.py                    |  7 +++++
 7 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 atdb/taskdatabase/templates/taskdatabase/filter/search_services.html

diff --git a/atdb/atdb/static/taskdatabase/style.css b/atdb/atdb/static/taskdatabase/style.css
index 48164be0..258fea6f 100644
--- a/atdb/atdb/static/taskdatabase/style.css
+++ b/atdb/atdb/static/taskdatabase/style.css
@@ -137,7 +137,7 @@ p.title {
  font-weight: bold;
 }
 
-#search_box
+.search_box
 {
     color: darkblue;
   display: inline-block;
diff --git a/atdb/taskdatabase/static/taskdatabase/style.css b/atdb/taskdatabase/static/taskdatabase/style.css
index 48164be0..258fea6f 100644
--- a/atdb/taskdatabase/static/taskdatabase/style.css
+++ b/atdb/taskdatabase/static/taskdatabase/style.css
@@ -137,7 +137,7 @@ p.title {
  font-weight: bold;
 }
 
-#search_box
+.search_box
 {
     color: darkblue;
   display: inline-block;
diff --git a/atdb/taskdatabase/templates/taskdatabase/base.html b/atdb/taskdatabase/templates/taskdatabase/base.html
index 3d995811..5a415cff 100644
--- a/atdb/taskdatabase/templates/taskdatabase/base.html
+++ b/atdb/taskdatabase/templates/taskdatabase/base.html
@@ -33,7 +33,7 @@
     {% block extra_js %}{% endblock %}
 
 </head>
-<body onload="readFromLocalStorage('search_box')">
+<body>
 
  {% include "astronauth/navbar.html" %}
 
@@ -59,17 +59,30 @@
 </html>
 
 <script type="text/javascript">
+
     function readFromLocalStorage(id) {
-      var s = localStorage.getItem(id);
-      if (s !== null) {
-        document.getElementById(id).value = s;
-      }
+      const value = localStorage.getItem(id);
+        if (value !== null) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.value = value; // Set the input value from localStorage
+            }
+        }
     }
+
+    window.addEventListener('load', () => {
+        readFromLocalStorage('search_services');
+        readFromLocalStorage('search_box');
+    });
+
 </script>
 
 <script type="text/javascript">
-function writeToLocalStorage(id) {
-    var s = document.getElementById(id).value
-    localStorage.setItem(id, s);
-}
+    function writeToLocalStorage(id, event) {
+        //event.preventDefault(); // Prevent the form from submitting
+        const element = document.getElementById(id);
+        if (element) {
+            localStorage.setItem(id, element.value); // Store the input value in localStorage
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/atdb/taskdatabase/templates/taskdatabase/filter/search_services.html b/atdb/taskdatabase/templates/taskdatabase/filter/search_services.html
new file mode 100644
index 00000000..dc4f689e
--- /dev/null
+++ b/atdb/taskdatabase/templates/taskdatabase/filter/search_services.html
@@ -0,0 +1,7 @@
+
+<form class="navbar-form navbar-left" role="Search" onsubmit="writeToLocalStorage('search_services')" method="get" action="">
+    <div class="form-group">
+        <input type="text" class="search_box" id="search_services" name="search_services" placeholder="Search for..." value="">
+    </div>
+</form>
+
diff --git a/atdb/taskdatabase/templates/taskdatabase/index.html b/atdb/taskdatabase/templates/taskdatabase/index.html
index 74937521..32321d80 100644
--- a/atdb/taskdatabase/templates/taskdatabase/index.html
+++ b/atdb/taskdatabase/templates/taskdatabase/index.html
@@ -31,7 +31,7 @@
             {% include 'taskdatabase/pagination.html' %}
         </div>
     </div>
-    <p class="footer"> Version 2 Jan 2025</p>
+    <p class="footer"> Version 17 Jan 2025</p>
 </div>
 
 {% include 'taskdatabase/refresh.html' %}
diff --git a/atdb/taskdatabase/templates/taskdatabase/monitoring_page.html b/atdb/taskdatabase/templates/taskdatabase/monitoring_page.html
index bcc6d810..fefb6f1c 100644
--- a/atdb/taskdatabase/templates/taskdatabase/monitoring_page.html
+++ b/atdb/taskdatabase/templates/taskdatabase/monitoring_page.html
@@ -24,6 +24,8 @@
                  <a href="{% url 'create_status_graph' %}" class="btn btn-primary btn-sm" role="button"><i class="fas fa-chart-line"></i> Status Graph</a>
                  <a href="{% url 'create_logentry_graph' %}" class="btn btn-primary btn-sm" role="button"><i class="fas fa-chart-line"></i> LogEntry Graph</a>
 
+                  {% include 'taskdatabase/filter/search_services.html' %}
+
               </p>
 
                <table class="table table-striped">
diff --git a/atdb/taskdatabase/views.py b/atdb/taskdatabase/views.py
index 6fdac517..b5c7a93d 100644
--- a/atdb/taskdatabase/views.py
+++ b/atdb/taskdatabase/views.py
@@ -910,6 +910,13 @@ def ShowMonitoring(request):
     distinct_services_per_host = LatestMonitor.objects.order_by('name', 'hostname', '-timestamp').distinct('name',
                                                                                                                  'hostname')
 
+    # filter on the value that is set into the localstorage 'search_services' with the filter_services.html component.
+    search = request.GET.get('search_services', None)
+    if (search is not None):
+        distinct_services_per_host = distinct_services_per_host.filter(
+            Q(name__icontains=search) |
+            Q(hostname__icontains=search))
+
     monitor_results = algorithms.convert_monitor_to_html(request, distinct_services_per_host)
     return render(request, "taskdatabase/monitoring_page.html", {'monitor_results': monitor_results})
 
-- 
GitLab