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

* 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>
2021-05-17 11:29:11 -07:00
parent 3b10eb58ea
commit cf27e20bf2
3 changed files with 54 additions and 38 deletions
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
@@ -14,7 +14,7 @@
 // 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/>.

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@material-ui/core/Grid";
 import { Button, LinearProgress } from "@material-ui/core";
@@ -25,6 +25,7 @@ import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import { BucketEncryptionInfo } from "../types";

 const styles = (theme: Theme) =>
  createStyles({
@@ -46,6 +47,7 @@ interface IEnableBucketEncryptionProps {
  classes: any;
  open: boolean;
  encryptionEnabled: boolean;
+  encryptionCfg: BucketEncryptionInfo | null;
  selectedBucket: string;
  closeModalAndRefresh: () => void;
  setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
@@ -55,15 +57,25 @@ const EnableBucketEncryption = ({
  classes,
  open,
  encryptionEnabled,
+  encryptionCfg,
  selectedBucket,
  closeModalAndRefresh,
  setModalErrorSnackMessage,
 }: IEnableBucketEncryptionProps) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [kmsKeyID, setKmsKeyID] = useState<string>("");
-  const [encryptionType, setEncryptionType] = useState<string>(
-    encryptionEnabled ? "sse-s3" : "disabled"
-  );
+  const [encryptionType, setEncryptionType] = useState<string>("disabled");
+
+  useEffect(() => {
+    if (encryptionCfg) {
+      if (encryptionCfg.algorithm === "AES256") {
+        setEncryptionType("sse-s3");
+      } else {
+        setEncryptionType("sse-kms");
+        setKmsKeyID(encryptionCfg.kmsMasterKeyID);
+      }
+    }
+  }, []);

  const enableBucketEncryption = (event: React.FormEvent) => {
    event.preventDefault();
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
@@ -14,10 +14,10 @@
 // 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/>.

-import React, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 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 get from "lodash/get";
 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 Tab from "@material-ui/core/Tab";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Checkbox from "@material-ui/core/Checkbox";
 import Typography from "@material-ui/core/Typography";
 import api from "../../../../common/api";
 import {
@@ -65,7 +64,6 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import AddReplicationModal from "./AddReplicationModal";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import EnableBucketEncryption from "./EnableBucketEncryption";
-import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
 import EnableVersioningModal from "./EnableVersioningModal";
 import UsageIcon from "../../../../icons/UsageIcon";
 import AddPolicy from "../../Policies/AddPolicy";
@@ -265,6 +263,8 @@ const ViewBucket = ({
  const [isVersioned, setIsVersioned] = useState<boolean>(false);
  const [hasObjectLocking, setHasObjectLocking] = useState<boolean>(false);
  const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false);
+  const [encryptionCfg, setEncryptionCfg] =
+    useState<BucketEncryptionInfo | null>(null);
  const [retentionConfigOpen, setRetentionConfigOpen] =
    useState<boolean>(false);
  const [policyEdit, setPolicyEdit] = useState<any>(null);
@@ -477,6 +477,7 @@ const ViewBucket = ({
        .then((res: BucketEncryptionInfo) => {
          if (res.algorithm) {
            setEncryptionEnabled(true);
+            setEncryptionCfg(res);
          }
          setLoadingEncryption(false);
        })
@@ -485,6 +486,7 @@ const ViewBucket = ({
            err === "The server side encryption configuration was not found"
          ) {
            setEncryptionEnabled(false);
+            setEncryptionCfg(null);
          }
          setLoadingEncryption(false);
        });
@@ -718,6 +720,7 @@ const ViewBucket = ({
          open={enableEncryptionScreenOpen}
          selectedBucket={bucketName}
          encryptionEnabled={encryptionEnabled}
+          encryptionCfg={encryptionCfg}
          closeModalAndRefresh={closeEnableBucketEncryption}
        />
      )}
@@ -846,15 +849,23 @@ const ViewBucket = ({
                      </td>
                      <td>Encryption:</td>
                      <td>
-                        <Checkbox
-                          color="primary"
-                          className={classes.encCheckbox}
-                          inputProps={{
-                            "aria-label": "secondary checkbox",
-                          }}
-                          onChange={(event) => handleEncryptionCheckbox(event)}
-                          checked={encryptionEnabled}
-                        />
+                        {loadingEncryption ? (
+                          <CircularProgress
+                            color="primary"
+                            size={16}
+                            variant="indeterminate"
+                          />
+                        ) : (
+                          <Button
+                            color="primary"
+                            className={classes.anchorButton}
+                            onClick={() => {
+                              setEnableEncryptionScreenOpen(true);
+                            }}
+                          >
+                            {encryptionEnabled ? "Enabled" : "Disabled"}
+                          </Button>
+                        )}
                      </td>
                    </tr>
                    <tr>
@@ -880,10 +891,10 @@ const ViewBucket = ({
                </Grid>
                <Grid xs={3} className={classes.reportedUsage}>
                  <Grid container direction="row" alignItems="center">
-                    <Grid item className={classes.icon}>
+                    <Grid item className={classes.icon} xs={2}>
                      <UsageIcon />
                    </Grid>
-                    <Grid item>
+                    <Grid item xs={10}>
                      <Typography className={classes.elementTitle}>
                        Reported Usage
                      </Typography>
@@ -914,17 +925,13 @@ const ViewBucket = ({
                          />
                        ) : (
                          <Fragment>
-                            {isVersioned && !loadingVersioning ? "Yes" : "No"}
-                            &nbsp;
-                            <IconButton
+                            <Button
                              color="primary"
-                              aria-label="retention"
-                              size="small"
-                              className={classes.propertiesIcon}
+                              className={classes.anchorButton}
                              onClick={setBucketVersioning}
                            >
-                              <PencilIcon active={true} />
-                            </IconButton>
+                              {isVersioned ? "Enabled" : "Disabled"}
+                            </Button>
                          </Fragment>
                        )}
                      </td>
@@ -954,18 +961,15 @@ const ViewBucket = ({
                              />
                            ) : (
                              <Fragment>
-                                &nbsp;
-                                <IconButton
+                                <Button
                                  color="primary"
-                                  aria-label="retention"
-                                  size="small"
-                                  className={classes.propertiesIcon}
+                                  className={classes.anchorButton}
                                  onClick={() => {
                                    setRetentionConfigOpen(true);
                                  }}
                                >
-                                  <PencilIcon active={true} />
-                                </IconButton>
+                                  Configure
+                                </Button>
                              </Fragment>
                            )}
                          </td>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -33,7 +33,6 @@ import {
  Menu,
  MenuItem,
  TextField,
-  Typography,
 } from "@material-ui/core";
 import Tabs from "@material-ui/core/Tabs";
 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 UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 import UpdateTenantModal from "./UpdateTenantModal";
-import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
 import { LicenseInfo } from "../../License/types";
 import { Link } from "react-router-dom";
 import { setErrorSnackMessage } from "../../../../actions";
-import Moment from "react-moment";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import TenantYAML from "./TenantYAML";
-import Checkbox from "@material-ui/core/Checkbox";
 import SubnetLicenseTenant from "./SubnetLicenseTenant";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
@@ -510,6 +506,10 @@ const TenantDetails = ({
                          </React.Fragment>
                        )}
                      </tr>
+                      <tr>
+                        <td>State:</td>
+                        <td colSpan={3}>{tenant?.currentState}</td>
+                      </tr>
                    </table>
                  </Grid>
                  <Grid item xs={4}>