From 5383c1f509c8a84e429513d4eaabbcd407edd8e5 Mon Sep 17 00:00:00 2001
From: etienned <etienne.dubeau@calculquebec.ca>
Date: Wed, 30 Oct 2024 10:53:47 -0400
Subject: [PATCH 1/2] Add a filter for top compute

---
 top/templates/top/compute.html | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/top/templates/top/compute.html b/top/templates/top/compute.html
index 37da5de..182311d 100644
--- a/top/templates/top/compute.html
+++ b/top/templates/top/compute.html
@@ -2,6 +2,7 @@
 {% load humanize %}
 {% load i18n %}
 
+
 {% block title %}{% translate "Top compute users" %}{% endblock title %}
 
 {% block content %}
@@ -22,6 +23,12 @@ <h1>{% translate "Top compute users" %}</h1>
   <dt>{% translate "Wasting" %}</dt>
   <dd>{% translate "Show the wasted resource. The normal amount of memory per cores is taken into account to remove the memory flag when a user seems to use full nodes" %}</dd>
 </dl>
+
+<select select data-placeholder="Filter by wasting status" multiple class="chosen-select" id="select-status">
+  <option value="OK">OK</option>
+  <option value="Memory">Memory</option>
+  <option value="Cores">Cores</option>
+</select>
 <table class="table table-striped" id="compute">
   <thead class="thead-dark">
     <tr>
@@ -108,6 +115,19 @@ <h1>{% translate "Top compute users" %}</h1>
       ]
     });
   });
+
+  $(".chosen-select").chosen({width:"100%"})
+  $('#select-status').on('change', function() {
+      const selectedStatuses = $(this).val();
+      $('#compute tbody tr').each(function() {
+        const row = $(this);
+        const badgeText = row.find('td:last-child .badge').text().trim();
+
+        const showRow = selectedStatuses.length === 0 || selectedStatuses.some(status => badgeText.includes(status));
+        row.toggle(showRow);
+      });
+  }).trigger('change');
+
 </script>
 
 {% endblock content %}

From d8d6a12aca22423f1b6825cf170ca3b97738df82 Mon Sep 17 00:00:00 2001
From: etienned <etienne.dubeau@calculquebec.ca>
Date: Wed, 30 Oct 2024 11:18:05 -0400
Subject: [PATCH 2/2] Add filter for largemem and gpu

---
 top/templates/top/compute.html    |  6 ++++--
 top/templates/top/gpucompute.html | 19 +++++++++++++++++++
 top/templates/top/largemem.html   | 19 +++++++++++++++++++
 top/views.py                      |  3 +++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/top/templates/top/compute.html b/top/templates/top/compute.html
index 182311d..d792bbc 100644
--- a/top/templates/top/compute.html
+++ b/top/templates/top/compute.html
@@ -26,9 +26,11 @@ <h1>{% translate "Top compute users" %}</h1>
 
 <select select data-placeholder="Filter by wasting status" multiple class="chosen-select" id="select-status">
   <option value="OK">OK</option>
-  <option value="Memory">Memory</option>
-  <option value="Cores">Cores</option>
+  {% for waste_badge in select_waste_badges %}
+    <option value="{{ waste_badge }}">{{ waste_badge }}</option>
+  {% endfor %}
 </select>
+
 <table class="table table-striped" id="compute">
   <thead class="thead-dark">
     <tr>
diff --git a/top/templates/top/gpucompute.html b/top/templates/top/gpucompute.html
index 7e598fe..1080d01 100644
--- a/top/templates/top/gpucompute.html
+++ b/top/templates/top/gpucompute.html
@@ -34,6 +34,13 @@ <h1>{% translate "Top GPU compute users" %}</h1>
   <dd>{% translate "Show the wasted resource" %}</dd>
 </dl>
 
+<select select data-placeholder="Filter by wasting status" multiple class="chosen-select" id="select-status">
+  <option value="OK">OK</option>
+  {% for waste_badge in select_waste_badges %}
+    <option value="{{ waste_badge }}">{{ waste_badge }}</option>
+  {% endfor %}
+</select>
+
 <table class="table table-striped" id="gpucompute">
   <thead class="thead-dark">
     <tr>
@@ -146,6 +153,18 @@ <h1>{% translate "Top GPU compute users" %}</h1>
       ]
     });
   });
+
+  $(".chosen-select").chosen({width:"100%"})
+  $('#select-status').on('change', function() {
+      const selectedStatuses = $(this).val();
+      $('#gpucompute tbody tr').each(function() {
+        const row = $(this);
+        const badgeText = row.find('td:last-child .badge').text().trim();
+
+        const showRow = selectedStatuses.length === 0 || selectedStatuses.some(status => badgeText.includes(status));
+        row.toggle(showRow);
+      });
+  }).trigger('change');
 </script>
 
 {% endblock content %}
diff --git a/top/templates/top/largemem.html b/top/templates/top/largemem.html
index 053e5d6..49e6130 100644
--- a/top/templates/top/largemem.html
+++ b/top/templates/top/largemem.html
@@ -25,6 +25,13 @@ <h1>{% translate "Users on largemem" %}</h1>
   <dd>{% translate "Show the wasted resource" %}</dd>
 </dl>
 
+<select select data-placeholder="Filter by wasting status" multiple class="chosen-select" id="select-status">
+  <option value="OK">OK</option>
+  {% for waste_badge in select_waste_badges %}
+    <option value="{{ waste_badge }}">{{ waste_badge }}</option>
+  {% endfor %}
+</select>
+
 <table class="table table-striped" id="largemem">
   <thead class="thead-dark">
     <tr>
@@ -129,6 +136,18 @@ <h1>{% translate "Users on largemem" %}</h1>
       ]
     });
   });
+
+  $(".chosen-select").chosen({width:"100%"})
+  $('#select-status').on('change', function() {
+      const selectedStatuses = $(this).val();
+      $('#largemem tbody tr').each(function() {
+        const row = $(this);
+        const badgeText = row.find('td:last-child .badge').text().trim();
+
+        const showRow = selectedStatuses.length === 0 || selectedStatuses.some(status => badgeText.includes(status));
+        row.toggle(showRow);
+      });
+  }).trigger('change');
 </script>
 
 {% endblock content %}
diff --git a/top/views.py b/top/views.py
index ee84e65..d95d6ec 100644
--- a/top/views.py
+++ b/top/views.py
@@ -121,6 +121,7 @@ def compute(request):
             context['cpu_users'].append(stats)
         except KeyError:
             pass
+    context['select_waste_badges'] = [_('Memory'), _('Cores')]
 
     return render(request, 'top/compute.html', context)
 
@@ -213,6 +214,7 @@ def gpucompute(request):
             context['gpu_users'].append(stats)
         except KeyError:
             pass
+    context['select_waste_badges'] = [_('Memory'), _('Cores'), _('GPU ares totally unused'), _('GPUs')]
     return render(request, 'top/gpucompute.html', context)
 
 
@@ -286,6 +288,7 @@ def largemem(request):
             context['jobs'].append(stats)
         except KeyError:
             pass
+    context['select_waste_badges'] = [_('Memory'), _('Cores')]
 
     # gather all usernames
     users = set()