feat(admin-ui): Implement job queue filtering by status

packages/admin-ui/i18n-coverage.json

@@ -1,81 +1,81 @@
 {
-  "generatedOn": "2023-08-28T09:13:19.132Z",
-  "lastCommit": "8b52e6fc44c9ebe04d9f012c39b0d9ea4961c215",
+  "generatedOn": "2023-09-26T07:24:07.342Z",
+  "lastCommit": "f0e50f55799dd812700da1876479466694ae648b",
   "translationStatus": {
     "ar": {
-      "tokenCount": 755,
-      "translatedCount": 746,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 758,
+      "percentage": 100
     },
     "cs": {
-      "tokenCount": 755,
-      "translatedCount": 551,
-      "percentage": 73
+      "tokenCount": 759,
+      "translatedCount": 563,
+      "percentage": 74
     },
     "de": {
-      "tokenCount": 755,
-      "translatedCount": 746,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 758,
+      "percentage": 100
     },
     "en": {
-      "tokenCount": 755,
-      "translatedCount": 754,
+      "tokenCount": 759,
+      "translatedCount": 758,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 755,
-      "translatedCount": 746,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 758,
+      "percentage": 100
     },
     "fr": {
-      "tokenCount": 755,
-      "translatedCount": 742,
-      "percentage": 98
+      "tokenCount": 759,
+      "translatedCount": 754,
+      "percentage": 99
     },
     "he": {
-      "tokenCount": 755,
-      "translatedCount": 746,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 758,
+      "percentage": 100
     },
     "it": {
-      "tokenCount": 755,
-      "translatedCount": 576,
-      "percentage": 76
+      "tokenCount": 759,
+      "translatedCount": 757,
+      "percentage": 100
     },
     "pl": {
-      "tokenCount": 755,
-      "translatedCount": 386,
-      "percentage": 51
+      "tokenCount": 759,
+      "translatedCount": 398,
+      "percentage": 52
     },
     "pt_BR": {
-      "tokenCount": 755,
-      "translatedCount": 745,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 757,
+      "percentage": 100
     },
     "pt_PT": {
-      "tokenCount": 755,
-      "translatedCount": 585,
-      "percentage": 77
+      "tokenCount": 759,
+      "translatedCount": 597,
+      "percentage": 79
     },
     "ru": {
-      "tokenCount": 755,
-      "translatedCount": 746,
-      "percentage": 99
+      "tokenCount": 759,
+      "translatedCount": 758,
+      "percentage": 100
     },
     "uk": {
-      "tokenCount": 755,
-      "translatedCount": 575,
-      "percentage": 76
+      "tokenCount": 759,
+      "translatedCount": 587,
+      "percentage": 77
     },
     "zh_Hans": {
-      "tokenCount": 755,
-      "translatedCount": 521,
-      "percentage": 69
+      "tokenCount": 759,
+      "translatedCount": 533,
+      "percentage": 70
     },
     "zh_Hant": {
-      "tokenCount": 755,
-      "translatedCount": 366,
-      "percentage": 48
+      "tokenCount": 759,
+      "translatedCount": 379,
+      "percentage": 50
     }
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/ar.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "بطاقة تعريف",
-    "actions": "أجراءات",
     "add-filter": "إضافة مرشح",
     "add-item-to-list": "إضافة عنصر إلى قائمة",
     "add-note": "اضف ملاحظة",
@@ -778,12 +777,17 @@
     "health-status": "حالة",
     "health-status-down": "تحت",
     "health-status-up": "أعلى",
-    "hide-settled-jobs": "إخفاء الوظائف المستقرة",
     "job-data": "بيانات الوظيفة",
     "job-duration": "مدة",
     "job-error": "خطأ في الوظيفة",
     "job-queue-name": "اسم قائمة الانتظار",
     "job-result": "نتيجة الوظيفة",
-    "job-state": "دولة الوظيفة"
+    "job-state": "دولة الوظيفة",
+    "job-state-all": "جميع الحالات",
+    "job-state-cancelled": "تم الإلغاء",
+    "job-state-completed": "تمت",
+    "job-state-failed": "فشل",
+    "job-state-pending": "قيد الانتظار",
+    "job-state-running": "قيد التشغيل"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Akce",
     "add-filter": "",
     "add-item-to-list": "Přidat položku do seznamu",
     "add-note": "Přidat poznámku",
@@ -778,12 +777,17 @@
     "health-status": "Stav",
     "health-status-down": "Neběží",
     "health-status-up": "Běží",
-    "hide-settled-jobs": "Skrýt vyřízené úlohy",
     "job-data": "Data úlohy",
     "job-duration": "Doba",
     "job-error": "Chyba úlohy",
     "job-queue-name": "Jméno fronty",
     "job-result": "Výsledek úlohy",
-    "job-state": "Stav úlohy"
+    "job-state": "Stav úlohy",
+    "job-state-all": "Všechny stavy",
+    "job-state-cancelled": "Zrušeno",
+    "job-state-completed": "Dokončeno",
+    "job-state-failed": "Selhalo",
+    "job-state-pending": "Čeká",
+    "job-state-running": "Běží"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Aktionen",
     "add-filter": "Filter hinzufügen",
     "add-item-to-list": "Artikel zur Wunschliste hinzufügen",
     "add-note": "Notiz hinzufügen",
@@ -778,12 +777,17 @@
     "health-status": "Status",
     "health-status-down": "Ausgefallen",
     "health-status-up": "Betriesbereit",
-    "hide-settled-jobs": "Abgeschlossene Jobs ausblenden",
     "job-data": "Job-Daten",
     "job-duration": "Job-Dauer",
     "job-error": "Job-Fehler",
     "job-queue-name": "Name der Warteschlange",
     "job-result": "Job-Ergebnis",
-    "job-state": "Job-Status"
+    "job-state": "Job-Status",
+    "job-state-all": "Alle Zustände",
+    "job-state-cancelled": "Abgebrochen",
+    "job-state-completed": "Abgeschlossen",
+    "job-state-failed": "Fehlgeschlagen",
+    "job-state-pending": "Ausstehend",
+    "job-state-running": "Wird ausgeführt"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Actions",
     "add-filter": "Add filter",
     "add-item-to-list": "Add item to list",
     "add-note": "Add note",
@@ -778,12 +777,17 @@
     "health-status": "Status",
     "health-status-down": "Down",
     "health-status-up": "Up",
-    "hide-settled-jobs": "Hide settled jobs",
     "job-data": "Job data",
     "job-duration": "Duration",
     "job-error": "Job error",
     "job-queue-name": "Queue name",
     "job-result": "Job result",
-    "job-state": "Job state"
+    "job-state": "Job state",
+    "job-state-all": "All states",
+    "job-state-cancelled": "Cancelled",
+    "job-state-completed": "Completed",
+    "job-state-failed": "Failed",
+    "job-state-pending": "Pending",
+    "job-state-running": "Running"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Acciones",
     "add-filter": "Añadir filtro",
     "add-item-to-list": "Añadir artículo a la lista",
     "add-note": "Añadir nota",
@@ -778,12 +777,17 @@
     "health-status": "Estado",
     "health-status-down": "Inactivo",
     "health-status-up": "Activo",
-    "hide-settled-jobs": "Ocultar trabajos completados",
     "job-data": "Detalles",
     "job-duration": "Duración",
     "job-error": "Error",
     "job-queue-name": "Nombre",
     "job-result": "Resultado",
-    "job-state": "Estado"
+    "job-state": "Estado",
+    "job-state-all": "Todos los estados",
+    "job-state-cancelled": "Cancelado",
+    "job-state-completed": "Completado",
+    "job-state-failed": "Fallido",
+    "job-state-pending": "Pendiente",
+    "job-state-running": "En ejecución"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Actions",
     "add-filter": "",
     "add-item-to-list": "Ajouter un article à la liste",
     "add-note": "Ajouter une note",
@@ -778,12 +777,17 @@
     "health-status": "Statut",
     "health-status-down": "En panne",
     "health-status-up": "En route",
-    "hide-settled-jobs": "Cacher tâches réglées",
     "job-data": "Donnée de la tâche",
     "job-duration": "Durée",
     "job-error": "Erreur de la tâche",
     "job-queue-name": "Nom de la file d'attente",
     "job-result": "Résultat de la tâche",
-    "job-state": "Etat de la tâche"
+    "job-state": "Etat de la tâche",
+    "job-state-all": "Tous les états",
+    "job-state-cancelled": "Annulé",
+    "job-state-completed": "Terminé",
+    "job-state-failed": "Échoué",
+    "job-state-pending": "En attente",
+    "job-state-running": "En cours"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/he.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "מזהה",
-    "actions": "פעולות",
     "add-filter": "הוסף מסננת",
     "add-item-to-list": "הוסף פריט לרשימה",
     "add-note": "הוסף הערה",
@@ -778,12 +777,17 @@
     "health-status": "סטטוס",
     "health-status-down": "מנוטרל",
     "health-status-up": "פועל",
-    "hide-settled-jobs": "הסתר משימות שהושלמו",
     "job-data": "מידע משימה",
     "job-duration": "משך המשימה",
     "job-error": "שגיאת משימה",
     "job-queue-name": "שם תור משימות",
     "job-result": "תוצאת משימה",
-    "job-state": "מצב משימה"
+    "job-state": "מצב משימה",
+    "job-state-all": "כל המצבים",
+    "job-state-cancelled": "בוטל",
+    "job-state-completed": "הושלם",
+    "job-state-failed": "נכשל",
+    "job-state-pending": "ממתין",
+    "job-state-running": "רץ"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Azioni",
     "add-filter": "Aggiungi filtro",
     "add-item-to-list": "Aggiungi elemento alla lista",
     "add-note": "Aggiungi nota",
@@ -778,12 +777,17 @@
     "health-status": "Stato",
     "health-status-down": "Inattivo",
     "health-status-up": "Attivo",
-    "hide-settled-jobs": "Nascondi operazioni completate",
     "job-data": "Dati operazioni",
     "job-duration": "Durata",
     "job-error": "Errore operazione",
     "job-queue-name": "Nome coda operazioni",
     "job-result": "Risultato operazione",
-    "job-state": "Stato operazione"
+    "job-state": "Stato operazione",
+    "job-state-all": "Tutti gli stati",
+    "job-state-cancelled": "Annullato",
+    "job-state-completed": "Completato",
+    "job-state-failed": "Fallito",
+    "job-state-pending": "In attesa",
+    "job-state-running": "In esecuzione"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Akcje",
     "add-filter": "",
     "add-item-to-list": "",
     "add-note": "",
@@ -778,12 +777,17 @@
     "health-status": "",
     "health-status-down": "",
     "health-status-up": "",
-    "hide-settled-jobs": "Ukryj rozliczone zlecenia",
     "job-data": "Dane zlecenia",
     "job-duration": "Czas trwania",
     "job-error": "Błąd zlecenia",
     "job-queue-name": "Nazwa kolejki",
     "job-result": "Rezultat zlecenia",
-    "job-state": "Status zlecenia"
+    "job-state": "Status zlecenia",
+    "job-state-all": "Wszystkie stany",
+    "job-state-cancelled": "Anulowane",
+    "job-state-completed": "Ukończono",
+    "job-state-failed": "Nie powiodło się",
+    "job-state-pending": "Oczekujące",
+    "job-state-running": "Uruchomione"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Ações",
     "add-filter": "Adicionar filtro",
     "add-item-to-list": "Adicionar item à lista",
     "add-note": "Adicionar nota",
@@ -778,12 +777,17 @@
     "health-status": "Status",
     "health-status-down": "Para baixo",
     "health-status-up": "Para cima",
-    "hide-settled-jobs": "Ocultar trabalhos resolvidos",
     "job-data": "Dados do trabalho",
     "job-duration": "Duração",
     "job-error": "Erro do trabalho",
     "job-queue-name": "Nome da fila",
     "job-result": "Resultado do trabalho",
-    "job-state": "Estado do trabalho"
+    "job-state": "Estado do trabalho",
+    "job-state-all": "Todos os estados",
+    "job-state-cancelled": "Cancelado",
+    "job-state-completed": "Concluído",
+    "job-state-failed": "Falhou",
+    "job-state-pending": "Pendente",
+    "job-state-running": "Em execução"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Acções",
     "add-filter": "",
     "add-item-to-list": "Adicionar item à lista",
     "add-note": "Adicionar nota",
@@ -778,12 +777,17 @@
     "health-status": "Estado",
     "health-status-down": "Offline",
     "health-status-up": "Online",
-    "hide-settled-jobs": "Ocultar trabalhos concluídos",
     "job-data": "Dados do trabalho",
     "job-duration": "Duração",
     "job-error": "Erro do trabalho",
     "job-queue-name": "Nome da fila",
     "job-result": "Resultado do trabalho",
-    "job-state": "Estado do trabalho"
+    "job-state": "Estado do trabalho",
+    "job-state-all": "Todos os estados",
+    "job-state-cancelled": "Cancelado",
+    "job-state-completed": "Concluído",
+    "job-state-failed": "Falhou",
+    "job-state-pending": "Pendente",
+    "job-state-running": "Em execução"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Действия",
     "add-filter": "Добавить фильтр",
     "add-item-to-list": "Добавить позицию в список",
     "add-note": "Добавить заметку",
@@ -778,12 +777,17 @@
     "health-status": "Статус",
     "health-status-down": "Отключено",
     "health-status-up": "Подключено",
-    "hide-settled-jobs": "Скрыть выбранное задание",
     "job-data": "Данные задания",
     "job-duration": "Продолжительность",
     "job-error": "Ошибка задания",
     "job-queue-name": "Имя очереди",
     "job-result": "Результат задания",
-    "job-state": "Состояние задания"
+    "job-state": "Состояние задания",
+    "job-state-all": "Все состояния",
+    "job-state-cancelled": "Отменено",
+    "job-state-completed": "Завершено",
+    "job-state-failed": "Не удалось",
+    "job-state-pending": "В ожидании",
+    "job-state-running": "Выполняется"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "Дії",
     "add-filter": "",
     "add-item-to-list": "Додати позицію в список",
     "add-note": "Додати замітку",
@@ -778,12 +777,17 @@
     "health-status": "Статус",
     "health-status-down": "Відключено",
     "health-status-up": "Підключено",
-    "hide-settled-jobs": "Сховати вибране завдання",
     "job-data": "Дані завдання",
     "job-duration": "Тривалість",
     "job-error": "Помилка завдання",
     "job-queue-name": "Ім'я черги",
     "job-result": "Результат завдання",
-    "job-state": "Стан завдання"
+    "job-state": "Стан завдання",
+    "job-state-all": "Усі стани",
+    "job-state-cancelled": "Скасовано",
+    "job-state-completed": "Завершено",
+    "job-state-failed": "Не вдалося",
+    "job-state-pending": "В очікуванні",
+    "job-state-running": "Виконується"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "操作",
     "add-filter": "",
     "add-item-to-list": "添加到列表",
     "add-note": "添加注释",
@@ -778,12 +777,17 @@
     "health-status": "状态",
     "health-status-down": "失败",
     "health-status-up": "正常",
-    "hide-settled-jobs": "隐藏已完成任务",
     "job-data": "任务数据",
     "job-duration": "任务耗时",
     "job-error": "任务错误",
     "job-queue-name": "队列名称",
     "job-result": "任务结果",
-    "job-state": "任务状态"
+    "job-state": "任务状态",
+    "job-state-all": "所有状态",
+    "job-state-cancelled": "已取消",
+    "job-state-completed": "已完成",
+    "job-state-failed": "失败",
+    "job-state-pending": "等待中",
+    "job-state-running": "运行中"
   }
 }

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -192,7 +192,6 @@
   },
   "common": {
     "ID": "ID",
-    "actions": "操作",
     "add-filter": "",
     "add-item-to-list": "",
     "add-note": "",
@@ -778,12 +777,17 @@
     "health-status": "",
     "health-status-down": "",
     "health-status-up": "",
-    "hide-settled-jobs": "",
     "job-data": "",
     "job-duration": "",
     "job-error": "",
     "job-queue-name": "",
     "job-result": "",
-    "job-state": ""
+    "job-state": "",
+    "job-state-all": "所有狀態",
+    "job-state-cancelled": "已取消",
+    "job-state-completed": "已完成",
+    "job-state-failed": "失敗",
+    "job-state-pending": "等待中",
+    "job-state-running": "運行中"
   }
 }

packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.html

@@ -9,19 +9,39 @@
                     <input type="checkbox" clrCheckbox [formControl]="liveUpdate" name="live-update" />
                     <label>{{ 'common.live-update' | translate }}</label>
                 </clr-checkbox-wrapper>
-                <clr-checkbox-wrapper>
-                    <input
-                        type="checkbox"
-                        clrCheckbox
-                        [formControl]="hideSettled"
-                        name="hide-settled"
-                        (change)="refresh()"
-                    />
-                    <label>{{ 'system.hide-settled-jobs' | translate }}</label>
-                </clr-checkbox-wrapper></vdr-ab-left
-            >
+            </vdr-ab-left>
             <vdr-ab-right>
                 <vdr-action-bar-items locationId="job-list"></vdr-action-bar-items>
+                <ng-select
+                    class="mr-2"
+                    [addTag]="false"
+                    [hideSelected]="true"
+                    [multiple]="false"
+                    [markFirst]="false"
+                    [clearable]="false"
+                    [searchable]="false"
+                    [formControl]="stateFilter"
+                    (change)="refresh()"
+                >
+                    <ng-option [value]="''">
+                        <vdr-chip>{{ 'system.job-state-all' | translate }}</vdr-chip>
+                    </ng-option>
+                    <ng-option [value]="'PENDING'">
+                        <vdr-chip>{{ 'system.job-state-pending' | translate }}</vdr-chip>
+                    </ng-option>
+                    <ng-option [value]="'RUNNING'">
+                        <vdr-chip colorType="warning">{{ 'system.job-state-running' | translate }}</vdr-chip>
+                    </ng-option>
+                    <ng-option [value]="'COMPLETED'">
+                        <vdr-chip colorType="success">{{ 'system.job-state-completed' | translate }}</vdr-chip>
+                    </ng-option>
+                    <ng-option [value]="'FAILED'">
+                        <vdr-chip colorType="error">{{ 'system.job-state-failed' | translate }}</vdr-chip>
+                    </ng-option>
+                    <ng-option [value]="'CANCELLED'">
+                        <vdr-chip colorType="error">{{ 'system.job-state-cancelled' | translate }}</vdr-chip>
+                    </ng-option>
+                </ng-select>
                 <ng-select
                     [addTag]="false"
                     [items]="queues$ | async"
@@ -36,7 +56,7 @@
                 >
                     <ng-template ng-label-tmp ng-option-tmp let-item="item">
                         <ng-container *ngIf="item.name === 'all'; else others">
-                            {{ 'system.all-job-queues' | translate }}
+                            <vdr-chip>{{ 'system.all-job-queues' | translate }}</vdr-chip>
                         </ng-container>
                         <ng-template #others>
                             <vdr-chip [colorFrom]="item.name">{{ item.name }}</vdr-chip>
@@ -75,7 +95,7 @@
             <ng-template let-job="item">
                 <vdr-dropdown *ngIf="job.data">
                     <button
-                        class="btn btn-link btn-icon"
+                        class="button-small"
                         vdrDropdownTrigger
                         [title]="'system.job-data' | translate"
                     >
@@ -94,7 +114,7 @@
                 <vdr-job-state-label [job]="job"></vdr-job-state-label>
                 <div *ngIf="job.state === 'FAILED'" class="retry-info">after {{ job.attempts }} attempts</div>
                 <div *ngIf="job.state === 'RUNNING' || job.state === 'RETRYING'" class="retry-info">
-                    attempting {{ job.attempts + 1 }} of {{ job.retries }}
+                    attempting {{ job.attempts }} of {{ job.retries }}
                 </div>
             </ng-template>
         </vdr-dt2-column>
@@ -106,7 +126,7 @@
         <vdr-dt2-column [heading]="'system.job-result' | translate" id="job-result">
             <ng-template let-job="item">
                 <vdr-dropdown *ngIf="hasResult(job)">
-                    <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>
+                    <button class="button-small mr-1" vdrDropdownTrigger>
                         <clr-icon shape="details"></clr-icon>
                         {{ 'system.job-result' | translate }}
                     </button>
@@ -117,7 +137,7 @@
                     </vdr-dropdown-menu>
                 </vdr-dropdown>
                 <vdr-dropdown *ngIf="job.error">
-                    <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>
+                    <button class="button-small" vdrDropdownTrigger>
                         <clr-icon shape="exclamation-circle"></clr-icon>
                         {{ 'system.job-error' | translate }}
                     </button>
@@ -129,7 +149,7 @@
                 </vdr-dropdown>
                 <vdr-dropdown *ngIf="!job.isSettled && job.state !== 'FAILED'">
                     <button class="icon-button" vdrDropdownTrigger>
-                        <clr-icon shape="ellipsis-vertical"></clr-icon>
+                        <clr-icon shape="ellipsis-vertical" size="12"></clr-icon>
                     </button>
                     <vdr-dropdown-menu vdrPosition="bottom-right">
                         <button

packages/admin-ui/src/lib/system/src/components/job-list/job-list.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import {
     BaseListComponent,
@@ -7,8 +7,7 @@ import {
     GetAllJobsQuery,
     GetJobQueueListQuery,
     ItemOf,
-    ModalService,
-    NotificationService,
+    JobState,
     SortOrder,
 } from '@vendure/admin-ui/core';
 import { Observable, timer } from 'rxjs';
@@ -25,17 +24,11 @@ export class JobListComponent
     implements OnInit
 {
     queues$: Observable<GetJobQueueListQuery['jobQueues']>;
-    liveUpdate = new UntypedFormControl(true);
-    hideSettled = new UntypedFormControl(true);
-    queueFilter = new UntypedFormControl('all');
+    liveUpdate = new FormControl(true);
+    queueFilter = new FormControl('all');
+    stateFilter = new FormControl<JobState | string>('');
 
-    constructor(
-        private dataService: DataService,
-        private modalService: ModalService,
-        private notificationService: NotificationService,
-        router: Router,
-        route: ActivatedRoute,
-    ) {
+    constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.settings.getAllJobs(...args),
@@ -43,14 +36,14 @@ export class JobListComponent
             (skip, take) => {
                 const queueFilter =
                     this.queueFilter.value === 'all' ? null : { queueName: { eq: this.queueFilter.value } };
-                const hideSettled = this.hideSettled.value;
+                const stateFilter = this.stateFilter.value;
                 return {
                     options: {
                         skip,
                         take,
                         filter: {
                             ...queueFilter,
-                            ...(hideSettled ? { isSettled: { eq: false } } : {}),
+                            ...(stateFilter ? { state: { eq: stateFilter } } : {}),
                         },
                         sort: {
                             createdAt: SortOrder.DESC,
@@ -66,7 +59,7 @@ export class JobListComponent
         timer(5000, 2000)
             .pipe(
                 takeUntil(this.destroy$),
-                filter(() => this.liveUpdate.value),
+                filter(() => !!this.liveUpdate.value),
             )
             .subscribe(() => {
                 this.refresh();