@vendure/dashboard 3.6.3-master-202604160307 → 3.6.3-master-202604170307

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.6.3-master-202604160307",
+    "version": "3.6.3-master-202604170307",
     "type": "module",
     "repository": {
         "type": "git",
@@ -137,8 +137,8 @@
         "@storybook/addon-vitest": "^10.3.1",
         "@storybook/react-vite": "^10.3.1",
         "@types/node": "^22.19.0",
-        "@vendure/common": "^3.6.3-master-202604160307",
-        "@vendure/core": "^3.6.3-master-202604160307",
+        "@vendure/common": "^3.6.3-master-202604170307",
+        "@vendure/core": "^3.6.3-master-202604170307",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.39.0",

package/src/app/routes/_authenticated/_system/components/cancel-jobs-bulk-action.tsx

@@ -0,0 +1,80 @@
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
+import { plural } from '@lingui/core/macro';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { Ban } from 'lucide-react';
+import { toast } from 'sonner';
+import { cancelJobDocument } from '../job-queue.graphql.js';
+
+export const CancelJobsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { t } = useLingui();
+
+    const cancellableJobs = selection.filter(job => job.state === 'RUNNING' || job.state === 'PENDING');
+    const cancellableCount = cancellableJobs.length;
+
+    const { mutate, isPending } = useMutation({
+        mutationFn: async () => {
+            const results = await Promise.allSettled(
+                cancellableJobs.map(job => api.mutate(cancelJobDocument, { jobId: job.id })),
+            );
+
+            const fulfilled = results.filter(r => r.status === 'fulfilled').length;
+            const rejected = results.filter(r => r.status === 'rejected').length;
+
+            return { fulfilled, rejected };
+        },
+        onSuccess: ({ fulfilled, rejected }) => {
+            if (fulfilled > 0) {
+                toast.success(
+                    plural(fulfilled, {
+                        one: t`Successfully cancelled ${fulfilled} job`,
+                        other: t`Successfully cancelled ${fulfilled} jobs`,
+                    }),
+                );
+            }
+            if (rejected > 0) {
+                toast.error(
+                    plural(rejected, {
+                        one: t`Failed to cancel ${rejected} job`,
+                        other: t`Failed to cancel ${rejected} jobs`,
+                    }),
+                );
+            }
+
+            refetchPaginatedList();
+            table.resetRowSelection();
+        },
+    });
+
+    if (cancellableCount === 0) {
+        return null;
+    }
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={['DeleteSettings', 'DeleteSystem']}
+            onClick={() => mutate()}
+            disabled={isPending}
+            label={
+                <Plural
+                    value={cancellableCount}
+                    one={`Cancel ${cancellableCount} job`}
+                    other={`Cancel ${cancellableCount} jobs`}
+                />
+            }
+            confirmationText={
+                <Plural
+                    value={cancellableCount}
+                    one={`Are you sure you want to cancel ${cancellableCount} job? This action cannot be undone.`}
+                    other={`Are you sure you want to cancel ${cancellableCount} jobs? This action cannot be undone.`}
+                />
+            }
+            icon={Ban}
+            className="text-destructive"
+        />
+    );
+};

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -25,9 +25,38 @@ import {
     RotateCcw,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { CancelJobsBulkAction } from './components/cancel-jobs-bulk-action.js';
 import { PayloadDialog } from './components/payload-dialog.js';
 import { cancelJobDocument, jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
 
+function formatDuration(ms: number): string {
+    if (ms < 1000) {
+        return `${ms}ms`;
+    }
+
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    const parts: string[] = [];
+
+    if (days > 0) {
+        parts.push(`${days}d`);
+    }
+    if (hours % 24 > 0) {
+        parts.push(`${hours % 24}h`);
+    }
+    if (minutes % 60 > 0) {
+        parts.push(`${minutes % 60}m`);
+    }
+    if (seconds % 60 > 0) {
+        parts.push(`${seconds % 60}s`);
+    }
+
+    return parts.join(' ');
+}
+
 function getJobStateBadgeVariant(state: string) {
     switch (state) {
         case 'PENDING':
@@ -122,9 +151,7 @@ function JobQueuePage() {
             customizeColumns={{
                 createdAt: {
                     cell: ({ row }) => (
-                        <div title={row.original.createdAt}>
-                            {formatRelativeDate(row.original.createdAt)}
-                        </div>
+                        <div title={row.original.createdAt}>{formatRelativeDate(row.original.createdAt)}</div>
                     ),
                 },
                 data: {
@@ -177,26 +204,22 @@ function JobQueuePage() {
                         const state = STATES.find(s => s.value === row.original.state);
                         return (
                             <div className="flex items-center gap-2">
-                                <Badge
-                                    variant={getJobStateBadgeVariant(row.original.state)}
-                                >
+                                <Badge variant={getJobStateBadgeVariant(row.original.state)}>
                                     {state && (
                                         <state.icon
                                             className={
-                                                row.original.state === 'RUNNING'
-                                                    ? 'animate-spin'
-                                                    : undefined
+                                                row.original.state === 'RUNNING' ? 'animate-spin' : undefined
                                             }
                                         />
                                     )}
                                     {row.original.state}
                                 </Badge>
                                 {row.original.state === 'RUNNING' && (
-                                    <DropdownMenu
-                                        onOpenChange={open => (isActionMenuOpenRef.current = open)}
-                                    >
-                                        <DropdownMenuTrigger render={<Button variant="ghost" size="icon-xs" />}>
-                                                <MoreVertical />
+                                    <DropdownMenu onOpenChange={open => (isActionMenuOpenRef.current = open)}>
+                                        <DropdownMenuTrigger
+                                            render={<Button variant="ghost" size="icon-xs" />}
+                                        >
+                                            <MoreVertical />
                                         </DropdownMenuTrigger>
                                         <DropdownMenuContent align="end">
                                             <DropdownMenuItem
@@ -216,7 +239,7 @@ function JobQueuePage() {
                 },
                 duration: {
                     cell: ({ row }) => {
-                        return row.original.duration ? `${row.original.duration}ms` : null;
+                        return row.original.duration ? formatDuration(row.original.duration) : null;
                     },
                 },
             }}
@@ -246,6 +269,12 @@ function JobQueuePage() {
                     options: STATES,
                 },
             }}
+            bulkActions={[
+                {
+                    component: CancelJobsBulkAction,
+                    order: 100,
+                },
+            ]}
             registerRefresher={refresher => {
                 refreshRef.current = refresher;
             }}
@@ -253,11 +282,11 @@ function JobQueuePage() {
             <ActionBarItem itemId="auto-refresh-button">
                 <DropdownMenu>
                     <DropdownMenuTrigger render={<Button variant="outline" size="sm" className="gap-2" />}>
-                            <RefreshCw className="h-4 w-4" />
-                            <span>
-                                <Trans>Auto refresh: {currentInterval?.label}</Trans>
-                            </span>
-                            <ChevronDown className="h-4 w-4" />
+                        <RefreshCw className="h-4 w-4" />
+                        <span>
+                            <Trans>Auto refresh: {currentInterval?.label}</Trans>
+                        </span>
+                        <ChevronDown className="h-4 w-4" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
                         {REFRESH_INTERVALS.map(interval => (

package/src/app/styles.css

@@ -53,6 +53,13 @@ html[dir="rtl"] * {
 @utility col-main {
     grid-column: span 3 / span 3;
 }
+@utility scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
 @utility col-side {
     grid-column: span 2 / span 2;
 }