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.tsx

@@ -49,6 +49,7 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const [generateToken] = useCancelToken();
   const initialValues: FormValues = { ...remoteInstanceCredentials };
+  initialValues.pmm_agent_id = "";
 
   if (type === Databases.mysql) {
     initialValues.qan_mysql_perfschema = true;

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.tsx

@@ -0,0 +1,89 @@
+import { FormApi } from "final-form";
+import React, { FC, useCallback, useEffect, useState } from "react";
+
+import { useStyles2 } from '@grafana/ui';
+import { getStyles } from "app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles";
+import { GET_NODES_CANCEL_TOKEN } from "app/percona/inventory/Inventory.constants";
+import { AgentsOptions, NodesOptions } 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 { fetchNodesOptionsAction } from "app/percona/shared/core/reducers/nodes/nodes";
+import { isApiCancelError } from "app/percona/shared/helpers/api";
+import { logger } from "app/percona/shared/helpers/logger";
+import { useAppDispatch } from "app/store/store";
+
+export interface NodesAgentsProps {
+  form?: FormApi;
+}
+
+export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useAppDispatch();
+  const [generateToken] = useCancelToken();
+  const [selectedNode, setSelectedNode] = useState<NodesOptions| undefined>(undefined);
+  const [selectedAgent, setSelectedAgent] = useState<AgentsOptions | undefined>(undefined);
+  const [nodes, setNodes] = useState<NodesOptions[]>([]);
+
+  const loadData = useCallback(async () => {
+    try {
+      setNodes(await dispatch(fetchNodesOptionsAction({ 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: NodesOptions) => {
+    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(nodes.length === 0) {
+      loadData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodes]);
+
+  return (
+    <div className={styles.group}>
+      <div className={styles.selectFieldWrapper}>
+        <SelectField
+          label="Nodes"
+          isSearchable={false}
+          disabled={false}
+          options={nodes}
+          name="node"
+          data-testid="nodes-label"
+          onChange={ (event) => { setNodeAndAgent(event as NodesOptions) }}
+          className={styles.selectField}
+          value={selectedNode}
+        />
+      </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="nodes-label"
+          onChange={ (event) => { setSelectedAgent(event as AgentsOptions); }}
+          className={styles.selectField}
+        />
+      </div>
+    </div>
+  );
+
+}

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 NodesOptions {
+  value: string;
+  label: string;
+  agents?: AgentsOptions[];
+}
+
+export interface AgentsOptions {
+  value: string;
+  label: string;
+}

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

@@ -3,11 +3,11 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { CancelToken } from 'axios';
 
 import { InventoryService } from 'app/percona/inventory/Inventory.service';
-import { Node, RemoveNodeBody } from 'app/percona/inventory/Inventory.types';
+import { Node, NodesOptions, RemoveNodeBody } from 'app/percona/inventory/Inventory.types';
 import { filterFulfilled, processPromiseResults } from 'app/percona/shared/helpers/promises';
 
 import { NodesState, RemoveNodesParams } from './nodes.types';
-import { nodeFromDbMapper } from './nodes.utils';
+import { nodeFromDbMapper, nodesOptionsMapper } from './nodes.utils';
 
 const initialState: NodesState = {
   nodes: [],
@@ -44,6 +44,15 @@ export const fetchNodesAction = createAsyncThunk<Node[], { token?: CancelToken }
   }
 );
 
+export const fetchNodesOptionsAction = createAsyncThunk<NodesOptions[], { token?: CancelToken }>(
+  'percona/fetchNodesOptions',
+  async (params = {}) => {
+    const { nodes } = await InventoryService.getNodes(params.token);
+
+    return nodesOptionsMapper(nodes);
+  }
+);
+
 export const removeNodesAction = createAsyncThunk(
   'percona/removeNodes',
   async (params: RemoveNodesParams): Promise<number> => {

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions */
-import { Node, NodeDB } from 'app/percona/inventory/Inventory.types';
+import { AgentsOptions, AgentType, Node, NodeDB, NodesOptions } from 'app/percona/inventory/Inventory.types';
 import { getAgentsMonitoringStatus } from 'app/percona/inventory/Tabs/Services.utils';
 import { DbAgent } from 'app/percona/shared/services/services/Services.types';
 
@@ -54,3 +54,25 @@ export const nodeFromDbMapper = (nodeFromDb: NodeDB[]) => {
     } as Node;
   });
 };
+
+export const nodesOptionsMapper = (nodeFromDb: NodeDB[]) => {
+  return  nodeFromDb.map((node) => {
+
+    const agents = node.agents?.map(
+      (agent) => {
+        if (agent.agent_type === AgentType.pmmAgent) {
+          return {
+            value: agent.agent_type,
+            label: agent.agent_id
+          } as AgentsOptions;
+        } else { return null; }
+      }
+    ).filter(agent => agent !== null) as AgentsOptions[];
+
+    return {
+      value: node.node_id,
+      label: node.node_name,
+      agents: agents,
+    } as NodesOptions;
+  });
+}