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

     1  import React, { FC } from 'react';
     2  import { Block } from './block';
     3  import styles from './blocks.module.css';
     4  
     5  interface BlockSpanProps {
     6    block: Block;
     7    gridMinTime: number;
     8    gridMaxTime: number;
     9    selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
    10  }
    11  
    12  export const BlockSpan: FC<BlockSpanProps> = ({ block, gridMaxTime, gridMinTime, selectBlock }) => {
    13    const viewWidth = gridMaxTime - gridMinTime;
    14    const spanWidth = ((block.maxTime - block.minTime) / viewWidth) * 100;
    15    const spanOffset = ((block.minTime - gridMinTime) / viewWidth) * 100;
    16  
    17    return (
    18      <button
    19        onClick={(): void => selectBlock(block)}
    20        className={`${styles.blockSpan} ${styles[`res-${block.thanos.downsample.resolution}`]} ${
    21          styles[`level-${block.compaction.level}`]
    22        }`}
    23        style={{
    24          width: `calc(${spanWidth.toFixed(4)}% + 1px)`,
    25          left: `${spanOffset.toFixed(4)}%`,
    26        }}
    27      />
    28    );
    29  };