feat: add toggleable row for queued jobs

dhis2 · Oct 25, 2023 · 9db9122 · 9db9122
1 parent 47b0fff
commit 9db9122
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 31 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-10-19T13:43:33.118Z\n"
-"PO-Revision-Date: 2023-10-19T13:43:33.119Z\n"
+"POT-Creation-Date: 2023-10-24T13:23:55.108Z\n"
+"PO-Revision-Date: 2023-10-24T13:23:55.109Z\n"
 
 msgid "Something went wrong"
 msgstr "Something went wrong"
@@ -189,6 +189,9 @@ msgstr "No jobs to display"
 msgid "Not scheduled"
 msgstr "Not scheduled"
 
+msgid "Queue"
+msgstr "Queue"
+
 msgid "Run manually"
 msgstr "Run manually"
 

diff --git a/src/components/JobTable/JobTable.js b/src/components/JobTable/JobTable.js
@@ -17,6 +17,7 @@ const JobTable = ({ jobsAndQueues, refetch }) => (
     <Table>
         <TableHead>
             <TableRowHead>
+                <TableCellHead />
                 <TableCellHead>{i18n.t('Name')}</TableCellHead>
                 <TableCellHead>{i18n.t('Type')}</TableCellHead>
                 <TableCellHead>{i18n.t('Schedule')}</TableCellHead>

diff --git a/src/components/JobTable/JobTableRow.js b/src/components/JobTable/JobTableRow.js
@@ -23,6 +23,7 @@ const JobTableRow = ({
     refetch,
 }) => (
     <TableRow>
+        <TableCell />
         <TableCell role="rowheader">{name}</TableCell>
         <TableCell>{jobTypesMap[type]}</TableCell>
         <TableCell>

diff --git a/src/components/JobTable/QueueTableRow.js b/src/components/JobTable/QueueTableRow.js
@@ -1,12 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { TableRow, TableCell } from '@dhis2/ui'
+import {
+    TableRow,
+    TableCell,
+    IconChevronDown24,
+    IconChevronUp24,
+} from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import { ToggleJobSwitch } from '../Switches'
 import QueueActions from './QueueActions'
 import Status from './Status'
 import NextRun from './NextRun'
 import Schedule from './Schedule'
+import QueuedJobTableRow from './QueuedJobTableRow'
 
 const QueueTableRow = ({
     queue: {
@@ -18,36 +24,62 @@ const QueueTableRow = ({
         nextExecutionTime,
         enabled,
         configurable,
+        sequence,
     },
     refetch,
-}) => (
-    <TableRow>
-        <TableCell role="rowheader">{name}</TableCell>
-        <TableCell>{i18n.t('Queue')}</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 [showJobs, setShowJobs] = useState(false)
+    const handleClick = () => setShowJobs((prev) => !prev)
+    const buttonStyle = {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+    }
 
-const { shape, string, bool, number, func } = PropTypes
+    return (
+        <>
+            <TableRow>
+                <TableCell>
+                    <button style={buttonStyle} onClick={handleClick}>
+                        {showJobs ? <IconChevronUp24 /> : <IconChevronDown24 />}
+                    </button>
+                </TableCell>
+                <TableCell role="rowheader">{name}</TableCell>
+                <TableCell>{i18n.t('Queue')}</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>
+            {showJobs
+                ? sequence.map((job) => (
+                      <QueuedJobTableRow key={job.id} job={job} />
+                  ))
+                : null}
+        </>
+    )
+}
+
+const { shape, string, bool, number, func, arrayOf, object } = PropTypes
 
 QueueTableRow.propTypes = {
     queue: shape({
@@ -59,6 +91,7 @@ QueueTableRow.propTypes = {
         cronExpression: string,
         delay: number,
         nextExecutionTime: string,
+        sequence: arrayOf(object).isRequired,
     }).isRequired,
     refetch: func.isRequired,
 }

diff --git a/src/components/JobTable/QueuedJobTableRow.js b/src/components/JobTable/QueuedJobTableRow.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { TableRow, TableCell } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import { jobTypesMap } from '../../services/server-translations'
+
+const QueuedJobTableRow = ({ job }) => {
+    return (
+        <TableRow>
+            <TableCell />
+            <TableCell>{job.name}</TableCell>
+            <TableCell colSpan="6">{jobTypesMap[job.type]}</TableCell>
+        </TableRow>
+    )
+}
+
+const { shape, string } = PropTypes
+
+QueuedJobTableRow.propTypes = {
+    job: shape({
+        name: string.isRequired,
+        type: string.isRequired,
+    }).isRequired,
+}
+
+export default QueuedJobTableRow