fix: renterd memory leak, abort uploads, inline progress

.changeset/few-chefs-love.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Directory and global file explorers now show upload progress inline.

.changeset/large-crews-play.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed a slow memory leak that became especially apparent during long running large uploads, memory usage is now minimal and stable over time.

.changeset/rich-lemons-speak.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Uploads now support aborting the entire visible page of active uploads.

apps/renterd/components/Uploads/UploadsStatsMenu/index.tsx

@@ -1,11 +1,13 @@
-import { PaginatorMarker } from '@siafoundation/design-system'
+import { Button, PaginatorMarker } from '@siafoundation/design-system'
 import { useUploads } from '../../../contexts/uploads'
 
 export function UploadsStatsMenu() {
-  const { limit, pageCount, dataState, nextMarker, hasMore } = useUploads()
+  const { abortAll, limit, pageCount, dataState, nextMarker, hasMore } =
+    useUploads()
   return (
     <div className="flex gap-3 w-full">
       <div className="flex-1" />
+      {pageCount > 0 && <Button onClick={abortAll}>Abort ({pageCount})</Button>}
       <PaginatorMarker
         marker={nextMarker}
         isMore={hasMore}

apps/renterd/contexts/filesDirectory/columns.tsx

@@ -1,15 +1,10 @@
-import {
-  Button,
-  LoadingDots,
-  Text,
-  Tooltip,
-  ValueNum,
-} from '@siafoundation/design-system'
+import { Button, Text, Tooltip, ValueNum } from '@siafoundation/design-system'
 import {
   Document16,
   Earth16,
   FolderIcon,
   Locked16,
+  Upload16,
 } from '@siafoundation/react-icons'
 import { humanBytes } from '@siafoundation/units'
 import { FileContextMenu } from '../../components/Files/FileContextMenu'
@@ -158,13 +153,10 @@ export const columns: FilesTableColumn[] = [
     id: 'size',
     label: 'size',
     contentClassName: 'justify-end',
-    render: function SizeColumn({ data: { type, name, size, isUploading } }) {
+    render: function SizeColumn({ data: { type, name, size } }) {
       if (type === 'bucket') {
         return null
       }
-      if (isUploading) {
-        return <LoadingDots />
-      }
 
       if (name === '..') {
         return null
@@ -187,9 +179,27 @@ export const columns: FilesTableColumn[] = [
     label: 'health',
     contentClassName: 'justify-center',
     render: function HealthColumn({ data }) {
-      if (data.type === 'bucket') {
+      const { type, isUploading, loaded, size } = data
+      if (type === 'bucket') {
         return null
       }
+      if (isUploading) {
+        const displayPercent = ((loaded / size) * 100).toFixed(0) + '%'
+        return (
+          <Tooltip
+            content={`Uploaded ${humanBytes(loaded)}/${humanBytes(size)}`}
+          >
+            <div className="flex items-center gap-1 cursor-pointer">
+              <Text color="subtle">
+                <Upload16 className="scale-75" />
+              </Text>
+              <Text color="subtle" size="12">
+                {displayPercent}
+              </Text>
+            </div>
+          </Tooltip>
+        )
+      }
       return <FilesHealthColumn {...data} />
     },
   },

apps/renterd/contexts/filesDirectory/dataset.tsx

@@ -56,11 +56,17 @@ export function useDataset() {
     },
   })
 
-  const d = useDatasetGeneric({
-    objects: {
+  const objects = useMemo(
+    () => ({
       isValidating: response.isValidating,
       data: response.data?.entries,
-    },
+    }),
+    [response.isValidating, response.data?.entries]
+  )
+
+  const d = useDatasetGeneric({
+    id: 'filesDirectory',
+    objects,
   })
 
   return {

apps/renterd/contexts/filesFlat/columns.tsx

@@ -1,11 +1,10 @@
+import { Button, Text, Tooltip, ValueNum } from '@siafoundation/design-system'
 import {
-  Button,
-  LoadingDots,
-  Text,
-  Tooltip,
-  ValueNum,
-} from '@siafoundation/design-system'
-import { Document16, Earth16, Locked16 } from '@siafoundation/react-icons'
+  Document16,
+  Earth16,
+  Locked16,
+  Upload16,
+} from '@siafoundation/react-icons'
 import { humanBytes } from '@siafoundation/units'
 import { FileContextMenu } from '../../components/Files/FileContextMenu'
 import { DirectoryContextMenu } from '../../components/Files/DirectoryContextMenu'
@@ -126,13 +125,10 @@ export const columns: FilesTableColumn[] = [
     id: 'size',
     label: 'size',
     contentClassName: 'justify-end',
-    render: function SizeColumn({ data: { type, name, size, isUploading } }) {
+    render: function SizeColumn({ data: { type, name, size } }) {
       if (type === 'bucket') {
         return null
       }
-      if (isUploading) {
-        return <LoadingDots />
-      }
 
       if (name === '..') {
         return null
@@ -155,9 +151,27 @@ export const columns: FilesTableColumn[] = [
     label: 'health',
     contentClassName: 'justify-center',
     render: function HealthColumn({ data }) {
-      if (data.type === 'bucket') {
+      const { type, isUploading, loaded, size } = data
+      if (type === 'bucket') {
         return null
       }
+      if (isUploading) {
+        const displayPercent = ((loaded / size) * 100).toFixed(0) + '%'
+        return (
+          <Tooltip
+            content={`Uploaded ${humanBytes(loaded)}/${humanBytes(size)}`}
+          >
+            <div className="flex items-center gap-1 cursor-pointer">
+              <Text color="subtle">
+                <Upload16 className="scale-75" />
+              </Text>
+              <Text color="subtle" size="12">
+                {displayPercent}
+              </Text>
+            </div>
+          </Tooltip>
+        )
+      }
       return <FilesHealthColumn {...data} />
     },
   },

apps/renterd/contexts/filesFlat/dataset.tsx

@@ -52,11 +52,17 @@ export function useDataset({ sortDirection, sortField }: Props) {
     },
   })
 
-  const d = useDatasetGeneric({
-    objects: {
+  const objects = useMemo(
+    () => ({
       isValidating: response.isValidating,
       data: response.data?.objects,
-    },
+    }),
+    [response.isValidating, response.data]
+  )
+
+  const d = useDatasetGeneric({
+    id: 'filesFlat',
+    objects,
   })
 
   return {

apps/renterd/contexts/filesManager/dataset.tsx

@@ -10,15 +10,17 @@ import {
   isDirectory,
 } from '../../lib/paths'
 import { useFilesManager } from '.'
+import { useEffect } from 'react'
 
 type Props = {
+  id: string
   objects: {
     isValidating: boolean
     data?: ObjEntry[]
   }
 }
 
-export function useDataset({ objects }: Props) {
+export function useDataset({ id, objects }: Props) {
   const {
     activeBucket,
     activeBucketName,
@@ -31,17 +33,10 @@ export function useDataset({ objects }: Props) {
     setActiveDirectory,
   } = useFilesManager()
   const { dataset: allContracts } = useContracts()
-  return useSWR<ObjectData[] | null>(
+  const response = useSWR<ObjectData[] | null>(
     objects.isValidating || buckets.isValidating
       ? null
-      : [
-          objects.data,
-          uploadsList,
-          allContracts,
-          buckets.data,
-          activeBucketName,
-          activeDirectoryPath,
-        ],
+      : [id, activeBucketName, activeDirectoryPath],
     () => {
       const dataMap: Record<string, ObjectData> = {}
       if (!activeBucket) {
@@ -61,7 +56,7 @@ export function useDataset({ objects }: Props) {
             type: 'bucket',
           }
         })
-      } else if (objects.data) {
+      } else if (objects.data || uploadsList.length) {
         objects.data?.forEach(({ name: key, size, health }) => {
           const path = join(activeBucketName, key)
           const name = getFilename(key)
@@ -102,4 +97,10 @@ export function useDataset({ objects }: Props) {
       keepPreviousData: true,
     }
   )
+  // refetch when the dependent data changes
+  useEffect(() => {
+    response.mutate()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [objects.data, uploadsList, allContracts, buckets.data])
+  return response
 }