Beautify JSON, use <pre>

This commit is contained in:
bkniffler 2015-08-03 21:58:18 +02:00
parent 9e9d23daf3
commit dffe84ec04

View File

@ -49,7 +49,7 @@ export default class LogMonitorEntry {
let errorText = error; let errorText = error;
if (!errorText) { if (!errorText) {
try { try {
return JSON.stringify(this.props.select(state)); return JSON.stringify(this.props.select(state), null, 2);
} catch (err) { } catch (err) {
errorText = 'Error selecting state.'; errorText = 'Error selecting state.';
} }
@ -76,8 +76,10 @@ export default class LogMonitorEntry {
const { r, g, b } = colorFromString(action.type); const { r, g, b } = colorFromString(action.type);
return ( return (
<div style={{ <pre style={{
textDecoration: collapsed ? 'line-through' : 'none' textDecoration: collapsed ? 'line-through' : 'none',
backgroundColor: "transparent",
border: "0px"
}}> }}>
<a onClick={::this.handleActionClick} <a onClick={::this.handleActionClick}
style={{ style={{
@ -90,13 +92,15 @@ export default class LogMonitorEntry {
cursor: (index > 0) ? 'pointer' : 'default', cursor: (index > 0) ? 'pointer' : 'default',
WebkitUserSelect: 'none' WebkitUserSelect: 'none'
}}> }}>
{JSON.stringify(action)} {JSON.stringify(action, null, 2)}
</a> </a>
{!collapsed && {!collapsed &&
<p style={{ <p style={{
textAlign: 'center', textAlign: 'center',
transform: 'rotate(180deg)' transform: 'rotate(180deg)',
color: 'lightyellow',
fontSize: "2em"
}}> }}>
</p> </p>
@ -115,7 +119,7 @@ export default class LogMonitorEntry {
<hr style={{ <hr style={{
marginBottom: '2em' marginBottom: '2em'
}} /> }} />
</div> </pre>
); );
} }
} }