Added Show deleted objects functionality in objects list (#1681)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -62,6 +62,7 @@ import {
   resetRewind,
   setNewObject,
   setSearchObjects,
+  setShowDeletedObjects,
   setVersionsModeEnabled,
   updateProgress,
 } from "../../../../ObjectBrowser/actions";
@@ -101,6 +102,7 @@ import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 import ActionsListSection from "./ActionsListSection";
 import { listModeColumns, rewindModeColumns } from "./ListObjectsHelpers";
 import VersionsNavigator from "../ObjectDetails/VersionsNavigator";
+import CheckboxWrapper from "../../../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 
 const HistoryIcon = React.lazy(
   () => import("../../../../../../icons/HistoryIcon")
@@ -169,6 +171,10 @@ const styles = (theme: Theme) =>
       borderBottom: 0,
       padding: "0.8rem 15px 0",
     },
+    labelStyle: {
+      color: "#969FA8",
+      fontSize: "12px",
+    },
     ...objectBrowserExtras,
     ...objectBrowserCommon,
     ...containerForHeader(theme.spacing(4)),
@@ -203,6 +209,7 @@ interface IListObjectsProps {
   rewindDate: any;
   bucketToRewind: string;
   searchObjects: string;
+  showDeleted: boolean;
   setSnackBarMessage: typeof setSnackBarMessage;
   setErrorSnackMessage: typeof setErrorSnackMessage;
   resetRewind: typeof resetRewind;
@@ -217,6 +224,7 @@ interface IListObjectsProps {
   openList: typeof openList;
   setSearchObjects: typeof setSearchObjects;
   setVersionsModeEnabled: typeof setVersionsModeEnabled;
+  setShowDeletedObjects: typeof setShowDeletedObjects;
 }
 
 function useInterval(callback: any, delay: number) {
@@ -266,6 +274,8 @@ const ListObjects = ({
   versionsMode,
   openList,
   setVersionsModeEnabled,
+  showDeleted,
+  setShowDeletedObjects,
 }: IListObjectsProps) => {
   const [records, setRecords] = useState<BucketObject[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -493,10 +503,20 @@ const ListObjects = ({
         let currentTimestamp = Date.now();
         setLoadingStartTime(currentTimestamp);
         setLoadingMessage(defLoading);
+
+        let urlTake = `/api/v1/buckets/${bucketName}/objects`;
+
+        if (showDeleted) {
+          const currDate = new Date();
+          const currDateISO = currDate.toISOString();
+
+          urlTake = `/api/v1/buckets/${bucketName}/rewind/${currDateISO}`;
+        }
+
         api
           .invoke(
             "GET",
-            `/api/v1/buckets/${bucketName}/objects${
+            `${urlTake}${
               pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
             }`
           )
@@ -622,6 +642,7 @@ const ListObjects = ({
     rewindDate,
     internalPaths,
     bucketInfo,
+    showDeleted,
     displayListObjects,
   ]);
 
@@ -1054,6 +1075,11 @@ const ListObjects = ({
     }
   };
 
+  const setDeletedAction = () => {
+    setShowDeletedObjects(!showDeleted);
+    onClosePanel(true);
+  };
+
   const tableActions: ItemActions[] = [
     {
       type: "view",
@@ -1264,6 +1290,22 @@ const ListObjects = ({
             bucketName={bucketName}
             internalPaths={pageTitle}
             existingFiles={records || []}
+            additionalOptions={
+              !isVersioned || rewindEnabled ? null : (
+                <div>
+                  <CheckboxWrapper
+                    name={"deleted_objects"}
+                    id={"showDeletedObjects"}
+                    value={"deleted_on"}
+                    label={"Show deleted objects on this bucket"}
+                    onChange={setDeletedAction}
+                    checked={showDeleted}
+                    overrideLabelClasses={classes.labelStyle}
+                    noTopMargin
+                  />
+                </div>
+              )
+            }
           />
         </Grid>
         <div
@@ -1309,6 +1351,13 @@ const ListObjects = ({
                     triggerSort: sortChange,
                   }}
                   onSelectAll={selectAllItems}
+                  rowStyle={({ index }) => {
+                    if (payload[index]?.delete_flag) {
+                      return "deleted";
+                    }
+
+                    return "";
+                  }}
                 />
               </SecureComponent>
             )}
@@ -1355,6 +1404,7 @@ const mapStateToProps = ({ objectBrowser, buckets }: AppState) => ({
   loadingBucket: buckets.bucketDetails.loadingBucket,
   bucketInfo: buckets.bucketDetails.bucketInfo,
   searchObjects: objectBrowser.searchObjects,
+  showDeleted: objectBrowser.showDeleted,
 });
 
 const mapDispatchToProps = {
@@ -1369,6 +1419,7 @@ const mapDispatchToProps = {
   openList,
   setSearchObjects,
   setVersionsModeEnabled,
+  setShowDeletedObjects,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsHelpers.tsx

@@ -30,8 +30,8 @@ export const displayParsedDate = (object: BucketObject) => {
 };
 
 export const displayNiceBytes = (object: BucketObject) => {
-  if (object.name.endsWith("/")) {
-    return "";
+  if (object.name.endsWith("/") || !object.size) {
+    return "-";
   }
   return niceBytes(String(object.size));
 };
@@ -62,7 +62,7 @@ export const listModeColumns = [
     renderFunction: displayNiceBytes,
     renderFullObject: true,
     width: 60,
-    contentTextAlign: "right",
+    contentTextAlign: "center",
     enableSort: true,
   },
 ];
@@ -87,7 +87,7 @@ export const rewindModeColumns = [
     renderFunction: displayNiceBytes,
     renderFullObject: true,
     width: 60,
-    contentTextAlign: "right",
+    contentTextAlign: "center",
     enableSort: true,
   },
   {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/types.tsx

@@ -21,6 +21,7 @@ export interface BucketObject {
   last_modified: Date;
   content_type: string;
   version_id: string;
+  delete_flag?:boolean;
 }
 
 export interface BucketObjectsList {

portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx

@@ -34,7 +34,9 @@ interface CheckBoxProps {
   name: string;
   disabled?: boolean;
   tooltip?: string;
+  overrideLabelClasses?: string;
   index?: number;
+  noTopMargin?: boolean;
   checked: boolean;
 }
 
@@ -52,6 +54,9 @@ const styles = (theme: Theme) =>
       marginBottom: 0,
       flexBasis: "initial",
     },
+    noTopMargin: {
+      marginTop: 0,
+    },
   });
 
 const CheckboxWrapper = ({
@@ -62,12 +67,20 @@ const CheckboxWrapper = ({
   name,
   checked = false,
   disabled = false,
+  noTopMargin = false,
   tooltip = "",
+  overrideLabelClasses = "",
   classes,
 }: CheckBoxProps) => {
   return (
     <React.Fragment>
-      <Grid item xs={12} className={classes.fieldContainer}>
+      <Grid
+        item
+        xs={12}
+        className={`${classes.fieldContainer} ${
+          noTopMargin ? classes.noTopMargin : ""
+        }`}
+      >
         <div>
           <Checkbox
             name={name}
@@ -83,7 +96,10 @@ const CheckboxWrapper = ({
           />
         </div>
         {label !== "" && (
-          <InputLabel htmlFor={id} className={classes.noMinWidthLabel}>
+          <InputLabel
+            htmlFor={id}
+            className={`${classes.noMinWidthLabel} ${overrideLabelClasses}`}
+          >
             <span>{label}</span>
             {tooltip !== "" && (
               <div className={classes.tooltipContainer}>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -383,6 +383,9 @@ export const objectBrowserCommon = {
       minWidth: 16,
     },
   },
+  additionalOptions: {
+    paddingRight: "10px"
+  },
   smallLabel: {
     color: "#9C9C9C",
     fontSize: 15,

portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx

@@ -52,6 +52,7 @@ interface IObjectBrowser {
   versionsMode: boolean;
   versionedFile: string;
   existingFiles: BucketObject[];
+  additionalOptions?: React.ReactNode;
   setVersionsModeEnabled: typeof setVersionsModeEnabled;
 }
 
@@ -69,6 +70,7 @@ const BrowserBreadcrumbs = ({
   versionsMode,
   versionedFile,
   setVersionsModeEnabled,
+  additionalOptions,
 }: IObjectBrowser) => {
   const [createFolderOpen, setCreateFolderOpen] = useState<boolean>(false);
 
@@ -186,6 +188,9 @@ const BrowserBreadcrumbs = ({
         <div className={classes.breadcrumbsList} dir="rtl">
           {listBreadcrumbs}
         </div>
+        {additionalOptions && (
+          <div className={classes.additionalOptions}>{additionalOptions}</div>
+        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/ObjectBrowser/actions.ts

@@ -38,6 +38,7 @@ export const BUCKET_BROWSER_VERSIONS_SET_SEARCH =
   "BUCKET_BROWSER/VERSIONS_SET_SEARCH";
 export const BUCKET_BROWSER_SET_SELECTED_VERSION =
   "BUCKET_BROWSER/SET_SELECTED_VERSION";
+export const BUCKET_BROWSER_SHOW_DELETED = "BUCKET_BROWSER/SHOW_DELETED";
 
 interface RewindSetEnabled {
   type: typeof REWIND_SET_ENABLE;
@@ -108,6 +109,11 @@ interface SetSelectedversion {
   selectedVersion: string;
 }
 
+interface SetShowDeletedObjects {
+  type: typeof BUCKET_BROWSER_SHOW_DELETED;
+  status: boolean;
+}
+
 export type ObjectBrowserActionTypes =
   | RewindSetEnabled
   | RewindReset
@@ -122,7 +128,8 @@ export type ObjectBrowserActionTypes =
   | OMCloseList
   | SetSearchObjects
   | SetSearchVersions
-  | SetSelectedversion;
+  | SetSelectedversion
+  | SetShowDeletedObjects;
 
 export const setRewindEnable = (
   state: boolean,
@@ -227,3 +234,10 @@ export const setSelectedVersion = (selectedVersion: string) => {
     selectedVersion,
   };
 };
+
+export const setShowDeletedObjects = (status: boolean) => {
+  return {
+    type: BUCKET_BROWSER_SHOW_DELETED,
+    status
+  }
+};

portal-ui/src/screens/Console/ObjectBrowser/reducers.ts

@@ -29,6 +29,7 @@ import {
   OBJECT_MANAGER_SET_SEARCH_OBJECT,
   BUCKET_BROWSER_VERSIONS_SET_SEARCH,
   BUCKET_BROWSER_SET_SELECTED_VERSION,
+  BUCKET_BROWSER_SHOW_DELETED,
 } from "./actions";
 
 export interface Route {
@@ -51,6 +52,7 @@ export interface ObjectBrowserState {
   versionedFile: string;
   searchVersions: string;
   selectedVersion: string;
+  showDeleted: boolean;
 }
 
 export interface ObjectBrowserReducer {
@@ -91,6 +93,7 @@ const initialState: ObjectBrowserState = {
   versionedFile: "",
   searchVersions: "",
   selectedVersion: "",
+  showDeleted: false,
 };
 
 export function objectBrowserReducer(
@@ -245,6 +248,11 @@ export function objectBrowserReducer(
         ...state,
         selectedVersion: action.selectedVersion,
       };
+    case BUCKET_BROWSER_SHOW_DELETED:
+      return {
+        ...state,
+        showDeleted: action.status,
+      };
     default:
       return state;
   }