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