github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/blocks/SourceView.tsx (about)

     1  import React, { FC } from 'react';
     2  import { Block, BlocksPool } from './block';
     3  import { BlockSpan } from './BlockSpan';
     4  import styles from './blocks.module.css';
     5  import { getBlockByUlid, getBlocksByCompactionLevel } from './helpers';
     6  
     7  export const BlocksRow: FC<{
     8    blocks: Block[];
     9    gridMinTime: number;
    10    gridMaxTime: number;
    11    selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
    12    blockSearch: string;
    13    compactionLevel: number;
    14  }> = ({ blocks, gridMinTime, gridMaxTime, selectBlock, blockSearch, compactionLevel }) => {
    15    let filteredBlocks = getBlockByUlid(blocks, blockSearch);
    16    filteredBlocks = getBlocksByCompactionLevel(filteredBlocks, compactionLevel);
    17  
    18    return (
    19      <div className={styles.row}>
    20        {filteredBlocks.map<JSX.Element>((b) => (
    21          <BlockSpan selectBlock={selectBlock} block={b} gridMaxTime={gridMaxTime} gridMinTime={gridMinTime} key={b.ulid} />
    22        ))}
    23      </div>
    24    );
    25  };
    26  
    27  export interface SourceViewProps {
    28    data: BlocksPool;
    29    title: string;
    30    gridMinTime: number;
    31    gridMaxTime: number;
    32    selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
    33    blockSearch: string;
    34    compactionLevel: number;
    35  }
    36  
    37  export const SourceView: FC<SourceViewProps> = ({
    38    data,
    39    title,
    40    gridMaxTime,
    41    gridMinTime,
    42    selectBlock,
    43    blockSearch,
    44    compactionLevel,
    45  }) => {
    46    return (
    47      <>
    48        <div className={styles.source}>
    49          <div className={styles.title} title={title}>
    50            <span>{title}</span>
    51          </div>
    52          <div className={styles.rowsContainer}>
    53            {Object.keys(data).map((k) => (
    54              <React.Fragment key={k}>
    55                {data[k].map((b, i) => (
    56                  <BlocksRow
    57                    selectBlock={selectBlock}
    58                    blocks={b}
    59                    key={`${k}-${i}`}
    60                    gridMaxTime={gridMaxTime}
    61                    gridMinTime={gridMinTime}
    62                    blockSearch={blockSearch}
    63                    compactionLevel={compactionLevel}
    64                  />
    65                ))}
    66              </React.Fragment>
    67            ))}
    68          </div>
    69        </div>
    70        <hr />
    71      </>
    72    );
    73  };