[4.0-7.9] Fix search bar filter in Manage agent of group

public/components/common/search/fieldsearch-delay.tsx

@@ -0,0 +1,60 @@
+/*
+ * Wazuh app - Wazuh field search component with a delay
+ * Copyright (C) 2015-2020 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { EuiFieldSearch } from '@elastic/eui';
+
+type WzFieldSearchProps = {
+  delay?: number
+  onSearch: (searchTerm: string) => void
+  onChange?: (searchTerm: string) => void
+  onError?: (error: any) => void
+  [name: string]: any
+}
+
+export const WzFieldSearchDelay = ({ delay = 400, onChange, onSearch, onError, ...rest } : WzFieldSearchProps) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const timerDelay = useRef();
+
+  useEffect(() => {
+    return () => timerDelay.current && clearTimeout(timerDelay.current);
+  },[]);
+
+  const onChangeInput = e => {
+    const searchValue: string = e.target.value;
+    onChange && onChange(searchValue);
+    if(timerDelay.current){
+      clearTimeout(timerDelay.current);
+    };
+
+    setSearchTerm(searchValue);
+
+    timerDelay.current = setTimeout(() => {
+      onSearchInput(searchValue);
+    }, delay);
+  };
+
+  const onSearchInput = async (searchValue) => {
+    try{
+      if(timerDelay.current){
+        clearTimeout(timerDelay.current);
+      };
+      setLoading(true);
+      await onSearch(searchValue);
+    }catch(error){
+      onError && onError(error);
+    }
+    setLoading(false);
+  }
+
+  return <EuiFieldSearch {...rest} value={searchTerm} isLoading={loading} onChange={onChangeInput} onSearch={onSearchInput}/>
+}

public/components/common/search/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Wazuh app - Wazuh search components
+ * Copyright (C) 2015-2020 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+export { WzFieldSearchDelay } from './fieldsearch-delay';

public/components/management/groups/multiple-agent-selector.tsx

@@ -1,3 +1,14 @@
+/*
+ * Wazuh app - Multiple agent selector component
+ * Copyright (C) 2015-2020 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
 import React, { Component } from 'react';
 import {
   EuiPage, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiButton,
@@ -7,6 +18,7 @@ import { ErrorHandler } from '../../../react-services/error-handler';
 import { WzRequest } from '../../../react-services/wz-request';
 import './multiple-agent-selector.less'
 import $ from 'jquery';
+import { WzFieldSearchDelay } from '../../common/search';
 
 export class MultipleAgentSelector extends Component {
   constructor(props) {
@@ -332,8 +344,15 @@ export class MultipleAgentSelector extends Component {
     return parseInt(a.key);
   };
 
-  async reload(element, searchTerm, start = false, addOffset) {
+  async reload(element, searchTerm, start = false, addOffset = 0) {
     if (element === 'left') {
+      const callbackLoadAgents = async () => {
+        try {
+          await this.loadAllAgents(searchTerm, start);
+        } catch (error) {
+          ErrorHandler.handle(error, 'Error fetching all available agents');
+        };
+      };
       if (!this.state.availableAgents.loadedAll) {
         if (start) {
           this.setState({
@@ -345,20 +364,17 @@ export class MultipleAgentSelector extends Component {
               ...this.state.selectedAgents,
               offset: 0,
             }
-          })
+          }, callbackLoadAgents)
         } else {
           this.setState({
             availableAgents: {
               ...this.state.availableAgents,
               offset: this.state.availableAgents.offset + 500,
             }
-          })
-        }
-        try {
-          await this.loadAllAgents(searchTerm, start);
-        } catch (error) {
-          this.errorHandler.handle(error, 'Error fetching all available agents');
+          }, callbackLoadAgents)
         }
+      }else{
+        callbackLoadAgents();
       }
     } else {
       if (!this.state.selectedAgents.loadedAll) {
@@ -372,15 +388,15 @@ export class MultipleAgentSelector extends Component {
         try {
           await this.loadSelectedAgents(searchTerm);
         } catch (error) {
-          this.errorHandler.handle(error, 'Error fetching all selected agents');
+          ErrorHandler.handle(error, 'Error fetching all selected agents');
         }
       }
     }
   }
 
   scrollList = async (target) => {
     if (target === 'left') {
-      await this.reload('left', this.state.availableFilter, false)
+      await this.reload('left', this.state.availableFilter, false);
     } else {
       await this.reload('right', this.state.selectedFilter, false);
     }
@@ -462,14 +478,15 @@ export class MultipleAgentSelector extends Component {
                                 {/*)} */}
                               </EuiFlexGroup>
                               <EuiSpacer size={"s"}></EuiSpacer>
-                              <EuiFieldSearch
+                              <WzFieldSearchDelay
                                 placeholder="Filter..."
-                                onChange={(ev) => {
-                                  this.setState({ availableFilter: ev.target.value, availableItem: [] });
+                                onChange={(searchValue) => {
+                                  this.setState({ availableFilter: searchValue, availableItem: [] });
                                 }}
-                                onSearch={value => {
-                                  this.setState({ availableFilter: value },
-                                    () => { this.reload("left", this.state.availableFilter, true) });
+                                onSearch={async searchValue => {
+                                  try{
+                                    await this.reload("left", searchValue, true);
+                                  }catch(error){}
                                 }}
                                 isClearable={true}
                                 fullWidth={true}

public/components/overview/mitre/components/techniques/techniques.tsx

@@ -36,11 +36,10 @@ import { withWindowSize } from '../../../../../components/common/hocs/withWindow
 import { WzRequest } from '../../../../../react-services/wz-request';
 import {WAZUH_ALERTS_PATTERN} from '../../../../../../util/constants';
 import { AppState } from '../../../../../react-services/app-state';
+import { WzFieldSearchDelay } from '../../../../common/search'
 
 export const Techniques = withWindowSize(class Techniques extends Component {
   _isMount = false;
-  timerDelaySearch: ReturnType<typeof setTimeout> | undefined;
-  delaySearchTime: number = 400; // delay time in search bar techniques to do the request. This prevents you from making a request with every change in the search term and wait this time instead after last change
 
   props!: {
     tacticsObject: ITactic
@@ -51,7 +50,6 @@ export const Techniques = withWindowSize(class Techniques extends Component {
 
   state: {
     techniquesCount: {key: string, doc_count: number}[]
-    searchValue: any,
     isFlyoutVisible: Boolean,
     currentTechniqueData: {},
     currentTechnique: string,
@@ -65,7 +63,6 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     super(props);
 
     this.state = {
-      searchValue: "",
       isFlyoutVisible: false,
       currentTechniqueData: {},
       techniquesCount: [],
@@ -103,9 +100,6 @@ export const Techniques = withWindowSize(class Techniques extends Component {
 
   componentWillUnmount() {
     this._isMount = false;
-    if(this.timerDelaySearch){
-      clearTimeout(this.timerDelaySearch);
-    };
   }
 
   async getTechniquesCount() {
@@ -310,42 +304,32 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     filterManager.addFilters([newFilter]);
   }
 
-  onSearchValueChange = async e => {
-    const searchValue = e.target.value;
-
-    if(this.timerDelaySearch){
-      clearTimeout(this.timerDelaySearch);
-    };
-
-    if(searchValue){
-      this.setState({searchValue});
-    }else{
-      this._isMount && this.setState({ searchValue, filteredTechniques: false, isSearching: false });
-      return;
+  onChange = searchValue => {
+    if(!searchValue){
+      this._isMount && this.setState({ filteredTechniques: false, isSearching: false });
     }
+  }
 
-    this.timerDelaySearch = setTimeout(async () => {
-      try{
-        if(searchValue){
-          this._isMount && this.setState({isSearching: true});
-          const response = await WzRequest.apiReq('GET', '/mitre', {
-            params: {
-              select: "id",
-              search: searchValue,
-              limit: 500
-            }
-          });
-          const filteredTechniques = ((((response || {}).data || {}).data).affected_items || []).map(item => item.id);
-          this._isMount && this.setState({ filteredTechniques, isSearching: false });
-        }else{
-          this._isMount && this.setState({ filteredTechniques: false, isSearching: false });
-        }
-      }catch(error){
+  onSearch = async searchValue => {
+    try{
+      if(searchValue){
+        this._isMount && this.setState({isSearching: true});
+        const response = await WzRequest.apiReq('GET', '/mitre', {
+          params: {
+            select: "id",
+            search: searchValue,
+            limit: 500
+          }
+        });
+        const filteredTechniques = ((((response || {}).data || {}).data).affected_items || []).map(item => item.id);
+        this._isMount && this.setState({ filteredTechniques, isSearching: false });
+      }else{
         this._isMount && this.setState({ filteredTechniques: false, isSearching: false });
       }
-    }, this.delaySearchTime); // delay time in search bar techniques to do the request. This prevents you from making a request with every change in the search term and wait this time instead after last change
+    }catch(error){
+      this._isMount && this.setState({ filteredTechniques: false, isSearching: false });
+    }
   }
-
   async closeActionsMenu() {
     this.setState({actionsOpen: false});
   }
@@ -398,13 +382,12 @@ export const Techniques = withWindowSize(class Techniques extends Component {
         </EuiFlexGroup>
         <EuiSpacer size="xs" />
 
-        <EuiFieldSearch
+        <WzFieldSearchDelay
           fullWidth={true}
           placeholder="Filter techniques of selected tactic/s"
-          value={this.state.searchValue}
-          onChange={e => this.onSearchValueChange(e)}
+          onChange={this.onChange}
+          onSearch={this.onSearch}
           isClearable={true}
-          isLoading={this.state.isSearching}
           aria-label="Use aria labels when no actual label is in use"
         />
         <EuiSpacer size="s" />