github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/adhoc/AdhocSingle.tsx (about)

     1  import React, { useEffect, useState } from 'react';
     2  import 'react-dom';
     3  import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
     4  import Box from '@webapp/ui/Box';
     5  import { FlamegraphRenderer } from '@pyroscope/flamegraph/src/FlamegraphRenderer';
     6  import FileList from '@webapp/components/FileList';
     7  import useExportToFlamegraphDotCom from '@webapp/components/exportToFlamegraphDotCom.hook';
     8  import ExportData from '@webapp/components/ExportData';
     9  import {
    10    uploadFile,
    11    fetchProfile,
    12    selectShared,
    13    fetchAllProfiles,
    14    selectedSelectedProfileId,
    15    selectProfile,
    16  } from '@webapp/redux/reducers/adhoc';
    17  import useColorMode from '@webapp/hooks/colorMode.hook';
    18  import { Tabs, Tab, TabPanel } from '@webapp/ui/Tabs';
    19  import FileUploader from './components/FileUploader';
    20  import adhocStyles from './Adhoc.module.scss';
    21  
    22  function AdhocSingle() {
    23    const dispatch = useAppDispatch();
    24    const { profilesList } = useAppSelector(selectShared);
    25    const selectedProfileId = useAppSelector(selectedSelectedProfileId('left'));
    26    const profile = useAppSelector(selectProfile('left'));
    27    useColorMode();
    28    const [currentTab, setCurrentTab] = useState(0);
    29  
    30    useEffect(() => {
    31      dispatch(fetchAllProfiles());
    32    }, [dispatch]);
    33  
    34    const exportToFlamegraphDotComFn = useExportToFlamegraphDotCom(
    35      profile.unwrapOr(undefined)
    36    );
    37  
    38    const flame = (() => {
    39      if (profile.isNothing) {
    40        return <></>;
    41      }
    42  
    43      return (
    44        <FlamegraphRenderer
    45          profile={profile.value}
    46          showCredit={false}
    47          ExportData={
    48            <ExportData
    49              flamebearer={profile.value}
    50              exportJSON
    51              exportFlamegraphDotCom
    52              exportFlamegraphDotComFn={exportToFlamegraphDotComFn}
    53            />
    54          }
    55        />
    56      );
    57    })();
    58  
    59    const setFile = async ({
    60      file,
    61      spyName,
    62      units,
    63    }: {
    64      file: File;
    65      spyName?: string;
    66      units?: string;
    67    }) => {
    68      await dispatch(uploadFile({ file, spyName, units, side: 'left' }));
    69      setCurrentTab(1);
    70    };
    71  
    72    return (
    73      <div className="main-wrapper">
    74        <Box>
    75          <Tabs value={currentTab} onChange={(e, value) => setCurrentTab(value)}>
    76            <Tab label="Upload" />
    77            <Tab label="Pyroscope data" />
    78          </Tabs>
    79          <TabPanel value={currentTab} index={0}>
    80            <FileUploader className={adhocStyles.tabPanel} setFile={setFile} />
    81          </TabPanel>
    82          <TabPanel value={currentTab} index={1}>
    83            {profilesList.type === 'loaded' && (
    84              <FileList
    85                className={adhocStyles.tabPanel}
    86                selectedProfileId={selectedProfileId}
    87                profilesList={profilesList.profilesList}
    88                onProfileSelected={(id: string) => {
    89                  dispatch(fetchProfile({ id, side: 'left' }));
    90                }}
    91              />
    92            )}
    93          </TabPanel>
    94          {flame}
    95        </Box>
    96      </div>
    97    );
    98  }
    99  
   100  export default AdhocSingle;