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

     1  import React from 'react';
     2  import 'react-dom';
     3  
     4  import { useAppSelector, useAppDispatch } from '@pyroscope/redux/hooks';
     5  import { Query } from '@pyroscope/models/query';
     6  import {
     7    selectApps,
     8    reloadAppNames,
     9    selectQueries,
    10    selectAppNamesState,
    11  } from '@pyroscope/redux/reducers/continuous';
    12  import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
    13  import Button from '@pyroscope/ui/Button';
    14  import LoadingSpinner from '@pyroscope/ui/LoadingSpinner';
    15  import DateRangePicker from '@pyroscope/components/DateRangePicker';
    16  import RefreshButton from '@pyroscope/components/RefreshButton';
    17  import { AppSelector } from '@pyroscope/components/AppSelector/AppSelector';
    18  import { SidebarTenant } from '@pyroscope/components/SidebarTenant';
    19  import styles from './Toolbar.module.css';
    20  
    21  interface ToolbarProps {
    22    /** callback to be called when an app is selected via the dropdown */
    23    onSelectedApp: (name: Query) => void;
    24  
    25    filterApp?: (names: string) => boolean;
    26  }
    27  function Toolbar({
    28    onSelectedApp,
    29    filterApp: _filterApp = () => true,
    30  }: ToolbarProps) {
    31    const dispatch = useAppDispatch();
    32    const appNamesState = useAppSelector(selectAppNamesState);
    33    const apps = useAppSelector(selectApps);
    34    const { query } = useAppSelector(selectQueries);
    35    const selectedQuery = query;
    36  
    37    const onSelected = (query: Query) => {
    38      onSelectedApp(query);
    39    };
    40  
    41    const appNamesLoading =
    42      appNamesState.type === 'reloading' ? (
    43        <LoadingSpinner className={styles.appNamesLoading} />
    44      ) : null;
    45  
    46    return (
    47      <>
    48        <div className="navbar">
    49          <div className={styles.leftSide}>
    50            <SidebarTenant />
    51            <AppSelector
    52              onSelected={onSelected}
    53              apps={apps}
    54              selectedQuery={selectedQuery}
    55            />
    56            <Button
    57              aria-label="Refresh Apps"
    58              icon={faSyncAlt}
    59              onClick={() => dispatch(reloadAppNames())}
    60              className={styles.refreshAppsButton}
    61            />
    62            {appNamesLoading}
    63          </div>
    64          <div className="navbar-space-filler" />
    65          <RefreshButton />
    66          &nbsp;
    67          <DateRangePicker />
    68        </div>
    69      </>
    70    );
    71  }
    72  
    73  export default Toolbar;