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

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.label;
+
   data.metrics_mode = 1;
   delete data.tracking;
+  delete data.node;
 
   return data;
 };

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.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.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/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.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"

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

@@ -1,14 +1,15 @@
 import React, { FC, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
-import { PasswordInputField } from 'app/percona/shared/components/Form/PasswordInput';
+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';
 import { validators } from 'app/percona/shared/helpers/validatorsForm';
 
 import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
+import { NodesAgents } from '../NodesAgents/NodesAgents';
 
 export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
   const styles = useStyles2(getStyles);
@@ -32,6 +33,7 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
         />
         <div />
       </div>
+      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

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

@@ -0,0 +1,45 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
+
+import { NodesAgents } from './NodesAgents';
+import { Form } from 'react-final-form';
+import * as NodesReducer from 'app/percona/shared/core/reducers/nodes/nodes.ts'
+import selectEvent from "react-select-event";
+
+const fetchNodesActionActionSpy = jest.spyOn(NodesReducer, 'fetchNodesAction');
+
+jest.mock('app/percona/inventory/Inventory.service');
+
+describe('Nodes Agents:: ', () => {
+
+  let store = configureStore();
+  let formAPI;
+  render(
+    <Provider store={store}>
+      <Form
+        onSubmit={jest.fn()}
+        render={({ form }) => {
+          formAPI=form;
+          return <NodesAgents form={form}/>
+        }}
+      />
+    </Provider>
+  );
+
+  it('should change the   list of agents when changing the nodes', async () => {
+    await waitFor(() => {
+      expect(fetchNodesActionActionSpy).toHaveBeenCalled();
+    });
+    const nodesSelect = screen.getByLabelText('Nodes');
+    await selectEvent.select(nodesSelect, ['pmm-server'], { container: document.body });
+
+    const agentsSelect = screen.getByLabelText('Agents');
+    const formValues = formAPI.getState().values;
+    expect(formValues.pmm_agent_id.value).toBe('pmm-agent');
+    expect(formValues.node.value).toBe('pmm-server');
+  });
+
+});

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

@@ -0,0 +1,100 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useStyles2 } from '@grafana/ui';
+import { getStyles } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles';
+import { NodesAgentsProps } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.types';
+import { GET_NODES_CANCEL_TOKEN } from 'app/percona/inventory/Inventory.constants';
+import { AgentsOption, NodesOption } from 'app/percona/inventory/Inventory.types';
+import { SelectField } from 'app/percona/shared/components/Form/SelectFieldCore';
+import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
+import { nodesOptionsMapper } from 'app/percona/shared/core/reducers/nodes';
+import { fetchNodesAction } from 'app/percona/shared/core/reducers/nodes/nodes';
+import { getNodes } from 'app/percona/shared/core/selectors';
+import { isApiCancelError } from 'app/percona/shared/helpers/api';
+import { logger } from 'app/percona/shared/helpers/logger';
+import { useAppDispatch } from 'app/store/store';
+import { useSelector } from 'app/types';
+
+export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useAppDispatch();
+  const [generateToken] = useCancelToken();
+  const [selectedNode, setSelectedNode] = useState<NodesOption>();
+  const [selectedAgent, setSelectedAgent] = useState<AgentsOption>();
+  const [nodesOptions, setNodesOptions] = useState<NodesOption[]>([]);
+  const { nodes } = useSelector(getNodes);
+
+  useMemo(() => {
+      if(nodes && nodes.length > 0) {
+        setNodesOptions(nodesOptionsMapper(nodes));
+      }
+    },
+    [nodes]
+  );
+
+
+  const loadData = useCallback(async () => {
+    try {
+      await dispatch(fetchNodesAction({ token: generateToken(GET_NODES_CANCEL_TOKEN) })).unwrap();
+    } catch (e) {
+      if (isApiCancelError(e)) {
+        return;
+      }
+      logger.error(e);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setNodeAndAgent = (value: NodesOption) => {
+    setSelectedNode(value);
+    if (value.agents && value.agents.length > 1) {
+      form?.change('pmm_agent_id', value.agents[1]);
+    } else if (value.agents && value.agents.length === 1) {
+      form?.change('pmm_agent_id', value.agents[0]);
+    }
+
+    if(selectedAgent && selectedAgent.label !== "pmm-server") {
+      form?.change('address', 'localhost');
+    }
+  }
+
+  useEffect(() => {
+    if(nodesOptions.length === 0) {
+      loadData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesOptions]);
+
+  return (
+    <div className={styles.group}>
+      <div className={styles.selectFieldWrapper}>
+        <SelectField
+          label="Nodes"
+          isSearchable={false}
+          options={nodesOptions}
+          name="node"
+          id="nodes-selectbox"
+          data-testid="nodes-selectbox"
+          onChange={ (event) => setNodeAndAgent(event as NodesOption)}
+          className={styles.selectField}
+          value={selectedNode}
+          aria-label="Nodes"
+        />
+      </div>
+      <div className={styles.selectFieldWrapper}>
+        <SelectField
+          label="Agents"
+          isSearchable={false}
+          disabled={!selectedNode || !selectedNode.agents || selectedNode.agents.length === 1}
+          options={selectedNode?.agents || []}
+          name="pmm_agent_id"
+          data-testid="agents-selectbox"
+          onChange={ (event) => setSelectedAgent(event as AgentsOption)}
+          className={styles.selectField}
+          aria-label="Agents"
+        />
+      </div>
+    </div>
+  );
+
+}

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

@@ -0,0 +1,5 @@
+import { FormApi } from 'final-form';
+
+export interface NodesAgentsProps {
+  form?: FormApi;
+}

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

@@ -9,6 +9,7 @@ import { validators } from 'app/percona/shared/helpers/validatorsForm';
 import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
+import { NodesAgents } from "../NodesAgents/NodesAgents";
 
 export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
   const styles = useStyles2(getStyles);
@@ -31,6 +32,7 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
         />
         <div />
       </div>
+      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

public/app/percona/add-instance/panel.types.ts

@@ -33,6 +33,7 @@ export interface RemoteInstanceCredentials {
   skip_connection_check?: boolean;
   tls?: boolean;
   tls_skip_verify?: boolean;
+  pmm_agent_id?: string;
 }
 
 export enum InstanceTypesExtra {

public/app/percona/inventory/Inventory.types.ts

@@ -34,7 +34,7 @@ export enum AgentType {
   mysql = 'mysql',
   mysqldExporter = 'mysqldExporter',
   nodeExporter = 'nodeExporter',
-  pmmAgent = 'pmm_agent',
+  pmmAgent = 'pmm-agent',
   postgresExporter = 'postgresExporter',
   postgresql = 'postgresql',
   proxysql = 'proxysql',
@@ -176,3 +176,14 @@ export type FlattenService = DbService &
 export type FlattenNode = DbNode & {
   type: NodeType;
 };
+
+export interface NodesOption {
+  value: string;
+  label: string;
+  agents?: AgentsOption[];
+}
+
+export interface AgentsOption {
+  value: string;
+  label: string;
+}

public/app/percona/inventory/Tabs/Agents.tsx

@@ -7,7 +7,7 @@ import { AppEvents } from '@grafana/data';
 import { Badge, Button, HorizontalGroup, Icon, Link, Modal, TagList, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { Agent, FlattenAgent, ServiceAgentStatus } from 'app/percona/inventory/Inventory.types';
+import { Agent, FlattenAgent, Node, ServiceAgentStatus } from 'app/percona/inventory/Inventory.types';
 import { SelectedTableRows } from 'app/percona/shared/components/Elements/AnotherTableInstance/Table.types';
 import { CheckboxField } from 'app/percona/shared/components/Elements/Checkbox';
 import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
@@ -16,6 +16,7 @@ import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/comp
 import { FormElement } from 'app/percona/shared/components/Form';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
+import { nodeFromDbMapper } from 'app/percona/shared/core/reducers/nodes';
 import { fetchNodesAction } from 'app/percona/shared/core/reducers/nodes/nodes';
 import { fetchServicesAction } from 'app/percona/shared/core/reducers/services';
 import { getNodes, getServices } from 'app/percona/shared/core/selectors';
@@ -51,10 +52,22 @@ export const Agents: FC<GrafanaRouteComponentProps<{ serviceId: string; nodeId:
   const { isLoading: nodesLoading, nodes } = useSelector(getNodes);
   const styles = useStyles2(getStyles);
 
+  const mappedNodes: Node[] = useMemo(
+    (): Node[] => {
+      if(nodes.length > 0) {
+        return nodeFromDbMapper(nodes).sort((a, b) => a.nodeName.localeCompare(b.nodeName));
+      }
+      return [];
+    },
+    [nodes]
+  );
+
   const service = services.find((s) => s.params.serviceId === match.params.serviceId);
-  const node = nodes.find((s) => s.nodeId === nodeId);
+  const node = mappedNodes.find((s) => s.nodeId === nodeId);
   const flattenAgents = useMemo(() => data.map((value) => ({ type: value.type, ...value.params })), [data]);
 
+
+
   const columns = useMemo(
     (): Array<ExtendedColumn<FlattenAgent>> => [
       {