github.com/grafana/pyroscope@v1.18.0/public/app/components/Panel.tsx (about)

     1  import Box from '@pyroscope/ui/Box';
     2  import { LoadingOverlay } from '@pyroscope/ui/LoadingOverlay';
     3  import React, { ReactNode } from 'react';
     4  
     5  import styles from './Panel.module.css';
     6  
     7  export type PanelProps = {
     8    isLoading: boolean;
     9    title?: ReactNode;
    10    children: ReactNode;
    11    className?: string;
    12    headerActions?: ReactNode;
    13    dataTestId?: string;
    14  };
    15  
    16  /** Common pattern which wraps a chart and optional title */
    17  export function Panel({
    18    isLoading,
    19    title,
    20    children,
    21    className = '',
    22    headerActions,
    23  }: PanelProps) {
    24    // If there is a title, spinnerPosition is at the baseline
    25    // Otherwise, it is undeclared
    26  
    27    const spinnerPosition = title ? 'baseline' : undefined;
    28  
    29    return (
    30      <Box className={className}>
    31        <LoadingOverlay active={isLoading} spinnerPosition={spinnerPosition}>
    32          {(title || headerActions) && (
    33            <div className={styles.panelTitleWrapper}>
    34              {title} {headerActions}
    35            </div>
    36          )}
    37          <div>{children}</div>
    38        </LoadingOverlay>
    39      </Box>
    40    );
    41  }