Basic management console (view only)

app/components/manage-site/ManagementConsole.jsx

 import React from 'react'
+import moment from 'moment'
+import { Query } from 'react-apollo'
+import styled, { withTheme } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { Icon, H2 } from '@pubsweet/ui'
+import { B, Loading, LoadingIcon, Table } from '../ui'
 import ManagementBase from './ManagementBase'
+import { JOB_LIST, PROPS } from './operations'
 
-const Console = () => <div />
+const Desc = styled.span`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  span {
+    font-size: ${th('fontSizeBaseSmall')};
+    margin-left: calc(${th('gridUnit')} * 2);
+  }
+`
+
+const Status = withTheme(({ theme, status }) => (
+  <Icon color={status ? theme.colorSuccess : theme.colorError}>
+    {status ? 'check' : 'x'}
+  </Icon>
+))
+
+const Console = () => (
+  <React.Fragment>
+    <H2>Job status</H2>
+    <Query fetchPolicy="cache-and-network" query={JOB_LIST}>
+      {({ data, loading }) => {
+        if (loading) {
+          return (
+            <Loading>
+              <LoadingIcon />
+            </Loading>
+          )
+        }
+        if (!data) {
+          return null
+        }
+        const { getJobs } = data
+        return (
+          <Table>
+            <thead>
+              <tr>
+                <th>Job</th>
+                <th>Running</th>
+                <th>Status</th>
+                <th>Last successful run</th>
+              </tr>
+            </thead>
+            <tbody>
+              {getJobs.map(job => (
+                <tr key={job.name}>
+                  <td>
+                    {' '}
+                    <Desc>
+                      <B>{job.name} </B>
+                      <span>{job.description}</span>
+                    </Desc>
+                  </td>
+                  <td style={{ textAlign: 'center' }}>
+                    {job.running === true && <LoadingIcon />}
+                  </td>
+                  <td style={{ textAlign: 'center' }}>
+                    <Status status={job.lastStatus === 'pass'} />
+                  </td>
+                  <td>{moment(job.lastPass).format('DD/MM/YYYY HH:mm')}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )
+      }}
+    </Query>
+    <H2>Site management</H2>
+    <Query fetchPolicy="cache-and-network" query={PROPS}>
+      {({ data, loading }) => {
+        if (loading) {
+          return (
+            <Loading>
+              <LoadingIcon />
+            </Loading>
+          )
+        }
+        if (!data) {
+          return null
+        }
+        const { getProps } = data
+        return (
+          <Table>
+            <tbody>
+              <tr>
+                {Object.keys(getProps[0]).map(k => (
+                  <th key={k}>{k}</th>
+                ))}
+              </tr>
+              {getProps.map(prop => (
+                <tr key={prop.name}>
+                  {Object.keys(prop).map(k => (
+                    <td key={prop.name + k}>
+                      {JSON.stringify(prop[k], null, ' ')}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )
+      }}
+    </Query>
+  </React.Fragment>
+)
 
 const ConsoleTitle = ManagementBase(Console)
 

app/components/manage-site/operations.js

 import gql from 'graphql-tag'
 
+export const JOB_LIST = gql`
+  query ListJobs {
+    getJobs {
+      name
+      description
+      running
+      lastStatus
+      lastPass
+    }
+  }
+`
+
+export const PROPS = gql`
+  query ListProps {
+    getProps {
+      name
+      description
+      schema
+      value
+    }
+  }
+`
+
 export const COUNT_PREPRINTS = gql`
   query CountPreprintsByStatus {
     countPreprintsByStatus {

server/xpub-model/index.js

@@ -11,7 +11,7 @@ const AuditManager = require('./entities/audit')
 const ReviewManager = require('./entities/review')
 const PrivacyNoticeManager = require('./entities/privacyNotice')
 const FtpAccountManager = require('./entities/ftpAccount')
-const { JobManager } = require('./entities/config')
+const { JobManager, PropManager } = require('./entities/config')
 
 module.exports = {
   FileManager,
@@ -28,4 +28,5 @@ module.exports = {
   PrivacyNoticeManager,
   FtpAccountManager,
   JobManager,
+  PropManager,
 }

server/xpub-server/entities/config/typeDefs.graphqls

 type Job {
   name: String!
+  description: String
   running: Boolean!
   lastStatus: String
   lastPass: DateTime