Added server address and wazuh protocol definition in Deploy agent se…

…ction (#5166)

* Added new WzServerAddressInput component

* Updated CHANGELOG

* Update state server address when is mounted

* Resolved review comments

* Updated CHANGELOG

* Updated logic when protocol is UDP

* Modified wazuh protocol param definition

* Changed PR text in CHANGELOG

* Reverted changes tsconfig

(cherry picked from commit b167d6c)

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added file saving conditions in File Editor [#4970](https://github.com/wazuh/wazuh-kibana-app/pull/4970)
 - Added character validation to avoid invalid agent names in the section 'Deploy new agent'. [#5021](https://github.com/wazuh/wazuh-kibana-app/pull/5021) [#5028](https://github.com/wazuh/wazuh-kibana-app/pull/5028)
 - Added default selected options in Deploy Agent page [#5063](https://github.com/wazuh/wazuh-kibana-app/pull/5063)
+- Added server address and wazuh protocol definition in Deploy agent section [#5166](https://github.com/wazuh/wazuh-kibana-app/pull/5166)
 
 ### Changed
 

public/controllers/agent/components/register-agent-service.ts

@@ -198,4 +198,16 @@ export const getMasterNode = (
     return nodeIps.filter(nodeIp => nodeIp.nodetype === 'master');
 };
 
+/**
+ * Get the remote configuration from manager
+ * This function get the config from manager mode or cluster mode 
+ */
+export const getMasterRemoteConfiguration = async () => {
+  const nodes = await fetchClusterNodesOptions();
+  const masterNode = getMasterNode(nodes);
+  return await getRemoteConfiguration(masterNode[0].label);      
+}
+
+
+
 export { getConnectionConfig, getRemoteConfiguration };

public/controllers/agent/components/register-agent.js

@@ -71,10 +71,9 @@ import {
   architectureButtonsWithPPC64LEAlpine,
 } from '../wazuh-config';
 import './register-agent.scss';
-import ServerAddress from '../register-agent/steps/server-address';
+import WzManagerAddressInput from '../register-agent/steps/wz-manager-address';
 import {
-  getConnectionConfig,
-  fetchClusterNodesOptions,
+  getMasterRemoteConfiguration
 } from './register-agent-service';
 import { PrincipalButtonGroup } from './wz-accordion';
 import RegisterAgentButtonGroup from '../register-agent/register-agent-button-group';
@@ -122,13 +121,15 @@ export const RegisterAgent = withErrorBoundary(
       };
     }
 
+
     async componentDidMount() {
       try {
         this.setState({ loading: true });
         const wazuhVersion = await this.props.getWazuhVersion();
         let wazuhPassword = '';
         let hidePasswordInput = false;
         this.getEnrollDNSConfig();
+        await this.getRemoteConfig();
         let authInfo = await this.getAuthInfo();
         const needsPassword = (authInfo.auth || {}).use_password === 'yes';
         if (needsPassword) {
@@ -194,15 +195,23 @@ export const RegisterAgent = withErrorBoundary(
     }
 
     getEnrollDNSConfig = () => {
-      let serverAddress = this.configuration['enrollment.dns'] || '';
+      const serverAddress = this.configuration['enrollment.dns'] || '';
       this.setState({ defaultServerAddress: serverAddress });
-      if (serverAddress) {
-        this.setState({ udpProtocol: true });
-      } else {
-        this.setState({ udpProtocol: false });
-      }
     };
 
+    getRemoteConfig = async () => {
+      const remoteConfig = await getMasterRemoteConfiguration();
+      if (remoteConfig) {
+        this.setState({
+          haveUdpProtocol: remoteConfig.isUdp,
+          haveConnectionSecure: remoteConfig.isSecure,
+          udpProtocol: remoteConfig.isUdp,
+          connectionSecure: remoteConfig.isSecure,
+        })
+      }
+    }
+
+
     async getAuthInfo() {
       try {
         const result = await WzRequest.apiReq(
@@ -376,7 +385,6 @@ export const RegisterAgent = withErrorBoundary(
       let deployment =
         this.state.serverAddress &&
         `WAZUH_MANAGER='${this.state.serverAddress}' `;
-      const protocol = false;
       if (this.state.selectedOS == 'win') {
         deployment += `WAZUH_REGISTRATION_SERVER='${this.state.serverAddress}' `;
       }
@@ -1651,43 +1659,12 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
         },
       ];
 
-      const onChangeServerAddress = async selectedNodes => {
-        if (selectedNodes.length === 0) {
+      const onChangeServerAddress = async nodeSelected => {
           this.setState({
-            serverAddress: '',
-            udpProtocol: false,
-            connectionSecure: null,
-          });
-        } else {
-          const nodeSelected = selectedNodes[0];
-          try {
-            const remoteConfig = await getConnectionConfig(nodeSelected);
-            this.setState({
-              serverAddress: remoteConfig.serverAddress,
-              udpProtocol: remoteConfig.udpProtocol,
-              connectionSecure: remoteConfig.connectionSecure,
-            });
-          } catch (error) {
-            const options = {
-              context: `${RegisterAgent.name}.onChangeServerAddress`,
-              level: UI_LOGGER_LEVELS.ERROR,
-              severity: UI_ERROR_SEVERITIES.BUSINESS,
-              display: true,
-              store: false,
-              error: {
-                error: error,
-                message: error.message || error,
-                title: error.name || error,
-              },
-            };
-            getErrorOrchestrator().handleError(options);
-            this.setState({
-              serverAddress: nodeSelected.label,
-              udpProtocol: false,
-              connectionSecure: false,
-            });
-          }
-        }
+            serverAddress: nodeSelected,
+            udpProtocol: this.state.haveUdpProtocol,
+            connectionSecure: this.state.haveConnectionSecure
+          }); 
       };
 
       const steps = [
@@ -2142,10 +2119,9 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
                 title: 'Wazuh server address',
                 children: (
                   <Fragment>
-                    <ServerAddress
+                    <WzManagerAddressInput
                       defaultValue={this.state.defaultServerAddress}
                       onChange={onChangeServerAddress}
-                      fetchOptions={fetchClusterNodesOptions}
                     />
                   </Fragment>
                 ),

public/controllers/agent/register-agent/steps/wz-manager-address.tsx

@@ -0,0 +1,46 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { EuiText, EuiFieldText } from '@elastic/eui';
+
+type Props = {
+  onChange: (value: string) => void;
+  defaultValue?: string;
+};
+
+const WzManagerAddressInput = (props: Props) => {
+  const { onChange, defaultValue } = props;
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if(defaultValue){
+      setValue(defaultValue);
+      onChange(defaultValue);
+    }else{
+      setValue('');
+      onChange('');
+    }
+  },[])
+  /**
+   * Handles the change of the selected node IP
+   * @param value
+   */
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    onChange(value);
+    setValue(value);
+  };
+  return (
+    <EuiText>
+      <p>
+        This is the address the agent uses to communicate with the Wazuh server.
+        It can be an IP address or a fully qualified domain name (FQDN).
+      </p>
+      <EuiFieldText
+        placeholder='Server Address'
+        onChange={handleOnChange}
+        value={value}
+      />
+    </EuiText>
+  );
+};
+
+export default WzManagerAddressInput;