BACKLOG-23323 Improvements to the background jobs page

.github/workflows/on-code-change.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: Jahia/jahia-modules-action/static-analysis@v2
         with:
-          node_version: 14
+          node_version: 18
           auditci_level: high
 
   build:

package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@jahia/moonstone": "^2.9.1",
     "@jahia/ui-extender": "^1.0.6",
+    "css-loader": "^7.1.2",
     "graphql-tag": "^2.12.6",
     "i18next": "^19.1.0",
     "prop-types": "^15.7.2",
@@ -47,7 +48,8 @@
     "react-iframe": "^1.8.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-table": "^7.8.0"
+    "react-table": "^7.8.0",
+    "style-loader": "^4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",

src/javascript/serverSettings/backgroundJobs/BackgroundJobsTable.jsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useImperativeHandle, useMemo, forwardRef} from 'react';
 import {useTable, useSortBy} from 'react-table';
 import {
     Loader,
@@ -37,7 +37,7 @@ NothingToDisplay.propTypes = {
     isError: PropTypes.bool
 };
 
-const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...props}) => {
+const BackgroundJobsTable = forwardRef(({tableProps, paginationProps, loading, error, refetch, ...props}, ref) => {
     const {
         limit,
         setLimit,
@@ -54,6 +54,10 @@ const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...pr
         prepareRow
     } = useTable(tableProps, useSortBy);
 
+    useImperativeHandle(ref, () => ({
+        refetch
+    }));
+
     const content = useMemo(() => {
         if (rows.length === 0) {
             return <NothingToDisplay/>;
@@ -118,14 +122,14 @@ const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...pr
             <TablePagination rowsPerPageOptions={[5, 10, 20]} currentPage={currentPage} totalNumberOfRows={totalCount} rowsPerPage={limit} onRowsPerPageChange={setLimit} onPageChange={setPage}/>
         </>
     );
-};
+});
 
 BackgroundJobsTable.propTypes = {
     tableProps: PropTypes.object.isRequired,
     paginationProps: PropTypes.object.isRequired,
     // eslint-disable-next-line react/boolean-prop-naming
     loading: PropTypes.bool,
-
+    refetch: PropTypes.func,
     error: PropTypes.object,
     'data-testid': PropTypes.string
 };

src/javascript/serverSettings/backgroundJobs/HistoryBackgroundJobsTable.jsx

@@ -1,11 +1,11 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, forwardRef} from 'react';
 import {useHistoryBackgroundJobs} from './hooks';
 const {useTranslation} = require('react-i18next');
 import {parseUsername} from './utils';
 import BackgroundJobsTable from './BackgroundJobsTable';
 import JobStatusBadge from './JobStatusBadge';
 
-const HistoryBackgroundJobsTable = () => {
+const HistoryBackgroundJobsTable = forwardRef((_, ref) => {
     const {t} = useTranslation('serverSettings');
     const {
         jobs,
@@ -14,6 +14,7 @@ const HistoryBackgroundJobsTable = () => {
         totalCount,
         currentPage,
         setPage,
+        refetch,
         loading,
         error
     } = useHistoryBackgroundJobs();
@@ -52,7 +53,7 @@ const HistoryBackgroundJobsTable = () => {
                 Header: t('backgroundJobs.columns.duration'),
                 accessor: 'duration',
                 Cell: ({value}) => `${value} ms`,
-                customWidth: 80
+                customWidth: 105
             }
         ];
     }, [t]);
@@ -65,13 +66,15 @@ const HistoryBackgroundJobsTable = () => {
 
     return (
         <BackgroundJobsTable
+            ref={ref}
             tableProps={tableProps}
             paginationProps={{limit, setLimit, totalCount, currentPage, setPage}}
+            refetch={refetch}
             loading={loading}
             error={error}
             data-testid="history-background-jobs-table"
         />
     );
-};
+});
 
 export default HistoryBackgroundJobsTable;

src/javascript/serverSettings/backgroundJobs/ScheduledBackgroundJobsTable.jsx

@@ -1,9 +1,9 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, forwardRef} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useScheduledBackgroundJobs} from './hooks';
 import BackgroundJobsTable from './BackgroundJobsTable';
 
-const ScheduledBackgroundJobsTable = () => {
+const ScheduledBackgroundJobsTable = forwardRef((_, ref) => {
     const {t} = useTranslation('serverSettings');
     const {
         jobs,
@@ -12,6 +12,7 @@ const ScheduledBackgroundJobsTable = () => {
         totalCount,
         currentPage,
         setPage,
+        refetch,
         loading,
         error
     } = useScheduledBackgroundJobs();
@@ -37,13 +38,15 @@ const ScheduledBackgroundJobsTable = () => {
 
     return (
         <BackgroundJobsTable
+            ref={ref}
             tableProps={tableProps}
             paginationProps={{limit, setLimit, totalCount, currentPage, setPage}}
             loading={loading}
+            refetch={refetch}
             error={error}
             data-testid="scheduled-background-jobs-table"
         />
     );
-};
+});
 
 export default ScheduledBackgroundJobsTable;

src/javascript/serverSettings/backgroundJobs/hooks.js

@@ -6,7 +6,7 @@ export const useHistoryBackgroundJobs = () => {
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const offset = useMemo(() => (page - 1) * limit, [page, limit]);
-    const {data, loading, error} = useQuery(GET_BACKGROUND_JOBS, {
+    const {data, loading, error, refetch} = useQuery(GET_BACKGROUND_JOBS, {
         variables: {
             includeStatuses: null,
             excludeStatuses: ['SCHEDULED'],
@@ -23,6 +23,7 @@ export const useHistoryBackgroundJobs = () => {
         jobs,
         totalCount,
         currentPage: page,
+        refetch,
         setPage,
         limit,
         setLimit,
@@ -35,7 +36,7 @@ export const useScheduledBackgroundJobs = () => {
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const offset = useMemo(() => (page - 1) * limit, [page, limit]);
-    const {data, loading, error} = useQuery(GET_BACKGROUND_JOBS, {
+    const {data, loading, error, refetch} = useQuery(GET_BACKGROUND_JOBS, {
         variables: {
             includeStatuses: ['SCHEDULED'],
             excludeStatuses: null,
@@ -53,6 +54,7 @@ export const useScheduledBackgroundJobs = () => {
         totalCount,
         currentPage: page,
         setPage,
+        refetch,
         limit,
         setLimit,
         loading,

src/javascript/serverSettings/backgroundJobs/index.jsx

@@ -1,39 +1,60 @@
-import React, {useState} from 'react';
-import {Header, LayoutContent, Paper, Tab, TabItem} from '@jahia/moonstone';
+import React, {useMemo, useRef, useState} from 'react';
+import {Button, Header, LayoutContent, Paper, Tab, TabItem, Reload} from '@jahia/moonstone';
 import HistoryBackgroundJobsTable from './HistoryBackgroundJobsTable';
 import ScheduledBackgroundJobsTable from './ScheduledBackgroundJobsTable';
 import {useTranslation} from 'react-i18next';
+import classes from './styles.css';
 
 const BackgroundJobsTabs = () => {
     const {t} = useTranslation('serverSettings');
     const [activeTab, setActiveTab] = useState('history');
+    const historyRef = useRef(null);
+    const historyTable = useMemo(() => <HistoryBackgroundJobsTable ref={historyRef}/>, []);
 
-    const content = activeTab === 'history' ? <HistoryBackgroundJobsTable/> : <ScheduledBackgroundJobsTable/>;
+    const scheduledRef = useRef(null);
+    const scheduledTable = useMemo(() => <ScheduledBackgroundJobsTable ref={scheduledRef}/>, []);
 
     return (
         <LayoutContent
             header={<Header title={t('backgroundJobs.title')}/>}
             content={(
                 <Paper>
-                    <Tab>
+                    <Tab className={classes.tabs}>
                         <TabItem
                             id="history"
-                            label={t('backgroundJobs.tabs.history').toUpperCase()}
+                            label={t('backgroundJobs.tabs.history')}
                             size="big"
                             isSelected={activeTab === 'history'}
                             data-testid="background-jobs-history-tab"
                             onClick={() => setActiveTab('history')}
                         />
                         <TabItem
                             id="scheduled"
-                            label={t('backgroundJobs.tabs.scheduled').toUpperCase()}
+                            label={t('backgroundJobs.tabs.scheduled')}
                             size="big"
                             isSelected={activeTab === 'scheduled'}
                             data-testid="background-jobs-scheduled-tab"
                             onClick={() => setActiveTab('scheduled')}
                         />
+                        <div className={classes.spacer}/>
+                        <Button
+                            variant="ghost"
+                            icon={<Reload/>}
+                            onClick={() => {
+                                if (activeTab === 'history') {
+                                    historyRef.current.refetch();
+                                } else {
+                                    scheduledRef.current.refetch();
+                                }
+                            }}
+                        />
                     </Tab>
-                    {content}
+                    <div style={activeTab === 'history' ? {} : {display: 'none'}}>
+                        {historyTable}
+                    </div>
+                    <div style={activeTab === 'scheduled' ? {} : {display: 'none'}}>
+                        {scheduledTable}
+                    </div>
                 </Paper>
             )}
         />

src/javascript/serverSettings/backgroundJobs/styles.css

@@ -0,0 +1,7 @@
+.tabs {
+    width: 100%;
+}
+
+.spacer {
+    flex: 1;
+}

src/javascript/serverSettings/backgroundJobs/utils.jsx

@@ -7,9 +7,13 @@ export const renderSortIndicator = (isSorted, isSortedDesc) => {
 };
 
 export const parseUsername = username => {
-    if (username.indexOf('/users/') !== -1) {
-        return username.split('/users/')[1];
+    if (!username) {
+        return 'Unknown user';
     }
 
-    return username;
+    if (username.indexOf('/') === -1) {
+        return username;
+    }
+
+    return username.split('/').pop();
 };

src/javascript/serverSettings/systemHealth/registerRoutes.js

@@ -21,7 +21,7 @@
         iframeUrl: window.contextJsParameters.contextPath + '/cms/adminframe/default/en/settings.cacheManagement.html?redirect=false'
     });
 
     // TODO fix issue with label being used for tree item selection (compare this to cacheManagement)
     registry.add('adminRoute', 'manageMemory', {
         targets: ['administration-server-systemHealth:1'],
         requiredPermission: 'adminManageMemory',
@@ -41,6 +41,7 @@
 
     registry.add('adminRoute', 'backgroundJobs', {
         targets: ['administration-server-systemHealth:4'],
+        requiredPermission: 'view-all-jobs',
         icon: null,
         label: 'serverSettings:systemHealth.backgroundJobs',
         isSelectable: true,

webpack.config.js

@@ -27,7 +27,7 @@ module.exports = (env, argv) => {
         },
         resolve: {
             mainFields: ['module', 'main'],
-            extensions: ['.mjs', '.js', '.jsx', 'json']
+            extensions: ['.mjs', '.js', '.jsx', '.json']
         },
         module: {
             rules: [
@@ -58,7 +58,21 @@ module.exports = (env, argv) => {
                     test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                     type: 'asset/resource',
                     dependency: { not: ['url'] }
-                }
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    namedExport: false,
+                                },
+                            },
+                        },
+                    ],
+                },
             ]
         },
         plugins: [