Filter wasting status

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,14 @@ <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>
+  {% 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>
@@ -108,6 +117,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 %}

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 %}

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 %}

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()