Add sending queue status to help page

[MAILPOET-1459]

assets/js/src/help/cron_status.jsx

@@ -13,7 +13,7 @@ function renderStatusTableRow(title, value) {
 const CronStatus = (props) => {
   const status = props.status_data;
   const activeStatusMapping = {
-    active: MailPoet.I18n.t('cronRunning'),
+    active: MailPoet.I18n.t('running'),
     inactive: MailPoet.I18n.t('cronWaiting'),
   };
   return (
@@ -41,7 +41,7 @@ const CronStatus = (props) => {
             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 || '-')}
+          {renderStatusTableRow(MailPoet.I18n.t('lastSeenError'), status.last_error || MailPoet.I18n.t('none'))}
         </tbody>
       </table>
     </div>

assets/js/src/help/queue_status.jsx

@@ -0,0 +1,91 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+
+function renderStatusTableRow(title, value) {
+  return (
+    <tr>
+      <td className={'row-title'}>{ title }</td><td>{ value }</td>
+    </tr>
+  );
+}
+
+const QueueStatus = (props) => {
+  const status = props.status_data;
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusQueueTitle')}</h2>
+      <table className={'widefat fixed'} style={{ maxWidth: '400px' }}>
+        <tbody>
+          {renderStatusTableRow(
+            MailPoet.I18n.t('status'),
+            status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('startedAt'),
+            status.started ? MailPoet.Date.full(status.started * 1000) : MailPoet.I18n.t('unknown'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('sentEmails'),
+            status.sent || 0)
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('retryAttempts'),
+            status.retry_attempt || MailPoet.I18n.t('none'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('retryAt'),
+            status.retry_at ? MailPoet.Date.full(status.retry_at * 1000) : MailPoet.I18n.t('none'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('error'),
+            status.error || MailPoet.I18n.t('none'))
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('totalCompletedTasks'),
+            status.tasksStatusCounts.completed)
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('totalRunningTasks'),
+            status.tasksStatusCounts.running)
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('totalPausedTasks'),
+            status.tasksStatusCounts.paused)
+          }
+          {renderStatusTableRow(
+            MailPoet.I18n.t('totalScheduledTasks'),
+            status.tasksStatusCounts.scheduled)
+          }
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+QueueStatus.propTypes = {
+  status_data: React.PropTypes.shape({
+    status: React.PropTypes.string,
+    started: React.PropTypes.number,
+    sent: React.PropTypes.number,
+    retry_attempt: React.PropTypes.number,
+    retry_at: React.PropTypes.number,
+    tasksStatusCounts: React.PropTypes.shape({
+      completed: React.PropTypes.number.isRequired,
+      running: React.PropTypes.number.isRequired,
+      paused: React.PropTypes.number.isRequired,
+      scheduled: React.PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+QueueStatus.defaultProps = {
+  status_data: {
+    status: null,
+    started: null,
+    sent: null,
+    retry_attempt: null,
+    retry_at: null,
+  },
+};
+
+module.exports = QueueStatus;

assets/js/src/help/system_status.jsx

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