feat(logs): add sort to logs page

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -288,6 +288,10 @@ export default function Logs() {
   const activeLogRefetchRef = useRef<() => void>(() => {})
   const logsQueryRef = useRef({ isFetching: false, hasNextPage: false, fetchNextPage: () => {} })
   const [isNotificationSettingsOpen, setIsNotificationSettingsOpen] = useState(false)
+  const [activeSort, setActiveSort] = useState<{
+    column: string
+    direction: 'asc' | 'desc'
+  } | null>(null)
   const userPermissions = useUserPermissionsContext()
 
   const [contextMenuOpen, setContextMenuOpen] = useState(false)
@@ -358,11 +362,43 @@ export default function Logs() {
     return logsQuery.data.pages.flatMap((page) => page.logs)
   }, [logsQuery.data?.pages])
 
+  const sortedLogs = useMemo(() => {
+    if (!activeSort) return logs
+
+    const { column, direction } = activeSort
+    return [...logs].sort((a, b) => {
+      let cmp = 0
+      switch (column) {
+        case 'date':
+          cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+          break
+        case 'duration': {
+          const aDuration = parseDuration({ duration: a.duration ?? undefined }) ?? -1
+          const bDuration = parseDuration({ duration: b.duration ?? undefined }) ?? -1
+          cmp = aDuration - bDuration
+          break
+        }
+        case 'cost': {
+          const aCost = typeof a.cost?.total === 'number' ? a.cost.total : -1
+          const bCost = typeof b.cost?.total === 'number' ? b.cost.total : -1
+          cmp = aCost - bCost
+          break
+        }
+        case 'status':
+          cmp = (a.status ?? '').localeCompare(b.status ?? '')
+          break
+        default:
+          break
+      }
+      return direction === 'asc' ? cmp : -cmp
+    })
+  }, [logs, activeSort])
+
   const selectedLogIndex = useMemo(
-    () => (selectedLogId ? logs.findIndex((l) => l.id === selectedLogId) : -1),
-    [logs, selectedLogId]
+    () => (selectedLogId ? sortedLogs.findIndex((l) => l.id === selectedLogId) : -1),
+    [sortedLogs, selectedLogId]
   )
-  const selectedLogFromList = selectedLogIndex >= 0 ? logs[selectedLogIndex] : null
+  const selectedLogFromList = selectedLogIndex >= 0 ? sortedLogs[selectedLogIndex] : null
 
   const selectedLog = useMemo(() => {
     if (!selectedLogFromList) return null
@@ -381,8 +417,8 @@ export default function Logs() {
   useFolders(workspaceId)
 
   useEffect(() => {
-    logsRef.current = logs
-  }, [logs])
+    logsRef.current = sortedLogs
+  }, [sortedLogs])
   useEffect(() => {
     selectedLogIndexRef.current = selectedLogIndex
   }, [selectedLogIndex])
@@ -659,7 +695,7 @@ export default function Logs() {
 
   const rows: ResourceRow[] = useMemo(
     () =>
-      logs.map((log) => {
+      sortedLogs.map((log) => {
         const formattedDate = formatDate(log.createdAt)
         const displayStatus = getDisplayStatus(log.status)
         const isMothershipJob = log.trigger === 'mothership'
@@ -710,7 +746,7 @@ export default function Logs() {
           },
         }
       }),
-    [logs]
+    [sortedLogs]
   )
 
   const sidebarOverlay = useMemo(
@@ -721,7 +757,7 @@ export default function Logs() {
         onClose={handleCloseSidebar}
         onNavigateNext={handleNavigateNext}
         onNavigatePrev={handleNavigatePrev}
-        hasNext={selectedLogIndex < logs.length - 1}
+        hasNext={selectedLogIndex < sortedLogs.length - 1}
         hasPrev={selectedLogIndex > 0}
       />
     ),
@@ -732,7 +768,7 @@ export default function Logs() {
       handleNavigateNext,
       handleNavigatePrev,
       selectedLogIndex,
-      logs.length,
+      sortedLogs.length,
     ]
   )
 
@@ -978,6 +1014,21 @@ export default function Logs() {
     [appliedFilters, textSearch, removeBadge, handleFiltersChange]
   )
 
+  const sortConfig = useMemo<SortConfig>(
+    () => ({
+      options: [
+        { id: 'date', label: 'Date' },
+        { id: 'duration', label: 'Duration' },
+        { id: 'cost', label: 'Cost' },
+        { id: 'status', label: 'Status' },
+      ],
+      active: activeSort,
+      onSort: (column, direction) => setActiveSort({ column, direction }),
+      onClear: () => setActiveSort(null),
+    }),
+    [activeSort]
+  )
+
   const searchConfig = useMemo<SearchConfig>(
     () => ({
       value: currentInput,
@@ -1065,6 +1116,7 @@ export default function Logs() {
         <ResourceHeader icon={Library} title='Logs' actions={headerActions} />
         <ResourceOptionsBar
           search={searchConfig}
+          sort={sortConfig}
           filter={
             <LogsFilterPanel searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />
           }