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

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

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