Merge pull request #10157 from prometheus/nexucis/debounce-search

create a component to handle the search bar with debounce

web/ui/react-app/src/components/SearchBar.tsx

@@ -0,0 +1,31 @@
+import React, { ChangeEvent, FC } from 'react';
+import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+export interface SearchBarProps {
+  handleChange: (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+  placeholder: string;
+}
+
+const SearchBar: FC<SearchBarProps> = ({ handleChange, placeholder }) => {
+  let filterTimeout: NodeJS.Timeout;
+
+  const handleSearchChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    clearTimeout(filterTimeout);
+    filterTimeout = setTimeout(() => {
+      handleChange(e);
+    }, 300);
+  };
+
+  return (
+    <InputGroup>
+      <InputGroupAddon addonType="prepend">
+        <InputGroupText>{<FontAwesomeIcon icon={faSearch} />}</InputGroupText>
+      </InputGroupAddon>
+      <Input autoFocus onChange={handleSearchChange} placeholder={placeholder} />
+    </InputGroup>
+  );
+};
+
+export default SearchBar;

web/ui/react-app/src/pages/serviceDiscovery/Services.tsx

@@ -8,9 +8,8 @@ import { mapObjEntries } from '../../utils';
 import { usePathPrefix } from '../../contexts/PathPrefixContext';
 import { API_PATH } from '../../constants/constants';
 import { KVSearch } from '@nexucis/kvsearch';
-import { Container, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Container } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import SearchBar from '../../components/SearchBar';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
 interface ServiceMap {
   activeTargets: Target[];
@@ -117,12 +116,7 @@ export const ServiceDiscoveryContent: FC<ServiceMap> = ({ activeTargets, dropped
     <>
       <h2>Service Discovery</h2>
       <Container>
-        <InputGroup>
+        <SearchBar handleChange={handleSearchChange} placeholder="Filter by labels" />
-          <InputGroupAddon addonType="prepend">
-            <InputGroupText>{<FontAwesomeIcon icon={faSearch} />}</InputGroupText>
-          </InputGroupAddon>
-          <Input autoFocus onChange={handleSearchChange} placeholder="Filter by labels" />
-        </InputGroup>
       </Container>
       <ul>
         {mapObjEntries(targetList, ([k, v]) => (

web/ui/react-app/src/pages/targets/ScrapePoolList.tsx

@@ -5,14 +5,13 @@ import { API_PATH } from '../../constants/constants';
 import { groupTargets, ScrapePool, ScrapePools, Target } from './target';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { ChangeEvent, FC, useEffect, useState } from 'react';
-import { Col, Collapse, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
+import { Col, Collapse, Row } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { ScrapePoolContent } from './ScrapePoolContent';
 import Filter, { Expanded, FilterData } from './Filter';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import styles from './ScrapePoolPanel.module.css';
 import { ToggleMoreLess } from '../../components/ToggleMoreLess';
+import SearchBar from '../../components/SearchBar';
 
 interface ScrapePoolListProps {
   activeTargets: Target[];
@@ -98,12 +97,7 @@ const ScrapePoolListContent: FC<ScrapePoolListProps> = ({ activeTargets }) => {
           <Filter filter={filter} setFilter={setFilter} expanded={expanded} setExpanded={setExpanded} />
         </Col>
         <Col xs="6">
-          <InputGroup>
+          <SearchBar handleChange={handleSearchChange} placeholder="Filter by endpoint or labels" />
-            <InputGroupAddon addonType="prepend">
-              <InputGroupText>{<FontAwesomeIcon icon={faSearch} />}</InputGroupText>
-            </InputGroupAddon>
-            <Input autoFocus onChange={handleSearchChange} placeholder="Filter by endpoint or labels" />
-          </InputGroup>
         </Col>
       </Row>
       {Object.keys(poolList)