Added deploy functionality.

src/components/Dashboard/Production/Jobs/DeployJob.jsx

@@ -0,0 +1,117 @@
+import { useState, useContext, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import WizardView from '../../common/WizardView'
+import { ApiServerContext } from '../../context/ApiServerContext'
+import { Flex, Typography } from 'antd'
+import ObjectTable from '../../common/ObjectTable'
+import ObjectSelect from '../../common/ObjectSelect'
+
+const { Text } = Typography
+
+const DeployJob = ({ onOk, objectData = undefined }) => {
+  const [deployLoading, setDeployLoading] = useState(false)
+  const [job, setJob] = useState(objectData)
+  const [deployedSubJobsCount, setDeployedSubJobsCount] = useState(0)
+  const [subJobsCount, setSubJobsCount] = useState(999)
+  const { sendObjectAction, fetchObjects } = useContext(ApiServerContext)
+
+  const handleDeploy = async () => {
+    setDeployLoading(true)
+    var hasMore = true
+    var currentPage = 1
+    var subJobs = []
+    while (hasMore == true) {
+      const subJobsPage = await fetchObjects('subJob', {
+        page: currentPage,
+        filter: { 'job._id': job._id }
+      })
+      subJobs = [...subJobs, ...subJobsPage.data]
+      if (subJobsPage.data.length >= 25) {
+        currentPage = currentPage + 1
+      } else {
+        hasMore = false
+      }
+    }
+    setSubJobsCount(subJobs.length)
+    subJobs.forEach((subJob) => {
+      console.log(
+        'Deploying subjob:',
+        subJob._id,
+        'to printer:',
+        subJob.printer._id
+      )
+      sendObjectAction(
+        subJob.printer._id,
+        'printer',
+        { type: 'deploy', data: subJob },
+        (result) => {
+          console.log('result', result)
+          setDeployedSubJobsCount((prev) => prev + 1)
+        }
+      )
+    })
+  }
+
+  useEffect(() => {
+    if (deployedSubJobsCount == subJobsCount && deployLoading == true) {
+      onOk()
+    }
+  }, [deployedSubJobsCount, subJobsCount, deployLoading])
+
+  const steps = [
+    {
+      title: 'Confirm',
+      key: 'confirm',
+      content: (
+        <Flex vertical gap={'middle'} style={{ width: '100%' }}>
+          <Flex gap={'small'} align='center' style={{ width: '100%' }}>
+            <Text type='secondary'>Job:</Text>
+            <ObjectSelect
+              type={'job'}
+              style={{ flexGrow: 1 }}
+              value={objectData}
+              onChange={(newJob) => {
+                setJob(newJob)
+              }}
+            />
+          </Flex>
+
+          <ObjectTable
+            type={'subJob'}
+            scrollHeight={'200px'}
+            visibleColumns={{
+              printer: false,
+              'job._id': false,
+              'printer._id': false
+            }}
+            masterFilter={{ 'job._id': job?._id }}
+            size={'small'}
+          />
+        </Flex>
+      )
+    }
+  ]
+
+  return (
+    <WizardView
+      steps={steps}
+      loading={deployLoading}
+      formValid={objectData != undefined}
+      title='Deploy Job'
+      showSteps={false}
+      submitText='Deploy'
+      progress={(deployedSubJobsCount / subJobsCount) * 100}
+      onSubmit={() => {
+        handleDeploy()
+      }}
+    />
+  )
+}
+
+DeployJob.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object,
+  reset: PropTypes.bool
+}
+
+export default DeployJob

src/components/Dashboard/Production/Jobs/JobInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Modal } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -21,6 +21,7 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import JobIcon from '../../../Icons/JobIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import DeployJob from './DeployJob.jsx'
 
 const log = loglevel.getLogger('JobInfo')
 log.setLevel(config.logLevel)
@@ -30,6 +31,8 @@ const JobInfo = () => {
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
   const jobId = new URLSearchParams(location.search).get('jobId')
+
+  const [deployJobOpen, setDeployJobOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState('JobInfo', {
     info: true,
     subJobs: true,
@@ -43,7 +46,9 @@ const JobInfo = () => {
     formValid: false,
     locked: false,
     loading: false,
-    objectData: {}
+    objectData: {
+      _id: jobId
+    }
   })
 
   const actions = {
@@ -62,6 +67,10 @@ const JobInfo = () => {
     finishEdit: () => {
       objectFormRef?.current.handleUpdate()
       return true
+    },
+    deploy: () => {
+      setDeployJobOpen(true)
+      return false
     }
   }
 
@@ -207,6 +216,24 @@ const JobInfo = () => {
           </Flex>
         </div>
       </Flex>
+      <Modal
+        destroyOnHidden
+        footer={null}
+        open={deployJobOpen}
+        width={700}
+        onCancel={() => {
+          actionHandlerRef.current.clearAction()
+          setDeployJobOpen(false)
+        }}
+      >
+        <DeployJob
+          objectData={{ _id: jobId }}
+          onOk={() => {
+            actionHandlerRef.current.clearAction()
+            setDeployJobOpen(false)
+          }}
+        />
+      </Modal>
     </>
   )
 }