Pmm 11563 db cluster edit form typification

public/app/percona/dbaas/components/DBCluster/DBCluster.service.ts

@@ -22,6 +22,9 @@ import {
   DBClusterListResponse,
   DBClusterSecretsResponse,
   DBClusterSecretsRequest,
+  DBClusterTemplatesResponse,
+  DBClusterTemplatesRequest,
+  DBClusterType,
 } from './DBCluster.types';
 import { formatResources } from './DBCluster.utils';
 
@@ -108,4 +111,14 @@ export abstract class DBClusterService {
         };
       });
   }
+  static async getDBClusterTemplates(
+    kubernetesClusterName: string,
+    k8sClusterType: DBClusterType
+  ): Promise<DBClusterTemplatesResponse> {
+    return apiManagement.post<DBClusterTemplatesResponse, DBClusterTemplatesRequest>(
+      '/DBaaS/Templates/List',
+      { kubernetes_cluster_name: kubernetesClusterName, cluster_type: k8sClusterType },
+      true
+    );
+  }
 }

public/app/percona/dbaas/components/DBCluster/DBCluster.types.ts

@@ -15,6 +15,11 @@ export enum DBClusterType {
   psmdb = 'DB_CLUSTER_TYPE_PSMDB',
 }
 
+export const DatabaseToDBClusterTypeMapping: Partial<Record<Databases, DBClusterType>> = {
+  [Databases.mysql]: DBClusterType.pxc,
+  [Databases.mongodb]: DBClusterType.psmdb,
+};
+
 export interface DBCluster {
   clusterName: string;
   kubernetesClusterName: string;
@@ -39,6 +44,7 @@ export interface DBCluster {
   storageClass?: string;
   backup?: DBaaSBackup;
   restore?: DBaaSRestore;
+  template?: DBClusterTemplate;
 }
 
 interface DBaaSBackup {
@@ -189,6 +195,7 @@ export interface DBClusterPayload {
   pxcConfiguration?: string;
   internet_facing?: boolean;
   source_ranges?: string[];
+  template?: DBClusterTemplate;
 }
 
 export interface DBClusterActionAPI {
@@ -243,6 +250,19 @@ export interface DBClusterSecretsRequest {
   kubernetes_cluster_name: string;
 }
 
+export interface DBClusterTemplate {
+  name: string;
+  kind: string;
+}
+export interface DBClusterTemplatesResponse {
+  templates: DBClusterTemplate[];
+}
+
+export interface DBClusterTemplatesRequest {
+  kubernetes_cluster_name: string;
+  cluster_type: DBClusterType;
+}
+
 export interface DBClusterSecret {
   name: string;
 }

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.test.tsx

@@ -49,6 +49,7 @@ describe('DBClusterAdvancedOptions::', () => {
     const advancedOptions = screen.getByTestId('dbCluster-advanced-settings');
     waitFor(() => fireEvent.click(advancedOptions));
 
+    expect(await screen.getByTestId('template-field-container')).toBeInTheDocument();
     expect(await screen.getByTestId('nodes-number-input')).toBeInTheDocument();
     expect(await screen.getByTestId('resources-field-container')).toBeInTheDocument();
     expect(await screen.getByTestId('memory-number-input')).toBeInTheDocument();
@@ -81,6 +82,7 @@ describe('DBClusterAdvancedOptions::', () => {
       )
     );
 
+    expect(await screen.getByTestId('template-field-container')).toBeInTheDocument();
     expect(await screen.getByTestId('nodes-number-input')).toBeInTheDocument();
     expect(await screen.getByTestId('resources-field-container')).toBeInTheDocument();
     expect(await screen.getByTestId('memory-number-input')).toBeInTheDocument();

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.tsx

@@ -15,7 +15,7 @@ import { DBCluster, DBClusterAllocatedResources, DBClusterExpectedResources } fr
 import { getExpectedResourcesDifference, newDBClusterService } from '../../DBCluster.utils';
 import { ResourcesBar } from '../../ResourcesBar/ResourcesBar';
 import { optionRequired } from '../DBClusterBasicOptions/DBClusterBasicOptions.utils';
-import { DBClusterPageMode } from '../EditDBClusterPage.types';
+import { DBClusterPageMode, EditDBClusterForm } from '../EditDBClusterPage.types';
 import { UnsafeConfigurationWarning } from '../UnsafeConfigurationsWarning/UnsafeConfigurationWarning';
 
 import Configurations from './Configurations/Configurations';
@@ -33,8 +33,9 @@ import { getStyles } from './DBClusterAdvancedOptions.styles';
 import { AdvancedOptionsFields, DBClusterResources } from './DBClusterAdvancedOptions.types';
 import { canGetExpectedResources, nodesValidator, resourceValidator } from './DBClusterAdvancedOptions.utils';
 import NetworkAndSecurity from './NetworkAndSecurity/NetworkAndSecurity';
+import Templates from './Templates/Templates';
 
-export interface DBClusterAdvancedOptionsProps extends FormRenderProps {
+export interface DBClusterAdvancedOptionsProps extends FormRenderProps<EditDBClusterForm> {
   mode: DBClusterPageMode;
   showUnsafeConfigurationWarning: boolean;
   setShowUnsafeConfigurationWarning: React.Dispatch<React.SetStateAction<boolean>>;
@@ -206,6 +207,10 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
   return (
     <FieldSet label={Messages.fieldSets.advancedSettings} {...collapsableProps}>
       <>{showUnsafeConfigurationWarning && <UnsafeConfigurationWarning />}</>
+      <Templates
+        k8sClusterName={selectedCluster ? selectedCluster.kubernetesClusterName : kubernetesCluster?.value}
+        databaseType={databaseType?.value}
+      />
       <div className={styles.line}>
         <NumberInputField
           name={AdvancedOptionsFields.nodes}

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.types.ts

@@ -4,6 +4,7 @@ export enum AdvancedOptionsFields {
   memory = 'memory',
   cpu = 'cpu',
   disk = 'disk',
+  template = 'template',
 }
 
 export enum DBClusterResources {

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.messages.tsx

@@ -0,0 +1,5 @@
+export const Messages = {
+  labels: {
+    templates: 'Templates',
+  },
+};

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.service.ts

@@ -0,0 +1,18 @@
+import { SelectableValue } from '@grafana/data';
+
+import { Databases } from '../../../../../../shared/core';
+import { DBClusterService } from '../../../DBCluster.service';
+import { DatabaseToDBClusterTypeMapping } from '../../../DBCluster.types';
+
+export const TemplatesService = {
+  async loadTemplatesOptions(k8sClusterName: string, databaseType: Databases): Promise<Array<SelectableValue<string>>> {
+    const dbClusterType = DatabaseToDBClusterTypeMapping[databaseType];
+    const templatesResponse =
+      dbClusterType && (await DBClusterService.getDBClusterTemplates(k8sClusterName, dbClusterType));
+    const templates = templatesResponse?.templates || [];
+    return templates.map((template) => ({
+      label: template.name,
+      value: template.kind,
+    }));
+  },
+};

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx

@@ -0,0 +1,21 @@
+import { AsyncSelectField } from '@percona/platform-core';
+import React, { FC } from 'react';
+
+import { AdvancedOptionsFields } from '../DBClusterAdvancedOptions.types';
+
+import { Messages } from './Templates.messages';
+import { TemplatesService } from './Templates.service';
+import { TemplatesProps } from './Templates.types';
+
+export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType }) => {
+  return (
+    <AsyncSelectField
+      name={AdvancedOptionsFields.template}
+      label={Messages.labels.templates}
+      loadOptions={() => TemplatesService.loadTemplatesOptions(k8sClusterName, databaseType)}
+      defaultOptions
+    />
+  );
+};
+
+export default Templates;

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts

@@ -0,0 +1,6 @@
+import { Databases } from '../../../../../../shared/core';
+
+export interface TemplatesProps {
+  k8sClusterName: string;
+  databaseType: Databases;
+}

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.hooks.ts

@@ -5,12 +5,13 @@ import { useEffect } from 'react';
 import { SelectableValue } from '@grafana/data/src';
 
 import { isOptionEmpty, newDBClusterService } from '../../DBCluster.utils';
+import { EditDBClusterForm } from '../EditDBClusterPage.types';
 
 import { BasicOptionsFields } from './DBClusterBasicOptions.types';
 import { findDefaultDatabaseVersion } from './DBClusterBasicOptions.utils';
 
 export const useDatabaseVersions = (
-  form: FormApi,
+  form: FormApi<EditDBClusterForm, Partial<EditDBClusterForm>>,
   databaseType: SelectableValue,
   kubernetesCluster: SelectableValue,
   setLoadingDatabaseVersions: (loading: boolean) => void,

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.messages.ts

@@ -1,7 +1,9 @@
 export const Messages = {
-  clusterName: 'Cluster Name',
-  kubernetesCluster: 'Kubernetes Cluster',
-  databaseType: 'Database Type',
-  databaseVersion: 'Database Version',
   noOperatorsMessage: 'No clusters found with installed operators',
+  labels: {
+    clusterName: 'Cluster Name',
+    databaseType: 'Database Type',
+    databaseVersion: 'Database Version',
+    kubernetesCluster: 'Kubernetes Cluster',
+  },
 };

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.tsx

@@ -50,6 +50,7 @@ export const DBClusterBasicOptions: FC<DBClusterBasicOptionsProps> = ({ kubernet
   const { required, maxLength } = validators;
   const { change } = form;
   const { kubernetesCluster, databaseType } = form.getState().values;
+  debugger;
   const [databaseVersions, setDatabaseVersions] = useState<SelectableValue[]>([]);
   const [loadingDatabaseVersions, setLoadingDatabaseVersions] = useState(false);
 
@@ -93,7 +94,7 @@ export const DBClusterBasicOptions: FC<DBClusterBasicOptionsProps> = ({ kubernet
       <Field
         dataTestId="dbcluster-kubernetes-cluster-field"
         name={BasicOptionsFields.kubernetesCluster}
-        label={Messages.kubernetesCluster}
+        label={Messages.labels.kubernetesCluster}
         options={kubernetesOptions}
         component={SelectFieldAdapter}
         noOptionsMessage={Messages.noOperatorsMessage}
@@ -105,7 +106,7 @@ export const DBClusterBasicOptions: FC<DBClusterBasicOptionsProps> = ({ kubernet
           disabled={!form.getState().values[BasicOptionsFields.kubernetesCluster] || !databaseOptions.length}
           dataTestId="dbcluster-database-type-field"
           name={BasicOptionsFields.databaseType}
-          label={Messages.databaseType}
+          label={Messages.labels.databaseType}
           options={databaseOptions}
           component={SelectFieldAdapter}
           validate={optionRequired}
@@ -115,7 +116,7 @@ export const DBClusterBasicOptions: FC<DBClusterBasicOptionsProps> = ({ kubernet
           disabled={isDatabaseVersionDisabled}
           dataTestId="dbcluster-database-version-field"
           name={BasicOptionsFields.databaseVersion}
-          label={Messages.databaseVersion}
+          label={Messages.labels.databaseVersion}
           component={AsyncSelectFieldAdapter}
           loading={loadingDatabaseVersions}
           options={databaseVersions}
@@ -124,7 +125,7 @@ export const DBClusterBasicOptions: FC<DBClusterBasicOptionsProps> = ({ kubernet
       </div>
       <TextInputField
         name={BasicOptionsFields.name}
-        label={Messages.clusterName}
+        label={Messages.labels.clusterName}
         validators={[required, kubernetesClusterNameValidator, maxLength(CLUSTER_NAME_MAX_LENGTH)]}
       />
       {settings?.backupEnabled && <Restore form={form} />}

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.types.ts

@@ -1,14 +1,16 @@
 import { FormApi } from 'final-form';
 
+import { SelectableValue } from '@grafana/data';
 import { Databases } from 'app/percona/shared/core';
 
 import { Kubernetes, OperatorsList } from '../../../Kubernetes/Kubernetes.types';
+import { EditDBClusterForm } from '../EditDBClusterPage.types';
 
 import { RestoreFieldsProps } from './Restore/Restore.types';
 
 export interface DBClusterBasicOptionsProps {
   kubernetes: Kubernetes[];
-  form: FormApi;
+  form: FormApi<EditDBClusterForm, Partial<EditDBClusterForm>>;
 }
 
 export enum Operators {
@@ -48,7 +50,7 @@ export enum BasicOptionsFields {
 
 export interface BasicOptionsFieldsProps extends RestoreFieldsProps {
   [BasicOptionsFields.name]?: string;
-  [BasicOptionsFields.kubernetesCluster]?: KubernetesOption;
+  [BasicOptionsFields.kubernetesCluster]?: SelectableValue;
   [BasicOptionsFields.databaseType]?: DatabaseOptionInitial;
   [BasicOptionsFields.databaseVersion]?: string;
 }

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/Restore/Restore.test.tsx

@@ -1,10 +1,11 @@
 import { screen, render, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { Form } from 'react-final-form';
+import { Form, FormRenderProps } from 'react-final-form';
 import { Provider } from 'react-redux';
 
 import { configureStore } from '../../../../../../../store/configureStore';
 import { StoreState } from '../../../../../../../types';
+import { EditDBClusterForm } from '../../EditDBClusterPage.types';
 
 import { Restore } from './Restore';
 
@@ -26,7 +27,10 @@ describe('DBaaS DBCluster creation Restore section ::', () => {
     await waitFor(() =>
       render(
         <Provider store={store}>
-          <Form onSubmit={jest.fn()} render={({ form }) => <Restore form={form} />} />
+          <Form
+            onSubmit={jest.fn()}
+            render={({ form }: FormRenderProps<EditDBClusterForm>) => <Restore form={form} />}
+          />
         </Provider>
       )
     );
@@ -47,7 +51,7 @@ describe('DBaaS DBCluster creation Restore section ::', () => {
                 value: 'location1',
               },
             }}
-            render={({ form }) => {
+            render={({ form }: FormRenderProps<EditDBClusterForm>) => {
               return <Restore form={form} />;
             }}
           />
@@ -72,7 +76,7 @@ describe('DBaaS DBCluster creation Restore section ::', () => {
                 value: 'cluster 1',
               },
             }}
-            render={({ form }) => {
+            render={({ form }: FormRenderProps<EditDBClusterForm>) => {
               return <Restore form={form} />;
             }}
           />

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterBasicOptions/Restore/Restore.types.ts

@@ -2,8 +2,10 @@ import { FormApi } from 'final-form';
 
 import { SelectableValue } from '@grafana/data';
 
+import { EditDBClusterForm } from '../../EditDBClusterPage.types';
+
 export interface RestoreFromProps {
-  form: FormApi;
+  form: FormApi<EditDBClusterForm, Partial<EditDBClusterForm>>;
 }
 
 export enum RestoreFields {

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBaaSBackups/DBaaSBackups.tsx

@@ -10,13 +10,13 @@ import { MAX_RETENTION, MIN_RETENTION } from '../../../../../backup/components/A
 import { ScheduleSectionFields } from '../../../../../backup/components/AddBackupPage/ScheduleSection/ScheduleSectionFields/ScheduleSectionFields';
 import { SelectField } from '../../../../../shared/components/Form/SelectField';
 import { getBackupLocations } from '../../../../../shared/core/selectors';
-import { AddDBClusterFormValues } from '../EditDBClusterPage.types';
+import { AddDBClusterFormValues, EditDBClusterForm } from '../EditDBClusterPage.types';
 
 import { Messages } from '././DBaaSBackups.messages';
 import { getStyles } from './DBaaSBackups.styles';
 import { DBaaSBackupFields } from './DBaaSBackups.types';
 
-export const DBaaSBackups: FC<FormRenderProps> = ({ values }) => {
+export const DBaaSBackups: FC<FormRenderProps<EditDBClusterForm>> = ({ values }) => {
   const styles = useStyles(getStyles);
   const [enableBackups, setEnableBackups] = useState(false);
 

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/EditDBClusterPage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import arrayMutators from 'final-form-arrays';
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { Form } from 'react-final-form';
+import { Form as FinalForm } from 'react-final-form';
 import { Redirect, useHistory } from 'react-router-dom';
 
 import { Spinner, useStyles2 } from '@grafana/ui/src';
@@ -30,7 +30,7 @@ import DBaaSBackups from './DBaaSBackups/DBaaSBackups';
 import { DB_CLUSTER_INVENTORY_URL } from './EditDBClusterPage.constants';
 import { Messages } from './EditDBClusterPage.messages';
 import { getStyles } from './EditDBClusterPage.styles';
-import { EditDBClusterPageProps } from './EditDBClusterPage.types';
+import { EditDBClusterForm, EditDBClusterPageProps } from './EditDBClusterPage.types';
 import { generateUID } from './EditDBClusterPage.utils';
 import { useDefaultMode } from './hooks/useDefaultMode';
 import { useEditDBClusterFormSubmit } from './hooks/useEditDBClusterFormSubmit';
@@ -80,9 +80,9 @@ export const EditDBClusterPage: FC<EditDBClusterPageProps> = () => {
           <Spinner />
         </div>
       ) : kubernetes && kubernetes?.length > 0 ? (
-        <Form
+        <FinalForm
           initialValues={initialValues}
-          onSubmit={onSubmit}
+          onSubmit={(values: EditDBClusterForm) => onSubmit(values)}
           mutators={{
             setClusterName: (databaseTypeValue: string, state, { changeValue }) => {
               changeValue(state, `${BasicOptionsFields.name}`, () => `${databaseTypeValue}-${generateUID()}`);