552 lines
14 KiB
JavaScript
552 lines
14 KiB
JavaScript
// src/PrintJobs.js
|
|
|
|
import React, { useEffect, useState, useCallback, useContext } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import axios from 'axios'
|
|
import {
|
|
Table,
|
|
Button,
|
|
Flex,
|
|
Space,
|
|
Modal,
|
|
Dropdown,
|
|
message,
|
|
notification,
|
|
Input,
|
|
Typography,
|
|
Checkbox,
|
|
Popover,
|
|
Spin
|
|
} from 'antd'
|
|
import { createStyles } from 'antd-style'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
|
|
import { AuthContext } from '../../Auth/AuthContext'
|
|
import { SocketContext } from '../context/SocketContext'
|
|
import NewPrintJob from './PrintJobs/NewPrintJob'
|
|
import JobState from '../common/JobState'
|
|
import SubJobCounter from '../common/SubJobCounter'
|
|
import TimeDisplay from '../common/TimeDisplay'
|
|
import IdText from '../common/IdText'
|
|
import useColumnVisibility from '../hooks/useColumnVisibility'
|
|
import JobIcon from '../../Icons/JobIcon'
|
|
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
|
|
import PlusIcon from '../../Icons/PlusIcon'
|
|
import ReloadIcon from '../../Icons/ReloadIcon'
|
|
import EditIcon from '../../Icons/EditIcon.jsx'
|
|
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
|
|
import CheckIcon from '../../Icons/CheckIcon.jsx'
|
|
import PlayCircleIcon from '../../Icons/PlayCircleIcon.jsx'
|
|
|
|
import config from '../../../config.js'
|
|
import CheckCircleIcon from '../../Icons/CheckCircleIcon.jsx'
|
|
import PauseCircleIcon from '../../Icons/PauseCircleIcon.jsx'
|
|
import XMarkCircleIcon from '../../Icons/XMarkCircleIcon.jsx'
|
|
import QuestionCircleIcon from '../../Icons/QuestionCircleIcon.jsx'
|
|
|
|
const { Text } = Typography
|
|
|
|
const useStyle = createStyles(({ css, token }) => {
|
|
const { antCls } = token
|
|
return {
|
|
customTable: css`
|
|
${antCls}-table {
|
|
${antCls}-table-container {
|
|
${antCls}-table-body,
|
|
${antCls}-table-content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #eaeaea transparent;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
}
|
|
}
|
|
`
|
|
}
|
|
})
|
|
|
|
const PrintJobs = () => {
|
|
const { styles } = useStyle()
|
|
const [messageApi, contextHolder] = message.useMessage()
|
|
const [notificationApi, notificationContextHolder] =
|
|
notification.useNotification()
|
|
const navigate = useNavigate()
|
|
const [printJobsData, setPrintJobsData] = useState([])
|
|
const [page, setPage] = useState(1)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [lazyLoading, setLazyLoading] = useState(false)
|
|
|
|
const [filters, setFilters] = useState({})
|
|
const [sorter, setSorter] = useState({})
|
|
|
|
const [newPrintJobOpen, setNewPrintJobOpen] = useState(false)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const getFilterDropdown = ({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters,
|
|
propertyName
|
|
}) => {
|
|
return (
|
|
<div style={{ padding: 8 }}>
|
|
<Space.Compact>
|
|
<Input
|
|
placeholder={'Search ' + propertyName}
|
|
value={selectedKeys[0]}
|
|
onChange={(e) =>
|
|
setSelectedKeys(e.target.value ? [e.target.value] : [])
|
|
}
|
|
onPressEnter={() => confirm()}
|
|
style={{ width: 200, display: 'block' }}
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
clearFilters()
|
|
confirm()
|
|
}}
|
|
icon={<XMarkIcon />}
|
|
/>
|
|
<Button
|
|
type='primary'
|
|
onClick={() => confirm()}
|
|
icon={<CheckIcon />}
|
|
/>
|
|
</Space.Compact>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Column definitions
|
|
const columns = [
|
|
{
|
|
title: '',
|
|
dataIndex: '',
|
|
key: '',
|
|
width: 40,
|
|
fixed: 'left',
|
|
render: () => <JobIcon />
|
|
},
|
|
{
|
|
title: 'GCode File Name',
|
|
dataIndex: 'gcodeFile',
|
|
key: 'gcodeFileName',
|
|
width: 200,
|
|
fixed: 'left',
|
|
render: (gcodeFile) => <Text ellipsis>{gcodeFile.name}</Text>,
|
|
filterDropdown: ({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters
|
|
}) =>
|
|
getFilterDropdown({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters,
|
|
propertyName: 'GCode file name'
|
|
}),
|
|
onFilter: (value, record) =>
|
|
record.gcodeFile.name.toLowerCase().includes(value.toLowerCase())
|
|
},
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
key: 'id',
|
|
width: 165,
|
|
render: (text) => <IdText id={text} type={'job'} longId={false} />,
|
|
filterDropdown: ({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters
|
|
}) =>
|
|
getFilterDropdown({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters,
|
|
propertyName: 'ID'
|
|
}),
|
|
onFilter: (value, record) =>
|
|
record.id.toLowerCase().includes(value.toLowerCase())
|
|
},
|
|
{
|
|
title: 'State',
|
|
key: 'state',
|
|
width: 240,
|
|
render: (record) => {
|
|
return <JobState job={record} showQuantity={false} showId={false} />
|
|
},
|
|
filterDropdown: ({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters
|
|
}) =>
|
|
getFilterDropdown({
|
|
setSelectedKeys,
|
|
selectedKeys,
|
|
confirm,
|
|
clearFilters,
|
|
propertyName: 'state'
|
|
}),
|
|
onFilter: (value, record) =>
|
|
record.state.type.toLowerCase().includes(value.toLowerCase())
|
|
},
|
|
{
|
|
title: <CheckCircleIcon />,
|
|
key: 'complete',
|
|
width: 70,
|
|
render: (record) => {
|
|
return <SubJobCounter job={record} state={{ type: 'complete' }} />
|
|
}
|
|
},
|
|
{
|
|
title: <PauseCircleIcon />,
|
|
key: 'queued',
|
|
width: 70,
|
|
render: (record) => {
|
|
return <SubJobCounter job={record} state={{ type: 'queued' }} />
|
|
}
|
|
},
|
|
{
|
|
title: <XMarkCircleIcon />,
|
|
key: 'failed',
|
|
width: 70,
|
|
render: (record) => {
|
|
return <SubJobCounter job={record} state={{ type: 'failed' }} />
|
|
}
|
|
},
|
|
{
|
|
title: <QuestionCircleIcon />,
|
|
key: 'draft',
|
|
width: 70,
|
|
render: (record) => {
|
|
return <SubJobCounter job={record} state={{ type: 'draft' }} />
|
|
}
|
|
},
|
|
{
|
|
title: 'Created At',
|
|
dataIndex: 'createdAt',
|
|
key: 'createdAt',
|
|
width: 180,
|
|
render: (createdAt) => {
|
|
if (createdAt) {
|
|
return <TimeDisplay dateTime={createdAt} />
|
|
} else {
|
|
return 'n/a'
|
|
}
|
|
},
|
|
sorter: true
|
|
},
|
|
{
|
|
title: 'Started At',
|
|
dataIndex: 'startedAt',
|
|
key: 'startedAt',
|
|
width: 180,
|
|
render: (startedAt) => {
|
|
if (startedAt) {
|
|
return <TimeDisplay dateTime={startedAt} />
|
|
} else {
|
|
return 'n/a'
|
|
}
|
|
},
|
|
sorter: true
|
|
},
|
|
{
|
|
title: 'Actions',
|
|
key: 'operation',
|
|
fixed: 'right',
|
|
width: 150,
|
|
render: (record) => {
|
|
return (
|
|
<Space size='small'>
|
|
{record.state.type === 'draft' ? (
|
|
<Button
|
|
icon={<PlayCircleIcon />}
|
|
onClick={() => handleDeployPrintJob(record.id)}
|
|
/>
|
|
) : (
|
|
<Button
|
|
icon={<InfoCircleIcon />}
|
|
onClick={() =>
|
|
navigate(
|
|
`/dashboard/production/printjobs/info?printJobId=${record.id}`
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
<Dropdown menu={getPrintJobActionItems(record.id)}>
|
|
<Button>Actions</Button>
|
|
</Dropdown>
|
|
</Space>
|
|
)
|
|
}
|
|
}
|
|
]
|
|
|
|
const { authenticated } = useContext(AuthContext)
|
|
const { socket } = useContext(SocketContext)
|
|
|
|
const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
|
|
'PrintJobs',
|
|
columns
|
|
)
|
|
|
|
const handleDeployPrintJob = (printJobId) => {
|
|
if (socket) {
|
|
messageApi.info(`Print job ${printJobId} deployment initiated`)
|
|
socket.emit('server.job_queue.deploy', { printJobId }, (response) => {
|
|
if (response == false) {
|
|
notificationApi.error({
|
|
message: 'Print job deployment failed',
|
|
description: 'Please try again later'
|
|
})
|
|
} else {
|
|
notificationApi.success({
|
|
message: 'Print job deployment initiated',
|
|
description: 'Please wait for the print job to start'
|
|
})
|
|
}
|
|
})
|
|
navigate(`/dashboard/production/printjobs/info?printJobId=${printJobId}`)
|
|
} else {
|
|
messageApi.error('Socket connection not available')
|
|
}
|
|
}
|
|
|
|
const fetchPrintJobsData = useCallback(
|
|
async (pageNum = 1, append = false) => {
|
|
if (!authenticated) {
|
|
return
|
|
}
|
|
try {
|
|
const params = {
|
|
page: pageNum,
|
|
limit: 25,
|
|
...filters,
|
|
sort: sorter.field,
|
|
order: sorter.order
|
|
}
|
|
|
|
const response = await axios.get(`${config.backendUrl}/printjobs`, {
|
|
params,
|
|
headers: {
|
|
Accept: 'application/json'
|
|
},
|
|
withCredentials: true
|
|
})
|
|
|
|
const newData = response.data
|
|
setHasMore(newData.length === 25)
|
|
|
|
if (append) {
|
|
setPrintJobsData((prev) => [...prev, ...newData])
|
|
} else {
|
|
setPrintJobsData(newData)
|
|
}
|
|
|
|
setLoading(false)
|
|
setLazyLoading(false)
|
|
} catch (error) {
|
|
setLoading(false)
|
|
setLazyLoading(false)
|
|
if (error.response) {
|
|
messageApi.error(
|
|
'Error fetching print jobs data:',
|
|
error.response.status
|
|
)
|
|
} else {
|
|
messageApi.error(
|
|
'An unexpected error occurred. Please try again later.'
|
|
)
|
|
}
|
|
}
|
|
},
|
|
[authenticated, messageApi, filters, sorter]
|
|
)
|
|
|
|
const handleScroll = useCallback(
|
|
(e) => {
|
|
const { target } = e
|
|
const scrollHeight = target.scrollHeight
|
|
const scrollTop = target.scrollTop
|
|
const clientHeight = target.clientHeight
|
|
|
|
// If we're near the bottom (within 100px) and not currently loading
|
|
if (
|
|
scrollHeight - scrollTop - clientHeight < 100 &&
|
|
!lazyLoading &&
|
|
hasMore
|
|
) {
|
|
setLazyLoading(true)
|
|
const nextPage = page + 1
|
|
setPage(nextPage)
|
|
fetchPrintJobsData(nextPage, true)
|
|
}
|
|
},
|
|
[page, lazyLoading, hasMore, fetchPrintJobsData]
|
|
)
|
|
|
|
useEffect(() => {
|
|
// Fetch initial data
|
|
if (authenticated) {
|
|
fetchPrintJobsData()
|
|
}
|
|
}, [authenticated, fetchPrintJobsData])
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
const newFilters = {}
|
|
Object.entries(filters).forEach(([key, value]) => {
|
|
if (value && value.length > 0) {
|
|
newFilters[key] = value[0]
|
|
}
|
|
})
|
|
|
|
setFilters(newFilters)
|
|
setSorter({
|
|
field: sorter.field,
|
|
order: sorter.order
|
|
})
|
|
setPage(1)
|
|
fetchPrintJobsData(1)
|
|
}
|
|
|
|
const getPrintJobActionItems = (printJobId) => {
|
|
return {
|
|
items: [
|
|
{
|
|
label: 'Info',
|
|
key: 'info',
|
|
icon: <InfoCircleIcon />
|
|
},
|
|
{
|
|
label: 'Edit',
|
|
key: 'edit',
|
|
icon: <EditIcon />
|
|
}
|
|
],
|
|
onClick: ({ key }) => {
|
|
if (key === 'edit') {
|
|
showNewPrintJobModal(printJobId)
|
|
} else if (key === 'info') {
|
|
navigate(
|
|
`/dashboard/production/printjobs/info?printJobId=${printJobId}`
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const actionItems = {
|
|
items: [
|
|
{
|
|
label: 'New Print Job',
|
|
key: 'newPrintJob',
|
|
icon: <PlusIcon />
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
label: 'Reload List',
|
|
key: 'reloadList',
|
|
icon: <ReloadIcon />
|
|
}
|
|
],
|
|
onClick: ({ key }) => {
|
|
if (key === 'newPrintJob') {
|
|
showNewPrintJobModal()
|
|
} else if (key === 'reloadList') {
|
|
fetchPrintJobsData()
|
|
}
|
|
}
|
|
}
|
|
|
|
const showNewPrintJobModal = () => {
|
|
setNewPrintJobOpen(true)
|
|
}
|
|
|
|
const getViewDropdownItems = () => {
|
|
const columnItems = columns
|
|
.filter((col) => col.key && col.title !== '')
|
|
.map((col) => (
|
|
<Checkbox
|
|
checked={columnVisibility[col.key]}
|
|
key={col.key}
|
|
onChange={(e) => {
|
|
updateColumnVisibility(col.key, e.target.checked)
|
|
}}
|
|
>
|
|
{col.title}
|
|
</Checkbox>
|
|
))
|
|
|
|
return (
|
|
<Flex vertical>
|
|
<Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
|
|
{columnItems}
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
const visibleColumns = columns.filter(
|
|
(col) => !col.key || columnVisibility[col.key]
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{notificationContextHolder}
|
|
<Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
|
|
{contextHolder}
|
|
<Space size='small'>
|
|
<Dropdown menu={actionItems}>
|
|
<Button>Actions</Button>
|
|
</Dropdown>
|
|
<Popover
|
|
content={getViewDropdownItems()}
|
|
placement='bottomLeft'
|
|
arrow={false}
|
|
>
|
|
<Button>View</Button>
|
|
</Popover>
|
|
{lazyLoading && <Spin indicator={<LoadingOutlined />} />}
|
|
</Space>
|
|
|
|
<Table
|
|
className={styles.customTable}
|
|
dataSource={printJobsData}
|
|
columns={visibleColumns}
|
|
rowKey='id'
|
|
pagination={false}
|
|
loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
|
|
scroll={{ y: 'calc(100vh - 270px)' }}
|
|
onChange={handleTableChange}
|
|
onScroll={handleScroll}
|
|
showSorterTooltip={false}
|
|
/>
|
|
</Flex>
|
|
<Modal
|
|
open={newPrintJobOpen}
|
|
footer={null}
|
|
width={700}
|
|
onCancel={() => {
|
|
setNewPrintJobOpen(false)
|
|
}}
|
|
>
|
|
<NewPrintJob
|
|
onOk={() => {
|
|
setNewPrintJobOpen(false)
|
|
messageApi.success('New print job created successfully.')
|
|
fetchPrintJobsData()
|
|
}}
|
|
reset={newPrintJobOpen}
|
|
/>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PrintJobs
|