refactor: separate table rows by job type

src/components/JobTable/JobTable.js

@@ -11,8 +11,9 @@ import {
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import JobTableRow from './JobTableRow'
+import QueueTableRow from './QueueTableRow'
 
-const JobTable = ({ jobs, refetch }) => (
+const JobTable = ({ jobsAndQueues, refetch }) => (
     <Table>
         <TableHead>
             <TableRowHead>
@@ -26,27 +27,36 @@ const JobTable = ({ jobs, refetch }) => (
             </TableRowHead>
         </TableHead>
         <TableBody>
-            {jobs.length === 0 ? (
+            {jobsAndQueues.length === 0 ? (
                 <TableRow>
                     <TableCell>{i18n.t('No jobs to display')}</TableCell>
                 </TableRow>
             ) : (
-                jobs.map((job) => {
-                    const isValid = !!job?.sequence?.length
+                jobsAndQueues.map((jobOrQueue) => {
+                    const isValid = !!jobOrQueue?.sequence?.length
 
                     if (!isValid) {
                         return null
                     }
 
                     // A queue will have more than one item in .sequence
-                    const isJob = job.sequence.length === 1
+                    const isJob = jobOrQueue.sequence.length === 1
+
+                    if (isJob) {
+                        return (
+                            <JobTableRow
+                                key={jobOrQueue.id}
+                                job={jobOrQueue}
+                                refetch={refetch}
+                            />
+                        )
+                    }
 
                     return (
-                        <JobTableRow
-                            key={job.id}
-                            job={job}
+                        <QueueTableRow
+                            key={jobOrQueue.id}
+                            queue={jobOrQueue}
                             refetch={refetch}
-                            isJob={isJob}
                         />
                     )
                 })
@@ -58,7 +68,7 @@ const JobTable = ({ jobs, refetch }) => (
 const { arrayOf, object, func } = PropTypes
 
 JobTable.propTypes = {
-    jobs: arrayOf(object).isRequired,
+    jobsAndQueues: arrayOf(object).isRequired,
     refetch: func.isRequired,
 }
 

src/components/JobTable/JobTable.test.js

@@ -3,8 +3,8 @@ import { shallow } from 'enzyme'
 import JobTable from './JobTable'
 
 describe('<JobTable>', () => {
-    it('renders without errors when there are jobs', () => {
-        const jobs = [
+    it('renders without errors when there are jobs or queues', () => {
+        const jobsAndQueues = [
             {
                 id: 'lnWRZN67iDU',
                 name: 'Job 1',
@@ -27,12 +27,12 @@ describe('<JobTable>', () => {
             },
         ]
 
-        shallow(<JobTable jobs={jobs} refetch={() => {}} />)
+        shallow(<JobTable jobsAndQueues={jobsAndQueues} refetch={() => {}} />)
     })
 
-    it('renders without errors when there are no jobs', () => {
-        const jobs = []
+    it('renders without errors when there are no jobs or queues', () => {
+        const jobsAndQueues = []
 
-        shallow(<JobTable jobs={jobs} refetch={() => {}} />)
+        shallow(<JobTable jobsAndQueues={jobsAndQueues} refetch={() => {}} />)
     })
 })

src/components/JobTable/JobTableRow.js

@@ -4,7 +4,6 @@ import { TableRow, TableCell } from '@dhis2/ui'
 import { jobTypesMap } from '../../services/server-translations'
 import { ToggleJobSwitch } from '../Switches'
 import JobActions from './JobActions'
-import QueueActions from './QueueActions'
 import Status from './Status'
 import NextRun from './NextRun'
 import Schedule from './Schedule'
@@ -22,7 +21,6 @@ const JobTableRow = ({
         configurable,
     },
     refetch,
-    isJob,
 }) => (
     <TableRow>
         <TableCell role="rowheader">{name}</TableCell>
@@ -45,24 +43,19 @@ const JobTableRow = ({
             />
         </TableCell>
         <TableCell>
-            {isJob ? (
-                <JobActions
-                    id={id}
-                    enabled={enabled}
-                    configurable={configurable}
-                    refetch={refetch}
-                />
-            ) : (
-                <QueueActions name={name} refetch={refetch} />
-            )}
+            <JobActions
+                id={id}
+                enabled={enabled}
+                configurable={configurable}
+                refetch={refetch}
+            />
         </TableCell>
     </TableRow>
 )
 
 const { shape, string, bool, number, func } = PropTypes
 
 JobTableRow.propTypes = {
-    isJob: bool.isRequired,
     job: shape({
         name: string.isRequired,
         enabled: bool.isRequired,

src/components/JobTable/QueueTableRow.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TableRow, TableCell } from '@dhis2/ui'
+import { jobTypesMap } from '../../services/server-translations'
+import { ToggleJobSwitch } from '../Switches'
+import QueueActions from './QueueActions'
+import Status from './Status'
+import NextRun from './NextRun'
+import Schedule from './Schedule'
+
+const QueueTableRow = ({
+    queue: {
+        id,
+        name,
+        type,
+        cronExpression,
+        delay,
+        status,
+        nextExecutionTime,
+        enabled,
+        configurable,
+    },
+    refetch,
+}) => (
+    <TableRow>
+        <TableCell role="rowheader">{name}</TableCell>
+        <TableCell>{jobTypesMap[type]}</TableCell>
+        <TableCell>
+            <Schedule cronExpression={cronExpression} delay={delay} />
+        </TableCell>
+        <TableCell>
+            <NextRun nextExecutionTime={nextExecutionTime} enabled={enabled} />
+        </TableCell>
+        <TableCell>
+            <Status status={status} />
+        </TableCell>
+        <TableCell>
+            <ToggleJobSwitch
+                id={id}
+                checked={enabled}
+                disabled={!configurable}
+                refetch={refetch}
+            />
+        </TableCell>
+        <TableCell>
+            <QueueActions name={name} refetch={refetch} />
+        </TableCell>
+    </TableRow>
+)
+
+const { shape, string, bool, number, func } = PropTypes
+
+QueueTableRow.propTypes = {
+    queue: shape({
+        name: string.isRequired,
+        enabled: bool.isRequired,
+        id: string.isRequired,
+        status: string.isRequired,
+        type: string.isRequired,
+        cronExpression: string,
+        delay: number,
+        nextExecutionTime: string,
+    }).isRequired,
+    refetch: func.isRequired,
+}
+
+export default QueueTableRow

src/pages/JobList/JobList.js

@@ -32,7 +32,7 @@ const JobList = () => {
     }
 
     // Apply the current filter settings
-    const jobs = filterJobs({ jobFilter, showSystemJobs, jobs: data })
+    const jobsAndQueues = filterJobs({ jobFilter, showSystemJobs, jobs: data })
 
     return (
         <React.Fragment>
@@ -82,7 +82,7 @@ const JobList = () => {
                         </LinkButton>
                     </div>
                 </div>
-                <JobTable jobs={jobs} refetch={refetch} />
+                <JobTable jobsAndQueues={jobsAndQueues} refetch={refetch} />
             </Card>
         </React.Fragment>
     )