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

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-03-07 23:17:06 -07:00
committed by GitHub
parent fbfc1557c7
commit 8008f226a8
8 changed files with 106 additions and 8 deletions

View File

@@ -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);

View File

@@ -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,
},
{

View File

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

View File

@@ -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}>

View File

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

View File

@@ -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>
);

View File

@@ -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
}
};

View File

@@ -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;
}