add job filter

src/main/html/webapp/components/core/job/list/list.js

@@ -105,13 +105,26 @@ export default Control.extend({
   },
 
   '.job-search keyup': function(el, ev) {
-    const searchText = $(el).val().trim().toLowerCase();
-
+    this.filterJobs();
+  },
+
+  '.job-state-filter change': function(el, ev) {
+    this.filterJobs();
+  },
+
+  filterJobs: function() {
+    const searchText = $('.job-search').val().trim().toLowerCase();
+    const selectedState = $('.job-state-filter').val();
+
     $('.card').each(function() {
       const job = domData.get.call(this, 'job');
       const jobId = job.attr('id').toString().toLowerCase();
+      const jobState = job.attr('state').toString();
+
+      const matchesSearch = searchText === '' || jobId.includes(searchText);
+      const matchesState = selectedState === 'all' || jobState === selectedState;
 
-      if (searchText === '' || jobId.includes(searchText)) {
+      if (matchesSearch && matchesState) {
         $(this).show();
       } else {
         $(this).hide();

src/main/html/webapp/components/core/job/list/list.stache

@@ -2,8 +2,17 @@
   <div class="py-1 container">
     <h2>Jobs</h2>
     <b>{{jobs.count}}</b> jobs submitted.
-    <div class="mt-2">
+    <div class="mt-2 d-flex gap-2 justify-content-between">
       <input type="text" class="form-control job-search" placeholder="Search by Job ID..." style="max-width: 300px;">
+      <select class="form-control job-state-filter" style="max-width: 200px;">
+        <option value="all">All States</option>
+        <option value="1">Running</option>
+        <option value="2">Waiting</option>
+        <option value="7">Retired</option>
+        <option value="4">Success</option>
+        <option value="5">Failed</option>
+        <option value="-1">Pending</option>
+      </select>
     </div>
   </div>
 </div>