From 3b10eb58ea50ed6a3f1b2965425fb17ca45abd3f Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Fri, 14 May 2021 17:05:02 -0700 Subject: [PATCH] Update View Bucket screen (#746) Also add a few refresh screen buttons and remove duplicate titles Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../Objects/ListObjects/ListObjects.tsx | 77 ++- .../Console/Buckets/ViewBucket/ViewBucket.tsx | 583 ++++++++++-------- .../FormComponents/common/styleLibrary.ts | 14 + .../Configurations/ConfigurationMain.tsx | 3 - .../ConfigurationsList.tsx | 8 +- .../ListNotificationEndpoints.tsx | 19 +- .../ListTiersConfiguration.tsx | 18 +- portal-ui/src/screens/Console/Menu/Menu.tsx | 11 +- .../Console/ObjectBrowser/BrowseBuckets.tsx | 41 +- .../Console/Tenants/AddTenant/AddTenant.tsx | 6 +- .../Tenants/TenantDetails/TenantDetails.tsx | 14 +- 11 files changed, 461 insertions(+), 333 deletions(-) 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 02a08d3d4..29a96a0f0 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 @@ -33,7 +33,7 @@ import { searchField, } from "../../../../Common/FormComponents/common/styleLibrary"; import PageHeader from "../../../../Common/PageHeader/PageHeader"; -import { Button, Input, Typography } from "@material-ui/core"; +import { Button, IconButton, Input, Typography } from "@material-ui/core"; import * as reactMoment from "react-moment"; import { CreateIcon } from "../../../../../../icons"; import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs"; @@ -59,6 +59,7 @@ import { setSnackBarMessage, setErrorSnackMessage, } from "../../../../../../actions"; +import RefreshIcon from "@material-ui/icons/Refresh"; const commonIcon = { backgroundRepeat: "no-repeat", @@ -129,6 +130,9 @@ const styles = (theme: Theme) => backgroundImage: "url(/images/ob_folder_filled.svg)", }, }, + listButton: { + marginLeft: "10px", + }, ...actionsTray, ...searchField, ...objectBrowserCommon, @@ -196,9 +200,8 @@ const ListObjects = ({ const [selectedBucket, setSelectedBucket] = useState(""); const [filterObjects, setFilterObjects] = useState(""); const [loadingStartTime, setLoadingStartTime] = useState(0); - const [loadingMessage, setLoadingMessage] = useState( - defLoading - ); + const [loadingMessage, setLoadingMessage] = + useState(defLoading); const updateMessage = () => { let timeDelta = Date.now() - loadingStartTime; @@ -542,34 +545,6 @@ const ListObjects = ({
-
- - -
+ { + setLoading(true); + }} + > + + + +
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx index 8aad8625c..911e997e2 100644 --- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx +++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx @@ -17,7 +17,7 @@ import React, { useEffect, useState, Fragment } from "react"; import { connect } from "react-redux"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; -import { Button, IconButton } from "@material-ui/core"; +import { Button, IconButton, TextField } from "@material-ui/core"; import * as reactMoment from "react-moment"; import get from "lodash/get"; import Paper from "@material-ui/core/Paper"; @@ -45,7 +45,13 @@ import { } from "../types"; import { CreateIcon } from "../../../../icons"; import { niceBytes } from "../../../../common/utils"; -import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary"; +import { + actionsTray, + buttonsStyles, + containerForHeader, + hrClass, + searchField, +} from "../../Common/FormComponents/common/styleLibrary"; import { setErrorSnackMessage } from "../../../../actions"; import { Policy } from "../../Policies/types"; import { User } from "../../Users/types"; @@ -67,6 +73,8 @@ import DeleteReplicationRule from "../ViewBucket/DeleteReplicationRule"; import EditLifecycleConfiguration from "./EditLifecycleConfiguration"; import AddLifecycleModal from "./AddLifecycleModal"; import history from "../../../../history"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import SearchIcon from "@material-ui/icons/Search"; const styles = (theme: Theme) => createStyles({ @@ -94,18 +102,6 @@ const styles = (theme: Theme) => }, }, }, - actionsTray: { - textAlign: "right", - "& button": { - marginLeft: 10, - }, - }, - searchField: { - background: "#FFFFFF", - padding: 12, - borderRadius: 5, - boxShadow: "0px 3px 6px #00000012", - }, noRecords: { lineHeight: "24px", textAlign: "center", @@ -178,9 +174,20 @@ const styles = (theme: Theme) => }, consumptionValue: { color: "#000000", - fontSize: "60px", + fontSize: "48px", fontWeight: "bold", }, + reportedUsage: { + padding: "15px", + }, + ...searchField, + ...actionsTray, + actionsTray: { + ...actionsTray.actionsTray, + padding: "15px 0 0", + }, + ...hrClass, + ...buttonsStyles, ...containerForHeader(theme.spacing(4)), }); @@ -786,12 +793,92 @@ const ViewBucket = ({ )} ${match.params["bucketName"]}`} /> - - - - - - + + + , newValue: number) => { + setCurTab(newValue); + }} + indicatorColor="primary" + textColor="primary" + aria-label="cluster-tabs" + variant="scrollable" + scrollButtons="auto" + > + + + {canGetReplication && } + + + {usersEnabled && } + + + + +
+ + + +

Details

+
+ + + + + + + + + + + {!hasObjectLocking ? ( + + + + + ) : ( + + + + + )} + +
Access Policy: + + Encryption: + handleEncryptionCheckbox(event)} + checked={encryptionEnabled} + /> +
Replication: + + {replicationRules.length ? "Enabled" : "Disabled"} + + Object Locking:Disabled
+ + @@ -805,77 +892,20 @@ const ViewBucket = ({ {niceBytes(bucketSize)} - + - - -
-
Access Policy:
-
- {loadingBucket ? ( - - ) : ( - accessPolicy.toLowerCase() - )} - { - setAccessPolicyScreenOpen(true); - }} - > - - -
-
Replication:
-
- {replicationRules.length ? "Yes" : "No"} -
- {!hasObjectLocking && ( - -
Object Locking:
-
No
- - )} -
Encryption:
-
- {loadingEncryption ? ( - - ) : encryptionEnabled ? ( - "Enabled" - ) : ( - "Disabled" - )} - - { - setEnableEncryptionScreenOpen(true); - }} - > - - -
-
- {hasObjectLocking && ( -
-
Object Locking
-
-
Versioning:
-
+ +
+
+ + + +

Versioning

+
+ + + + + +
Versioning: {loadingVersioning ? ( )} - -
Retention:
-
- {loadingVersioning ? ( - - ) : ( - -   - { - setRetentionConfigOpen(true); - }} - > - - - - )} -
- - )} - +
+ - - - +
- - - - , newValue: number) => { - setCurTab(newValue); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - {canGetReplication && ( - - )} - - {usersEnabled && } - - - - - {curTab === 0 && ( +
+ {hasObjectLocking && ( + + + +

Object Locking

+
+ + + + + + +
+ Retention: + {loadingVersioning ? ( + + ) : ( + +   + { + setRetentionConfigOpen(true); + }} + > + + + + )} +
+ + + + )} + + + + + { + // setFilter(event.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> - )} - {curTab === 1 && ( - - {canPutReplication && ( - - )} - - )} - {curTab === 4 && ( + + +
+ + + + + + + {canGetReplication && ( + + + + { + // setFilter(event.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + + +
+ + + + + + + )} + + + + { + // setFilter(event.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> - )} - - - - - - - {canGetReplication && ( - + + +
+ + - - )} - + + + + +
+ + + {usersEnabled && ( + +
- - {usersEnabled && ( - - - - )} - - - - + )} diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 41f50b02c..e7032e77a 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -577,5 +577,19 @@ export const buttonsStyles = { padding: 0, lineHeight: "unset" as const, height: "unset" as const, + width: "unset" as const, + textAlign: "left" as const, + border: 0, + minWidth: "unset" as const, + }, +}; + +export const hrClass = { + hrClass: { + borderTop: 0, + borderLeft: 0, + borderRight: 0, + borderColor: "#999999", + backgroundColor: "transparent" as const, }, }; diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx index 59c2cb837..8c6564ad1 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx @@ -52,9 +52,6 @@ const ConfigurationMain = ({ classes, session }: IConfigurationMain) => { - - All Settings - { - const [selectedConfiguration, setSelectedConfiguration] = useState( - initialConfiguration - ); + const [selectedConfiguration, setSelectedConfiguration] = + useState(initialConfiguration); const [currentConfiguration, setCurrentConfiguration] = useState(0); const tableActions = [ @@ -101,9 +100,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => { - - Configuration Types - - - Lambda Notification Targets - - + { + setIsLoading(true); + }} + > + + -
- )} + { + setLoading(true); + }} + > + + + {canCreateBucket && ( +
+ +
+ )}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx index 66ff98c8c..2e948edb0 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx @@ -83,10 +83,8 @@ const AddTenant = ({ }: IAddTenantProps) => { // Modals const [showNewCredentials, setShowNewCredentials] = useState(false); - const [ - createdAccount, - setCreatedAccount, - ] = useState(null); + const [createdAccount, setCreatedAccount] = + useState(null); // Fields const [addSending, setAddSending] = useState(false); diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx index 5084b49e9..7a0c7dbd7 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx @@ -22,6 +22,7 @@ import { actionsTray, buttonsStyles, containerForHeader, + hrClass, modalBasic, searchField, } from "../../Common/FormComponents/common/styleLibrary"; @@ -133,17 +134,11 @@ const styles = (theme: Theme) => textDecoration: "none", color: "black", }, - hrClass: { - borderTop: 0, - borderLeft: 0, - borderRight: 0, - borderColor: "#999999", - backgroundColor: "transparent", - }, ...modalBasic, ...actionsTray, ...buttonsStyles, ...searchField, + ...hrClass, actionsTray: { ...actionsTray.actionsTray, padding: "15px 0 0", @@ -174,9 +169,8 @@ const TenantDetails = ({ const [yamlScreenOpen, setYamlScreenOpen] = useState(false); const [licenseInfo, setLicenseInfo] = useState(); const [loadingLicenseInfo, setLoadingLicenseInfo] = useState(true); - const [loadingActivateProduct, setLoadingActivateProduct] = useState( - false - ); + const [loadingActivateProduct, setLoadingActivateProduct] = + useState(false); const [logEnabled, setLogEnabled] = useState(false); const [monitoringEnabled, setMonitoringEnabled] = useState(false); const [encryptionEnabled, setEncryptionEnabled] = useState(false);