PMM-12608 Add auto discovery limit for PG

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts

@@ -102,6 +102,7 @@ export interface PostgreSQLPayload extends RemoteCommonPayload, TLSCommon {
   tls_key: string;
   agent_password: string;
   max_query_length: number;
+  auto_discovery_limit: number;
 }
 
 export interface MySQLPayload extends RemoteCommonPayload, TLSCommon {

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.constants.ts

@@ -1,5 +1,5 @@
 import { Messages } from './AdditionalOptions.messages';
-import { TablestatOptionsInterface } from './AdditionalOptions.types';
+import { AutoDiscoveryOptionsInterface, TablestatOptionsInterface } from './AdditionalOptions.types';
 
 export const tablestatOptions = [
   {
@@ -15,3 +15,14 @@ export const tablestatOptions = [
     label: Messages.form.tablestatOptions.custom,
   },
 ];
+
+export const autoDiscoveryOptions = [
+  {
+    value: AutoDiscoveryOptionsInterface.disabled,
+    label: Messages.form.autoDiscoveryOptions.disabled,
+  },
+  {
+    value: AutoDiscoveryOptionsInterface.custom,
+    label: Messages.form.autoDiscoveryOptions.custom,
+  },
+];

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.messages.ts

@@ -5,5 +5,9 @@ export const Messages = {
       default: 'Default',
       custom: 'Custom',
     },
+    autoDiscoveryOptions: {
+      disabled: 'Disabled',
+      custom: 'Custom',
+    },
   },
 };

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx

@@ -1,21 +1,22 @@
 import { FormApi } from 'final-form';
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
 import { InstanceAvailableType, RemoteInstanceCredentials } from 'app/percona/add-instance/panel.types';
 import { CheckboxField } from 'app/percona/shared/components/Elements/Checkbox';
 import { NumberInputField } from 'app/percona/shared/components/Form/NumberInput';
 import { RadioButtonGroupField } from 'app/percona/shared/components/Form/RadioButtonGroup';
 import { Databases } from 'app/percona/shared/core';
+import validators from 'app/percona/shared/helpers/validators';
 import { validators as platformCoreValidators } from 'app/percona/shared/helpers/validatorsForm';
 
 import { rdsTrackingOptions, trackingOptions } from '../FormParts.constants';
 import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 import { AdditionalOptionsFormPartProps, PostgreSQLAdditionalOptionsProps } from '../FormParts.types';
 
-import { tablestatOptions } from './AdditionalOptions.constants';
-import { TablestatOptionsInterface } from './AdditionalOptions.types';
+import { autoDiscoveryOptions, tablestatOptions } from './AdditionalOptions.constants';
+import { AutoDiscoveryOptionsInterface, TablestatOptionsInterface } from './AdditionalOptions.types';
 import { MongodbTLSCertificate } from './MongodbTLSCertificate';
 import { MysqlTLSCertificate } from './MysqlTLSCertificate';
 import { PostgreTLSCertificate } from './PostgreTLSCertificate';
@@ -41,16 +42,58 @@ export const AdditionalOptionsFormPart: FC<AdditionalOptionsFormPartProps> = ({
   );
 };
 
-export const PostgreSQLAdditionalOptions: FC<PostgreSQLAdditionalOptionsProps> = ({ isRDS, isAzure }) => (
-  <>
-    <h4>{Messages.form.labels.trackingOptions}</h4>
-    <RadioButtonGroupField
-      name="tracking"
-      data-testid="tracking-options-radio-button-group"
-      options={isRDS || isAzure ? rdsTrackingOptions : trackingOptions}
-    />
-  </>
-);
+export const PostgreSQLAdditionalOptions: FC<PostgreSQLAdditionalOptionsProps> = ({ form, isRDS, isAzure }) => {
+  const selectedOption = form.getState().values && form.getState().values.autoDiscoveryOptions;
+  const [selectedValue, setSelectedValue] = useState<string>(selectedOption || AutoDiscoveryOptionsInterface.disabled);
+  const autoDiscoveryValidators = useMemo(() => [validators.min(0)], []);
+  const styles = useStyles2(getStyles);
+
+  const getAutoDiscoveryLimitValue = (type: AutoDiscoveryOptionsInterface) => {
+    switch (type) {
+      case AutoDiscoveryOptionsInterface.disabled:
+        return 0;
+      default:
+        return 1000;
+    }
+  };
+
+  useEffect(() => {
+    setSelectedValue(selectedOption);
+    form.change('autoDiscoveryLimit', getAutoDiscoveryLimitValue(selectedOption));
+  }, [selectedOption, form]);
+
+  return (
+    <>
+      <h4>{Messages.form.labels.trackingOptions}</h4>
+      <RadioButtonGroupField
+        name="tracking"
+        data-testid="tracking-options-radio-button-group"
+        options={isRDS || isAzure ? rdsTrackingOptions : trackingOptions}
+      />
+      <h4>{Messages.form.labels.postgresqlDetails.autoDiscovery}</h4>
+      <div className={styles.group}>
+        <RadioButtonGroupField
+          name="autoDiscoveryOptions"
+          data-testid="auto-discovery-options-radio-button-group"
+          defaultValue={selectedValue}
+          options={autoDiscoveryOptions}
+          className={styles.radioField}
+          label={Messages.form.labels.postgresqlDetails.autoDiscoveryLimitOptions}
+          fullWidth
+        />
+        <NumberInputField
+          key="autoDiscoveryLimit"
+          name="autoDiscoveryLimit"
+          defaultValue={0}
+          disabled={selectedValue !== AutoDiscoveryOptionsInterface.custom}
+          validators={autoDiscoveryValidators}
+          label={Messages.form.labels.postgresqlDetails.autoDiscoveryLimit}
+          tooltipText={Messages.form.tooltips.postgresqlDetails.autoDiscoveryLimit}
+        />
+      </div>
+    </>
+  );
+};
 
 const getTablestatValues = (type: TablestatOptionsInterface) => {
   switch (type) {
@@ -115,6 +158,7 @@ export const getAdditionalOptions = (
             />
           </>
           <PostgreSQLAdditionalOptions
+            form={form}
             isRDS={remoteInstanceCredentials.isRDS}
             isAzure={remoteInstanceCredentials.isAzure}
           />

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.types.ts

@@ -3,3 +3,8 @@ export enum TablestatOptionsInterface {
   default = 'default',
   custom = 'custom',
 }
+
+export enum AutoDiscoveryOptionsInterface {
+  disabled = 'disabled',
+  custom = 'custom',
+}

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts

@@ -29,6 +29,9 @@ export const Messages = {
       postgresqlDetails: {
         database: 'Database',
         maxQueryLength: 'Max query length',
+        autoDiscovery: 'Auto discovery',
+        autoDiscoveryLimit: 'Auto discovery limit',
+        autoDiscoveryLimitOptions: 'State',
       },
       mysqlDetails: {
         maxQueryLength: 'Max query length',
@@ -87,6 +90,7 @@ export const Messages = {
       postgresqlDetails: {
         database: 'Database (default: postgres)',
         maxQueryLength: 'Max query length',
+        autoDiscoveryLimit: 'Auto discovery limit',
       },
       mysqlDetails: {
         maxQueryLength: 'Max query length',
@@ -126,6 +130,7 @@ export const Messages = {
       postgresqlDetails: {
         database: 'Database name',
         maxQueryLength: 'Full Example (Fingerprint) storage is not allowed by default to have the best performance',
+        autoDiscoveryLimit: 'TODO',
       },
       mysqlDetails: {
         maxQueryLength: 'Full Example (Fingerprint) storage is not allowed by default to have the best performance',

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.test.tsx

@@ -181,7 +181,7 @@ describe('getAdditionalOptions ::', () => {
     const fields = container.querySelectorAll('input');
     const trakingFields = screen.getAllByTestId('tracking-radio-button');
     expect(trakingFields.length).toBe(trackingOptions.length);
-    expect(fields.length).toBe(7);
+    expect(fields.length).toBe(11);
   });
   it('should render correct for RDS PostgreSQL', async () => {
     const type = Databases.postgresql;
@@ -198,6 +198,6 @@ describe('getAdditionalOptions ::', () => {
     const fields = container.querySelectorAll('input');
     const trakingFields = screen.getAllByTestId('tracking-radio-button');
     expect(trakingFields.length).toBe(rdsTrackingOptions.length);
-    expect(fields.length).toBe(8);
+    expect(fields.length).toBe(12);
   });
 });

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.types.ts

@@ -21,6 +21,7 @@ export interface AdditionalOptionsFormPartProps {
 export interface PostgreSQLAdditionalOptionsProps {
   isRDS?: boolean;
   isAzure?: boolean;
+  form: FormApi;
 }
 
 export enum Schema {