feed: pagination

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';
 

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<NodeJS.Timeout | null>(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 (
-    <div className="min-w-[800px]">
+    <div className="flex min-h-full min-w-[800px] flex-1 flex-col">
       <Table
         isLoading={isLoading}
         containerClassname="border-x-0 border-b-0 border-t border-t-neutral-200 rounded-none shadow-none"
@@ -290,6 +322,55 @@ export function ActivityTable({ activities, selectedActivityId, onActivitySelect
           ))}
         </TableBody>
       </Table>
+
+      <div className="bottom-0 mt-auto border-t border-t-neutral-200 bg-white py-3">
+        <div className="flex items-center justify-end px-6">
+          <div className="border-input inline-flex items-center rounded-lg border bg-transparent">
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={offset === 0}
+              onClick={() => navigateToOffset(0)}
+              className="rounded-r-none border-0"
+            >
+              <div className="flex items-center">
+                <ChevronLeft className="h-4 w-4" />
+                <ChevronLeft className="-ml-2 h-4 w-4" />
+              </div>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={offset === 0}
+              onClick={() => navigateToOffset(Math.max(0, offset - limit))}
+              className="border-l-input rounded-none border-0 border-l"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={!hasMore}
+              onClick={() => navigateToOffset(offset + limit)}
+              className="border-l-input rounded-none border-0 border-l"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={!hasMore}
+              onClick={() => navigateToOffset(offset + limit * 5)}
+              className="border-l-input rounded-l-none border-0 border-l"
+            >
+              <div className="flex items-center">
+                <ChevronRight className="h-4 w-4" />
+                <ChevronRight className="-ml-2 h-4 w-4" />
+              </div>
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

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<ActivityResponse>({
-    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,
   };
 }

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<string | null>(null);
 
   return (
@@ -21,6 +21,7 @@ export function ActivityFeed() {
           className={cn('h-full flex-1 overflow-auto', selectedActivityId ? 'w-[65%]' : 'w-full')}
         >
           <ActivityTable
+            hasMore={hasMore}
             isLoading={isLoading}
             activities={activities}
             selectedActivityId={selectedActivityId}