mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the current state to tenant details. Fix Enable/Disable Encryption (#749)

Browse Source 
* Add the current state to tenant details

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Fix the Enable

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Linting

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-05-17 11:29:11 -07:00
committed by GitHub
parent 3b10eb58ea
commit cf27e20bf2
3 changed files with 54 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
View File

@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import { Button, LinearProgress } from "@material-ui/core"; import { Button, LinearProgress } from "@material-ui/core";
@@ -25,6 +25,7 @@ import api from "../../../../common/api";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper"; import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper"; import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
import { BucketEncryptionInfo } from "../types";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
@@ -46,6 +47,7 @@ interface IEnableBucketEncryptionProps {
classes: any; classes: any;
open: boolean; open: boolean;
encryptionEnabled: boolean; encryptionEnabled: boolean;
encryptionCfg: BucketEncryptionInfo | null;
selectedBucket: string; selectedBucket: string;
closeModalAndRefresh: () => void; closeModalAndRefresh: () => void;
setModalErrorSnackMessage: typeof setModalErrorSnackMessage; setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
@@ -55,15 +57,25 @@ const EnableBucketEncryption = ({
classes, classes,
open, open,
encryptionEnabled, encryptionEnabled,
encryptionCfg,
selectedBucket, selectedBucket,
closeModalAndRefresh, closeModalAndRefresh,
setModalErrorSnackMessage, setModalErrorSnackMessage,
}: IEnableBucketEncryptionProps) => { }: IEnableBucketEncryptionProps) => {
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [kmsKeyID, setKmsKeyID] = useState<string>(""); const [kmsKeyID, setKmsKeyID] = useState<string>("");
const [encryptionType, setEncryptionType] = useState<string>( const [encryptionType, setEncryptionType] = useState<string>("disabled");
encryptionEnabled ? "sse-s3" : "disabled"
); useEffect(() => {
if (encryptionCfg) {
if (encryptionCfg.algorithm === "AES256") {
setEncryptionType("sse-s3");
} else {
setEncryptionType("sse-kms");
setKmsKeyID(encryptionCfg.kmsMasterKeyID);
}
}
}, []);
const enableBucketEncryption = (event: React.FormEvent) => { const enableBucketEncryption = (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();

64
portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
View File

@@ -14,10 +14,10 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState, Fragment } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { Button, IconButton, TextField } from "@material-ui/core"; import { Button, TextField } from "@material-ui/core";
import * as reactMoment from "react-moment"; import * as reactMoment from "react-moment";
import get from "lodash/get"; import get from "lodash/get";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
@@ -25,7 +25,6 @@ import Grid from "@material-ui/core/Grid";
import Tabs from "@material-ui/core/Tabs"; import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab"; import Tab from "@material-ui/core/Tab";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import api from "../../../../common/api"; import api from "../../../../common/api";
import { import {
@@ -65,7 +64,6 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import AddReplicationModal from "./AddReplicationModal"; import AddReplicationModal from "./AddReplicationModal";
import PageHeader from "../../Common/PageHeader/PageHeader"; import PageHeader from "../../Common/PageHeader/PageHeader";
import EnableBucketEncryption from "./EnableBucketEncryption"; import EnableBucketEncryption from "./EnableBucketEncryption";
import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
import EnableVersioningModal from "./EnableVersioningModal"; import EnableVersioningModal from "./EnableVersioningModal";
import UsageIcon from "../../../../icons/UsageIcon"; import UsageIcon from "../../../../icons/UsageIcon";
import AddPolicy from "../../Policies/AddPolicy"; import AddPolicy from "../../Policies/AddPolicy";
@@ -265,6 +263,8 @@ const ViewBucket = ({
const [isVersioned, setIsVersioned] = useState<boolean>(false); const [isVersioned, setIsVersioned] = useState<boolean>(false);
const [hasObjectLocking, setHasObjectLocking] = useState<boolean>(false); const [hasObjectLocking, setHasObjectLocking] = useState<boolean>(false);
const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false); const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false);
const [encryptionCfg, setEncryptionCfg] =
useState<BucketEncryptionInfo | null>(null);
const [retentionConfigOpen, setRetentionConfigOpen] = const [retentionConfigOpen, setRetentionConfigOpen] =
useState<boolean>(false); useState<boolean>(false);
const [policyEdit, setPolicyEdit] = useState<any>(null); const [policyEdit, setPolicyEdit] = useState<any>(null);
@@ -477,6 +477,7 @@ const ViewBucket = ({
.then((res: BucketEncryptionInfo) => { .then((res: BucketEncryptionInfo) => {
if (res.algorithm) { if (res.algorithm) {
setEncryptionEnabled(true); setEncryptionEnabled(true);
setEncryptionCfg(res);
} }
setLoadingEncryption(false); setLoadingEncryption(false);
}) })
@@ -485,6 +486,7 @@ const ViewBucket = ({
err === "The server side encryption configuration was not found" err === "The server side encryption configuration was not found"
) { ) {
setEncryptionEnabled(false); setEncryptionEnabled(false);
setEncryptionCfg(null);
} }
setLoadingEncryption(false); setLoadingEncryption(false);
}); });
@@ -718,6 +720,7 @@ const ViewBucket = ({
open={enableEncryptionScreenOpen} open={enableEncryptionScreenOpen}
selectedBucket={bucketName} selectedBucket={bucketName}
encryptionEnabled={encryptionEnabled} encryptionEnabled={encryptionEnabled}
encryptionCfg={encryptionCfg}
closeModalAndRefresh={closeEnableBucketEncryption} closeModalAndRefresh={closeEnableBucketEncryption}
/> />
)} )}
@@ -846,15 +849,23 @@ const ViewBucket = ({
</td> </td>
<td>Encryption:</td> <td>Encryption:</td>
<td> <td>
<Checkbox {loadingEncryption ? (
color="primary" <CircularProgress
className={classes.encCheckbox} color="primary"
inputProps={{ size={16}
"aria-label": "secondary checkbox", variant="indeterminate"
}} />
onChange={(event) => handleEncryptionCheckbox(event)} ) : (
checked={encryptionEnabled} <Button
/> color="primary"
className={classes.anchorButton}
onClick={() => {
setEnableEncryptionScreenOpen(true);
}}
>
{encryptionEnabled ? "Enabled" : "Disabled"}
</Button>
)}
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -880,10 +891,10 @@ const ViewBucket = ({
</Grid> </Grid>
<Grid xs={3} className={classes.reportedUsage}> <Grid xs={3} className={classes.reportedUsage}>
<Grid container direction="row" alignItems="center"> <Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}> <Grid item className={classes.icon} xs={2}>
<UsageIcon /> <UsageIcon />
</Grid> </Grid>
<Grid item> <Grid item xs={10}>
<Typography className={classes.elementTitle}> <Typography className={classes.elementTitle}>
Reported Usage Reported Usage
</Typography> </Typography>
@@ -914,17 +925,13 @@ const ViewBucket = ({
/> />
) : ( ) : (
<Fragment> <Fragment>
{isVersioned && !loadingVersioning ? "Yes" : "No"} <Button
&nbsp;
<IconButton
color="primary" color="primary"
aria-label="retention" className={classes.anchorButton}
size="small"
className={classes.propertiesIcon}
onClick={setBucketVersioning} onClick={setBucketVersioning}
> >
<PencilIcon active={true} /> {isVersioned ? "Enabled" : "Disabled"}
</IconButton> </Button>
</Fragment> </Fragment>
)} )}
</td> </td>
@@ -954,18 +961,15 @@ const ViewBucket = ({
/> />
) : ( ) : (
<Fragment> <Fragment>
&nbsp; <Button
<IconButton
color="primary" color="primary"
aria-label="retention" className={classes.anchorButton}
size="small"
className={classes.propertiesIcon}
onClick={() => { onClick={() => {
setRetentionConfigOpen(true); setRetentionConfigOpen(true);
}} }}
> >
<PencilIcon active={true} /> Configure
</IconButton> </Button>
</Fragment> </Fragment>
)} )}
</td> </td>

8
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
View File

@@ -33,7 +33,6 @@ import {
Menu, Menu,
MenuItem, MenuItem,
TextField, TextField,
Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import Tabs from "@material-ui/core/Tabs"; import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab"; import Tab from "@material-ui/core/Tab";
@@ -49,14 +48,11 @@ import { IPodListElement, IPool, ITenant } from "../ListTenants/types";
import PageHeader from "../../Common/PageHeader/PageHeader"; import PageHeader from "../../Common/PageHeader/PageHeader";
import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper"; import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
import UpdateTenantModal from "./UpdateTenantModal"; import UpdateTenantModal from "./UpdateTenantModal";
import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
import { LicenseInfo } from "../../License/types"; import { LicenseInfo } from "../../License/types";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { setErrorSnackMessage } from "../../../../actions"; import { setErrorSnackMessage } from "../../../../actions";
import Moment from "react-moment";
import MoreVertIcon from "@material-ui/icons/MoreVert"; import MoreVertIcon from "@material-ui/icons/MoreVert";
import TenantYAML from "./TenantYAML"; import TenantYAML from "./TenantYAML";
import Checkbox from "@material-ui/core/Checkbox";
import SubnetLicenseTenant from "./SubnetLicenseTenant"; import SubnetLicenseTenant from "./SubnetLicenseTenant";
import InputAdornment from "@material-ui/core/InputAdornment"; import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search"; import SearchIcon from "@material-ui/icons/Search";
@@ -510,6 +506,10 @@ const TenantDetails = ({
</React.Fragment> </React.Fragment>
)} )}
</tr> </tr>
<tr>
<td>State:</td>
<td colSpan={3}>{tenant?.currentState}</td>
</tr>
</table> </table>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4}>