Change bucket encryption configuration UI (#745)

Replace checkbox with pencil icon component to open the bucket encryption configuration Signed-off-by: Lenin Alevski <alevsk.8772@gmail.com>
2026-07-01 07:41:18 -07:00 · 2021-05-14 15:54:14 -07:00
parent 2769ba145a
commit 98b4012dde
15 changed files with 96 additions and 81 deletions
--- a/portal-ui/build/asset-manifest.json
+++ b/portal-ui/build/asset-manifest.json
@@ -1,25 +1,25 @@
 {
  "files": {
    "main.css": "/static/css/main.a19f3d53.chunk.css",
-    "main.js": "/static/js/main.914482b9.chunk.js",
-    "main.js.map": "/static/js/main.914482b9.chunk.js.map",
+    "main.js": "/static/js/main.b56fe359.chunk.js",
+    "main.js.map": "/static/js/main.b56fe359.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.f48e99e5.js",
    "runtime-main.js.map": "/static/js/runtime-main.f48e99e5.js.map",
-    "static/css/2.76b14b73.chunk.css": "/static/css/2.76b14b73.chunk.css",
-    "static/js/2.0255e016.chunk.js": "/static/js/2.0255e016.chunk.js",
-    "static/js/2.0255e016.chunk.js.map": "/static/js/2.0255e016.chunk.js.map",
+    "static/css/2.f324abd6.chunk.css": "/static/css/2.f324abd6.chunk.css",
+    "static/js/2.6dd0fb26.chunk.js": "/static/js/2.6dd0fb26.chunk.js",
+    "static/js/2.6dd0fb26.chunk.js.map": "/static/js/2.6dd0fb26.chunk.js.map",
    "index.html": "/index.html",
-    "static/css/2.76b14b73.chunk.css.map": "/static/css/2.76b14b73.chunk.css.map",
+    "static/css/2.f324abd6.chunk.css.map": "/static/css/2.f324abd6.chunk.css.map",
    "static/css/main.a19f3d53.chunk.css.map": "/static/css/main.a19f3d53.chunk.css.map",
-    "static/js/2.0255e016.chunk.js.LICENSE.txt": "/static/js/2.0255e016.chunk.js.LICENSE.txt",
+    "static/js/2.6dd0fb26.chunk.js.LICENSE.txt": "/static/js/2.6dd0fb26.chunk.js.LICENSE.txt",
    "static/media/minio_console_logo.0837460e.svg": "/static/media/minio_console_logo.0837460e.svg",
    "static/media/minio_operator_logo.1312b7c9.svg": "/static/media/minio_operator_logo.1312b7c9.svg"
  },
  "entrypoints": [
    "static/js/runtime-main.f48e99e5.js",
-    "static/css/2.76b14b73.chunk.css",
-    "static/js/2.0255e016.chunk.js",
+    "static/css/2.f324abd6.chunk.css",
+    "static/js/2.6dd0fb26.chunk.js",
    "static/css/main.a19f3d53.chunk.css",
-    "static/js/main.914482b9.chunk.js"
+    "static/js/main.b56fe359.chunk.js"
  ]
 }
--- a/portal-ui/build/index.html
+++ b/portal-ui/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="/static/css/2.76b14b73.chunk.css" rel="stylesheet"><link href="/static/css/main.a19f3d53.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/static/js/2.0255e016.chunk.js"></script><script src="/static/js/main.914482b9.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="/static/css/2.f324abd6.chunk.css" rel="stylesheet"><link href="/static/css/main.a19f3d53.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/static/js/2.6dd0fb26.chunk.js"></script><script src="/static/js/main.b56fe359.chunk.js"></script></body></html>
--- a/portal-ui/build/static/css/2.f324abd6.chunk.css
+++ b/portal-ui/build/static/css/2.f324abd6.chunk.css
@@ -1,2 +1,2 @@
 .ReactVirtualized__Table__headerRow{font-weight:700;text-transform:uppercase}.ReactVirtualized__Table__headerRow,.ReactVirtualized__Table__row{display:flex;flex-direction:row;align-items:center}.ReactVirtualized__Table__headerTruncatedText{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn{margin-right:10px;min-width:0}.ReactVirtualized__Table__rowColumn{text-overflow:ellipsis;white-space:nowrap}.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type{margin-left:10px}.ReactVirtualized__Table__sortableHeaderColumn{cursor:pointer}.ReactVirtualized__Table__sortableHeaderIconContainer{display:flex;align-items:center}.ReactVirtualized__Table__sortableHeaderIcon{flex:0 0 24px;height:1em;width:1em;fill:currentColor}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item img{pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform}.react-grid-item.resizing{z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e,.react-grid-item>.react-resizable-handle.react-resizable-handle-w{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZ6IiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+");background-position:100% 100%;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
-/*# sourceMappingURL=2.76b14b73.chunk.css.map */
+/*# sourceMappingURL=2.f324abd6.chunk.css.map */
--- a/portal-ui/build/static/css/2.f324abd6.chunk.css.map
+++ b/portal-ui/build/static/css/2.f324abd6.chunk.css.map
--- a/portal-ui/build/static/js/2.6dd0fb26.chunk.js
+++ b/portal-ui/build/static/js/2.6dd0fb26.chunk.js
--- a/portal-ui/build/static/js/2.6dd0fb26.chunk.js.LICENSE.txt
+++ b/portal-ui/build/static/js/2.6dd0fb26.chunk.js.LICENSE.txt
--- a/portal-ui/build/static/js/2.6dd0fb26.chunk.js.map
+++ b/portal-ui/build/static/js/2.6dd0fb26.chunk.js.map
--- a/portal-ui/build/static/js/main.914482b9.chunk.js
+++ b/portal-ui/build/static/js/main.914482b9.chunk.js
--- a/portal-ui/build/static/js/main.914482b9.chunk.js.map
+++ b/portal-ui/build/static/js/main.914482b9.chunk.js.map
--- a/portal-ui/build/static/js/main.b56fe359.chunk.js
+++ b/portal-ui/build/static/js/main.b56fe359.chunk.js
--- a/portal-ui/build/static/js/main.b56fe359.chunk.js.map
+++ b/portal-ui/build/static/js/main.b56fe359.chunk.js.map
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -97,9 +97,8 @@ const ListBuckets = ({
  const [loadingPerms, setLoadingPerms] = useState<boolean>(true);
  const [canCreateBucket, setCanCreateBucket] = useState<boolean>(false);
  const [selectedBuckets, setSelectedBuckets] = useState<string[]>([]);
-  const [replicationModalOpen, setReplicationModalOpen] = useState<boolean>(
-    false
-  );
+  const [replicationModalOpen, setReplicationModalOpen] =
+    useState<boolean>(false);

  // check the permissions for creating bucket
  useEffect(() => {
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
@@ -45,6 +45,7 @@ const styles = (theme: Theme) =>
 interface IEnableBucketEncryptionProps {
  classes: any;
  open: boolean;
+  encryptionEnabled: boolean;
  selectedBucket: string;
  closeModalAndRefresh: () => void;
  setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
@@ -53,32 +54,48 @@ interface IEnableBucketEncryptionProps {
 const EnableBucketEncryption = ({
  classes,
  open,
+  encryptionEnabled,
  selectedBucket,
  closeModalAndRefresh,
  setModalErrorSnackMessage,
 }: IEnableBucketEncryptionProps) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [kmsKeyID, setKmsKeyID] = useState<string>("");
-  const [encryptionType, setEncryptionType] = useState<string>("sse-s3");
+  const [encryptionType, setEncryptionType] = useState<string>(
+    encryptionEnabled ? "sse-s3" : "disabled"
+  );

  const enableBucketEncryption = (event: React.FormEvent) => {
    event.preventDefault();
    if (loading) {
      return;
    }
-    api
-      .invoke("POST", `/api/v1/buckets/${selectedBucket}/encryption/enable`, {
-        encType: encryptionType,
-        kmsKeyID: kmsKeyID,
-      })
-      .then(() => {
-        setLoading(false);
-        closeModalAndRefresh();
-      })
-      .catch((err: any) => {
-        setLoading(false);
-        setModalErrorSnackMessage(err);
-      });
+    if (encryptionType === "disabled") {
+      api
+        .invoke("POST", `/api/v1/buckets/${selectedBucket}/encryption/disable`)
+        .then(() => {
+          setLoading(false);
+          closeModalAndRefresh();
+        })
+        .catch((err: any) => {
+          setLoading(false);
+          setModalErrorSnackMessage(err);
+        });
+    } else {
+      api
+        .invoke("POST", `/api/v1/buckets/${selectedBucket}/encryption/enable`, {
+          encType: encryptionType,
+          kmsKeyID: kmsKeyID,
+        })
+        .then(() => {
+          setLoading(false);
+          closeModalAndRefresh();
+        })
+        .catch((err: any) => {
+          setLoading(false);
+          setModalErrorSnackMessage(err);
+        });
+    }
  };

  return (
@@ -108,6 +125,10 @@ const EnableBucketEncryption = ({
                label={"Encryption Type"}
                value={encryptionType}
                options={[
+                  {
+                    label: "Disabled",
+                    value: "disabled",
+                  },
                  {
                    label: "SSE-S3",
                    value: "sse-s3",
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
@@ -243,16 +243,13 @@ const ViewBucket = ({
  const [loadingReplication, setLoadingReplication] = useState<boolean>(true);
  const [loadingSize, setLoadingSize] = useState<boolean>(true);
  const [loadingEncryption, setLoadingEncryption] = useState<boolean>(true);
-  const [accessPolicyScreenOpen, setAccessPolicyScreenOpen] = useState<boolean>(
-    false
-  );
+  const [accessPolicyScreenOpen, setAccessPolicyScreenOpen] =
+    useState<boolean>(false);
  const [curTab, setCurTab] = useState<number>(0);
  const [addScreenOpen, setAddScreenOpen] = useState<boolean>(false);
  const [policyScreenOpen, setPolicyScreenOpen] = useState<boolean>(false);
-  const [
-    enableEncryptionScreenOpen,
-    setEnableEncryptionScreenOpen,
-  ] = useState<boolean>(false);
+  const [enableEncryptionScreenOpen, setEnableEncryptionScreenOpen] =
+    useState<boolean>(false);
  const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
  const [editLifecycleOpen, setEditLifecycleOpen] = useState<boolean>(false);
  const [selectedEvent, setSelectedEvent] = useState<BucketEvent | null>(null);
@@ -261,19 +258,16 @@ const ViewBucket = ({
  const [isVersioned, setIsVersioned] = useState<boolean>(false);
  const [hasObjectLocking, setHasObjectLocking] = useState<boolean>(false);
  const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false);
-  const [retentionConfigOpen, setRetentionConfigOpen] = useState<boolean>(
-    false
-  );
+  const [retentionConfigOpen, setRetentionConfigOpen] =
+    useState<boolean>(false);
  const [policyEdit, setPolicyEdit] = useState<any>(null);
-  const [enableVersioningOpen, setEnableVersioningOpen] = useState<boolean>(
-    false
-  );
+  const [enableVersioningOpen, setEnableVersioningOpen] =
+    useState<boolean>(false);
  const [loadingPerms, setLoadingPerms] = useState<boolean>(true);
  const [canPutReplication, setCanPutReplication] = useState<boolean>(false);
  const [canGetReplication, setCanGetReplication] = useState<boolean>(false);
-  const [deleteReplicationModal, setDeleteReplicationModal] = useState<boolean>(
-    false
-  );
+  const [deleteReplicationModal, setDeleteReplicationModal] =
+    useState<boolean>(false);
  const [selectedRRule, setSelectedRRule] = useState<string>("");
  const [loadingLifecycle, setLoadingLifecycle] = useState<boolean>(true);
  const [lifecycleRecords, setLifecycleRecords] = useState<LifeCycleItem[]>([]);
@@ -480,7 +474,11 @@ const ViewBucket = ({
          setLoadingEncryption(false);
        })
        .catch((err) => {
-          console.error(err);
+          if (
+            err === "The server side encryption configuration was not found"
+          ) {
+            setEncryptionEnabled(false);
+          }
          setLoadingEncryption(false);
        });
    }
@@ -620,23 +618,6 @@ const ViewBucket = ({
    }
  };

-  const handleEncryptionCheckbox = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    if (event.target.checked) {
-      setEnableEncryptionScreenOpen(true);
-    } else {
-      api
-        .invoke("POST", `/api/v1/buckets/${bucketName}/encryption/disable`)
-        .then(() => {
-          setEncryptionEnabled(false);
-        })
-        .catch((err: any) => {
-          setErrorSnackMessage(err);
-        });
-    }
-  };
-
  const tableActions = [{ type: "delete", onClick: confirmDeleteEvent }];
  const viewAction = (row: any) => {
    setPolicyScreenOpen(true);
@@ -729,6 +710,7 @@ const ViewBucket = ({
        <EnableBucketEncryption
          open={enableEncryptionScreenOpen}
          selectedBucket={bucketName}
+          encryptionEnabled={encryptionEnabled}
          closeModalAndRefresh={closeEnableBucketEncryption}
        />
      )}
@@ -863,15 +845,29 @@ const ViewBucket = ({
                    )}
                    <div>Encryption:</div>
                    <div>
-                      <Checkbox
+                      {loadingEncryption ? (
+                        <CircularProgress
+                          color="primary"
+                          size={16}
+                          variant="indeterminate"
+                        />
+                      ) : encryptionEnabled ? (
+                        "Enabled"
+                      ) : (
+                        "Disabled"
+                      )}
+
+                      <IconButton
                        color="primary"
-                        className={classes.encCheckbox}
-                        inputProps={{
-                          "aria-label": "secondary checkbox",
+                        aria-label="access"
+                        size="small"
+                        className={classes.propertiesIcon}
+                        onClick={() => {
+                          setEnableEncryptionScreenOpen(true);
                        }}
-                        onChange={(event) => handleEncryptionCheckbox(event)}
-                        checked={encryptionEnabled}
-                      />
+                      >
+                        <PencilIcon active={true} />
+                      </IconButton>
                    </div>
                  </div>
                  {hasObjectLocking && (
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -78,9 +78,8 @@ const PrDashboard = ({ classes, displayErrorMessage }: IPrDashboard) => {
  const [timeStart, setTimeStart] = useState<any>(null);
  const [timeEnd, setTimeEnd] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
-  const [panelInformation, setPanelInformation] = useState<IDashboardPanel[]>(
-    panelsConfiguration
-  );
+  const [panelInformation, setPanelInformation] =
+    useState<IDashboardPanel[]>(panelsConfiguration);

  const minHeight = 600;
  const colsInGrid = 8;