Add filter for largemem and gpu

calculquebec · Oct 30, 2024 · 6af1013 · 6af1013
1 parent 1085cb1
commit 6af1013
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()