Add rendering of latest sending tasks to help page

[MAILPOET-1460]

assets/js/src/help/queue_status.jsx

@@ -1,6 +1,8 @@
 import MailPoet from 'mailpoet';
 import React from 'react';
 import KeyValueTable from 'common/key_value_table.jsx';
+import TasksList from './tasks_list/tasks_list.jsx';
+import TasksListDataRow from './tasks_list/tasks_list_data_row.jsx';
 
 const QueueStatus = (props) => {
   const status = props.status_data;
@@ -40,6 +42,15 @@ const QueueStatus = (props) => {
           value: status.tasksStatusCounts.scheduled,
         }]}
       </KeyValueTable>
+
+      <h4>{MailPoet.I18n.t('scheduledTasks')}</h4>
+      <TasksList show_scheduled_at tasks={status.latestTasks.filter(task => (task.status === 'scheduled'))} />
+
+      <h4>{MailPoet.I18n.t('runningTasks')}</h4>
+      <TasksList tasks={status.latestTasks.filter(task => (task.status === null))} />
+
+      <h4>{MailPoet.I18n.t('completedTasks')}</h4>
+      <TasksList tasks={status.latestTasks.filter(task => (task.status === 'completed'))} />
     </div>
   );
 };
@@ -57,6 +68,7 @@ QueueStatus.propTypes = {
       paused: React.PropTypes.number.isRequired,
       scheduled: React.PropTypes.number.isRequired,
     }).isRequired,
+    latestTasks: React.PropTypes.arrayOf(TasksListDataRow.propTypes.task).isRequired,
   }).isRequired,
 };
 

assets/js/src/help/tasks_list/tasks_list.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import TaskListDataRow from './tasks_list_data_row.jsx';
+import TaskListLabelsRow from './tasks_list_labels_row.jsx';
+
+const TasksList = (props) => {
+  const colsCount = props.show_scheduled_at ? 6 : 5;
+
+  return (
+    <table className="widefat fixed striped">
+      <thead><TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} /></thead>
+      <tbody>
+        {
+          props.tasks.length ? props.tasks.map(task => (
+            <TaskListDataRow
+              key={task.id}
+              task={task}
+              show_scheduled_at={props.show_scheduled_at}
+            />)
+          ) : (
+            <tr className="no-items">
+              <td colSpan={colsCount}>{MailPoet.I18n.t('nothingToShow')}</td>
+            </tr>
+          )
+        }
+      </tbody>
+      <tfoot><TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} /></tfoot>
+    </table>
+  );
+};
+
+TasksList.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+  tasks: React.PropTypes.arrayOf(TaskListDataRow.propTypes.task).isRequired,
+};
+
+TasksList.defaultProps = {
+  show_scheduled_at: false,
+};
+
+module.exports = TasksList;

assets/js/src/help/tasks_list/tasks_list_data_row.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const TasksListDataRow = props => (
+  <tr>
+    <td className="column column-primary">
+      { props.task.id }
+    </td>
+    <td className="column">
+      { props.task.type }
+    </td>
+    <td className="column">
+      { props.task.newsletter ? (
+        <a
+          href={props.task.newsletter.preview_url}
+          data-newsletter-id={props.task.newsletter.newsletter_id}
+          data-queue-id={props.task.newsletter.queue_id}
+          target="_blank"
+        >
+          {props.task.newsletter.subject || MailPoet.I18n.t('preview')}
+        </a>) : MailPoet.I18n.t('none')
+      }
+    </td>
+    <td className="column">
+      { props.task.priority }
+    </td>
+    { props.show_scheduled_at ? (
+      <td className="column-date">
+        <abbr>{ MailPoet.Date.format(props.task.scheduled_at * 1000) }</abbr>
+      </td>
+    ) : null }
+    <td className="column-date">
+      <abbr>{ MailPoet.Date.format(props.task.updated_at * 1000) }</abbr>
+    </td>
+  </tr>
+);
+
+TasksListDataRow.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+  task: React.PropTypes.shape({
+    id: React.PropTypes.number.isRequired,
+    type: React.PropTypes.string.isRequired,
+    priority: React.PropTypes.number.isRequired,
+    updated_at: React.PropTypes.number.isRequired,
+    scheduled_at: React.PropTypes.number,
+    status: React.PropTypes.string,
+    newsletter: React.PropTypes.shape({
+      newsletter_id: React.PropTypes.number.isRequired,
+      queue_id: React.PropTypes.number.isRequired,
+      preview_url: React.PropTypes.string.isRequired,
+      subject: React.PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+TasksListDataRow.defaultProps = {
+  show_scheduled_at: false,
+  task: {
+    newsletter: null,
+  },
+};
+
+module.exports = TasksListDataRow;

assets/js/src/help/tasks_list/tasks_list_labels_row.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const TasksListLabelsRow = props => (
+  <tr>
+    <th className="row-title">Id</th>
+    <th className="row-title">{MailPoet.I18n.t('type')}</th>
+    <th className="row-title">{MailPoet.I18n.t('email')}</th>
+    <th className="row-title">{MailPoet.I18n.t('priority')}</th>
+    { props.show_scheduled_at ? (<th className="row-title">{MailPoet.I18n.t('scheduledAt')}</th>) : null }
+    <th className="row-title">{MailPoet.I18n.t('updatedAt')}</th>
+  </tr>
+);
+
+TasksListLabelsRow.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+};
+
+TasksListLabelsRow.defaultProps = {
+  show_scheduled_at: false,
+};
+
+module.exports = TasksListLabelsRow;