ui: Add filter compaction UI

CHANGELOG.md

@@ -20,6 +20,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 - [#4764](https://github.com/thanos-io/thanos/pull/4764) Compactor: add `block-viewer.global.sync-block-timeout` flag to set the timeout of synchronization block metas.
 - [#4801](https://github.com/thanos-io/thanos/pull/4801) Compactor: added Prometheus metrics for tracking the progress of compaction and downsampling.
 - [#4444](https://github.com/thanos-io/thanos/pull/4444) UI: add mark deletion and no compaction to the Block UI.
+- [#4576](https://github.com/thanos-io/thanos/pull/4576) UI: add filter compaction level to the Block UI.
 
 ### Fixed
 

pkg/ui/react-app/src/thanos/pages/blocks/BlockFilterCompaction.tsx

@@ -0,0 +1,34 @@
+import React, { FC, ChangeEvent } from 'react';
+import Checkbox from '../../../components/Checkbox';
+import { Input } from 'reactstrap';
+import styles from './blocks.module.css';
+
+interface BlockFilterCompactionProps {
+ id: string;
+ defaultChecked: boolean;
+ onChangeCheckbox: ({ target }: ChangeEvent<HTMLInputElement>) => void;
+ onChangeInput: ({ target }: ChangeEvent<HTMLInputElement>) => void;
+ defaultValue: string;
+}
+
+export const BlockFilterCompaction: FC<BlockFilterCompactionProps> = ({
+ id,
+ defaultChecked,
+ onChangeCheckbox,
+ onChangeInput,
+ defaultValue,
+}) => {
+ return (
+ <div className={styles.blockFilter} style={{ marginLeft: '24px' }}>
+ <Checkbox style={{ marginRight: '4px' }} id={id} defaultChecked={defaultChecked} onChange={onChangeCheckbox} />
+ <p style={{ marginRight: '4px' }}>Filter by compaction level</p>
+ <Input
+ type="number"
+ style={{ width: '80px', marginBottom: '1rem' }}
+ onChange={onChangeInput}
+ defaultValue={defaultValue}
+ min={0}
+ />
+ </div>
+ );
+};

pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx

@@ -9,6 +9,7 @@ import { Block } from './block';
 import { SourceView } from './SourceView';
 import { BlockDetails } from './BlockDetails';
 import { BlockSearchInput } from './BlockSearchInput';
+import { BlockFilterCompaction } from './BlockFilterCompaction';
 import { sortBlocks } from './helpers';
 import styles from './blocks.module.css';
 import TimeRange from './TimeRange';
@@ -24,6 +25,7 @@ export interface BlockListProps {
 export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
  const [selectedBlock, selectBlock] = useState<Block>();
  const [searchState, setSearchState] = useState<string>('');
+
  const { blocks, label, err } = data;
 
  const [gridMinTime, gridMaxTime] = useMemo(() => {
@@ -44,16 +46,28 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
  }, [blocks, err]);
 
  const [
- { 'min-time': viewMinTime, 'max-time': viewMaxTime, ulid: blockSearchParam, 'find-overlapping': findOverlappingParam },
+ {
+ 'min-time': viewMinTime,
+ 'max-time': viewMaxTime,
+ ulid: blockSearchParam,
+ 'find-overlapping': findOverlappingParam,
+ 'filter-compaction': filterCompactionParam,
+ 'compaction-level': compactionLevelParam,
+ },
  setQuery,
  ] = useQueryParams({
  'min-time': withDefault(NumberParam, gridMinTime),
  'max-time': withDefault(NumberParam, gridMaxTime),
  ulid: withDefault(StringParam, ''),
  'find-overlapping': withDefault(BooleanParam, false),
+ 'filter-compaction': withDefault(BooleanParam, false),
+ 'compaction-level': withDefault(NumberParam, 0),
  });
 
+ const [filterCompaction, setFilterCompaction] = useState<boolean>(filterCompactionParam);
  const [findOverlappingBlocks, setFindOverlappingBlocks] = useState<boolean>(findOverlappingParam);
+ const [compactionLevel, setCompactionLevel] = useState<number>(compactionLevelParam);
+ const [compactionLevelInput, setCompactionLevelInput] = useState<string>(compactionLevelParam.toString());
  const [blockSearch, setBlockSearch] = useState<string>(blockSearchParam);
 
  const blockPools = useMemo(() => sortBlocks(blocks, label, findOverlappingBlocks), [blocks, label, findOverlappingBlocks]);
@@ -72,6 +86,34 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
  setBlockSearch(searchState);
  };
 
+ const onChangeCompactionCheckbox = (target: EventTarget & HTMLInputElement) => {
+ setFilterCompaction(target.checked);
+ if (target.checked) {
+ let compactionLevel: number = parseInt(compactionLevelInput);
+ setQuery({
+ 'filter-compaction': target.checked,
+ 'compaction-level': compactionLevel,
+ });
+ setCompactionLevel(compactionLevel);
+ } else {
+ setQuery({
+ 'filter-compaction': target.checked,
+ 'compaction-level': 0,
+ });
+ setCompactionLevel(0);
+ }
+ };
+
+ const onChangeCompactionInput = (target: HTMLInputElement) => {
+ if (filterCompaction) {
+ setQuery({
+ 'compaction-level': parseInt(target.value),
+ });
+ setCompactionLevel(parseInt(target.value));
+ }
+ setCompactionLevelInput(target.value);
+ };
+
  if (err) return <UncontrolledAlert color="danger">{err.toString()}</UncontrolledAlert>;
 
  return (
@@ -83,18 +125,29 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
  onClick={() => setBlockSearchInput(searchState)}
  defaultValue={blockSearchParam}
  />
- <Checkbox
- id="find-overlap-block-checkbox"
- onChange={({ target }) => {
- setQuery({
- 'find-overlapping': target.checked,
- });
- setFindOverlappingBlocks(target.checked);
- }}
- defaultChecked={findOverlappingBlocks}
- >
- Enable finding overlapping blocks
- </Checkbox>
+ <div className={styles.blockFilter}>
+ <Checkbox
+ id="find-overlap-block-checkbox"
+ onChange={({ target }) => {
+ setQuery({
+ 'find-overlapping': target.checked,
+ });
+ setFindOverlappingBlocks(target.checked);
+ }}
+ defaultChecked={findOverlappingBlocks}
+ >
+ Enable finding overlapping blocks
+ </Checkbox>
+ <BlockFilterCompaction
+ id="filter-compaction-checkbox"
+ defaultChecked={filterCompaction}
+ onChangeCheckbox={({ target }) => onChangeCompactionCheckbox(target)}
+ onChangeInput={({ target }: ChangeEvent<HTMLInputElement>): void => {
+ onChangeCompactionInput(target);
+ }}
+ defaultValue={compactionLevelInput}
+ />
+ </div>
  <div className={styles.container}>
  <div className={styles.grid}>
  <div className={styles.sources}>
@@ -107,6 +160,7 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
  gridMinTime={viewMinTime}
  gridMaxTime={viewMaxTime}
  blockSearch={blockSearch}
+ compactionLevel={compactionLevel}
  />
  ))}
  </div>

pkg/ui/react-app/src/thanos/pages/blocks/SourceView.test.tsx

@@ -17,6 +17,7 @@ describe('Blocks SourceView', () => {
  gridMinTime: 1596096000000,
  gridMaxTime: 1595108031471,
  blockSearch: '',
+ compactionLevel: 0,
  };
 
  const sourceView = mount(<SourceView {...defaultProps} />);

pkg/ui/react-app/src/thanos/pages/blocks/SourceView.tsx

@@ -2,20 +2,22 @@ import React, { FC } from 'react';
 import { Block, BlocksPool } from './block';
 import { BlockSpan } from './BlockSpan';
 import styles from './blocks.module.css';
-import { getBlockByUlid } from './helpers';
+import { getBlockByUlid, getBlocksByCompactionLevel } from './helpers';
 
 export const BlocksRow: FC<{
  blocks: Block[];
  gridMinTime: number;
  gridMaxTime: number;
  selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
  blockSearch: string;
-}> = ({ blocks, gridMinTime, gridMaxTime, selectBlock, blockSearch }) => {
- const blockSearchValue = getBlockByUlid(blocks, blockSearch);
+ compactionLevel: number;
+}> = ({ blocks, gridMinTime, gridMaxTime, selectBlock, blockSearch, compactionLevel }) => {
+ let filteredBlocks = getBlockByUlid(blocks, blockSearch);
+ filteredBlocks = getBlocksByCompactionLevel(filteredBlocks, compactionLevel);
 
  return (
  <div className={styles.row}>
- {blockSearchValue.map<JSX.Element>((b) => (
+ {filteredBlocks.map<JSX.Element>((b) => (
  <BlockSpan selectBlock={selectBlock} block={b} gridMaxTime={gridMaxTime} gridMinTime={gridMinTime} key={b.ulid} />
  ))}
  </div>
@@ -29,9 +31,18 @@ export interface SourceViewProps {
  gridMaxTime: number;
  selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
  blockSearch: string;
+ compactionLevel: number;
 }
 
-export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, gridMinTime, selectBlock, blockSearch }) => {
+export const SourceView: FC<SourceViewProps> = ({
+ data,
+ title,
+ gridMaxTime,
+ gridMinTime,
+ selectBlock,
+ blockSearch,
+ compactionLevel,
+}) => {
  return (
  <>
  <div className={styles.source}>
@@ -49,6 +60,7 @@ export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, grid
  gridMaxTime={gridMaxTime}
  gridMinTime={gridMinTime}
  blockSearch={blockSearch}
+ compactionLevel={compactionLevel}
  />
  ))}
  </React.Fragment>

pkg/ui/react-app/src/thanos/pages/blocks/blocks.module.css

@@ -194,3 +194,9 @@
 .blockInput {
  margin-bottom: 12px;
 }
+
+.blockFilter {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}

pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts

@@ -137,3 +137,12 @@ export const getBlockByUlid = (blocks: Block[], ulid: string): Block[] => {
  const blockResult = blocks.filter((block, index) => resultIndex.includes(index));
  return blockResult;
 };
+
+export const getBlocksByCompactionLevel = (blocks: Block[], compactionLevel: number): Block[] => {
+ if (compactionLevel === 0 || Number.isNaN(compactionLevel)) {
+ return blocks;
+ }
+
+ const blockResult = blocks.filter((block) => block.compaction.level === compactionLevel);
+ return blockResult;
+};