Fixups related to uploads feature

Signed-off-by: Bipul Adhikari <[email protected]>
red-hat-storage · Dec 4, 2024 · 09c6327 · 09c6327
1 parent 023bf07
commit 09c6327
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 76 deletions.
diff --git a/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx b/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
@@ -35,10 +35,6 @@ export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
     closeObjectSidebar();
     setUploadSidebarExpanded(true);
   };
-  const hideUploadSidebar = () => {
-    closeObjectSidebar();
-    setUploadSidebarExpanded(false);
-  };
   const onRowClick = (
     selectedObject: ObjectCrFormat,
     actionItems: React.MutableRefObject<IAction[]>
@@ -61,7 +57,7 @@ export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
             client={noobaaS3}
             bucketName={bucketName}
             showSidebar={showUploadSidebar}
-            hideSidebar={hideUploadSidebar}
+            hideSidebar={closeUploadSidebar}
             setCompletionTime={setCompletionTime}
             triggerRefresh={triggerRefresh}
           />

diff --git a/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx b/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx
@@ -130,7 +130,7 @@ const PanelContent: React.FC<PanelContentProps> = observer(
               Standard uploads have a size limit of up to 5 TB in S3.
             </Trans>
           </Alert>
-          <UploadStatusList uploadStore={uploadStore} />
+          <UploadStatusList />
         </DrawerContentBody>
       </DrawerPanelContent>
     );
@@ -144,26 +144,24 @@ export type UploadSidebarProps = {
   completionTime: number;
 };
 
-export const UploadSidebar: React.FC<UploadSidebarProps> = observer(
-  ({
-    isExpanded,
-    closeSidebar,
-    mainContent: drawerContentBody,
-    completionTime,
-  }) => {
-    return (
-      <Drawer isExpanded={isExpanded} position="right">
-        <DrawerContent
-          panelContent={
-            <PanelContent
-              onClose={closeSidebar}
-              completionTime={completionTime}
-            />
-          }
-        >
-          <DrawerContentBody>{drawerContentBody}</DrawerContentBody>
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-);
+export const UploadSidebar: React.FC<UploadSidebarProps> = ({
+  isExpanded,
+  closeSidebar,
+  mainContent: drawerContentBody,
+  completionTime,
+}) => {
+  return (
+    <Drawer isExpanded={isExpanded} position="right">
+      <DrawerContent
+        panelContent={
+          <PanelContent
+            onClose={closeSidebar}
+            completionTime={completionTime}
+          />
+        }
+      >
+        <DrawerContentBody>{drawerContentBody}</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/packages/odf/components/s3-browser/upload-objects/store.ts b/packages/odf/components/s3-browser/upload-objects/store.ts
@@ -1,5 +1,5 @@
 import { makeAutoObservable, toJS } from 'mobx';
-import { UploadProgress, UploadStatus } from './types';
+import { ObjectID, UploadProgress, UploadStatus } from './types';
 
 export class UploadStore {
   uploads: Record<string, UploadProgress> = {};
@@ -13,16 +13,16 @@ export class UploadStore {
   }
 
   // Add a file to the map
-  addFile(file: UploadProgress, key: string) {
+  addFile(obejct: UploadProgress, key: string) {
     this.uploads[key] = {
-      ...file,
+      ...obejct,
       uploadState: UploadStatus.INIT_STATE,
     };
   }
 
-  updateProgress(fileId: string, loaded: number, total: number) {
-    if (fileId in this.uploads) {
-      const existingData = this.uploads[fileId];
+  updateProgress(objectId: ObjectID, loaded: number, total: number) {
+    if (objectId in this.uploads) {
+      const existingData = this.uploads[objectId];
       const update = {
         loaded,
         total,
@@ -33,52 +33,45 @@ export class UploadStore {
       } else if (existingData.uploadState === UploadStatus.INIT_STATE) {
         Object.assign(update, { uploadState: UploadStatus.UPLOAD_START });
       }
-      this.uploads[fileId] = { ...existingData, ...update };
+      this.uploads[objectId] = { ...existingData, ...update };
     }
   }
 
-  set uploadCompleted(key: string) {
-    const existingData = this.uploads[key];
-    this.uploads[key] = {
+  set uploadCompleted(objectId: ObjectID) {
+    const existingData = this.uploads[objectId];
+    this.uploads[objectId] = {
       ...existingData,
       uploadState: UploadStatus.UPLOAD_COMPLETE,
     };
   }
 
-  getFile(fileId: string) {
-    return this.uploads[fileId];
+  getFile(objectId: ObjectID) {
+    return this.uploads[objectId];
   }
 
-  set uploadFailed(fileId: string) {
-    if (this.uploads[fileId]) {
-      const existingData = this.uploads[fileId];
-
-      const update =
-        existingData.uploadState === UploadStatus.UPLOAD_COMPLETE
-          ? { uploadState: UploadStatus.UPLOAD_FAILED }
-          : {};
-      this.uploads[fileId] = { ...existingData, ...update };
+  set uploadFailed(objectId: ObjectID) {
+    if (this.uploads[objectId]) {
+      const existingData = this.uploads[objectId];
+      const update = { uploadState: UploadStatus.UPLOAD_FAILED };
+      this.uploads[objectId] = { ...existingData, ...update };
     }
   }
 
-  performAbort(fileId: string) {
-    if (fileId in this.uploads) {
-      const existingData = this.uploads[fileId];
+  performAbort(objectId: ObjectID) {
+    if (objectId in this.uploads) {
+      const existingData = this.uploads[objectId];
       if (existingData?.abort) {
         existingData.abort();
       }
       if (existingData.uploadState !== UploadStatus.UPLOAD_COMPLETE) {
         const update = { uploadState: UploadStatus.UPLOAD_CANCELLED };
-        this.uploads[fileId] = { ...existingData, ...update };
+        this.uploads[objectId] = { ...existingData, ...update };
       }
     }
   }
 
   clearAll() {
-    // eslint-disable-next-line guard-for-in
-    for (const key in this.uploads) {
-      delete this.uploads[key];
-    }
+    this.uploads = {};
   }
 
   abortAll() {

diff --git a/packages/odf/components/s3-browser/upload-objects/types.ts b/packages/odf/components/s3-browser/upload-objects/types.ts
@@ -6,6 +6,8 @@ export enum UploadStatus {
   UPLOAD_CANCELLED,
 }
 
+export type ObjectID = string; // A unique key made by joining path+"/"+fileName
+
 export interface UploadProgress extends Partial<File> {
   total?: number;
   loaded?: number;
@@ -14,7 +16,7 @@ export interface UploadProgress extends Partial<File> {
   uploadState: UploadStatus;
   filePath?: string;
   startTime?: number;
-  key: string;
+  key: ObjectID;
 }
 
 export type UploadProgressBatch = Record<string, UploadProgress>;
diff --git a/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx b/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx
@@ -45,7 +45,7 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = observer(
     const foldersPath = searchParams.get(PREFIX) || '';
 
     const processFiles = React.useCallback(
-      async (uploadObjects: File[]) => {
+      async (uploadObjects: File[]): Promise<number> => {
         try {
           const completionTime = await uploadFile(
             uploadObjects,
@@ -54,13 +54,13 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = observer(
             foldersPath,
             uploadStore
           );
-          setCompletionTime(completionTime);
+          return completionTime;
         } catch (e) {
           // eslint-disable-next-line no-console
           console.error('Error uploading file', e);
         }
       },
-      [bucketName, client, foldersPath, setCompletionTime]
+      [bucketName, client, foldersPath]
     );
 
     const closeAlert = React.useCallback(() => {
@@ -82,15 +82,24 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = observer(
         if (uploadStatus !== UploadStatus.UPLOAD_COMPLETE) {
           setUploadStatus(UploadStatus.UPLOAD_START);
           const batches = _.chunk(acceptedFiles, 6);
+          let completionTime: number;
           for (const batch of batches) {
             // eslint-disable-next-line no-await-in-loop
-            await processFiles(batch);
+            completionTime = await processFiles(batch);
           }
+          setCompletionTime(completionTime);
         }
         setUploadStatus(UploadStatus.UPLOAD_COMPLETE);
         triggerRefresh();
       },
-      [closeAlert, foldersPath, processFiles, triggerRefresh, uploadStatus]
+      [
+        closeAlert,
+        foldersPath,
+        processFiles,
+        setCompletionTime,
+        triggerRefresh,
+        uploadStatus,
+      ]
     );
 
     const { getRootProps, getInputProps } = useDropzone({

diff --git a/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts b/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts
@@ -6,8 +6,8 @@ import { UploadProgress, UploadStatus } from '../types';
 
 const performUploadPromise = (
   file: File,
-  folderPath,
-  bucketName,
+  folderPath: string,
+  bucketName: string,
   uploadStore: UploadStore,
   client: S3Commands
 ) => {
@@ -64,7 +64,6 @@ export const convertFileToUploadProgress = (
   name: file.name,
   filePath: file.webkitRelativePath,
   startTime: undefined,
-  lastModified: 0,
   webkitRelativePath: '',
   size: 0,
   type: '',

diff --git a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx
@@ -25,13 +25,8 @@ type UploadStatusItemProps = {
 };
 
 const getProgressVariant = (
-  state: UploadStatus,
-  // For cases whjen it's complete but user presses cancel(edge case)
-  isComplete: boolean
+  state: UploadStatus
 ): Progress['props']['variant'] => {
-  if (isComplete) {
-    return undefined;
-  }
   switch (state) {
     case UploadStatus.UPLOAD_FAILED:
     case UploadStatus.UPLOAD_CANCELLED:
@@ -60,7 +55,7 @@ export const UploadStatusItem: React.FC<UploadStatusItemProps> = observer(
     const item = uploadStore.getFile(itemKey);
     const onAbort = () => uploadStore.performAbort(itemKey);
     const progress = (item.loaded / item.total) * 100;
-    const variant = getProgressVariant(item.uploadState, progress === 100);
+    const variant = getProgressVariant(item.uploadState);
     return (
       <Flex>
         <FlexItem>

diff --git a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx
@@ -3,13 +3,12 @@ import { humanizeBinaryBytes } from '@odf/shared/utils';
 import { observer } from 'mobx-react-lite';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
-import { UploadStore, uploadStore } from '../store';
+import { uploadStore } from '../store';
 import { UploadProgress, UploadStatus } from '../types';
 import { UploadStatusItem } from './UploadStatusItem';
 
 type UploadStatusListProps = {
   currentWidth?: number;
-  uploadStore: UploadStore;
 };
 
 type UploadStatusListRowProps = {