-
+
+
+
+
+ {
+ setRetentionConfigOpen(true);
+ }}
+ isLoading={loadingRetention}
+ />
+
+
+ {retentionConfig && retentionConfig.mode
+ ? retentionConfig.mode
+ : "-"}
+
+ }
+ />
+
+ {retentionConfig && retentionConfig.validity}{" "}
+ {retentionConfig &&
+ (retentionConfig.validity === 1
+ ? retentionConfig.unit.slice(0, -1)
+ : retentionConfig.unit)}
+
+ }
+ />
+
+
+
+ {/*Spacer*/}
+
+
)}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
new file mode 100644
index 000000000..5179a1d11
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
@@ -0,0 +1,66 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import { Button, CircularProgress } from "@mui/material";
+
+type ActionLinkProps = {
+ isLoading: boolean;
+ onClick: () => void;
+ classes?: any;
+ label: any;
+ [x: string]: any;
+};
+const ActionLink = ({
+ isLoading,
+ onClick,
+ label,
+ ...restProps
+}: ActionLinkProps) => {
+ return (
+
+ );
+};
+
+export default ActionLink;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx
new file mode 100644
index 000000000..e48d7e13a
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx
@@ -0,0 +1,61 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import { Box } from "@mui/material";
+import { niceBytes } from "../../../../../common/utils";
+import { HardBucketQuotaIcon } from "../../../../../icons";
+
+const BucketQuotaSize = ({ quota }: { quota: any }) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BucketQuotaSize;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
new file mode 100644
index 000000000..4c9e6afb0
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
@@ -0,0 +1,185 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+import React, { useEffect, useState } from "react";
+import { Bucket } from "../../../Watch/types";
+import { ErrorResponseHandler } from "../../../../../common/types";
+import useApi from "../../../Common/Hooks/useApi";
+import { Box, CircularProgress } from "@mui/material";
+import { IAM_SCOPES } from "../../../../../common/SecureComponent/permissions";
+import SecureComponent from "../../../../../common/SecureComponent/SecureComponent";
+import get from "lodash/get";
+import Chip from "@mui/material/Chip";
+import CloseIcon from "@mui/icons-material/Close";
+import AddIcon from "@mui/icons-material/Add";
+import withSuspense from "../../../Common/Components/withSuspense";
+
+const AddBucketTagModal = withSuspense(
+ React.lazy(() => import("../AddBucketTagModal"))
+);
+const DeleteBucketTagModal = withSuspense(
+ React.lazy(() => import("../DeleteBucketTagModal"))
+);
+
+type BucketTagProps = {
+ setErrorSnackMessage: (err: ErrorResponseHandler) => void;
+ bucketName: string;
+};
+
+const BucketTags = ({ setErrorSnackMessage, bucketName }: BucketTagProps) => {
+ const [tags, setTags] = useState(null);
+ const [tagModalOpen, setTagModalOpen] = useState(false);
+ const [tagKeys, setTagKeys] = useState([]);
+ const [selectedTag, setSelectedTag] = useState(["", ""]);
+ const [deleteTagModalOpen, setDeleteTagModalOpen] = useState(false);
+
+ const closeAddTagModal = (refresh: boolean) => {
+ setTagModalOpen(false);
+ if (refresh) {
+ fetchTags();
+ }
+ };
+
+ const deleteTag = (tagKey: string, tagLabel: string) => {
+ setSelectedTag([tagKey, tagLabel]);
+ setDeleteTagModalOpen(true);
+ };
+
+ const closeDeleteTagModal = (refresh: boolean) => {
+ setDeleteTagModalOpen(false);
+
+ if (refresh) {
+ fetchTags();
+ }
+ };
+
+ const onTagLoaded = (res: Bucket) => {
+ if (res != null && res?.details != null) {
+ setTags(res?.details?.tags);
+ setTagKeys(Object.keys(res?.details?.tags));
+ }
+ };
+
+ const onTagLoadFailed = (err: ErrorResponseHandler) => {
+ setErrorSnackMessage(err);
+ };
+
+ const [isLoading, invokeTagsApi] = useApi(onTagLoaded, onTagLoadFailed);
+
+ const fetchTags = () => {
+ invokeTagsApi("GET", `/api/v1/buckets/${bucketName}`);
+ };
+
+ useEffect(() => {
+ fetchTags();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [bucketName]);
+
+ return (
+
+ {isLoading ? (
+
+ ) : null}
+
+
+
+ {tagKeys &&
+ tagKeys.map((tagKey: any, index: any) => {
+ const tag = get(tags, `${tagKey}`, "");
+ if (tag !== "") {
+ return (
+
+ }
+ onDelete={() => {
+ deleteTag(tagKey, tag);
+ }}
+ />
+
+ );
+ }
+ return null;
+ })}
+
+
+
+ }
+ clickable
+ size="small"
+ label="Add tag"
+ color="primary"
+ variant="outlined"
+ onClick={() => {
+ setTagModalOpen(true);
+ }}
+ />
+
+
+
+
+ {/** Modals **/}
+
+ {tagModalOpen && (
+
+ )}
+ {deleteTagModalOpen && (
+
+ )}
+
+ );
+};
+
+export default BucketTags;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx
new file mode 100644
index 000000000..38d489ee0
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx
@@ -0,0 +1,56 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import { IconButton } from "@mui/material";
+import EditIcon from "../../../../../icons/EditIcon";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+
+type EditActionButtonProps = {
+ disabled?: boolean;
+ onClick: () => void | any;
+ [x: string]: any;
+};
+
+const styles = (theme: Theme) =>
+ createStyles({
+ root: {
+ "&:hover": {
+ backgroundColor: "#E2E2E2",
+ },
+ },
+ });
+
+const EditActionButton = ({
+ disabled,
+ onClick,
+ ...restProps
+}: EditActionButtonProps) => {
+ return (
+
+
+
+ );
+};
+
+export default withStyles(styles)(EditActionButton);
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
new file mode 100644
index 000000000..44bec014e
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
@@ -0,0 +1,95 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import LabelValuePair from "../../../Common/UsageBarWrapper/LabelValuePair";
+import SecureComponent from "../../../../../common/SecureComponent/SecureComponent";
+import ActionLink from "./ActionLink";
+import { Box } from "@mui/material";
+import EditActionButton from "./EditActionButton";
+
+type PolicyItemProps = {
+ isLoading: boolean;
+ resourceName: string;
+ iamScopes: string[];
+ property: any;
+ value: any;
+ onEdit: () => void;
+};
+
+const SecureAction = ({
+ resourceName,
+ iamScopes,
+ children,
+}: {
+ resourceName: string;
+ iamScopes: string[];
+ children: any;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const EditablePropertyItem = ({
+ isLoading = true,
+ resourceName = "",
+ iamScopes,
+ property = null,
+ value = null,
+ onEdit,
+}: PolicyItemProps) => {
+ return (
+
+
+
+
+ }
+ />
+
+
+
+
+ );
+};
+
+export default EditablePropertyItem;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx
new file mode 100644
index 000000000..8284c81b3
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx
@@ -0,0 +1,48 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import { Box } from "@mui/material";
+
+type LabelWithIconProps = {
+ icon: React.ReactNode | null;
+ label: React.ReactNode | null;
+};
+
+const LabelWithIcon = ({ icon = null, label = null }: LabelWithIconProps) => {
+ return (
+
+
+ {icon}
+
+
{label}
+
+ );
+};
+
+export default LabelWithIcon;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
new file mode 100644
index 000000000..c69b7c12a
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
@@ -0,0 +1,81 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { IconButtonProps } from "@mui/material";
+
+type DeleteButtonProps = {
+ onClick: (e: any) => void;
+ text?: string;
+ disabled?: boolean;
+ size?: string;
+ tooltip?: string;
+ classes?: any;
+ icon?: React.ReactNode;
+};
+
+const styles = (theme: Theme) =>
+ createStyles({
+ root: {
+ "& .min-icon": {
+ width: 12,
+ marginLeft: "5px",
+ "@media (max-width: 900px)": {
+ width: 16,
+ marginLeft: 0,
+ },
+ },
+ },
+ });
+
+const RBIconButton = ({
+ onClick,
+ text = "",
+ disabled = false,
+ tooltip,
+ classes,
+ icon = null,
+ ...restProps
+}: Partial & DeleteButtonProps) => {
+ return (
+
+ {text} {icon}
+
+ );
+};
+export default withStyles(styles)(RBIconButton);
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx
new file mode 100644
index 000000000..fc1243ee3
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx
@@ -0,0 +1,60 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import { Box } from "@mui/material";
+import { niceBytes } from "../../../../../common/utils";
+import { ReportedUsageFullIcon } from "../../../../../icons";
+
+const ReportedUsage = ({ bucketSize }: { bucketSize: string }) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ReportedUsage;
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index 57e1029db..0b45a867e 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -18,6 +18,7 @@ import React, {
Fragment,
useCallback,
useEffect,
+ useMemo,
useRef,
useState,
} from "react";
@@ -163,6 +164,25 @@ const styles = (theme: Theme) =>
...containerForHeader(theme.spacing(4)),
});
+const baseDnDStyle = {
+ borderWidth: 2,
+ borderRadius: 2,
+ borderColor: "#eeeeee",
+ outline: "none",
+};
+
+const activeDnDStyle = {
+ borderStyle: "dashed",
+ backgroundColor: "#fafafa",
+ borderColor: "#2196f3",
+};
+
+const acceptDnDStyle = {
+ borderStyle: "dashed",
+ backgroundColor: "#fafafa",
+ borderColor: "#00e676",
+};
+
interface IListObjectsProps {
classes: any;
match: any;
@@ -355,7 +375,8 @@ const ListObjects = ({
api
.invoke(
"GET",
- `/api/v1/buckets/${bucketName}/rewind/${rewindParsed}${pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
+ `/api/v1/buckets/${bucketName}/rewind/${rewindParsed}${
+ pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
}`
)
.then((res: RewindObjectList) => {
@@ -404,7 +425,8 @@ const ListObjects = ({
api
.invoke(
"GET",
- `/api/v1/buckets/${bucketName}/objects${pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
+ `/api/v1/buckets/${bucketName}/objects${
+ pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
}`
)
.then((res: BucketObjectsList) => {
@@ -438,7 +460,8 @@ const ListObjects = ({
api
.invoke(
"GET",
- `/api/v1/buckets/${bucketName}/rewind/${rewindParsed}${pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
+ `/api/v1/buckets/${bucketName}/rewind/${rewindParsed}${
+ pathPrefix ? `?prefix=${encodeFileName(pathPrefix)}` : ``
}`
)
.then((res: RewindObjectList) => {
@@ -463,7 +486,8 @@ const ListObjects = ({
api
.invoke(
"GET",
- `/api/v1/buckets/${bucketName}/objects${internalPaths ? `?prefix=${internalPaths}` : ``
+ `/api/v1/buckets/${bucketName}/objects${
+ internalPaths ? `?prefix=${internalPaths}` : ``
}`
)
.then((res: BucketObjectsList) => {
@@ -647,8 +671,9 @@ const ListObjects = ({
};
const openPath = (idElement: string) => {
- const newPath = `/buckets/${bucketName}/browse${idElement ? `/${encodeFileName(idElement)}` : ``
- }`;
+ const newPath = `/buckets/${bucketName}/browse${
+ idElement ? `/${encodeFileName(idElement)}` : ``
+ }`;
history.push(newPath);
return;
};
@@ -691,7 +716,8 @@ const ListObjects = ({
.join("/");
encodedPath = encodeFileName(
- `${path}${finalFolderPath}${!finalFolderPath.endsWith("/") ? "/" : ""
+ `${path}${finalFolderPath}${
+ !finalFolderPath.endsWith("/") ? "/" : ""
}`
);
}
@@ -718,10 +744,12 @@ const ListObjects = ({
xhr.open("POST", uploadUrl, true);
const areMultipleFiles = files.length > 1;
- const errorMessage = `An error occurred while uploading the file${areMultipleFiles ? "s" : ""
- }.`;
- const okMessage = `Object${areMultipleFiles ? "s" : ``
- } uploaded successfully.`;
+ const errorMessage = `An error occurred while uploading the file${
+ areMultipleFiles ? "s" : ""
+ }.`;
+ const okMessage = `Object${
+ areMultipleFiles ? "s" : ``
+ } uploaded successfully.`;
xhr.withCredentials = false;
xhr.onload = function (event) {
@@ -813,10 +841,20 @@ const ListObjects = ({
[uploadObject]
);
- const { getRootProps, getInputProps } = useDropzone({
- noClick: true,
- onDrop,
- });
+ const { getRootProps, getInputProps, isDragActive, isDragAccept } =
+ useDropzone({
+ noClick: true,
+ onDrop,
+ });
+
+ const dndStyles = useMemo(
+ () => ({
+ ...baseDnDStyle,
+ ...(isDragActive ? activeDnDStyle : {}),
+ ...(isDragAccept ? acceptDnDStyle : {}),
+ }),
+ [isDragActive, isDragAccept]
+ );
const openPreview = (fileObject: BucketObject) => {
setSelectedPreview(fileObject);
@@ -1288,7 +1326,7 @@ const ListObjects = ({
-