github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/TimelineChart/SyncTimelines/index.tsx (about)

     1  import React from 'react';
     2  import Button from '@webapp/ui/Button';
     3  import { TimelineData } from '@webapp/components/TimelineChart/TimelineChartWrapper';
     4  import StatusMessage from '@webapp/ui/StatusMessage';
     5  import { useSync } from './useSync';
     6  import styles from './styles.module.scss';
     7  
     8  interface SyncTimelinesProps {
     9    timeline: TimelineData;
    10    leftSelection: {
    11      from: string;
    12      to: string;
    13    };
    14    rightSelection: {
    15      from: string;
    16      to: string;
    17    };
    18    onSync: (from: string, until: string) => void;
    19    comparisonModeActive?: boolean;
    20    isDataLoading?: boolean;
    21  }
    22  
    23  function SyncTimelines({
    24    timeline,
    25    leftSelection,
    26    rightSelection,
    27    onSync,
    28    comparisonModeActive = false,
    29    isDataLoading = false,
    30  }: SyncTimelinesProps) {
    31    const { isWarningHidden, onIgnore, title, onSyncClick } = useSync({
    32      timeline,
    33      leftSelection,
    34      rightSelection,
    35      onSync,
    36    });
    37  
    38    if (isWarningHidden || comparisonModeActive || isDataLoading) {
    39      return null;
    40    }
    41  
    42    return (
    43      <StatusMessage
    44        type="warning"
    45        message={title}
    46        action={
    47          <div className={styles.buttons}>
    48            <Button
    49              kind="outline"
    50              onClick={onIgnore}
    51              className={styles.ignoreButton}
    52            >
    53              Ignore
    54            </Button>
    55            <Button
    56              kind="outline"
    57              onClick={onSyncClick}
    58              className={styles.syncButton}
    59            >
    60              Sync Timelines
    61            </Button>
    62          </div>
    63        }
    64      />
    65    );
    66  }
    67  
    68  export default SyncTimelines;