Merge pull request #1436 from mailpoet/cron-status-info

Cron status info in help section [MAILPOET-1457]

assets/js/src/common/print_boolean.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const PrintBoolean = props => (
+  <span>
+    {(props.children === true && props.truthy) ||
+      (props.children === false && props.falsy) ||
+      (props.unknown)}
+  </span>
+);
+
+PrintBoolean.propTypes = {
+  truthy: React.PropTypes.string,
+  falsy: React.PropTypes.string,
+  unknown: React.PropTypes.string,
+  children: React.PropTypes.bool,
+};
+
+PrintBoolean.defaultProps = {
+  truthy: MailPoet.I18n.t('yes'),
+  falsy: MailPoet.I18n.t('no'),
+  unknown: MailPoet.I18n.t('unknown'),
+  children: null,
+};
+
+module.exports = PrintBoolean;

assets/js/src/help/cron_status.jsx

@@ -0,0 +1,71 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+import PrintBoolean from 'common/print_boolean.jsx';
+
+function renderStatusTableRow(title, value) {
+  return (
+    <tr>
+      <td className={'row-title'}>{ title }</td><td>{ value }</td>
+    </tr>
+  );
+}
+
+const CronStatus = (props) => {
+  const status = props.status_data;
+  const activeStatusMapping = {
+    active: MailPoet.I18n.t('cronRunning'),
+    inactive: MailPoet.I18n.t('cronWaiting'),
+  };
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusCronStatusTitle')}</h2>
+      <table className={'widefat fixed'} style={{ maxWidth: '400px' }}>
+        <tbody>
+          {renderStatusTableRow(
+            MailPoet.I18n.t('accessible'),
+            <PrintBoolean>{status.accessible}</PrintBoolean>)
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('status'),
+            activeStatusMapping[status.status] ? activeStatusMapping[status.status] : MailPoet.I18n.t('unknown'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('lastUpdated'),
+            status.updated_at ? MailPoet.Date.full(status.updated_at * 1000) : MailPoet.I18n.t('unknown'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('lastRunStarted'),
+            status.run_accessed_at ? MailPoet.Date.full(status.run_started_at * 1000) : MailPoet.I18n.t('unknown'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('lastRunCompleted'),
+            status.run_completed_at ? MailPoet.Date.full(status.run_completed_at * 1000) : MailPoet.I18n.t('unknown'))
+          }
+          {renderStatusTableRow(MailPoet.I18n.t('lastSeenError'), status.last_error || '-')}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+CronStatus.propTypes = {
+  status_data: React.PropTypes.shape({
+    accessible: React.PropTypes.bool,
+    status: React.PropTypes.string,
+    updated_at: React.PropTypes.number,
+    run_accessed_at: React.PropTypes.number,
+    run_completed_at: React.PropTypes.number,
+  }).isRequired,
+};
+
+CronStatus.defaultProps = {
+  status_data: {
+    accessible: null,
+    status: null,
+    updated_at: null,
+    run_accessed_at: null,
+    run_completed_at: null,
+  },
+};
+
+module.exports = CronStatus;

assets/js/src/help/help.jsx

@@ -21,11 +21,11 @@ if (container) {
   ReactDOM.render((
     <Router history={history}>
       <Route path="/" component={App}>
-        <IndexRedirect to="systemStatus" />
+        <IndexRedirect to="knowledgeBase" />
         {/* Pages */}
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
         <Route path="systemStatus(/)**" params={{ tab: 'systemStatus' }} component={SystemStatus} />
         <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={SystemInfo} />
-        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
       </Route>
     </Router>
   ), container);

assets/js/src/help/system_status.jsx

@@ -1,6 +1,7 @@
 import MailPoet from 'mailpoet';
 import React from 'react';
 import ReactStringReplace from 'react-string-replace';
+import CronStatus from './cron_status.jsx';
 import Tabs from './tabs.jsx';
 
 function renderStatusMessage(status, error, link) {
@@ -65,6 +66,7 @@ function SystemStatus() {
       </div>
       {renderCronSection(systemStatusData)}
       {renderMSSSection(systemStatusData)}
+      <CronStatus status_data={systemStatusData.cronStatus} />
     </div>
   );
 }

assets/js/src/help/tabs.jsx

@@ -4,6 +4,11 @@ import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 
 const tabs = [
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase',
+  },
   {
     name: 'systemStatus',
     label: MailPoet.I18n.t('tabSystemStatusTitle'),
@@ -14,11 +19,6 @@ const tabs = [
     label: MailPoet.I18n.t('tabSystemInfoTitle'),
     link: '/systemInfo',
   },
-  {
-    name: 'knowledgeBase',
-    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
-    link: '/knowledgeBase',
-  },
 ];
 
 function Tabs(props) {
@@ -45,6 +45,6 @@ function Tabs(props) {
 }
 
 Tabs.propTypes = { tab: React.PropTypes.string };
-Tabs.defaultProps = { tab: 'systemStatus' };
+Tabs.defaultProps = { tab: 'knowledgeBase' };
 
 module.exports = Tabs;