Optimize Target, Alert and Service Discovery pages

CHANGELOG.md

@@ -26,6 +26,9 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 - [#4999](https://github.com/thanos-io/thanos/pull/4999) COS: Support `endpoint` configuration for vpc internal endpoint.
 - [#5059](https://github.com/thanos-io/thanos/pull/5059) Compactor: Adding minimum retention flag validation for downsampling retention.
 
+## Changed
+- [#5119](https://github.com/thanos-io/thanos/pull/5119) UI: Optimize Target, Alert and Service Discovery page and on each of them add a search bar.
+
 ### Fixed
 
 - [#5051](https://github.com/thanos-io/thanos/pull/5051) Prober: Remove spam of changing probe status.

pkg/ui/react-app/package.json

@@ -19,7 +19,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@nexucis/fuzzy": "^0.2.2",
+    "@nexucis/fuzzy": "^0.3.0",
+    "@nexucis/kvsearch": "^0.4.0",
     "@reach/router": "^1.3.4",
     "bootstrap": "^4.6.0",
     "codemirror-promql": "^0.18.0",
@@ -37,6 +38,7 @@
     "react": "^16.14.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.14.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-resize-detector": "^4.2.1",
     "react-select": "^4.1.0",
     "react-test-renderer": "^16.14.0",

pkg/ui/react-app/src/components/CustomInfiniteScroll.tsx

@@ -0,0 +1,50 @@
+import { ComponentType, useEffect, useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+
+const initialNumberOfItemsDisplayed = 50;
+
+export interface InfiniteScrollItemsProps<T> {
+  items: T[];
+}
+
+interface CustomInfiniteScrollProps<T> {
+  allItems: T[];
+  child: ComponentType<InfiniteScrollItemsProps<T>>;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const CustomInfiniteScroll = <T extends unknown>({ allItems, child }: CustomInfiniteScrollProps<T>) => {
+  const [items, setItems] = useState<T[]>(allItems.slice(0, 50));
+  const [index, setIndex] = useState<number>(initialNumberOfItemsDisplayed);
+  const [hasMore, setHasMore] = useState<boolean>(allItems.length > initialNumberOfItemsDisplayed);
+  const Child = child;
+
+  useEffect(() => {
+    setItems(allItems.slice(0, initialNumberOfItemsDisplayed));
+    setHasMore(allItems.length > initialNumberOfItemsDisplayed);
+  }, [allItems]);
+
+  const fetchMoreData = () => {
+    if (items.length === allItems.length) {
+      setHasMore(false);
+    } else {
+      const newIndex = index + initialNumberOfItemsDisplayed;
+      setIndex(newIndex);
+      setItems(allItems.slice(0, newIndex));
+    }
+  };
+
+  return (
+    <InfiniteScroll
+      next={fetchMoreData}
+      hasMore={hasMore}
+      loader={<h4>loading...</h4>}
+      dataLength={items.length}
+      height={items.length > 25 ? '75vh' : ''}
+    >
+      <Child items={items} />
+    </InfiniteScroll>
+  );
+};
+
+export default CustomInfiniteScroll;

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

@@ -0,0 +1,34 @@
+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);
+    // TODO e.persist() should be removed once the upgrade to react v17 is done.
+    // https://reactjs.org/docs/legacy-event-pooling.html
+    e.persist();
+    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;