mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-25 05:34:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse source 
create a component to handle the search bar with debounce
This commit is contained in:
Björn Rabenstein 2022-01-19 15:47:41 +01:00 committed by GitHub
parent de51e98128 74f497ac18
commit 7e74557998
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/ui/react-app/src/components/SearchBar.tsx Normal file
View file

@ -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;

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

@ -8,9 +8,8 @@ import { mapObjEntries } from '../../utils';
import { usePathPrefix } from '../../contexts/PathPrefixContext'; import { usePathPrefix } from '../../contexts/PathPrefixContext';
import { API_PATH } from '../../constants/constants'; import { API_PATH } from '../../constants/constants';
import { KVSearch } from '@nexucis/kvsearch'; 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 { interface ServiceMap {
activeTargets: Target[]; activeTargets: Target[];
@ -117,12 +116,7 @@ export const ServiceDiscoveryContent: FC<ServiceMap> = ({ activeTargets, dropped
<> <>
<h2>Service Discovery</h2> <h2>Service Discovery</h2>
<Container> <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> </Container>
<ul> <ul>
{mapObjEntries(targetList, ([k, v]) => ( {mapObjEntries(targetList, ([k, v]) => (

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

@ -5,14 +5,13 @@ import { API_PATH } from '../../constants/constants';
import { groupTargets, ScrapePool, ScrapePools, Target } from './target'; import { groupTargets, ScrapePool, ScrapePools, Target } from './target';
import { withStatusIndicator } from '../../components/withStatusIndicator'; import { withStatusIndicator } from '../../components/withStatusIndicator';
import { ChangeEvent, FC, useEffect, useState } from 'react'; 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 { ScrapePoolContent } from './ScrapePoolContent';
import Filter, { Expanded, FilterData } from './Filter'; import Filter, { Expanded, FilterData } from './Filter';
import { useLocalStorage } from '../../hooks/useLocalStorage'; import { useLocalStorage } from '../../hooks/useLocalStorage';
import styles from './ScrapePoolPanel.module.css'; import styles from './ScrapePoolPanel.module.css';
import { ToggleMoreLess } from '../../components/ToggleMoreLess'; import { ToggleMoreLess } from '../../components/ToggleMoreLess';
import SearchBar from '../../components/SearchBar';
interface ScrapePoolListProps { interface ScrapePoolListProps {
activeTargets: Target[]; activeTargets: Target[];
@ -98,12 +97,7 @@ const ScrapePoolListContent: FC<ScrapePoolListProps> = ({ activeTargets }) => {
<Filter filter={filter} setFilter={setFilter} expanded={expanded} setExpanded={setExpanded} /> <Filter filter={filter} setFilter={setFilter} expanded={expanded} setExpanded={setExpanded} />
</Col> </Col>
<Col xs="6"> <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> </Col>
</Row> </Row>
{Object.keys(poolList) {Object.keys(poolList)