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

pkg/ui/react-app/src/pages/alerts/AlertContents.tsx

@@ -1,9 +1,12 @@
-import React, { FC, useState, Fragment } from 'react';
-import { Badge } from 'reactstrap';
+import React, { FC, useState, Fragment, ChangeEvent, useEffect } from 'react';
+import { Badge, Col, Row } from 'reactstrap';
 import CollapsibleAlertPanel from './CollapsibleAlertPanel';
 import Checkbox from '../../components/Checkbox';
 import { isPresent } from '../../utils';
 import { Rule } from '../../types/types';
+import { KVSearch } from '@nexucis/kvsearch';
+import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
+import SearchBar from '../../components/SearchBar';
 
 export type RuleState = keyof RuleStatus<any>;
 
@@ -33,13 +36,33 @@ interface RuleGroup {
   interval: number;
 }
 
+const kvSearchRule = new KVSearch({
+  shouldSort: true,
+  indexedKeys: ['name', 'labels', ['labels', /.*/]],
+});
+
 const stateColorTuples: Array<[RuleState, 'success' | 'warning' | 'danger']> = [
   ['inactive', 'success'],
   ['pending', 'warning'],
   ['firing', 'danger'],
 ];
 
+function GroupContent(showAnnotations: boolean) {
+  const Content: FC<InfiniteScrollItemsProps<Rule>> = ({ items }) => {
+    return (
+      <>
+        {items.map((rule, j) => (
+          <CollapsibleAlertPanel key={rule.name + j} showAnnotations={showAnnotations} rule={rule} />
+        ))}
+      </>
+    );
+  };
+  return Content;
+}
+
 const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
+  const [groupList, setGroupList] = useState(groups);
+  const [filteredList, setFilteredList] = useState(groups);
   const [filter, setFilter] = useState<RuleStatus<boolean>>({
     firing: true,
     pending: true,
@@ -54,49 +77,80 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
     });
   };
 
+  const handleSearchChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    if (e.target.value !== '') {
+      const pattern = e.target.value.trim();
+      const result: RuleGroup[] = [];
+      for (const group of groups) {
+        const ruleFilterList = kvSearchRule.filter(pattern, group.rules);
+        if (ruleFilterList.length > 0) {
+          result.push({
+            file: group.file,
+            name: group.name,
+            interval: group.interval,
+            rules: ruleFilterList.map((value) => value.original as unknown as Rule),
+          });
+        }
+      }
+      setGroupList(result);
+    } else {
+      setGroupList(groups);
+    }
+  };
+
+  useEffect(() => {
+    const result: RuleGroup[] = [];
+    for (const group of groupList) {
+      const newGroup = {
+        file: group.file,
+        name: group.name,
+        interval: group.interval,
+        rules: group.rules.filter((value) => filter[value.state]),
+      };
+      if (newGroup.rules.length > 0) {
+        result.push(newGroup);
+      }
+    }
+    setFilteredList(result);
+  }, [groupList, filter]);
+
   return (
     <>
-      <div className="d-flex togglers-wrapper">
-        {stateColorTuples.map(([state, color]) => {
-          return (
-            <Checkbox
-              key={state}
-              wrapperStyles={{ marginRight: 10 }}
-              defaultChecked
-              id={`${state}-toggler`}
-              onClick={toggleFilter(state)}
-            >
-              <Badge color={color} className="text-capitalize">
-                {state} ({statsCount[state]})
-              </Badge>
-            </Checkbox>
-          );
-        })}
-        <Checkbox
-          wrapperStyles={{ marginLeft: 'auto' }}
-          id="show-annotations-toggler"
-          onClick={() => setShowAnnotations(!showAnnotations)}
-        >
-          <span style={{ fontSize: '0.9rem', lineHeight: 1.9 }}>Show annotations</span>
-        </Checkbox>
-      </div>
-      {groups.map((group, i) => {
-        const hasFilterOn = group.rules.some((rule) => filter[rule.state]);
-        return hasFilterOn ? (
-          <Fragment key={i}>
-            <GroupInfo rules={group.rules}>
-              {group.file} &gt; {group.name}
-            </GroupInfo>
-            {group.rules.map((rule, j) => {
-              return (
-                filter[rule.state] && (
-                  <CollapsibleAlertPanel key={rule.name + j} showAnnotations={showAnnotations} rule={rule} />
-                )
-              );
-            })}
-          </Fragment>
-        ) : null;
-      })}
+      <Row className="align-items-center">
+        <Col className="d-flex" lg="4" md="5">
+          {stateColorTuples.map(([state, color]) => {
+            return (
+              <Checkbox key={state} checked={filter[state]} id={`${state}-toggler`} onChange={toggleFilter(state)}>
+                <Badge color={color} className="text-capitalize">
+                  {state} ({statsCount[state]})
+                </Badge>
+              </Checkbox>
+            );
+          })}
+        </Col>
+        <Col lg="5" md="4">
+          <SearchBar handleChange={handleSearchChange} placeholder="Filter by name or labels" />
+        </Col>
+        <Col className="d-flex flex-row-reverse" md="3">
+          <Checkbox
+            checked={showAnnotations}
+            id="show-annotations-toggler"
+            onChange={({ target }) => setShowAnnotations(target.checked)}
+          >
+            <span style={{ fontSize: '0.9rem', lineHeight: 1.9, display: 'inline-block', whiteSpace: 'nowrap' }}>
+              Show annotations
+            </span>
+          </Checkbox>
+        </Col>
+      </Row>
+      {filteredList.map((group, i) => (
+        <Fragment key={i}>
+          <GroupInfo rules={group.rules}>
+            {group.file} &gt; {group.name}
+          </GroupInfo>
+          <CustomInfiniteScroll allItems={group.rules} child={GroupContent(showAnnotations)} />
+        </Fragment>
+      ))}
     </>
   );
 };