feat: add filter compaction level

Signed-off-by: Shafiya Adzhani <adz.arsym@gmail.com>

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}>
+      <Checkbox style={{ marginRight: '4px' }} id={id} defaultChecked={defaultChecked} onChange={onChangeCheckbox} />
+      <p style={{ marginRight: '4px' }}>Filter by compaction level</p>
+      <Input
+        type="number"
+        style={{ width: '100px', 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,10 @@ export interface BlockListProps {
 export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
   const [selectedBlock, selectBlock] = useState<Block>();
   const [searchState, setSearchState] = useState<string>('');
+  const [filterCompaction, setFilterCompaction] = useState<boolean>(false);
+  const [compactionLevel, setCompactionLevel] = useState<number>(0);
+  const [compactionLevelInput, setCompactionLevelInput] = useState<string>('0');
+
   const { blocks, label, err } = data;
 
   const [gridMinTime, gridMaxTime] = useMemo(() => {
@@ -95,6 +100,25 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
           >
             Enable finding overlapping blocks
           </Checkbox>
+          <BlockFilterCompaction
+            id="filter-compaction-checkbox"
+            defaultChecked={filterCompaction}
+            onChangeCheckbox={({ target }) => {
+              setFilterCompaction(target.checked);
+              if (target.checked) {
+                setCompactionLevel(parseInt(compactionLevelInput));
+              } else {
+                setCompactionLevel(0);
+              }
+            }}
+            onChangeInput={({ target }: ChangeEvent<HTMLInputElement>): void => {
+              if (filterCompaction) {
+                setCompactionLevel(parseInt(target.value));
+              }
+              setCompactionLevelInput(target.value);
+            }}
+            defaultValue={compactionLevelInput}
+          />
           <div className={styles.container}>
             <div className={styles.grid}>
               <div className={styles.sources}>
@@ -107,6 +131,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,16 +2,18 @@ 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 blockSearchValue = getBlockByUlid(blocks, blockSearch);
+  blockSearchValue = getBlocksByCompactionLevel(blockSearchValue, compactionLevel);
 
   return (
     <div className={styles.row}>
@@ -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;
+};