Simplify clean all functionality

felixmosh · Jan 1, 2023 · 2ac5963 · 2ac5963
1 parent fec2d72
commit 2ac5963
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 76 deletions.
diff --git a/packages/ui/src/components/QueueActions/QueueActions.tsx b/packages/ui/src/components/QueueActions/QueueActions.tsx
@@ -1,11 +1,11 @@
+import { STATUSES } from '@bull-board/api/src/constants/statuses';
+import { AppQueue, JobCleanStatus, JobRetryStatus, Status } from '@bull-board/api/typings/app';
 import React from 'react';
 import { Store } from '../../hooks/useStore';
 import { RetryIcon } from '../Icons/Retry';
 import { TrashIcon } from '../Icons/Trash';
 import { Button } from '../JobCard/Button/Button';
 import s from './QueueActions.module.css';
-import { AppQueue, Status } from '@bull-board/api/typings/app';
-import { STATUSES } from '@bull-board/api/src/constants/statuses';
 
 interface QueueActionProps {
   queue: AppQueue;
@@ -16,21 +16,15 @@ interface QueueActionProps {
 
 const ACTIONABLE_STATUSES = [STATUSES.failed, STATUSES.delayed, STATUSES.completed] as const;
 
-const isStatusActionable = (status: Status): boolean => ACTIONABLE_STATUSES.includes(status as any);
+const isStatusActionable = (status: any): boolean => ACTIONABLE_STATUSES.includes(status);
 
-const CleanAllButton = ({ onClick }: any) => (
-  <Button onClick={onClick} className={s.button}>
-    <TrashIcon />
-    Clean all
-  </Button>
-);
+function isCleanAllStatus(status: any): status is JobCleanStatus {
+  return [STATUSES.failed, STATUSES.delayed, STATUSES.completed].includes(status);
+}
 
-const RetryAllButton = ({ onClick }: any) => (
-  <Button onClick={onClick} className={s.button}>
-    <RetryIcon />
-    Retry all
-  </Button>
-);
+function isRetryAllStatus(status: any): status is JobRetryStatus {
+  return [STATUSES.failed, STATUSES.completed].includes(status);
+}
 
 export const QueueActions = ({ status, actions, queue, allowRetries }: QueueActionProps) => {
   if (!isStatusActionable(status)) {
@@ -39,34 +33,21 @@ export const QueueActions = ({ status, actions, queue, allowRetries }: QueueActi
 
   return (
     <ul className={s.queueActions}>
-      {status === STATUSES.failed && (
-        <>
-          {allowRetries && (
-            <li>
-              <RetryAllButton onClick={actions.retryAll(queue.name, status)} />
-            </li>
-          )}
-          <li>
-            <CleanAllButton onClick={actions.cleanAllFailed(queue.name)} />
-          </li>
-        </>
-      )}
-      {status === STATUSES.delayed && (
+      {isRetryAllStatus(status) && allowRetries && (
         <li>
-          <CleanAllButton onClick={actions.cleanAllDelayed(queue.name)} />
+          <Button onClick={actions.retryAll(queue.name, status)} className={s.button}>
+            <RetryIcon />
+            Retry all
+          </Button>
         </li>
       )}
-      {status === STATUSES.completed && (
-        <>
-          {allowRetries && (
-            <li>
-              <RetryAllButton onClick={actions.retryAll(queue.name, status)} />
-            </li>
-          )}
-          <li>
-            <CleanAllButton onClick={actions.cleanAllCompleted(queue.name)} />
-          </li>
-        </>
+      {isCleanAllStatus(status) && (
+        <li>
+          <Button onClick={actions.cleanAll(queue.name, status)} className={s.button}>
+            <TrashIcon />
+            Clean all
+          </Button>
+        </li>
       )}
     </ul>
   );

diff --git a/packages/ui/src/hooks/useStore.ts b/packages/ui/src/hooks/useStore.ts
@@ -1,4 +1,4 @@
-import { AppJob, JobRetryStatus } from '@bull-board/api/typings/app';
+import { AppJob, JobCleanStatus, JobRetryStatus } from '@bull-board/api/typings/app';
 import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import { useState } from 'react';
 import { QueueActions, SelectedStatuses } from '../../typings/app';
@@ -109,24 +109,10 @@ export const useStore = (): Store => {
       confirmQueueActions
     );
 
-  const cleanAllDelayed = (queueName: string) =>
+  const cleanAll = (queueName: string, status: JobCleanStatus) =>
     withConfirmAndUpdate(
-      () => api.cleanAllDelayed(queueName),
-      'Are you sure that you want to clean all delayed jobs?',
-      confirmQueueActions
-    );
-
-  const cleanAllFailed = (queueName: string) =>
-    withConfirmAndUpdate(
-      () => api.cleanAllFailed(queueName),
-      'Are you sure that you want to clean all failed jobs?',
-      confirmQueueActions
-    );
-
-  const cleanAllCompleted = (queueName: string) =>
-    withConfirmAndUpdate(
-      () => api.cleanAllCompleted(queueName),
-      'Are you sure that you want to clean all completed jobs?',
+      () => api.cleanAll(queueName, status),
+      `Are you sure that you want to clean all ${status} jobs?`,
       confirmQueueActions
     );
 
@@ -161,9 +147,7 @@ export const useStore = (): Store => {
       retryJob,
       retryAll,
       cleanJob,
-      cleanAllDelayed,
-      cleanAllFailed,
-      cleanAllCompleted,
+      cleanAll,
       getJobLogs,
       pauseQueue,
       resumeQueue,

diff --git a/packages/ui/src/services/Api.ts b/packages/ui/src/services/Api.ts
@@ -1,4 +1,10 @@
-import { AppJob, JobRetryStatus, RedisStats, Status } from '@bull-board/api/typings/app';
+import {
+  AppJob,
+  JobCleanStatus,
+  JobRetryStatus,
+  RedisStats,
+  Status,
+} from '@bull-board/api/typings/app';
 import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import Axios, { AxiosInstance, AxiosResponse } from 'axios';
 import { toast } from 'react-toastify';
@@ -31,16 +37,10 @@ export class Api {
     );
   }
 
-  public cleanAllDelayed(queueName: string): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/delayed`);
-  }
-
-  public cleanAllFailed(queueName: string): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/failed`);
-  }
-
-  public cleanAllCompleted(queueName: string): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/completed`);
+  public cleanAll(queueName: string, status: JobCleanStatus): Promise<void> {
+    return this.axios.put(
+      `/queues/${encodeURIComponent(queueName)}/clean/${encodeURIComponent(status)}`
+    );
   }
 
   public cleanJob(queueName: string, jobId: AppJob['id']): Promise<void> {

diff --git a/packages/ui/typings/app.d.ts b/packages/ui/typings/app.d.ts
@@ -1,4 +1,10 @@
-import { AppJob, AppQueue, JobRetryStatus, Status } from '@bull-board/api/typings/app';
+import {
+  AppJob,
+  AppQueue,
+  JobCleanStatus,
+  JobRetryStatus,
+  Status,
+} from '@bull-board/api/typings/app';
 
 export { Status } from '@bull-board/api/typings/app';
 
@@ -10,9 +16,7 @@ export interface QueueActions {
   cleanJob: (queueName: string) => (job: AppJob) => () => Promise<void>;
   getJobLogs: (queueName: string) => (job: AppJob) => () => Promise<string[]>;
   retryAll: (queueName: string, status: JobRetryStatus) => () => Promise<void>;
-  cleanAllDelayed: (queueName: string) => () => Promise<void>;
-  cleanAllFailed: (queueName: string) => () => Promise<void>;
-  cleanAllCompleted: (queueName: string) => () => Promise<void>;
+  cleanAll: (queueName: string, status: JobCleanStatus) => () => Promise<void>;
   pauseQueue: (queueName: string) => () => Promise<void>;
   resumeQueue: (queueName: string) => () => Promise<void>;
   emptyQueue: (queueName: string) => () => Promise<void>;