feat(ui): bulk remove/retry

packages/ui/src/demoMocks/network/mutations/remove-job.ts

@@ -15,5 +15,7 @@ export const removeJobMock = (
     }
     return !Boolean(target);
   });
-  return found;
+  return Promise.resolve({
+    removeJob: found,
+  });
 };

packages/ui/src/demoMocks/network/mutations/remove-jobs.ts

@@ -0,0 +1,21 @@
+import type {
+  RemoveJobsMutation,
+  RemoveJobsMutationVariables,
+} from '@/typings/gql';
+import { networkMockData } from '../data';
+
+export const removeJobsMock = (
+  args: RemoveJobsMutationVariables,
+): Promise<RemoveJobsMutation> => {
+  const found: any[] = [];
+  networkMockData.jobs = networkMockData.jobs.filter((job) => {
+    const target = args.jobs.includes(job.id) && job.queue === args.queue;
+    if (target) {
+      found.push(target);
+    }
+    return !Boolean(target);
+  });
+  return Promise.resolve({
+    removeJobs: found,
+  });
+};

packages/ui/src/demoMocks/network/mutations/retry-jobs.ts

@@ -0,0 +1,12 @@
+import type {
+  RetryJobsMutation,
+  RetryJobsMutationVariables,
+} from '@/typings/gql';
+
+export const retryJobsMock = (
+  _args: RetryJobsMutationVariables,
+): Promise<RetryJobsMutation> => {
+  return Promise.resolve({
+    retryJobs: [],
+  });
+};

packages/ui/src/network/mutations/remove-jobs.ts

@@ -0,0 +1,20 @@
+import { gqlClient } from '@/network/gql-client';
+import type {
+  RemoveJobsMutation,
+  RemoveJobsMutationVariables,
+} from '@/typings/gql';
+import { gql } from 'graphql-request';
+
+export const removeJobs = (
+  args: RemoveJobsMutationVariables,
+): Promise<RemoveJobsMutation> =>
+  gqlClient.request(
+    gql`
+      mutation RemoveJobs($queue: String!, $jobs: [ID!]!) {
+        removeJobs(queue: $queue, jobs: $jobs) {
+          id
+        }
+      }
+    `,
+    args,
+  );

packages/ui/src/network/mutations/retry-jobs.ts

@@ -0,0 +1,20 @@
+import { gqlClient } from '@/network/gql-client';
+import type {
+  RetryJobsMutation,
+  RetryJobsMutationVariables,
+} from '@/typings/gql';
+import { gql } from 'graphql-request';
+
+export const retryJobs = (
+  args: RetryJobsMutationVariables,
+): Promise<RetryJobsMutation> =>
+  gqlClient.request(
+    gql`
+      mutation RetryJobs($queue: String!, $jobs: [ID!]!) {
+        retryJobs(queue: $queue, jobs: $jobs) {
+          id
+        }
+      }
+    `,
+    args,
+  );

packages/ui/src/providers/network/value.ts

@@ -45,8 +45,12 @@ import { removeJobsByPatternMock } from '@/demoMocks/network/mutations/remove-jo
 import { removeJobsByPattern } from '@/network/mutations/remove-jobs-by-pattern';
 import { cleanQueueMock } from '@/demoMocks/network/mutations/clean-queue';
 import { cleanQueue } from '@/network/mutations/clean-queue';
+import { retryJobs } from '@/network/mutations/retry-jobs';
+import { removeJobs } from '@/network/mutations/remove-jobs';
+import { removeJobsMock } from '@/demoMocks/network/mutations/remove-jobs';
 
 import { EnvConfig } from '@/config/env';
+import { retryJobsMock } from '@/demoMocks/network/mutations/retry-jobs';
 
 const { useMocks: m } = EnvConfig;
 
@@ -76,6 +80,8 @@ const mutations = {
   closeQueue: m ? closeQueueMock : closeQueue,
   removeJobsByPattern: m ? removeJobsByPatternMock : removeJobsByPattern,
   cleanQueue: m ? cleanQueueMock : cleanQueue,
+  retryJobs: m ? retryJobsMock : retryJobs,
+  removeJobs: m ? removeJobsMock : removeJobs,
 };
 
 export const networkContextValue = { mutations, queries };

packages/ui/src/screens/jobs/List/Head.tsx

@@ -8,6 +8,7 @@ import shallow from 'zustand/shallow';
 import type { GetJobsQuery } from '@/typings/gql';
 import isempty from 'lodash/isEmpty';
 
+const actionsWidth = '190';
 type TProps = {
   jobs?: GetJobsQuery['jobs'];
 };
@@ -41,9 +42,9 @@ export default function TableHead({ jobs }: TProps) {
         </TableCell>
         <TableCell
           style={{
-            minWidth: '190px',
+            minWidth: `${actionsWidth}px`,
           }}
-          width="190"
+          width={actionsWidth}
         >
           Actions
         </TableCell>

packages/ui/src/screens/jobs/List/Toolbar.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { useSelectedJobsStore } from '@/stores/selected-jobs';
+import ReplayIcon from '@material-ui/icons/Replay';
+import DeleteIcon from '@material-ui/icons/Delete';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useFiltersStore } from '@/stores/filters';
+import { JobStatus } from '@/typings/gql';
+import { useNetwork } from '@/hooks/use-network';
+import { useAbstractMutation } from '@/hooks/use-abstract-mutation';
+import { useActiveQueueStore } from '@/stores/active-queue';
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    marginRight: theme.spacing(3),
+  },
+}));
+
+export default function TableToolbar() {
+  const cls = useStyles();
+  const activeStatus = useFiltersStore((state) => state.status);
+  const queue = useActiveQueueStore((state) => state.active as string);
+  const { mutations } = useNetwork();
+  const [selectedJobs, clearSelectedJobs] = useSelectedJobsStore((state) => [
+    state.selected,
+    state.clear,
+  ]);
+  const selectedCount = selectedJobs.size;
+  const removeMutation = useAbstractMutation({
+    mutation: mutations.removeJobs,
+    confirm: {
+      description: 'Delete selected jobs',
+    },
+    invalidateSharedQueries: true,
+    toast: 'Jobs have been removed',
+    onSuccess: clearSelectedJobs,
+  });
+  const retryMutation = useAbstractMutation({
+    mutation: mutations.retryJobs,
+    confirm: {
+      description: 'Retry selected jobs',
+    },
+    invalidateSharedQueries: true,
+    toast: 'Retried',
+    onSuccess: clearSelectedJobs,
+  });
+  return (
+    <Toolbar>
+      {selectedCount > 0 ? (
+        <>
+          <Typography
+            className={cls.title}
+            color="inherit"
+            variant="subtitle1"
+            component="div"
+          >
+            {selectedCount} selected
+          </Typography>
+          {activeStatus === JobStatus.Failed && (
+            <Tooltip title="Retry selected jobs">
+              <IconButton
+                onClick={() =>
+                  retryMutation.mutate({
+                    queue,
+                    jobs: Array.from(selectedJobs),
+                  })
+                }
+              >
+                <ReplayIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          <Tooltip title="Delete selected jobs">
+            <IconButton
+              onClick={() =>
+                removeMutation.mutate({
+                  queue,
+                  jobs: Array.from(selectedJobs),
+                })
+              }
+              color="secondary"
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      ) : (
+        <Typography variant="h6" component="div">
+          Jobs
+        </Typography>
+      )}
+    </Toolbar>
+  );
+}

packages/ui/src/screens/jobs/List/index.tsx

@@ -11,6 +11,7 @@ import JobLogsModal from './Logs';
 import { useJobsQuery } from './hooks';
 import NetworkRequest from '@/components/NetworkRequest';
 import TableHead from './Head';
+import TableToolbar from './Toolbar';
 import { useSelectedJobsStore } from '@/stores/selected-jobs';
 import shallow from 'zustand/shallow';
 
@@ -24,6 +25,7 @@ export default function Jobs() {
   return (
     <Paper>
       <NetworkRequest status={status} refetch={refetch}>
+        <TableToolbar />
         <TableContainer>
           <Table size="medium">
             <TableHead jobs={data?.jobs} />

packages/ui/src/stores/selected-jobs.ts

@@ -1,4 +1,9 @@
+import { useEffect } from 'react';
 import createStore from 'zustand';
+import { useActiveQueueStore } from './active-queue';
+import { useFiltersStore } from './filters';
+import shallow from 'zustand/shallow';
+import { usePaginationStore } from './pagination';
 
 type TState = {
   selected: Set<string>;
@@ -43,3 +48,28 @@ export const useSelectedJobsStore = createStore<TState>((set, get) => ({
     }
   },
 }));
+
+export const useRunSelectedJobsSideEffects = () => {
+  const clear = useSelectedJobsStore((state) => state.clear);
+  useEffect(() => {
+    const effect = clear;
+    const unsubActiveQueue = useActiveQueueStore.subscribe(
+      effect,
+      (state) => state.active,
+    );
+    const unsubFilters = useFiltersStore.subscribe(
+      effect,
+      (state) => [state.order, state.status, state.jobId],
+      shallow,
+    );
+    const unsubPagination = usePaginationStore.subscribe(
+      effect,
+      (state) => state.page,
+    );
+    return () => {
+      unsubActiveQueue();
+      unsubFilters();
+      unsubPagination();
+    };
+  }, []);
+};

packages/ui/src/stores/side-effects.ts

@@ -1,7 +1,9 @@
 import { useRunPaginationSideEffects } from './pagination';
 import { useRunRefetchJobsLockSideEffects } from './refetch-jobs-lock';
+import { useRunSelectedJobsSideEffects } from './selected-jobs';
 
 export const useRunStoreSideEffects = () => {
   useRunPaginationSideEffects();
   useRunRefetchJobsLockSideEffects();
+  useRunSelectedJobsSideEffects();
 };

packages/ui/src/typings/gql.ts

@@ -82,6 +82,8 @@ export type Mutation = {
   emptyQueue?: Maybe<Queue>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobremove */
   removeJob?: Maybe<Job>;
+  /** calls https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobremove on every passed job */
+  removeJobs: Array<Maybe<Job>>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobmovetocompleted */
   moveJobToCompleted?: Maybe<Job>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobmovetofailed */
@@ -94,6 +96,8 @@ export type Mutation = {
   updateJobData?: Maybe<Job>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobretry */
   retryJob?: Maybe<Job>;
+  /** calls https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#jobretry on every passed job */
+  retryJobs: Array<Maybe<Job>>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#joblog */
   log?: Maybe<Job>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#queueadd */
@@ -137,6 +141,12 @@ export type MutationRemoveJobArgs = {
 };
 
 
+export type MutationRemoveJobsArgs = {
+  queue: Scalars['String'];
+  jobs: Array<Scalars['ID']>;
+};
+
+
 export type MutationMoveJobToCompletedArgs = {
   queue: Scalars['String'];
   id: Scalars['ID'];
@@ -164,7 +174,7 @@ export type MutationPromoteJobArgs = {
 export type MutationUpdateJobDataArgs = {
   queue: Scalars['String'];
   id: Scalars['ID'];
-  data?: Maybe<Scalars['String']>;
+  data?: Maybe<Scalars['JSON']>;
 };
 
 
@@ -174,6 +184,12 @@ export type MutationRetryJobArgs = {
 };
 
 
+export type MutationRetryJobsArgs = {
+  queue: Scalars['String'];
+  jobs: Array<Scalars['ID']>;
+};
+
+
 export type MutationLogArgs = {
   queue: Scalars['String'];
   id: Scalars['ID'];
@@ -378,6 +394,14 @@ export type RemoveJobsByPatternMutationVariables = Exact<{
 
 export type RemoveJobsByPatternMutation = Pick<Mutation, 'removeJobsByPattern'>;
 
+export type RemoveJobsMutationVariables = Exact<{
+  queue: Scalars['String'];
+  jobs: Array<Scalars['ID']> | Scalars['ID'];
+}>;
+
+
+export type RemoveJobsMutation = { removeJobs: Array<Maybe<Pick<Job, 'id'>>> };
+
 export type ResumeQueueMutationVariables = Exact<{
   queue: Scalars['String'];
 }>;
@@ -393,10 +417,18 @@ export type RetryJobMutationVariables = Exact<{
 
 export type RetryJobMutation = { retryJob?: Maybe<Pick<Job, 'id'>> };
 
+export type RetryJobsMutationVariables = Exact<{
+  queue: Scalars['String'];
+  jobs: Array<Scalars['ID']> | Scalars['ID'];
+}>;
+
+
+export type RetryJobsMutation = { retryJobs: Array<Maybe<Pick<Job, 'id'>>> };
+
 export type UpdateJobDataMutationVariables = Exact<{
   queue: Scalars['String'];
   id: Scalars['ID'];
-  data?: Maybe<Scalars['String']>;
+  data?: Maybe<Scalars['JSON']>;
 }>;