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

CHANGELOG.md

@@ -26,6 +26,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.

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({
@@ -89,7 +91,7 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
   const onChangeCompactionCheckbox = (target: EventTarget & HTMLInputElement) => {
     setFilterCompaction(target.checked);
     if (target.checked) {
-      let compactionLevel: number = parseInt(compactionLevelInput);
+      const compactionLevel: number = parseInt(compactionLevelInput);
       setQuery({
         'filter-compaction': target.checked,
         'compaction-level': compactionLevel,
@@ -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}