PMM-11795-postgresql-operator: add pg operator

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

@@ -1,7 +1,8 @@
-import { Databases, DATABASE_LABELS } from 'app/percona/shared/core';
+import { DATABASE_LABELS, Databases } from 'app/percona/shared/core';
 
 import { DatabaseOperatorsMap, DBClusterServiceDatabasesMap } from './DBCluster.types';
 import { Operators } from './EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.types';
+import { PGService } from './PG.service';
 import { PSMDBService } from './PSMDB.service';
 import { XtraDBService } from './XtraDB.service';
 
@@ -16,11 +17,16 @@ export const DATABASE_OPTIONS = [
     value: Databases.mongodb,
     label: DATABASE_LABELS.mongodb,
   },
+  {
+    value: Databases.postgresql,
+    label: DATABASE_LABELS.postgresql,
+  },
 ];
 
 export const SERVICE_MAP: Partial<DBClusterServiceDatabasesMap> = {
   [Databases.mysql]: new XtraDBService(),
   [Databases.mongodb]: new PSMDBService(),
+  [Databases.postgresql]: new PGService(),
 };
 
 export const THOUSAND = 1000;
@@ -30,6 +36,7 @@ export const RESOURCES_PRECISION = 2;
 export const DATABASE_OPERATORS: Partial<DatabaseOperatorsMap> = {
   [Operators.pxc]: Databases.mysql,
   [Operators.psmdb]: Databases.mongodb,
+  [Operators.pg]: Databases.postgresql,
 };
 
 export const GET_CLUSTERS_CANCEL_TOKEN = 'getClusters';

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

@@ -13,6 +13,7 @@ export type ManageDBClusters = [DBCluster[], GetDBClustersAction, SetDBClustersL
 export enum DBClusterType {
   pxc = 'DB_CLUSTER_TYPE_PXC',
   psmdb = 'DB_CLUSTER_TYPE_PSMDB',
+  pg = 'DB_CLUSTER_TYPE_POSTGRESQL',
 }
 
 export const DatabaseToDBClusterTypeMapping: Partial<Record<Databases, DBClusterType>> = {
@@ -230,6 +231,8 @@ export interface DBClusterParamsAPI {
   image?: string;
   backup?: DBaaSBackupPayload;
   restore?: DBaaSRestorePayload;
+  instance?: DBClusterContainerAPI;
+  pgbouncer?: Omit<DBClusterContainerAPI, 'configuration' | 'storage_class'>;
 }
 
 interface DBClusterContainerAPI {
@@ -329,6 +332,8 @@ export interface DBClusterMatrix {
   backup?: DBClusterComponent;
   operator?: DBClusterComponent;
   log_collector?: DBClusterComponent;
+  postgresql?: DBClusterComponent;
+  pgbouncer?: DBClusterComponent;
 }
 
 export interface DBClusterComponent {
@@ -352,6 +357,8 @@ export interface DBClusterChangeComponentsAPI {
   pxc?: DBClusterChangeComponentAPI;
   haproxy?: DBClusterChangeComponentAPI;
   mongod?: DBClusterChangeComponentAPI;
+  postgresql?: DBClusterChangeComponentAPI;
+  pgbouncer?: DBClusterChangeComponentAPI;
 }
 
 export interface DBClusterChangeComponentAPI {
@@ -368,6 +375,7 @@ export interface DBClusterChangeComponentVersionAPI {
 export interface DBClusterListResponse {
   pxc_clusters?: DBClusterResponse[];
   psmdb_clusters?: DBClusterResponse[];
+  postgresql_clusters?: DBClusterResponse[];
 }
 
 export interface DBClusterSuspendResumeRequest {

public/app/percona/dbaas/components/DBCluster/DBClusterName/DBClusterName.constants.ts

@@ -8,4 +8,6 @@ export const DASHBOARD_URL_MAP: DashboardURLMap = {
     `/graph/d/pxc-cluster-summary/pxc-galera-cluster-summary?var-cluster=${clusterName}-pxc`,
   [Databases.mongodb]: (clusterName: string) =>
     `/graph/d/mongodb-cluster-summary/mongodb-cluster-summary?var-cluster=${clusterName}`,
+  //TODO (no dashboard for pg)
+  [Databases.postgresql]: (clusterName: string) => `${clusterName}`,
 };

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

@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 
 import { Icon, useStyles } from '@grafana/ui';
 
+import { Databases } from '../../../../shared/core';
+
 import { DASHBOARD_URL_MAP } from './DBClusterName.constants';
 import { getStyles } from './DBClusterName.styles';
 import { DBClusterNameProps } from './DBClusterName.types';
@@ -13,9 +15,16 @@ export const DBClusterName: FC<DBClusterNameProps> = ({ dbCluster: { clusterName
   return (
     <div className={styles.clusterNameWrapper}>
       <span>{clusterName}</span>
-      <a href={getDashboardUrl(clusterName)} target="_blank" rel="noreferrer noopener" className={styles.dashboardIcon}>
-        <Icon name="graph-bar" />
-      </a>
+      {databaseType !== Databases.postgresql && (
+        <a
+          href={getDashboardUrl(clusterName)}
+          target="_blank"
+          rel="noreferrer noopener"
+          className={styles.dashboardIcon}
+        >
+          <Icon name="graph-bar" />
+        </a>
+      )}
     </div>
   );
 };

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

@@ -41,9 +41,11 @@ describe('DBClusterAdvancedOptions Configurations::', () => {
       )
     );
     expect(screen.getByTestId('configurations').querySelector('legend')).toHaveTextContent(
-      Messages.fieldSets.pxcConfiguration
+      Messages.fieldSets.configuration(Databases.mysql)
+    );
+    expect(screen.getByTestId('configuration-field-label')).toHaveTextContent(
+      Messages.labels.configuration(Databases.mysql)
     );
-    expect(screen.getByTestId('configuration-field-label')).toHaveTextContent(Messages.labels.pxcConfiguration);
   });
 
   it('shows labels correctly for mongoDB', async () => {
@@ -58,9 +60,11 @@ describe('DBClusterAdvancedOptions Configurations::', () => {
       )
     );
     expect(screen.getByTestId('configurations').querySelector('legend')).toHaveTextContent(
-      Messages.fieldSets.mongodbConfiguration
+      Messages.fieldSets.configuration(Databases.mongodb)
+    );
+    expect(screen.getByTestId('configuration-field-label')).toHaveTextContent(
+      Messages.labels.configuration(Databases.mongodb)
     );
-    expect(screen.getByTestId('configuration-field-label')).toHaveTextContent(Messages.labels.mongodbConfiguration);
   });
 
   it('storageClass is disabled for edit mode', async () => {

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

@@ -1,5 +1,5 @@
 import { TextareaInputField, AsyncSelectField } from '@percona/platform-core';
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import FieldSet from '../../../../../../shared/components/Form/FieldSet/FieldSet';
 import { Databases } from '../../../../../../shared/core';
@@ -9,24 +9,10 @@ import { ConfigurationService } from './Configurations.service';
 import { ConfigurationFields, ConfigurationProps } from './Configurations.types';
 
 export const Configurations: FC<ConfigurationProps> = ({ form, mode, databaseType, k8sClusterName }) => {
-  const label = useMemo(
-    () =>
-      databaseType === Databases.mysql
-        ? Messages.labels.pxcConfiguration
-        : databaseType === Databases.mongodb
-        ? Messages.labels.mongodbConfiguration
-        : Messages.labels.commonConfiguration,
-    [databaseType]
-  );
-  const fieldSetLabel = useMemo(
-    () =>
-      databaseType === Databases.mysql
-        ? Messages.fieldSets.pxcConfiguration
-        : databaseType === Databases.mongodb
-        ? Messages.fieldSets.mongodbConfiguration
-        : Messages.fieldSets.commonConfiguration,
-    [databaseType]
-  );
+  const label = databaseType ? Messages.labels.configuration(databaseType) : Messages.labels.commonConfiguration;
+  const fieldSetLabel = databaseType
+    ? Messages.fieldSets.configuration(databaseType)
+    : Messages.fieldSets.commonConfiguration;
 
   return (
     <FieldSet label={fieldSetLabel} data-testid="configurations">
@@ -38,15 +24,17 @@ export const Configurations: FC<ConfigurationProps> = ({ form, mode, databaseTyp
         label={Messages.labels.storageClass}
         disabled={mode === 'edit'}
       />
-      <TextareaInputField
-        name={ConfigurationFields.configuration}
-        label={label}
-        inputProps={{
-          onBlur: (event) => {
-            form.mutators.trimConfiguration(event?.target?.value);
-          },
-        }}
-      />
+      {databaseType !== Databases.postgresql && (
+        <TextareaInputField
+          name={ConfigurationFields.configuration}
+          label={label}
+          inputProps={{
+            onBlur: (event) => {
+              form.mutators.trimConfiguration(event?.target?.value);
+            },
+          }}
+        />
+      )}
     </FieldSet>
   );
 };

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

@@ -1,9 +1,12 @@
+import { INSTANCE_TYPES_LABELS } from '../../../../../add-instance/panel.types';
+import { Databases } from '../../../../../shared/core';
+
 export const Messages = {
   fieldSets: {
     advancedSettings: 'Advanced Settings',
-    pxcConfiguration: 'MySQL Configurations',
-    mongodbConfiguration: 'MongoDB Configurations',
     commonConfiguration: 'Database Configurations',
+    configuration: (databaseType: Databases) => `${INSTANCE_TYPES_LABELS[databaseType]} Configurations`,
+    networkAndSecurity: 'Network and Security',
   },
   labels: {
     nodes: 'Number of Nodes',
@@ -12,9 +15,11 @@ export const Messages = {
     memory: 'Memory (GB)',
     disk: 'Disk (GB)',
     storageClass: 'Storage Class',
-    pxcConfiguration: 'MySQL Configuration',
-    mongodbConfiguration: 'MongoDB Configuration',
     commonConfiguration: 'Database Configuration',
+    configuration: (databaseType: Databases) => `${INSTANCE_TYPES_LABELS[databaseType]} Configuration`,
+    expose: 'Expose',
+    internetFacing: 'Internet Facing',
+    sourceRange: 'Source Range',
   },
   resources: {
     small: 'Small',

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

@@ -92,6 +92,11 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
     [allocatedResources, styles.resourcesBar, styles.resourcesBarEmpty]
   );
 
+  const dbTypeValue = useMemo(
+    () => (selectedCluster ? selectedCluster.databaseType : databaseType?.value),
+    [selectedCluster, databaseType]
+  );
+
   const getAllocatedResources = async (triggerLoading = true) => {
     try {
       if (allocatedTimer) {
@@ -155,8 +160,6 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
 
   useEffect(() => {
     const getExpectedResources = async () => {
-      const dbTypeValue = selectedCluster ? selectedCluster.databaseType : databaseType?.value;
-
       try {
         const dbClusterService = newDBClusterService(dbTypeValue);
         setLoadingExpectedResources(true);
@@ -193,23 +196,24 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
     }
 
     return () => clearTimeout(expectedTimer);
-  }, [memory, cpu, disk, kubernetesCluster, topology, nodes, single, databaseType]);
+  }, [memory, cpu, disk, kubernetesCluster, topology, nodes, single, dbTypeValue]);
 
   useEffect(() => {
-    const dbTypeValue = selectedCluster ? selectedCluster.databaseType : databaseType?.value;
     if (dbTypeValue === Databases.mongodb) {
       setShowUnsafeConfigurationWarning(nodes === 1);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [databaseType, nodes]);
+  }, [nodes, dbTypeValue]);
 
   return (
     <FieldSet label={Messages.fieldSets.advancedSettings} {...collapsableProps}>
       <>{showUnsafeConfigurationWarning && <UnsafeConfigurationWarning />}</>
-      <Templates
-        k8sClusterName={selectedCluster ? selectedCluster.kubernetesClusterName : kubernetesCluster?.value}
-        databaseType={databaseType?.value}
-      />
+      {dbTypeValue !== Databases.postgresql && (
+        <Templates
+          k8sClusterName={selectedCluster ? selectedCluster.kubernetesClusterName : kubernetesCluster?.value}
+          databaseType={databaseType?.value}
+        />
+      )}
       <div className={styles.line}>
         <NumberInputField
           name={AdvancedOptionsFields.nodes}
@@ -283,7 +287,7 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
         </div>
       </div>
       <Configurations
-        databaseType={selectedCluster ? selectedCluster.databaseType : databaseType?.value}
+        databaseType={dbTypeValue}
         k8sClusterName={selectedCluster ? selectedCluster.kubernetesClusterName : kubernetesCluster?.value}
         mode={mode}
         form={form}

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

@@ -2,11 +2,12 @@ import { DATABASE_LABELS, Databases } from 'app/percona/shared/core';
 
 import { Operators } from './DBClusterBasicOptions.types';
 
-export const OPERATORS = [Operators.pxc, Operators.psmdb];
+export const OPERATORS = [Operators.pxc, Operators.psmdb, Operators.pg];
 
-export const DatabaseOperators = {
+export const DatabaseOperatorsLabels = {
   [Operators.pxc]: DATABASE_LABELS[Databases.mysql],
   [Operators.psmdb]: DATABASE_LABELS[Databases.mongodb],
+  [Operators.pg]: DATABASE_LABELS[Databases.postgresql],
 };
 
 export const CLUSTER_NAME_MAX_LENGTH = 20;

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

@@ -12,6 +12,7 @@ export interface DBClusterBasicOptionsProps {
 export enum Operators {
   pxc = 'pxc',
   psmdb = 'psmdb',
+  pg = 'pg',
 }
 
 export interface DatabaseOption {

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

@@ -8,7 +8,7 @@ import { DatabaseVersion } from '../../DBCluster.types';
 import { OptionContent } from '../../OptionContent/OptionContent';
 import { Messages } from '../EditDBClusterPage.messages';
 
-import { DatabaseOperators, OPERATORS } from './DBClusterBasicOptions.constants';
+import { DatabaseOperatorsLabels, OPERATORS } from './DBClusterBasicOptions.constants';
 import { KubernetesOption as KubernetesOptionInterface, KubernetesOptionProps } from './DBClusterBasicOptions.types';
 
 export const kubernetesClusterNameValidator = (value: string) => {
@@ -25,8 +25,8 @@ const KubernetesOption: FC<KubernetesOptionProps> = ({
   <OptionContent
     title={kubernetesClusterName}
     description={disabledOperators.length ? Messages.validationMessages.notInstalledOperator : ''}
-    tags={availableOperators.map((databaseType) => DatabaseOperators[databaseType])}
-    disabledTags={disabledOperators.map((databaseType) => DatabaseOperators[databaseType])}
+    tags={availableOperators.map((databaseType) => DatabaseOperatorsLabels[databaseType])}
+    disabledTags={disabledOperators.map((databaseType) => DatabaseOperatorsLabels[databaseType])}
     dataTestId="kubernetes-option"
   />
 );
@@ -36,9 +36,9 @@ export const getKubernetesOptions = (kubernetes: Kubernetes[]): KubernetesOption
     .map((kubernetesCluster) => {
       const { kubernetesClusterName, operators } = kubernetesCluster;
 
-      const availableOperators = OPERATORS.filter(
-        (databaseType) => operators[databaseType].status === KubernetesOperatorStatus.ok
-      );
+      const availableOperators = OPERATORS.filter((databaseType) => {
+        return operators[databaseType].status === KubernetesOperatorStatus.ok;
+      });
       const disabledOperators = OPERATORS.filter(
         (databaseType) => operators[databaseType].status !== KubernetesOperatorStatus.ok
       );