github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/QueueBreadcrumb.tsx (about)

     1  import React, { useState } from "react";
     2  import { Link, useHistory } from "react-router-dom";
     3  import { emphasize, withStyles, Theme } from "@material-ui/core/styles";
     4  import Breadcrumbs from "@material-ui/core/Breadcrumbs";
     5  import Chip from "@material-ui/core/Chip";
     6  import Menu from "@material-ui/core/Menu";
     7  import MenuItem from "@material-ui/core/MenuItem";
     8  import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
     9  import { paths as getPaths, queueDetailsPath } from "../paths";
    10  import { isDarkTheme } from "../theme";
    11  
    12  const StyledBreadcrumb = withStyles((theme: Theme) => ({
    13    root: {
    14      backgroundColor: isDarkTheme(theme)
    15        ? "#303030"
    16        : theme.palette.background.default,
    17      height: theme.spacing(3),
    18      color: theme.palette.text.secondary,
    19      fontWeight: 400,
    20      "&:hover, &:focus": {
    21        backgroundColor: theme.palette.action.hover,
    22      },
    23      "&:active": {
    24        boxShadow: theme.shadows[1],
    25        backgroundColor: emphasize(theme.palette.action.hover, 0.12),
    26      },
    27    },
    28  }))(Chip) as typeof Chip; // Note: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
    29  
    30  interface Props {
    31    // All queue names.
    32    queues: string[];
    33    // Name of the queue currently selected.
    34    queueName: string;
    35    // ID of the task currently selected (optional).
    36    taskId?: string;
    37  }
    38  
    39  export default function QueueBreadcrumbs(props: Props) {
    40    const history = useHistory();
    41    const [anchorEl, setAnchorEl] = useState<null | Element>(null);
    42    const paths = getPaths();
    43  
    44    const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
    45      event.preventDefault();
    46      setAnchorEl(event.currentTarget);
    47    };
    48  
    49    const closeMenu = () => {
    50      setAnchorEl(null);
    51    };
    52  
    53    return (
    54      <>
    55        <Breadcrumbs aria-label="breadcrumb">
    56          <StyledBreadcrumb
    57            component={Link}
    58            to={paths.HOME}
    59            label="Queues"
    60            onClick={() => history.push(paths.HOME)}
    61          />
    62          <StyledBreadcrumb
    63            label={props.queueName}
    64            deleteIcon={<ExpandMoreIcon />}
    65            onClick={handleClick}
    66            onDelete={handleClick}
    67          />
    68          {props.taskId && <StyledBreadcrumb label={`task:${props.taskId}`} />}
    69        </Breadcrumbs>
    70        <Menu
    71          id="queue-breadcrumb-menu"
    72          anchorEl={anchorEl}
    73          keepMounted
    74          open={Boolean(anchorEl)}
    75          onClose={closeMenu}
    76        >
    77          {props.queues.sort().map((qname) => (
    78            <MenuItem
    79              key={qname}
    80              onClick={() => {
    81                history.push(queueDetailsPath(qname));
    82                closeMenu();
    83              }}
    84            >
    85              {qname}
    86            </MenuItem>
    87          ))}
    88        </Menu>
    89      </>
    90    );
    91  }