UI: Optimize Target, Alert and Service Discovery pages (#5119)

* add generic component for infinite scroll and search bar Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * rework service discovery page Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * rework alert page Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * rework target page Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * add entry in the changelog Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix test Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix linter issue Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * add infinite scroll on target Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * modify the assets Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix Changelog Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * persis the search event Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * add missing bindata Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
thanos-io · Feb 10, 2022 · b2c1ff0 · b2c1ff0
1 parent c038534
commit b2c1ff0
Show file tree

Hide file tree

Showing 23 changed files with 678 additions and 461 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,9 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 - [#5111](https://github.com/thanos-io/thanos/pull/5111) Add matcher support to Query Rules endpoint.
 - [#5117](https://github.com/thanos-io/thanos/pull/5117) Bucket replicate: Added flag `--ignore-marked-for-deletion` to avoid replication of blocks with the deletion mark.
 
+## 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.

diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/package-lock.json b/pkg/ui/react-app/package-lock.json
diff --git a/pkg/ui/react-app/package.json b/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.19.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",

diff --git a/pkg/ui/react-app/src/components/CustomInfiniteScroll.tsx b/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;
diff --git a/pkg/ui/react-app/src/components/SearchBar.tsx b/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;