Added Show deleted objects functionality in objects list (#1681)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -21,6 +21,7 @@ export interface BucketObject {
|
||||
last_modified: Date;
|
||||
content_type: string;
|
||||
version_id: string;
|
||||
delete_flag?:boolean;
|
||||
}
|
||||
|
||||
export interface BucketObjectsList {
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -383,6 +383,9 @@ export const objectBrowserCommon = {
|
||||
minWidth: 16,
|
||||
},
|
||||
},
|
||||
additionalOptions: {
|
||||
paddingRight: "10px"
|
||||
},
|
||||
smallLabel: {
|
||||
color: "#9C9C9C",
|
||||
fontSize: 15,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user