PMM-13428 Fix add remote instance issues.

docker-compose.yml

@@ -10,6 +10,8 @@ services:
       - "./:/workspace"
       - "./public:/usr/share/grafana/public"
       - "./conf/grafana.local-dev.ini:/usr/share/grafana/conf/defaults.ini"
+      # pmm
+      # - "../pmm:/root/go/src/github.com/percona/pmm"
     ports:
       - 80:8080
       - 443:8443

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

@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useEffect, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
-import { NodesAgents } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents';
 import { PasswordInputField } from 'app/percona/shared/components/Form/PasswordInput';
 import { RadioButtonGroupField } from 'app/percona/shared/components/Form/RadioButtonGroup';
 import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
@@ -97,7 +96,6 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
             />
             <div />
           </div>
-          <NodesAgents form={form} />
           <div className={styles.group}>
             <TextInputField
               name="address"

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

@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
-import { NodesAgents } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents';
 import { PasswordInputField } from 'app/percona/shared/components/Form/PasswordInput';
 import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
 import Validators from 'app/percona/shared/helpers/validators';
@@ -30,7 +29,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
         />
         <div />
       </div>
-      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

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

@@ -39,10 +39,13 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   }, []);
 
   const changeAgentValue = (value: AgentsOption) => {
-    if (value.label !== PMM_SERVER_NODE_AGENT_ID) {
-      form?.change('address', 'localhost');
-    } else {
-      form?.change('address', '');
+    console.log(form?.getState().values?.address);
+    if (form?.getState().values?.address === undefined || form?.getState().values?.address === '' ) {
+      if (value.label !== PMM_SERVER_NODE_AGENT_ID) {
+        form?.change('address', 'localhost');
+      } else {
+        form?.change('address', '');
+      }
     }
   };
 
@@ -57,13 +60,9 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
     }
     if (selectedAgent) {
       form?.change('pmm_agent_id', selectedAgent);
-
-      if (selectedAgent.value !== PMM_SERVER_NODE_AGENT_ID) {
-        form?.change('address', 'localhost');
-      }
+      changeAgentValue(selectedAgent);
     } else {
       form?.change('pmm_agent_id', undefined);
-      form?.change('address', '');
     }
   };
 

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

@@ -2,4 +2,5 @@ import { FormApi } from 'final-form';
 
 export interface NodesAgentsProps {
   form?: FormApi;
+  isRDS?: boolean;
 }

public/app/percona/shared/core/reducers/nodes/nodes.utils.ts

@@ -66,4 +66,4 @@ export const nodesOptionsMapper = (nodeFromDb: NodeDB[]): NodesOption[] =>
       label: node.node_name,
       agents: agents,
     };
-  });
+  }).filter((node) => node.agents.length > 0);