ui: Add find overlap block UI

CHANGELOG.md

@@ -16,6 +16,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 - [#4487](https://github.com/thanos-io/thanos/pull/4487) Query: Add memcached auto discovery support.
 - [#4444](https://github.com/thanos-io/thanos/pull/4444) UI: Add search block UI.
 - [#4509](https://github.com/thanos-io/thanos/pull/4509) Logging: Adds duration_ms in int64 to the logs.
+- [#4462](https://github.com/thanos-io/thanos/pull/4462) UI: Add find overlap block UI
 
 ### Fixed
 

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

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC, useMemo, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import { UncontrolledAlert } from 'reactstrap';
-import { useQueryParams, withDefault, NumberParam, StringParam } from 'use-query-params';
+import { useQueryParams, withDefault, NumberParam, StringParam, BooleanParam } from 'use-query-params';
 import { withStatusIndicator } from '../../../components/withStatusIndicator';
 import { useFetch } from '../../../hooks/useFetch';
 import PathPrefixProps from '../../../types/PathPrefixProps';
@@ -12,6 +12,8 @@ import { BlockSearchInput } from './BlockSearchInput';
 import { sortBlocks } from './helpers';
 import styles from './blocks.module.css';
 import TimeRange from './TimeRange';
+import Checkbox from '../../../components/Checkbox';
+
 export interface BlockListProps {
   blocks: Block[];
   err: string | null;
@@ -22,10 +24,8 @@ 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 blockPools = useMemo(() => sortBlocks(blocks, label), [blocks, label]);
   const [gridMinTime, gridMaxTime] = useMemo(() => {
     if (!err && blocks.length > 0) {
       let gridMinTime = blocks[0].minTime;
@@ -43,14 +43,21 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
     return [0, 0];
   }, [blocks, err]);
 
-  const [{ 'min-time': viewMinTime, 'max-time': viewMaxTime, ulid: blockSearchParam }, setQuery] = useQueryParams({
+  const [
+    { 'min-time': viewMinTime, 'max-time': viewMaxTime, ulid: blockSearchParam, 'find-overlapping': findOverlappingParam },
+    setQuery,
+  ] = useQueryParams({
     'min-time': withDefault(NumberParam, gridMinTime),
     'max-time': withDefault(NumberParam, gridMaxTime),
     ulid: withDefault(StringParam, ''),
+    'find-overlapping': withDefault(BooleanParam, false),
   });
 
+  const [findOverlappingBlocks, setFindOverlappingBlocks] = useState<boolean>(findOverlappingParam);
   const [blockSearch, setBlockSearch] = useState<string>(blockSearchParam);
 
+  const blockPools = useMemo(() => sortBlocks(blocks, label, findOverlappingBlocks), [blocks, label, findOverlappingBlocks]);
+
   const setViewTime = (times: number[]): void => {
     setQuery({
       'min-time': times[0],
@@ -76,6 +83,18 @@ 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.container}>
             <div className={styles.grid}>
               <div className={styles.sources}>

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

@@ -4,7 +4,7 @@ import { SourceView, SourceViewProps, BlocksRow } from './SourceView';
 import { sampleAPIResponse } from './__testdata__/testdata';
 import { sortBlocks } from './helpers';
 
-const sorted = sortBlocks(sampleAPIResponse.data.blocks, sampleAPIResponse.data.label);
+const sorted = sortBlocks(sampleAPIResponse.data.blocks, sampleAPIResponse.data.label, false);
 const source = 'prometheus_one';
 
 describe('Blocks SourceView', () => {

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

@@ -15,11 +15,9 @@ export const BlocksRow: FC<{
 
   return (
     <div className={styles.row}>
-      {blockSearchValue.map<JSX.Element>((b) => {
-        return (
-          <BlockSpan selectBlock={selectBlock} block={b} gridMaxTime={gridMaxTime} gridMinTime={gridMinTime} key={b.ulid} />
-        );
-      })}
+      {blockSearchValue.map<JSX.Element>((b) => (
+        <BlockSpan selectBlock={selectBlock} block={b} gridMaxTime={gridMaxTime} gridMinTime={gridMinTime} key={b.ulid} />
+      ))}
     </div>
   );
 };

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

@@ -10,8 +10,8 @@ const stringify = (map: LabelSet): string => {
 };
 
 export const isOverlapping = (a: Block, b: Block): boolean => {
-  if (a.minTime <= b.minTime) return b.minTime < a.maxTime;
-  else return a.minTime < b.maxTime;
+  if (a?.minTime <= b?.minTime) return b?.minTime < a?.maxTime;
+  else return a?.minTime < b?.maxTime;
 };
 
 const determineRow = (block: Block, rows: Block[][], startWithRow: number): number => {
@@ -39,7 +39,7 @@ const splitOverlappingBlocks = (blocks: Block[]): Block[][] => {
   return rows;
 };
 
-const sortBlocksInRows = (blocks: Block[]): BlocksPool => {
+const sortBlocksInRows = (blocks: Block[], findOverlappingBlocks: boolean): BlocksPool => {
   const poolWithOverlaps: { [key: string]: Block[] } = {};
 
   blocks
@@ -60,14 +60,31 @@ const sortBlocksInRows = (blocks: Block[]): BlocksPool => {
     });
 
   const pool: BlocksPool = {};
+
   Object.entries(poolWithOverlaps).forEach(([key, blks]) => {
-    pool[key] = splitOverlappingBlocks(blks);
+    if (findOverlappingBlocks) {
+      let maxTime = 0;
+      const filteredOverlap = blks.filter((value, index) => {
+        const isOverlap = maxTime > value.minTime;
+        if (value.maxTime > maxTime) {
+          maxTime = value.maxTime;
+        }
+        return isOverlap || isOverlapping(blks[index], blks[index + 1]);
+      });
+      pool[key] = splitOverlappingBlocks(filteredOverlap);
+    } else {
+      pool[key] = splitOverlappingBlocks(blks);
+    }
   });
 
   return pool;
 };
 
-export const sortBlocks = (blocks: Block[], label: string): { [source: string]: BlocksPool } => {
+export const sortBlocks = (
+  blocks: Block[],
+  label: string,
+  findOverlappingBlocks: boolean
+): { [source: string]: BlocksPool } => {
   const titles: { [key: string]: string } = {};
   const pool: { [key: string]: Block[] } = {};
 
@@ -94,7 +111,7 @@ export const sortBlocks = (blocks: Block[], label: string): { [source: string]:
 
   const sortedPool: { [source: string]: BlocksPool } = {};
   Object.keys(pool).forEach((k) => {
-    sortedPool[k] = sortBlocksInRows(pool[k]);
+    sortedPool[k] = sortBlocksInRows(pool[k], findOverlappingBlocks);
   });
   return sortedPool;
 };