import React from 'react' ; import { Store } from '../../hooks/useStore' ; import { JobCard } from '../JobCard/JobCard' ; import { QueueActions } from '../QueueActions/QueueActions' ; import { StatusMenu } from '../StatusMenu/StatusMenu' ; import s from './QueuePage.module.css' ; import { AppQueue } from '@bull-board/api/typings/app' ; import { Pagination } from '../Pagination/Pagination' ; export const QueuePage = ( { selectedStatus , actions , queue , } ) => { if ( ! queue ) { return < section > Queue Not found < /section>; } return ( < section > < div className = { s . stickyHeader } > < StatusMenu queue = { queue } actions = { actions } / > < div className = { s . actionContainer } > < div > { queue . jobs . length > 0 && ! queue . readOnlyMode && ( < QueueActions queue = { queue } actions = { actions } status = { selectedStatus [ queue . name ] } / > ) } < /div> < Pagination pageCount = { queue . pagination . pageCount } / > < /div> < /div> { queue . jobs . map ( ( job ) => ( < JobCard key = { job . id } job = { job } status = { selectedStatus [ queue . name ] } actions = { { cleanJob : actions . cleanJob ( queue ?. name ) ( job ) , promoteJob : actions . promoteJob ( queue ?. name ) ( job ) , retryJob : actions . retryJob ( queue ?. name ) ( job ) , getJobLogs : actions . getJobLogs ( queue ?. name ) ( job ) , } } readOnlyMode = { queue ?. readOnlyMode } / > ) ) } < /section>); } ;