Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Refactor help page status tables into component

Browse Source 
[MAILPOET-1459]
This commit is contained in:
Rostislav Wolny
2018-07-25 11:10:20 +02:00
parent 1252f35a23
commit 490ea67d18
3 changed files with 92 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
assets/js/src/common/key_value_table.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
const KeyValueTable = props => (
<table className={'widefat fixed'} style={{ maxWidth: props.max_width }}>
<tbody>
{props.children.map(row => (
<tr key={`row_${row.key}`}>
<td className={'row-title'}>{ row.key }</td><td>{ row.value }</td>
</tr>
))}
</tbody>
</table>
);
KeyValueTable.propTypes = {
max_width: React.PropTypes.string,
children: React.PropTypes.arrayOf(React.PropTypes.shape({
key: React.PropTypes.string.isRequired,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.element,
]).isRequired,
})).isRequired,
};
KeyValueTable.defaultProps = {
max_width: 'auto',
};
module.exports = KeyValueTable;

60
assets/js/src/help/cron_status.jsx
View File

@@ -1,15 +1,8 @@
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import React from 'react'; import React from 'react';
import KeyValueTable from 'common/key_value_table.jsx';
import PrintBoolean from 'common/print_boolean.jsx'; 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 CronStatus = (props) => {
const status = props.status_data; const status = props.status_data;
const activeStatusMapping = { const activeStatusMapping = {
@@ -19,31 +12,32 @@ const CronStatus = (props) => {
return ( return (
<div> <div>
<h2>{MailPoet.I18n.t('systemStatusCronStatusTitle')}</h2> <h2>{MailPoet.I18n.t('systemStatusCronStatusTitle')}</h2>
<table className={'widefat fixed'} style={{ maxWidth: '400px' }}> <KeyValueTable max_width={'400px'}>{[
<tbody> {
{renderStatusTableRow( key: MailPoet.I18n.t('accessible'),
MailPoet.I18n.t('accessible'), value: <PrintBoolean>{status.accessible}</PrintBoolean>,
<PrintBoolean>{status.accessible}</PrintBoolean>) },
} {
{renderStatusTableRow( key: MailPoet.I18n.t('status'),
MailPoet.I18n.t('status'), value: activeStatusMapping[status.status] ? activeStatusMapping[status.status] : MailPoet.I18n.t('unknown'),
activeStatusMapping[status.status] ? activeStatusMapping[status.status] : MailPoet.I18n.t('unknown')) },
} {
{renderStatusTableRow( key: MailPoet.I18n.t('lastUpdated'),
MailPoet.I18n.t('lastUpdated'), value: status.updated_at ? MailPoet.Date.full(status.updated_at * 1000) : MailPoet.I18n.t('unknown'),
status.updated_at ? MailPoet.Date.full(status.updated_at * 1000) : MailPoet.I18n.t('unknown')) },
} {
{renderStatusTableRow( key: MailPoet.I18n.t('lastRunStarted'),
MailPoet.I18n.t('lastRunStarted'), value: status.run_accessed_at ? MailPoet.Date.full(status.run_started_at * 1000) : MailPoet.I18n.t('unknown'),
status.run_accessed_at ? MailPoet.Date.full(status.run_started_at * 1000) : MailPoet.I18n.t('unknown')) },
} {
{renderStatusTableRow( key: MailPoet.I18n.t('lastRunCompleted'),
MailPoet.I18n.t('lastRunCompleted'), value: status.run_completed_at ? MailPoet.Date.full(status.run_completed_at * 1000) : MailPoet.I18n.t('unknown'),
status.run_completed_at ? MailPoet.Date.full(status.run_completed_at * 1000) : MailPoet.I18n.t('unknown')) },
} {
{renderStatusTableRow(MailPoet.I18n.t('lastSeenError'), status.last_error || MailPoet.I18n.t('none'))} key: MailPoet.I18n.t('lastSeenError'),
</tbody> value: status.last_error || MailPoet.I18n.t('none'),
</table> }]}
</KeyValueTable>
</div> </div>
); );
}; };

86
assets/js/src/help/queue_status.jsx
View File

@@ -1,63 +1,45 @@
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import React from 'react'; import React from 'react';
import KeyValueTable from 'common/key_value_table.jsx';
function renderStatusTableRow(title, value) {
return (
<tr>
<td className={'row-title'}>{ title }</td><td>{ value }</td>
</tr>
);
}
const QueueStatus = (props) => { const QueueStatus = (props) => {
const status = props.status_data; const status = props.status_data;
return ( return (
<div> <div>
<h2>{MailPoet.I18n.t('systemStatusQueueTitle')}</h2> <h2>{MailPoet.I18n.t('systemStatusQueueTitle')}</h2>
<table className={'widefat fixed'} style={{ maxWidth: '400px' }}> <KeyValueTable max_width={'400px'}>{
<tbody> [{
{renderStatusTableRow( key: MailPoet.I18n.t('status'),
MailPoet.I18n.t('status'), value: status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running'),
status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running')) }, {
} key: MailPoet.I18n.t('startedAt'),
{renderStatusTableRow( value: status.started ? MailPoet.Date.full(status.started * 1000) : MailPoet.I18n.t('unknown'),
MailPoet.I18n.t('startedAt'), }, {
status.started ? MailPoet.Date.full(status.started * 1000) : MailPoet.I18n.t('unknown')) key: MailPoet.I18n.t('sentEmails'),
} value: status.sent || 0,
{renderStatusTableRow( }, {
MailPoet.I18n.t('sentEmails'), key: MailPoet.I18n.t('retryAttempt'),
status.sent || 0) value: status.retry_attempt || MailPoet.I18n.t('none'),
} }, {
{renderStatusTableRow( key: MailPoet.I18n.t('retryAt'),
MailPoet.I18n.t('retryAttempts'), value: status.retry_at ? MailPoet.Date.full(status.retry_at * 1000) : MailPoet.I18n.t('none'),
status.retry_attempt || MailPoet.I18n.t('none')) }, {
} key: MailPoet.I18n.t('error'),
{renderStatusTableRow( value: status.error || MailPoet.I18n.t('none'),
MailPoet.I18n.t('retryAt'), }, {
status.retry_at ? MailPoet.Date.full(status.retry_at * 1000) : MailPoet.I18n.t('none')) key: MailPoet.I18n.t('totalCompletedTasks'),
} value: status.tasksStatusCounts.completed,
{renderStatusTableRow( }, {
MailPoet.I18n.t('error'), key: MailPoet.I18n.t('totalRunningTasks'),
status.error || MailPoet.I18n.t('none')) value: status.tasksStatusCounts.running,
} }, {
{renderStatusTableRow( key: MailPoet.I18n.t('totalPausedTasks'),
MailPoet.I18n.t('totalCompletedTasks'), value: status.tasksStatusCounts.paused,
status.tasksStatusCounts.completed) }, {
} key: MailPoet.I18n.t('totalScheduledTasks'),
{renderStatusTableRow( value: status.tasksStatusCounts.scheduled,
MailPoet.I18n.t('totalRunningTasks'), }]}
status.tasksStatusCounts.running) </KeyValueTable>
}
{renderStatusTableRow(
MailPoet.I18n.t('totalPausedTasks'),
status.tasksStatusCounts.paused)
}
{renderStatusTableRow(
MailPoet.I18n.t('totalScheduledTasks'),
status.tasksStatusCounts.scheduled)
}
</tbody>
</table>
</div> </div>
); );
}; };