diff --git a/CHANGELOG.md b/CHANGELOG.md index c0a7305a0d..89c1aef893 100644 --- 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 index 1b7512c4da..30252a912c 100644 --- 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(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 }) => {
- {Object.keys(blockPools).map((pk) => ( - - ))} + {Object.keys(filteredBlockPools).length > 0 ? ( + Object.keys(filteredBlockPools).map((pk) => ( + + )) + ) : ( +
+

No Blocks Found!

+
+ )}
{ @@ -256,3 +631,28 @@ describe('isOverlapping helper', () => { expect(isOverlapping({ ...b, minTime: 10, maxTime: 20 }, { ...b, minTime: 20, maxTime: 30 })).toBe(false); }); }); + +describe('Block Pools', () => { + it('should have exactly 4 objects', () => { + expect(Object.keys(blockPools)).toHaveLength(4); + }); +}); + +describe('Filtered block pools', () => { + const objectKeyArray = Object.keys(filteredBlockPools); + const filteredBlockPoolArray = + filteredBlockPools[objectKeyArray[0]][Object.keys(filteredBlockPools[objectKeyArray[0]])[0]][0]; + + it('should have exactly one object', () => { + expect(objectKeyArray).toHaveLength(1); + }); + it('should have key equals 2', () => { + expect(objectKeyArray[0]).toEqual('2'); + }); + it('should contain contain blocks having same labels', () => { + expect(filteredBlockPoolArray[0].thanos.labels).toEqual(filteredBlockPoolArray[1].thanos.labels); + }); + it('should contain the first block having exactly the same labels as in filteredBlocks', () => { + expect(filteredBlockPoolArray[0].thanos.labels).toEqual(filteredBlocks[0].thanos.labels); + }); +}); diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts b/pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts index 5e8c353d05..3320cc71a7 100644 --- a/pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts +++ b/pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts @@ -146,3 +146,21 @@ export const getBlocksByCompactionLevel = (blocks: Block[], compactionLevel: num const blockResult = blocks.filter((block) => block.compaction.level === compactionLevel); return blockResult; }; + +export const getFilteredBlockPools = ( + blockPools: { [source: string]: BlocksPool }, + filteredBlocks: Block[] +): { [source: string]: BlocksPool } => { + const newblockPools: { [source: string]: BlocksPool } = {}; + Object.keys(blockPools).map((key: string) => { + const poolArrayIndex = blockPools[key]; + const poolArray = poolArrayIndex[Object.keys(poolArrayIndex)[0]]; + for (let i = 0; i < filteredBlocks.length; i++) { + if (JSON.stringify(filteredBlocks[i].thanos.labels) === JSON.stringify(poolArray[0][0].thanos.labels)) { + Object.assign(newblockPools, { [key]: blockPools[key] }); + break; + } + } + }); + return newblockPools; +};