diff --git a/apps/dashboard/src/components/activity/activity-job-item.tsx b/apps/dashboard/src/components/activity/activity-job-item.tsx index 2420377389c..ec913cd4a50 100644 --- a/apps/dashboard/src/components/activity/activity-job-item.tsx +++ b/apps/dashboard/src/components/activity/activity-job-item.tsx @@ -40,10 +40,7 @@ function getStatusMessage(job: JobWithDigest): string { } if (job.status === 'failed' && job.executionDetails?.length > 0) { - return ( - job.executionDetails[job.executionDetails.length - 1].detail + ' asda sd sad sad sad as d asdasd asd asd as' || - 'Step execution failed' - ); + return job.executionDetails[job.executionDetails.length - 1].detail || 'Step execution failed'; } switch (job.type.toLowerCase()) { @@ -53,8 +50,8 @@ function getStatusMessage(job: JobWithDigest): string { job.digest?.unit ?? '' }`; } - if (job.status === 'pending') { - return 'Collecting Digest events'; + if (job.status === 'delayed') { + return `Collecting Digest events for ${job.digest?.amount ?? 0} ${job.digest?.unit ?? ''}`; } return 'Digest failed'; diff --git a/apps/dashboard/src/components/activity/activity-table.tsx b/apps/dashboard/src/components/activity/activity-table.tsx index 02a890f06b2..2b331f097ea 100644 --- a/apps/dashboard/src/components/activity/activity-table.tsx +++ b/apps/dashboard/src/components/activity/activity-table.tsx @@ -1,4 +1,12 @@ -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/primitives/table'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, + TableFooter, +} from '@/components/primitives/table'; import { Badge } from '@/components/primitives/badge'; import { format } from 'date-fns'; import { cn } from '@/utils/ui'; @@ -12,6 +20,9 @@ import { QueryKeys } from '@/utils/query-keys'; import { useEnvironment } from '@/context/environment/hooks'; import { getNotification } from '@/api/activity'; import { TimeDisplayHoverCard } from '../time-display-hover-card'; +import { createSearchParams, useLocation, useSearchParams, useNavigate } from 'react-router-dom'; +import { Button } from '@/components/primitives/button'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; type ActivityStatus = 'SUCCESS' | 'ERROR' | 'QUEUED' | 'MERGED'; @@ -210,12 +221,33 @@ interface ActivityTableProps { selectedActivityId: string | null; onActivitySelect: (activity: Activity) => void; isLoading: boolean; + hasMore: boolean; } -export function ActivityTable({ activities, selectedActivityId, onActivitySelect, isLoading }: ActivityTableProps) { +export function ActivityTable({ + activities, + selectedActivityId, + onActivitySelect, + isLoading, + hasMore, +}: ActivityTableProps) { const queryClient = useQueryClient(); const { currentEnvironment } = useEnvironment(); const hoverTimerRef = useRef(null); + const [searchParams] = useSearchParams(); + const location = useLocation(); + const navigate = useNavigate(); + + const offset = parseInt(searchParams.get('offset') || '0'); + const limit = parseInt(searchParams.get('limit') || '10'); + + const navigateToOffset = (newOffset: number) => { + const newParams = createSearchParams({ + ...Object.fromEntries(searchParams), + offset: newOffset.toString(), + }); + navigate(`${location.pathname}?${newParams}`); + }; const handleRowMouseEnter = (activity: Activity) => { hoverTimerRef.current = setTimeout(() => { @@ -242,7 +274,7 @@ export function ActivityTable({ activities, selectedActivityId, onActivitySelect }, []); return ( -
+
+ +
+
+
+ + + + +
+
+
); } diff --git a/apps/dashboard/src/hooks/use-activities.ts b/apps/dashboard/src/hooks/use-activities.ts index e60ea383fdd..ef89b18792f 100644 --- a/apps/dashboard/src/hooks/use-activities.ts +++ b/apps/dashboard/src/hooks/use-activities.ts @@ -1,9 +1,9 @@ import { useQuery } from '@tanstack/react-query'; import { getActivityList, IActivityFilters } from '@/api/activity'; import { useEnvironment } from '../context/environment/hooks'; +import { useSearchParams } from 'react-router-dom'; interface UseActivitiesOptions { - page?: number; filters?: IActivityFilters; } @@ -85,20 +85,25 @@ interface ActivityResponse { pageSize: number; } -export function useActivities({ page = 0, filters }: UseActivitiesOptions = {}) { +export function useActivities({ filters }: UseActivitiesOptions = {}) { const { currentEnvironment } = useEnvironment(); + const [searchParams] = useSearchParams(); + + const offset = parseInt(searchParams.get('offset') || '0'); + const limit = parseInt(searchParams.get('limit') || '10'); const { data, isLoading, isFetching } = useQuery({ - queryKey: ['activitiesList', currentEnvironment?._id, page, filters], - queryFn: () => getActivityList(currentEnvironment!, page, filters), + queryKey: ['activitiesList', currentEnvironment?._id, offset, limit, filters], + queryFn: () => getActivityList(currentEnvironment!, Math.floor(offset / limit), filters), staleTime: 1000 * 60, // 1 minute }); return { activities: data?.data || [], hasMore: data?.hasMore || false, - pageSize: data?.pageSize || 10, + pageSize: limit, isLoading, isFetching, + offset, }; } diff --git a/apps/dashboard/src/pages/activity-feed.tsx b/apps/dashboard/src/pages/activity-feed.tsx index 5726ccbdfbd..4bd003fede4 100644 --- a/apps/dashboard/src/pages/activity-feed.tsx +++ b/apps/dashboard/src/pages/activity-feed.tsx @@ -7,7 +7,7 @@ import { ActivityPanel } from '@/components/activity/activity-panel'; import { useState } from 'react'; export function ActivityFeed() { - const { activities, isLoading } = useActivities(); + const { activities, isLoading, hasMore, pageSize, offset } = useActivities(); const [selectedActivityId, setSelectedActivityId] = useState(null); return ( @@ -21,6 +21,7 @@ export function ActivityFeed() { className={cn('h-full flex-1 overflow-auto', selectedActivityId ? 'w-[65%]' : 'w-full')} >