PMM-13166: Ability to monitor DBs from a different node

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

@@ -65,6 +65,9 @@ describe('AddRemoteInstanceService:: ', () => {
       replication_set: 'test',
       cluster: 'test',
       custom_labels: 'test:test',
+      pmm_agent_id: {
+        value: 'pmm-server',
+      },
     };
 
     const payload = {
@@ -93,7 +96,6 @@ describe('AddRemoteInstanceService:: ', () => {
       qan_postgresql_pgstatements_agent: true,
       metrics_mode: 1,
     };
-
     expect(toPayload(data)).toStrictEqual(payload);
   });
 });

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.service.tsx

@@ -179,8 +179,11 @@ export const toPayload = (values: any, discoverName?: string, type?: InstanceAva
     }
   }
 
+  data.pmm_agent_id = values.pmm_agent_id.value;
+
   data.metrics_mode = 1;
   delete data.tracking;
+  delete data.node;
 
   return data;
 };

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

@@ -1,7 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { Databases } from 'app/percona/shared/core';
+import { configureStore } from 'app/store/configureStore';
 
 import { InstanceTypesExtra } from '../../panel.types';
 
@@ -20,7 +22,11 @@ jest.mock('app/percona/shared/helpers/logger', () => {
 describe('Add remote instance:: ', () => {
   it('should render correct for mysql and postgres and highlight empty mandatory fields on submit', async () => {
     const type = Databases.mysql;
-    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(
+      <Provider store={configureStore()}>
+        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+      </Provider>
+    );
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);
@@ -35,7 +41,11 @@ describe('Add remote instance:: ', () => {
 
   it('should render for external service and highlight empty mandatory fields on submit', async () => {
     const type = InstanceTypesExtra.external;
-    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(
+      <Provider store={configureStore()}>
+        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+      </Provider>
+    );
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('metrics_path-text-input').classList.contains('invalid')).toBe(false);
@@ -55,7 +65,11 @@ describe('Add remote instance:: ', () => {
   it('should render correct for HAProxy and highlight empty mandatory fields on submit', async () => {
     const type = Databases.haproxy;
 
-    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(
+      <Provider store={configureStore()}>
+        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+      </Provider>
+    );
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tools.test.ts

@@ -23,6 +23,7 @@ describe('Get instance data:: ', () => {
         port: '5432',
         metricsParameters: 'manually',
         schema: 'https',
+        pmm_agent_id: '',
       },
     };
 
@@ -77,6 +78,7 @@ describe('Get instance data:: ', () => {
         port: '27017',
         metricsParameters: 'manually',
         schema: 'https',
+        pmm_agent_id: '',
       },
     };
 
@@ -100,6 +102,7 @@ describe('Get instance data:: ', () => {
         port: '3306',
         metricsParameters: 'manually',
         schema: 'https',
+        pmm_agent_id: '',
       },
     };
 
@@ -123,6 +126,7 @@ describe('Get instance data:: ', () => {
         port: '6032',
         metricsParameters: 'manually',
         schema: 'https',
+        pmm_agent_id: '',
       },
     };
 

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tools.tsx

@@ -117,6 +117,7 @@ export const getInstanceData = (instanceType: InstanceAvailableType, credentials
       remoteInstanceCredentials: {
         metricsParameters: MetricsParameters.manually,
         schema: Schema.HTTPS,
+        pmm_agent_id: '',
       },
     };
 

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

@@ -1,21 +1,26 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
 
 import { ExternalServiceConnectionDetails } from './ExternalServiceConnectionDetails';
 
 describe('Add remote instance:: ', () => {
   it('should render correct for mysql and postgres and highlight empty mandatory fields on submit', async () => {
     render(
-      <Form
-        onSubmit={jest.fn()}
-        mutators={{
-          setValue: ([field, value], state, { changeValue }) => {
-            changeValue(state, field, () => value);
-          },
-        }}
-        render={({ form }) => <ExternalServiceConnectionDetails form={form} />}
-      />
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          mutators={{
+            setValue: ([field, value], state, { changeValue }) => {
+              changeValue(state, field, () => value);
+            },
+          }}
+          render={({ form }) => <ExternalServiceConnectionDetails form={form} />}
+        />
+      </Provider>
     );
 
     const metricsParametrsRadioState = screen.getByTestId('metricsParameters-radio-state');

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

@@ -1,6 +1,7 @@
 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';
@@ -96,6 +97,7 @@ 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/FormParts.messages.ts

@@ -19,6 +19,10 @@ export const Messages = {
         username: 'Username',
         password: 'Password',
       },
+      nodesAgents: {
+        nodes: 'Nodes',
+        agents: 'Agents',
+      },
       mainDetails: {
         address: 'Hostname',
         serviceName: 'Service name',

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

@@ -32,6 +32,12 @@ export const getStyles = ({ breakpoints, spacing, colors }: GrafanaTheme2) => ({
     width: 100%;
     margin-right: 5px;
   `,
+  selectFieldWrapper: css`
+    width: 100%;
+  `,
+  selectField: css`
+    height: 38px;
+  `,
   group: css`
     display: flex;
     flex-direction: row;

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

@@ -2,8 +2,10 @@ import { render, screen } from '@testing-library/react';
 import { FormApi, FormState } from 'final-form';
 import React from 'react';
 import { Form } from 'react-final-form';
+import { Provider } from 'react-redux';
 
 import { Databases } from 'app/percona/shared/core';
+import { configureStore } from 'app/store/configureStore';
 
 import { AdditionalOptionsFormPart, getAdditionalOptions } from './AdditionalOptions/AdditionalOptions';
 import { ExternalServiceConnectionDetails } from './ExternalServiceConnectionDetails/ExternalServiceConnectionDetails';
@@ -20,14 +22,16 @@ const form: Partial<FormApi> = {
 describe('MainDetailsFormPart ::', () => {
   it('should disable fields with sat isRDS flag', async () => {
     const { container } = render(
-      <Form
-        onSubmit={jest.fn()}
-        render={({ form }) => <MainDetailsFormPart form={form} remoteInstanceCredentials={{ isRDS: true }} />}
-      />
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={({ form }) => <MainDetailsFormPart form={form} remoteInstanceCredentials={{ isRDS: true }} />}
+        />
+      </Provider>
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(5);
+    expect(fields.length).toBe(8);
 
     expect(screen.getByTestId('address-text-input')).toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();
@@ -38,14 +42,16 @@ describe('MainDetailsFormPart ::', () => {
 
   it('should disable fields with not sat isRDS flag', async () => {
     const { container } = render(
-      <Form
-        onSubmit={jest.fn()}
-        render={({ form }) => <MainDetailsFormPart form={form} remoteInstanceCredentials={{ isRDS: false }} />}
-      />
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={({ form }) => <MainDetailsFormPart form={form} remoteInstanceCredentials={{ isRDS: false }} />}
+        />
+      </Provider>
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(5);
+    expect(fields.length).toBe(8);
 
     expect(screen.getByTestId('address-text-input')).not.toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();
@@ -58,10 +64,12 @@ describe('MainDetailsFormPart ::', () => {
 describe('ExternalServiceConnectionDetails ::', () => {
   it('should render', async () => {
     const { container } = render(
-      <Form
-        onSubmit={jest.fn()}
-        render={() => <ExternalServiceConnectionDetails form={form as unknown as FormApi} />}
-      />
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => <ExternalServiceConnectionDetails form={form as unknown as FormApi} />}
+        />
+      </Provider>
     );
 
     const fields = container.querySelectorAll('input');
@@ -89,17 +97,19 @@ describe('AdditionalOptionsFormPart ::', () => {
     };
 
     render(
-      <Form
-        onSubmit={jest.fn()}
-        render={() => (
-          <AdditionalOptionsFormPart
-            instanceType={type}
-            remoteInstanceCredentials={remoteInstanceCredentials}
-            loading={false}
-            form={form as unknown as FormApi}
-          />
-        )}
-      />
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => (
+            <AdditionalOptionsFormPart
+              instanceType={type}
+              remoteInstanceCredentials={remoteInstanceCredentials}
+              loading={false}
+              form={form as unknown as FormApi}
+            />
+          )}
+        />
+      </Provider>
     );
 
     expect(screen.getByTestId('skip_connection_check-checkbox-input')).toBeInTheDocument();

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

@@ -1,12 +1,19 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
 
 import { HAProxyConnectionDetails } from './HAProxyConnectionDetails';
 
 describe('HAProxy connection details:: ', () => {
   it('should trim username and password values right', () => {
-    render(<Form onSubmit={jest.fn()} render={() => <HAProxyConnectionDetails remoteInstanceCredentials={{}} />} />);
+    render(
+      <Provider store={configureStore()}>
+        <Form onSubmit={jest.fn()} render={() => <HAProxyConnectionDetails remoteInstanceCredentials={{}} />} />
+      </Provider>
+    );
 
     const userNameTextInput = screen.getByTestId('username-text-input');
     fireEvent.change(userNameTextInput, { target: { value: '    test     ' } });

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

@@ -1,6 +1,7 @@
 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';
@@ -10,7 +11,7 @@ import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
-export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteInstanceCredentials }) => {
+export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
   const styles = useStyles2(getStyles);
 
   const portValidators = useMemo(() => [validators.required, Validators.validatePort], []);
@@ -29,6 +30,7 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
         />
         <div />
       </div>
+      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

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

@@ -1,6 +1,7 @@
 import React, { FC, 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,6 +31,7 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
         />
         <div />
       </div>
+      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

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

@@ -1,12 +1,19 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
 
 import { MongoDBConnectionDetails } from './MongoDBConnectionDetails';
 
 describe('MongoDB connection details:: ', () => {
   it('should have max query length attribute', () => {
-    render(<Form onSubmit={jest.fn()} render={() => <MongoDBConnectionDetails remoteInstanceCredentials={{}} />} />);
+    render(
+      <Provider store={configureStore()}>
+        <Form onSubmit={jest.fn()} render={() => <MongoDBConnectionDetails remoteInstanceCredentials={{}} />} />
+      </Provider>
+    );
 
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });

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

@@ -1,6 +1,7 @@
 import React, { FC, 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';
@@ -31,6 +32,7 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
         />
         <div />
       </div>
+      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"