import React from "react"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import prettyBytes from "pretty-bytes"; import { AppState } from "../store"; import { percentage } from "../utils"; const useStyles = makeStyles((theme) => ({ banner: { paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), display: "flex", }, bannerItem: { flexGrow: 1, borderLeft: `1px solid ${theme.palette.divider}`, paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), }, })); interface Props { qname: string; } function mapStateToProps(state: AppState, ownProps: Props) { const queueInfo = state.queues.data.find((q) => q.name === ownProps.qname); return { queue: queueInfo?.currentStats, }; } const connector = connect(mapStateToProps); type ReduxProps = ConnectedProps; function QueueInfoBanner(props: Props & ReduxProps) { const classes = useStyles(); const { queue, qname } = props; return (
Queue name {qname}
Queue state {queue ? (queue.paused ? "paused" : "run") : "-"}
Queue size {queue ? queue.size : "-"}
Task groups {queue ? queue.groups : "-"}
Memory usage {queue ? prettyBytes(queue.memory_usage_bytes) : "-"}
Latency {queue ? queue.display_latency : "-"}
Processed {queue ? queue.processed : "-"}
Failed {queue ? queue.failed : "-"}
Error rate {queue ? percentage(queue.failed, queue.processed) : "-"}
); } export default connector(QueueInfoBanner);