Tom Butcher
6ec1e9d3c0
- Updated the ProductionOverview component to utilize ModelHistoryDisplay instead of HistoryDisplay for better clarity in displaying historical data for printers and jobs. - Simplified the ObjectTable component's masterFilter for queued jobs, enhancing code readability.
134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
import { Flex } from 'antd'
|
|
import useCollapseState from '../hooks/useCollapseState.jsx'
|
|
import StatsDisplay from '../common/StatsDisplay'
|
|
import ModelHistoryDisplay from '../common/ModelHistoryDisplay'
|
|
import InfoCollapse from '../common/InfoCollapse'
|
|
import ScrollBox from '../common/ScrollBox'
|
|
import ObjectTable from '../common/ObjectTable'
|
|
|
|
const ProductionOverview = () => {
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'ProductionOverview',
|
|
{
|
|
printerStats: true,
|
|
printerHistory: true,
|
|
onlinePrinters: true,
|
|
jobStats: true,
|
|
productionStats: true,
|
|
jobStatsDetails: true
|
|
}
|
|
)
|
|
|
|
return (
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{
|
|
maxHeight: '100%',
|
|
minHeight: 0
|
|
}}
|
|
>
|
|
<ScrollBox>
|
|
<Flex vertical gap={'large'}>
|
|
<InfoCollapse
|
|
title='Printer Statistics'
|
|
icon={null}
|
|
canCollapse={false}
|
|
active={collapseState.printerStats}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('printerStats', isActive)
|
|
}
|
|
className='no-t-padding-collapse'
|
|
collapseKey='printerStats'
|
|
>
|
|
<Flex
|
|
justify='flex-start'
|
|
gap='middle'
|
|
wrap='wrap'
|
|
align='flex-start'
|
|
>
|
|
<StatsDisplay objectType='printer' />
|
|
</Flex>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='Job Statistics'
|
|
icon={null}
|
|
canCollapse={false}
|
|
active={collapseState.jobStats}
|
|
onToggle={(isActive) => updateCollapseState('jobStats', isActive)}
|
|
className='no-t-padding-collapse'
|
|
collapseKey='jobStats'
|
|
>
|
|
<Flex
|
|
justify='flex-start'
|
|
gap='middle'
|
|
wrap='wrap'
|
|
align='flex-start'
|
|
>
|
|
<StatsDisplay objectType='job' />
|
|
</Flex>
|
|
</InfoCollapse>
|
|
|
|
<Flex gap='large' wrap='wrap'>
|
|
<Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
|
|
<InfoCollapse
|
|
title='Printer History'
|
|
icon={null}
|
|
active={collapseState.printerHistory}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('printerHistory', isActive)
|
|
}
|
|
collapseKey='printerHistory'
|
|
canCollapse={false}
|
|
>
|
|
<ModelHistoryDisplay objectType='printer' />
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Online Printers'
|
|
icon={null}
|
|
active={collapseState.onlinePrinters}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('onlinePrinters', isActive)
|
|
}
|
|
collapseKey='onlinePrinters'
|
|
canCollapse={false}
|
|
>
|
|
<ObjectTable type='printer' masterFilter={{ online: true }} />
|
|
</InfoCollapse>
|
|
</Flex>
|
|
<Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
|
|
<InfoCollapse
|
|
title='Job History'
|
|
icon={null}
|
|
active={collapseState.jobHistory}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('jobHistory', isActive)
|
|
}
|
|
canCollapse={false}
|
|
collapseKey='jobHistory'
|
|
>
|
|
<ModelHistoryDisplay objectType='job' />
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Queued Jobs'
|
|
icon={null}
|
|
active={collapseState.queuedJobs}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('queuedJobs', isActive)
|
|
}
|
|
canCollapse={false}
|
|
collapseKey='queuedJobs'
|
|
>
|
|
<ObjectTable type='job' masterFilter={{ state: 'queued' }} />
|
|
</InfoCollapse>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</ScrollBox>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default ProductionOverview
|