From 37d9ab321743800f9be405f49e4478cb55b98478 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Wed, 22 Sep 2021 11:56:48 -0700 Subject: [PATCH 1/2] Object Details Loading + NPE Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../Objects/ObjectDetails/ObjectDetails.tsx | 670 +++++++++--------- .../Buckets/ListBuckets/Objects/utils.ts | 1 + 2 files changed, 346 insertions(+), 325 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx index 5cb41c79d9..18bb15668d 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx @@ -23,6 +23,7 @@ import clsx from "clsx"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import { CircularProgress, + LinearProgress, Paper, Table, TableBody, @@ -246,7 +247,8 @@ const ObjectDetails = ({ const [deleteTagModalOpen, setDeleteTagModalOpen] = useState(false); const [selectedTag, setSelectedTag] = useState(["", ""]); const [legalholdOpen, setLegalholdOpen] = useState(false); - const [actualInfo, setActualInfo] = useState(emptyFile); + // const [actualInfo, setActualInfo] = useState(emptyFile); + const [actualInfo, setActualInfo] = useState(null); const [versions, setVersions] = useState([]); const [filterVersion, setFilterVersion] = useState(""); const [deleteOpen, setDeleteOpen] = useState(false); @@ -259,14 +261,6 @@ const ObjectDetails = ({ const allPathData = internalPaths.split("/"); const currentItem = allPathData.pop(); - const previewObject: BucketObject = { - name: actualInfo.name, - version_id: actualInfo.version_id || "null", - size: parseInt(actualInfo.size || "0"), - content_type: "", - last_modified: new Date(actualInfo.last_modified), - }; - useEffect(() => { if (loadObjectData) { const encodedPath = encodeURIComponent(internalPaths); @@ -328,7 +322,7 @@ const ObjectDetails = ({ let tagKeys: string[] = []; - if (actualInfo.tags) { + if (actualInfo && actualInfo.tags) { tagKeys = Object.keys(actualInfo.tags); } @@ -448,7 +442,7 @@ const ObjectDetails = ({ return ( - {shareFileModalOpen && ( + {shareFileModalOpen && actualInfo && ( )} - {retentionModalOpen && ( + {retentionModalOpen && actualInfo && ( )} - {tagModalOpen && ( + {tagModalOpen && actualInfo && ( )} - {deleteTagModalOpen && ( + {deleteTagModalOpen && actualInfo && ( )} - {legalholdOpen && ( + {legalholdOpen && actualInfo && ( - - - - - } - title={currentItem} - subTitle={ - - - - } - actions={ - - - { - shareObject(); - }} - disabled={actualInfo.is_delete_marker} - > - - - - - {downloadingFiles.includes( - `${bucketName}/${actualInfo.name}` - ) ? ( -
- + + + )} + + {actualInfo && ( + + + + + + } + title={currentItem} + subTitle={ + + + + } + actions={ + + + { + shareObject(); + }} + disabled={actualInfo.is_delete_marker} + > + + + + + {downloadingFiles.includes( + `${bucketName}/${actualInfo.name}` + ) ? ( +
+ +
+ ) : ( + + { + downloadObject(actualInfo); + }} + disabled={actualInfo.is_delete_marker} + > + + + + )} + + + { + setDeleteOpen(true); + }} + disabled={actualInfo.is_delete_marker} + > + + + + + } + /> + + + + { + setSelectedTab(0); + }} + > + + + { + setSelectedTab(1); + }} + disabled={ + !(actualInfo.version_id && actualInfo.version_id !== "null") + } + > + + + { + setSelectedTab(2); + }} + disabled={extensionPreview(currentItem) === "none"} + > + + + + + + + +
+

Details

- ) : ( - - { - downloadObject(actualInfo); - }} - disabled={actualInfo.is_delete_marker} - > - - - - )} - - - { - setDeleteOpen(true); - }} - disabled={actualInfo.is_delete_marker} - > - - - - - } - /> - - - - { - setSelectedTab(0); - }} - > - - - { - setSelectedTab(1); - }} - disabled={ - !(actualInfo.version_id && actualInfo.version_id !== "null") - } - > - - - { - setSelectedTab(2); - }} - disabled={extensionPreview(currentItem) === "none"} - > - - - - - - - -
-

Details

-
-
- - - - - - - - - - - - - - - - - -
Legal Hold: - {actualInfo.version_id && - actualInfo.version_id !== "null" ? ( - - {actualInfo.legal_hold_status - ? actualInfo.legal_hold_status.toLowerCase() - : "Off"} +
+ + + + + + + + + + + + + + + + + + +
Legal Hold: + {actualInfo.version_id && + actualInfo.version_id !== "null" ? ( + + {actualInfo.legal_hold_status + ? actualInfo.legal_hold_status.toLowerCase() + : "Off"} + { + setLegalholdOpen(true); + }} + > + + + + ) : ( + "Disabled" + )} +
Retention: + {actualInfo.retention_mode + ? actualInfo.retention_mode.toLowerCase() + : "Undefined"} { - setLegalholdOpen(true); + openRetentionModal(); }} > - - ) : ( - "Disabled" +
Tags: + {tagKeys && + tagKeys.map((tagKey, index) => { + const tag = get( + actualInfo, + `tags.${tagKey}`, + "" + ); + if (tag !== "") { + return ( + } + onDelete={() => { + deleteTag(tagKey, tag); + }} + /> + ); + } + return null; + })} + } + clickable + size="small" + label="Add tag" + color="primary" + variant="outlined" + onClick={() => { + setTagModalOpen(true); + }} + /> +
+ + + +
+
+ + + +

Object Metadata

+
+ + + + + + {Object.keys(metadata).map((element, index) => { + return ( + + + {element} + + + {metadata[element]} + + + ); + })} + +
+ + + + + + +
+

Versions

+
+
+ + {actualInfo.version_id && + actualInfo.version_id !== "null" && ( + -
Retention: - {actualInfo.retention_mode - ? actualInfo.retention_mode.toLowerCase() - : "Undefined"} - { - openRetentionModal(); - }} - > - - -
Tags: - {tagKeys && - tagKeys.map((tagKey, index) => { - const tag = get( - actualInfo, - `tags.${tagKey}`, - "" - ); - if (tag !== "") { - return ( - } - onDelete={() => { - deleteTag(tagKey, tag); - }} - /> - ); - } - return null; - })} - } - clickable - size="small" - label="Add tag" - color="primary" - variant="outlined" - onClick={() => { - setTagModalOpen(true); - }} - /> -
- - - -
-
- - - -

Object Metadata

-
- - - - - - {Object.keys(metadata).map((element, index) => { - return ( - - - {element} - - - {metadata[element]} - - - ); - })} - -
- - - - - - -
-

Versions

-
-
- - {actualInfo.version_id && actualInfo.version_id !== "null" && ( - { - setFilterVersion(val.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), + id="search-resource" + label="" + onChange={(val) => { + setFilterVersion(val.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + )} + + + {actualInfo.version_id && + actualInfo.version_id !== "null" && ( + { + const versOrd = + versions.length - versions.indexOf(r); + return `v${versOrd}`; + }, + elementKey: "version_id", + }, + { label: "Version ID", elementKey: "version_id" }, + { + label: "Last Modified", + elementKey: "last_modified", + renderFunction: displayParsedDate, + }, + { + label: "Deleted", + width: 60, + contentTextAlign: "center", + renderFullObject: true, + elementKey: "is_delete_marker", + renderFunction: (r) => { + const versOrd = r.is_delete_marker + ? "Yes" + : "No"; + return `${versOrd}`; + }, + }, + ]} + isLoading={false} + entityName="Versions" + idField="version_id" + records={filteredRecords} + /> + )} + + + + + {selectedTab === 2 && actualInfo && ( + )} - - - {actualInfo.version_id && actualInfo.version_id !== "null" && ( - { - const versOrd = - versions.length - versions.indexOf(r); - return `v${versOrd}`; - }, - elementKey: "version_id", - }, - { label: "Version ID", elementKey: "version_id" }, - { - label: "Last Modified", - elementKey: "last_modified", - renderFunction: displayParsedDate, - }, - { - label: "Deleted", - width: 60, - contentTextAlign: "center", - renderFullObject: true, - elementKey: "is_delete_marker", - renderFunction: (r) => { - const versOrd = r.is_delete_marker ? "Yes" : "No"; - return `${versOrd}`; - }, - }, - ]} - isLoading={false} - entityName="Versions" - idField="version_id" - records={filteredRecords} - /> - )} - - - - - {selectedTab === 2 && ( - - )} - - - + + + + + )} ); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts index 31cb7a2c3a..9ddd482914 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts @@ -51,6 +51,7 @@ export const extensionPreview = ( "jpeg", "gif", "png", + "heic", ]; const textExtensions = ["pdf", "txt"]; const audioExtensions = ["wav", "mp3", "alac", "aiff", "dsd", "pcm"]; From 374bf0a3ae6fbcb12568118154d602d5b50ac81f Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Wed, 22 Sep 2021 12:02:02 -0700 Subject: [PATCH 2/2] remove commented line Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx index 18bb15668d..2d9bcecdd0 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx @@ -247,7 +247,6 @@ const ObjectDetails = ({ const [deleteTagModalOpen, setDeleteTagModalOpen] = useState(false); const [selectedTag, setSelectedTag] = useState(["", ""]); const [legalholdOpen, setLegalholdOpen] = useState(false); - // const [actualInfo, setActualInfo] = useState(emptyFile); const [actualInfo, setActualInfo] = useState(null); const [versions, setVersions] = useState([]); const [filterVersion, setFilterVersion] = useState("");