Fix: Filter block rows in bucket UI according to searched block ID (t…

…hanos-io#5102) * added helper function to filter block rows Signed-off-by: soumya <[email protected]> * updated store UI to show filtered block rows Signed-off-by: soumya <[email protected]> * added unit tests for getFilteredBlockPools function Signed-off-by: soumya <[email protected]> Signed-off-by: Nicholaswang <[email protected]>
Nicholaswang · Mar 6, 2022 · 710a512 · 710a512
1 parent 4f22684
commit 710a512
Show file tree

Hide file tree

Showing 4 changed files with 441 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 
 ### Fixed
 
+- [#5102](https://github.com/thanos-io/thanos/pull/5102) Fix: Filter block rows in bucket UI according to searched block ID
 - [#5051](https://github.com/thanos-io/thanos/pull/5051) Prober: Remove spam of changing probe status.
 - [#4918](https://github.com/thanos-io/thanos/pull/4918) Tracing: Fixing force tracing with Jaeger.
 - [#4879](https://github.com/thanos-io/thanos/pull/4879) Bucket verify: Fixed bug causing wrong number of blocks to be checked.

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx
@@ -10,7 +10,7 @@ import { SourceView } from './SourceView';
 import { BlockDetails } from './BlockDetails';
 import { BlockSearchInput } from './BlockSearchInput';
 import { BlockFilterCompaction } from './BlockFilterCompaction';
-import { sortBlocks } from './helpers';
+import { sortBlocks, getBlockByUlid, getFilteredBlockPools } from './helpers';
 import styles from './blocks.module.css';
 import TimeRange from './TimeRange';
 import Checkbox from '../../../components/Checkbox';
@@ -71,6 +71,8 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
   const [blockSearch, setBlockSearch] = useState<string>(blockSearchParam);
 
   const blockPools = useMemo(() => sortBlocks(blocks, label, findOverlappingBlocks), [blocks, label, findOverlappingBlocks]);
+  const filteredBlocks = useMemo(() => getBlockByUlid(blocks, blockSearch), [blocks, blockSearch]);
+  const filteredBlockPools = useMemo(() => getFilteredBlockPools(blockPools, filteredBlocks), [filteredBlocks, blockPools]);
 
   const setViewTime = (times: number[]): void => {
     setQuery({
@@ -151,18 +153,24 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
           <div className={styles.container}>
             <div className={styles.grid}>
               <div className={styles.sources}>
-                {Object.keys(blockPools).map((pk) => (
-                  <SourceView
-                    key={pk}
-                    data={blockPools[pk]}
-                    title={pk}
-                    selectBlock={selectBlock}
-                    gridMinTime={viewMinTime}
-                    gridMaxTime={viewMaxTime}
-                    blockSearch={blockSearch}
-                    compactionLevel={compactionLevel}
-                  />
-                ))}
+                {Object.keys(filteredBlockPools).length > 0 ? (
+                  Object.keys(filteredBlockPools).map((pk) => (
+                    <SourceView
+                      key={pk}
+                      data={filteredBlockPools[pk]}
+                      title={pk}
+                      selectBlock={selectBlock}
+                      gridMinTime={viewMinTime}
+                      gridMaxTime={viewMaxTime}
+                      blockSearch={blockSearch}
+                      compactionLevel={compactionLevel}
+                    />
+                  ))
+                ) : (
+                  <div>
+                    <h3>No Blocks Found!</h3>
+                  </div>
+                )}
               </div>
               <TimeRange
                 gridMinTime={gridMinTime}