KMS Support for cluster creation

Signed-off-by: Kanika Murarka <kmurarka@redhat.com>

frontend/packages/ceph-storage-plugin/src/components/kms-config/kms-config.scss

@@ -0,0 +1,14 @@
+.ocs-install-kms {
+  &__form-url {
+    display: inline-flex;
+    width: 100%;
+  }
+
+  &__form-address {
+    width: 80%;
+  }
+
+  &__form-port {
+    width: 20%;
+  }
+}

frontend/packages/ceph-storage-plugin/src/components/kms-config/kms-config.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroup, TextInput, FormSelect, FormSelectOption, Button } from '@patternfly/react-core';
 import { State, Action } from '../ocs-install/attached-devices/create-sc/state';
 import {
   InternalClusterState,
@@ -12,6 +12,9 @@ import {
   VALIDATIONS,
   ValidationMessage,
 } from '../../utils/common-ocs-install-el';
+import { KMSProviders } from '../../constants/ocs-install';
+import './kms-config.scss';
+import { advancedKMSModal } from '../modals/advanced-kms-modal/advanced-kms-modal';
 
 const validate = (valid: boolean): Validation => {
   let validation: Validation;
@@ -25,6 +28,7 @@ const validate = (valid: boolean): Validation => {
 export const KMSConfigure: React.FC<KMSConfigureProps> = ({ state, dispatch, mode }) => {
   const { kms } = state;
   const validation: Validation = validate(kms.hasHandled);
+  const [kmsProvider, setKMSProvider] = React.useState<string>(KMSProviders[0].name);
 
   React.useEffect(() => {
     if (!kms.name) {
@@ -35,28 +39,97 @@ export const KMSConfigure: React.FC<KMSConfigureProps> = ({ state, dispatch, mod
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [kms.name]);
 
-  const getServiceName = (name: string) => {
+  const setServiceName = (name: string) => {
     setDispatch(ActionType.SET_KMS_ENCRYPTION, { ...kms, name }, mode, dispatch);
   };
 
+  const setAddress = (address: string) => {
+    setDispatch(ActionType.SET_KMS_ENCRYPTION, { ...kms, address }, mode, dispatch);
+  };
+
+  const setAddressPort = (port: string) => {
+    setDispatch(ActionType.SET_KMS_ENCRYPTION, { ...kms, port }, mode, dispatch);
+  };
+
+  const openAdvancedModal = () => {
+    return advancedKMSModal({
+      state,
+      dispatch
+    });
+  }
+
   return (
-    <>
+    <div className="co-m-pane__form">
+      <FormGroup
+        fieldId="kms-provider"
+        label="Key Management Service Provider"
+        className="ocs-install-encryption__form-body"
+      >
+        <FormSelect
+          value={kmsProvider}
+          onChange={(e) => setKMSProvider(e)}
+          id="kms-provider-name"
+          name="kms-provider-name"
+          aria-label="kms-provider-name"
+          isDisabled
+        >
+          {KMSProviders.map((provider, index) => (
+            <FormSelectOption key={index} value={provider.value} label={provider.name} />
+          ))}
+        </FormSelect>
+      </FormGroup>
       <FormGroup
         fieldId="kms-service-name"
         label="Service Name"
-        className="co-m-pane__form ocs-install-encryption__form-body"
+        className="ocs-install-encryption__form-body"
+        isRequired
       >
         <TextInput
           value={kms.name}
-          onChange={getServiceName}
-          isRequired
+          onChange={setServiceName}
           type="text"
           id="kms-service-name"
           name="kms-service-name"
         />
         {validation && <ValidationMessage validation={validation} />}
       </FormGroup>
-    </>
+      <div className="ocs-install-kms__form-url">
+        <FormGroup
+          fieldId="kms-service-address"
+          label="Address"
+          className="ocs-install-kms__form-address ocs-install-encryption__form-body"
+          isRequired
+        >
+          <TextInput
+            value={kms.address}
+            onChange={setAddress}
+            className='ocs-install-kms__form-address--padding'
+            type="url"
+            id="kms-address"
+            name="kms-address"
+          />
+          {validation && <ValidationMessage validation={validation} />}
+        </FormGroup>
+        <FormGroup
+          fieldId="kms-service-address-port"
+          label="Port"
+          className="ocs-install-kms__form-port ocs-install-encryption__form-body"
+          isRequired
+        >
+          <TextInput
+            value={kms.port}
+            onChange={setAddressPort}
+            type="text"
+            id="kms-address-port"
+            name="kms-address-port"
+          />
+          {validation && <ValidationMessage validation={validation} />}
+        </FormGroup>
+      </div>
+      <Button variant="link" className="ocs-install-encryption__form-body" onClick={openAdvancedModal}>
+                  Advanced Settings
+                </Button>
+    </div>
   );
 };
 

frontend/packages/ceph-storage-plugin/src/components/modals/advanced-kms-modal/advanced-kms-modal.scss

@@ -0,0 +1,5 @@
+.ceph-advanced-kms {
+    &__form-body {
+        padding: var(--pf-global--spacer--md) 0;
+    }
+}

frontend/packages/ceph-storage-plugin/src/components/modals/advanced-kms-modal/advanced-kms-modal.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import {
+  createModalLauncher,
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalComponentProps,
+} from '@console/internal/components/factory/modal';
+import {
+  HandlePromiseProps,
+  withHandlePromise,
+} from '@console/internal/components/utils/promise-component';
+import './advanced-kms-modal.scss';
+import { State, Action } from '../../ocs-install/attached-devices/create-sc/state';
+import {
+  InternalClusterState,
+  InternalClusterAction,
+} from '../../ocs-install/internal-mode/reducer';
+import { FormGroup, TextInput } from '@patternfly/react-core';
+import { DroppableFileInput } from '@console/internal/components/utils/file-input';
+import { FieldLevelHelp } from '@console/internal/components/utils';
+import { vaultNamespaceTooltip } from '../../../constants';
+
+export const AdvancedKMSModal = withHandlePromise((props: AdvancedKMSModalProps) => {
+  const { close, cancel, handlePromise, errorMessage, inProgress, state, dispatch } = props;
+
+  const { kms } = state;
+
+  //   React.useEffect(() => {
+
+  //   }, []);
+
+  const [backendPath, setBackendPath] = React.useState(kms.backend || 'path/');
+  const [caCertificate, setCACertificate] = React.useState(kms.caCert || '');
+  const [tlsName, setTLSName] = React.useState(kms.tls || '');
+  const [clientCertificate, setClientCertificate] = React.useState(kms.clientCert || '');
+  const [clientKey, setClientKey] = React.useState(kms.clientKey || '');
+  const [providerNS, setProvideNS] = React.useState(kms.providerNamespace || '');
+  const submit = (event: React.FormEvent<EventTarget>) => {};
+
+  return (
+    <form
+      onSubmit={submit}
+      className="modal-content modal-content--no-inner-scroll"
+      key="pool-form-modal"
+    >
+      <ModalTitle>Key Management Service Advanced Settings</ModalTitle>
+      <ModalBody>
+        <FormGroup
+          fieldId="kms-service-backend-path"
+          label="Backend Path"
+          className="ceph-advanced-kms__form-body"
+        >
+          <TextInput
+            value={backendPath}
+            onChange={setBackendPath}
+            type="text"
+            id="kms-service-backend-path"
+            name="kms-service-backend-path"
+          />
+        </FormGroup>
+        <DroppableFileInput
+          className="ceph-advanced-kms__form-body"
+          onChange={setCACertificate}
+          inputFileData={caCertificate}
+          id="kms-service-ca-cert"
+          hideContents
+          label="CA Certificate"
+          inputFieldHelpText="Upload a .PEM file here"
+        />
+        <FormGroup
+          fieldId="kms-service-tls"
+          label="TLS Server Name"
+          className="ceph-advanced-kms__form-body"
+        >
+          <TextInput
+            value={tlsName}
+            onChange={setTLSName}
+            type="text"
+            id="kms-service-tls"
+            name="kms-service-tls"
+          />
+        </FormGroup>
+        <FormGroup
+          fieldId="kms-service-namespace"
+          label="Vault Enterprise Namespace"
+          className="ceph-advanced-kms__form-body"
+          labelIcon={<FieldLevelHelp>{vaultNamespaceTooltip}</FieldLevelHelp>}
+          helperText="The name must be accurate and must match the service namespace"
+        >
+          <TextInput
+            value={providerNS}
+            onChange={setProvideNS}
+            type="text"
+            id="kms-service-namespace"
+            name="kms-service-namespace"
+
+          />
+        </FormGroup>
+        <DroppableFileInput
+          className="ceph-advanced-kms__form-body"
+          onChange={setClientCertificate}
+          inputFileData={clientCertificate}
+          id="kms-service-cert"
+          hideContents
+          label="Client Certificate"
+          inputFieldHelpText="Upload a .PEM file here"
+        />
+        <DroppableFileInput
+          className="ceph-advanced-kms__form-body"
+          onChange={setClientKey}
+          inputFileData={clientKey}
+          id="kms-service-key"
+          hideContents
+          label="Client Private Key"
+          inputFieldHelpText="Upload a .PEM file here"
+        />
+
+      </ModalBody>
+      <ModalSubmitFooter errorMessage={errorMessage} inProgress={inProgress} submitText="Save" cancel={cancel} />
+    </form>
+  );
+});
+
+export type AdvancedKMSModalProps = {
+  state: State | InternalClusterState;
+  dispatch: React.Dispatch<Action | InternalClusterAction>;
+} & HandlePromiseProps &
+  ModalComponentProps;
+
+export const advancedKMSModal = createModalLauncher(AdvancedKMSModal);

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/state.ts

@@ -55,6 +55,15 @@ export const initialState: State = {
   // KMS object state
   kms: {
     name: 'ocs-vault-connection',
+    token: '',
+    address: '',
+    port: 0,
+    backend: '',
+    caCert: '',
+    tls: '',
+    clientCert: '',
+    clientKey: '',
+    providerNamespace: '',
     hasHandled: true,
   },
 };

frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/install-wizard.scss

@@ -66,7 +66,7 @@
   padding-left: var(--pf-global--spacer--lg);
 
   &__form-body {
-    padding: var(--pf-global--spacer--md);
+    padding: var(--pf-global--spacer--md) !important;
   }
 
   &__form-alert {

frontend/packages/ceph-storage-plugin/src/components/ocs-install/internal-mode/reducer.ts

@@ -53,6 +53,15 @@ export const initialState: InternalClusterState = {
   // KMS object state
   kms: {
     name: 'ocs-vault-connection',
+    token: '',
+    address: '',
+    port: 0,
+    backend: '',
+    caCert: '',
+    tls: '',
+    clientCert: '',
+    clientKey: '',
+    providerNamespace: '',
     hasHandled: true,
   },
 };

frontend/packages/ceph-storage-plugin/src/components/ocs-install/types.ts

@@ -49,5 +49,14 @@ export type EncryptionType = {
 
 export type KMSConfig = {
   name: string;
+  token: string;
+  address: string;
+  port: number;
+  backend: string;
+  caCert: string;
+  tls: string;
+  clientCert: string;
+  clientKey: string;
+  providerNamespace: string;
   hasHandled: boolean;
 };

frontend/packages/ceph-storage-plugin/src/constants/ocs-install.ts

@@ -14,6 +14,7 @@ export const requestedCapacityTooltip =
   'The backing storage requested will be higher as it will factor in the requested capacity, replica factor, and fault tolerant costs associated with the requested capacity.';
 export const encryptionTooltip =
   'The storage cluster encryption level can be set to include all components under the cluster (including storage class and PVs) or to include only storage class encryption. PV encryption can use an auth token that will be used with the KMS configuration to allow multi-tenancy.';
+export const vaultNamespaceTooltip = 'Vault enterprise namespaces are isolated environments that functionally exist as "Vaults within a Vault." They have separate login paths and support creating and managing data isolated to their namespace.'
 
 export enum defaultRequestSize {
   BAREMETAL = '1',
@@ -43,3 +44,10 @@ export enum IP_FAMILY {
   IPV4 = 'IPV4',
   IPV6 = 'IPV6',
 }
+
+export const KMSProviders = [
+  {
+    name: 'Vault',
+    value: 'vault'
+  }
+]