Add KMS UI (#2377)

Adds components to interact with KMS server connected to minio

Author: reivaj05

models/kms_latency_histogram.go

@@ -113,6 +113,26 @@ export const IAM_SCOPES = {
   ADMIN_INSPECT_DATA: "admin:InspectData",
   S3_ALL_ACTIONS: "s3:*",
   ADMIN_ALL_ACTIONS: "admin:*",
+  KMS_ALL_ACTIONS: "kms:*",
+  KMS_STATUS: "kms:Status",
+  KMS_METRICS: "kms:Metrics",
+  KMS_APIS: "kms:API",
+  KMS_Version: "kms:Version",
+  KMS_CREATE_KEY: "kms:CreateKey",
+  KMS_DELETE_KEY: "kms:DeleteKey",
+  KMS_LIST_KEYS: "kms:ListKeys",
+  KMS_IMPORT_KEY: "kms:ImportKey",
+  KMS_KEY_STATUS: "kms:KeyStatus",
+  KMS_DESCRIBE_POLICY: "kms:DescribePolicy",
+  KMS_ASSIGN_POLICY: "kms:AssignPolicy",
+  KMS_DELETE_POLICY: "kms:DeletePolicy",
+  KMS_SET_POLICY: "kms:SetPolicy",
+  KMS_GET_POLICY: "kms:GetPolicy",
+  KMS_LIST_POLICIES: "kms:ListPolicies",
+  KMS_DESCRIBE_IDENTITY: "kms:DescribeIdentity",
+  KMS_DESCRIBE_SELF_IDENTITY: "kms:DescribeSelfIdentity",
+  KMS_DELETE_IDENTITY: "kms:DeleteIdentity",
+  KMS_LIST_IDENTITIES: "kms:ListIdentities",
 };
 
 export const IAM_PAGES = {
@@ -160,6 +180,13 @@ export const IAM_PAGES = {
   /* Health */
   HEALTH: "/health",
 
+  /* KMS */
+  KMS: "/kms",
+  KMS_STATUS: "/kms/status",
+  KMS_KEYS: "/kms/keys",
+  KMS_KEYS_ADD: "/kms/add-key/",
+  KMS_KEYS_IMPORT: "/kms/import-key/",
+
   /* Support */
   TOOLS: "/support",
   REGISTER_SUPPORT: "/support/register",
@@ -454,6 +481,24 @@ export const IAM_PAGES_PERMISSIONS = {
     IAM_SCOPES.ADMIN_SERVER_INFO,
     IAM_SCOPES.ADMIN_CONFIG_UPDATE,
   ],
+  [IAM_PAGES.KMS]: [IAM_SCOPES.KMS_ALL_ACTIONS],
+  [IAM_PAGES.KMS_STATUS]: [IAM_SCOPES.KMS_ALL_ACTIONS, IAM_SCOPES.KMS_STATUS],
+  [IAM_PAGES.KMS_KEYS]: [
+    IAM_SCOPES.KMS_ALL_ACTIONS,
+    IAM_SCOPES.KMS_CREATE_KEY,
+    IAM_SCOPES.KMS_DELETE_KEY,
+    IAM_SCOPES.KMS_LIST_KEYS,
+    IAM_SCOPES.KMS_IMPORT_KEY,
+    IAM_SCOPES.KMS_KEY_STATUS,
+  ],
+  [IAM_PAGES.KMS_KEYS_ADD]: [
+    IAM_SCOPES.KMS_ALL_ACTIONS,
+    IAM_SCOPES.KMS_CREATE_KEY,
+  ],
+  [IAM_PAGES.KMS_KEYS_IMPORT]: [
+    IAM_SCOPES.KMS_ALL_ACTIONS,
+    IAM_SCOPES.KMS_IMPORT_KEY,
+  ],
   [IAM_PAGES.IDP_LDAP_CONFIGURATIONS]: [
     IAM_SCOPES.ADMIN_ALL_ACTIONS,
     IAM_SCOPES.ADMIN_CONFIG_UPDATE,

models/kms_metrics_response.go

@@ -0,0 +1,37 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const EncryptionIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="255.209"
+    height="255.209"
+    viewBox="0 0 255.209 255.209"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    {...props}
+  >
+    <path
+      id="KMS"
+      d="M175.664,255.209V228.695H79.546v26.515H46.4V228.695H3a3,3,0,0,1-3-3V3A3,3,0,0,1,3,0H252.21a3,3,0,0,1,3,3V225.694a3,3,0,0,1-3,3h-43.4v26.515ZM23.2,29.83V198.865a9.954,9.954,0,0,0,9.943,9.943H222.065a9.954,9.954,0,0,0,9.943-9.943V29.83a9.954,9.954,0,0,0-9.943-9.943H33.144A9.954,9.954,0,0,0,23.2,29.83ZM222.065,198.866h0Zm-188.921,0V29.83H222.065V198.865H33.144ZM69.224,88.258a26.52,26.52,0,1,0,34.909,34.375h33.071a2,2,0,0,0,2-2V104.747a2,2,0,0,0-2-2H104.134A26.545,26.545,0,0,0,69.224,88.258ZM59.659,112.69a19.886,19.886,0,1,1,19.886,19.886A19.887,19.887,0,0,1,59.659,112.69Z"
+    />
+  </svg>
+);
+
+export default EncryptionIcon;

portal-ui/src/common/SecureComponent/permissions.ts

@@ -0,0 +1,38 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const EncryptionStatusIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="256"
+    height="162.281"
+    viewBox="0 0 256 162.281"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    {...props}
+  >
+    <path
+      id="KMS-status"
+      d="M-13110.45-17976.135a8.3,8.3,0,0,1-7.6-4.979l-30.661-70.426h-41.776a8.3,8.3,0,0,1-8.292-8.3,8.3,8.3,0,0,1,8.292-8.3h47.211a8.289,8.289,0,0,1,7.6,4.98l23.306,53.533,32.412-122.619a8.3,8.3,0,0,1,8.017-6.178h.074a8.293,8.293,0,0,1,7.978,6.336l23.061,94.307,25.367-45.307a8.267,8.267,0,0,1,7.232-4.254c.136,0,.276,0,.416.01a8.315,8.315,0,0,1,7.189,4.979l20.733,47.732h28.818a8.292,8.292,0,0,1,8.293,8.287,8.294,8.294,0,0,1-8.293,8.3h-34.254a8.273,8.273,0,0,1-7.6-4.988l-16.239-37.379-27.48,49.107a8.274,8.274,0,0,1-7.233,4.244,9.94,9.94,0,0,1-1.12-.07,8.309,8.309,0,0,1-6.936-6.258l-20.317-83.1-30.171,114.166a8.3,8.3,0,0,1-7.387,6.152C-13110.021-17976.143-13110.24-17976.135-13110.45-17976.135Z"
+      transform="translate(13198.776 18138.416)"
+    />
+  </svg>
+);
+
+export default EncryptionStatusIcon;

portal-ui/src/icons/SidebarMenus/EncryptionIcon.tsx

@@ -0,0 +1,95 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 { DialogContentText, Grid } from "@mui/material";
+import React, { useState } from "react";
+import { ErrorResponseHandler } from "../../../../common/types";
+import { useAppDispatch } from "../../../../store";
+import { setErrorSnackMessage } from "../../../../systemSlice";
+import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import useApi from "../../Common/Hooks/useApi";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import KMSHelpBox from "../../KMS/KMSHelpbox";
+
+interface IAddKeyModalProps {
+  closeAddModalAndRefresh: (refresh: boolean) => void;
+  addOpen: boolean;
+}
+
+const AddKeyModal = ({
+  closeAddModalAndRefresh,
+  addOpen,
+}: IAddKeyModalProps) => {
+  const dispatch = useAppDispatch();
+  const onAddSuccess = () => closeAddModalAndRefresh(true);
+  const onAddError = (err: ErrorResponseHandler) => {
+    closeAddModalAndRefresh(false);
+    dispatch(setErrorSnackMessage(err));
+  };
+  const onClose = () => closeAddModalAndRefresh(false);
+
+  const [addLoading, invokeAddApi] = useApi(onAddSuccess, onAddError);
+  const [keyName, setKeyName] = useState<string>("");
+
+  const onConfirmAdd = () => {
+    invokeAddApi("POST", "/api/v1/kms/keys/", { key: keyName });
+  };
+
+  return (
+    <ConfirmDialog
+      title={""}
+      confirmText={"Create"}
+      isOpen={addOpen}
+      isLoading={addLoading}
+      onConfirm={onConfirmAdd}
+      onClose={onClose}
+      confirmButtonProps={{
+        disabled: keyName.indexOf(" ") !== -1 || keyName === "" || addLoading,
+        variant: "callAction",
+      }}
+      confirmationContent={
+        <DialogContentText>
+          <KMSHelpBox
+            helpText={"Create Key"}
+            contents={[
+              "Create a new cryptographic key in the Key Management Service server connected to MINIO.",
+            ]}
+          />
+
+          <Grid item xs={12} marginTop={3}>
+            <InputBoxWrapper
+              id="key-name"
+              name="key-name"
+              label="Key Name"
+              autoFocus={true}
+              value={keyName}
+              error={
+                keyName.indexOf(" ") !== -1
+                  ? "Key name cannot contain spaces"
+                  : ""
+              }
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setKeyName(e.target.value);
+              }}
+            />
+          </Grid>
+        </DialogContentText>
+      }
+    />
+  );
+};
+
+export default AddKeyModal;