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

     1  import React from 'react';
     2  import { faCog } from '@fortawesome/free-solid-svg-icons/faCog';
     3  import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
     4  import { MenuButton, MenuProps, MenuHeader } from '@szhsin/react-menu';
     5  import Dropdown, { MenuItem as DropdownMenuItem } from '@pyroscope/ui/Dropdown';
     6  import flattenChildren from 'react-flatten-children';
     7  import Icon from '@pyroscope/ui/Icon';
     8  import Button from '@pyroscope/ui/Button';
     9  import {
    10    selectIsMultiTenant,
    11    selectTenantID,
    12    actions,
    13  } from '@pyroscope/redux/reducers/tenant';
    14  import { useAppSelector, useAppDispatch } from '@pyroscope/redux/hooks';
    15  import styles from './SidebarTenant.module.css';
    16  import cx from 'classnames';
    17  
    18  export interface DropdownProps {
    19    children: JSX.Element[] | JSX.Element;
    20    offsetX: MenuProps['offsetX'];
    21    offsetY: MenuProps['offsetY'];
    22    direction: MenuProps['direction'];
    23    label: string;
    24    className: string;
    25    menuButton: JSX.Element;
    26  }
    27  
    28  function FlatDropdown({
    29    children,
    30    offsetX,
    31    offsetY,
    32    direction,
    33    label,
    34    className,
    35    menuButton,
    36  }: DropdownProps) {
    37    return (
    38      <Dropdown
    39        offsetX={offsetX}
    40        offsetY={offsetY}
    41        direction={direction}
    42        label={label}
    43        className={className}
    44        menuButton={menuButton}
    45        portal
    46      >
    47        {flattenChildren(children) as unknown as JSX.Element}
    48      </Dropdown>
    49    );
    50  }
    51  
    52  export function SidebarTenant() {
    53    const isMultiTenant = useAppSelector(selectIsMultiTenant);
    54    const orgID = useAppSelector(selectTenantID);
    55    const dispatch = useAppDispatch();
    56  
    57    if (!isMultiTenant) {
    58      return <></>;
    59    }
    60  
    61    return (
    62      <>
    63        <FlatDropdown
    64          offsetX={10}
    65          offsetY={5}
    66          direction="top"
    67          label=""
    68          className={styles.dropdown}
    69          menuButton={
    70            <MenuButton className={styles.accountDropdown}>
    71              <Button icon={faUser}>Tenant</Button>
    72            </MenuButton>
    73          }
    74        >
    75          <MenuHeader>Current Tenant</MenuHeader>
    76          <DropdownMenuItem
    77            className={styles.menuItemDisabled}
    78            onClick={() => {
    79              void dispatch(actions.setWantsToChange());
    80            }}
    81          >
    82            <div className={styles.menuItemWithButton}>
    83              <span className={cx(styles.menuItemWithButtonTitle, styles.orgID)}>
    84                Tenant ID: {orgID}
    85              </span>
    86              <Icon icon={faCog} />
    87            </div>
    88          </DropdownMenuItem>
    89        </FlatDropdown>
    90      </>
    91    );
    92  }