2016-11-26 10:01:48 +01:00
|
|
|
import React, { PropTypes, PureComponent } from 'react';
|
2016-11-22 21:13:26 +01:00
|
|
|
|
|
|
|
import FontIcon from 'react-toolbox/lib/font_icon';
|
|
|
|
|
|
|
|
import style from './history.scss';
|
|
|
|
|
|
|
|
const DIFF_PREFIXES = {
|
|
|
|
A: ' ',
|
|
|
|
E: ' ',
|
|
|
|
D: '-',
|
|
|
|
N: '+',
|
|
|
|
};
|
|
|
|
|
|
|
|
const SPADEN_CLASS = {
|
|
|
|
A: style.blue, // array edited
|
|
|
|
E: style.blue, // edited
|
|
|
|
D: style.negative, // deleted
|
|
|
|
N: style.positive, // added
|
|
|
|
};
|
|
|
|
|
2016-11-22 22:58:09 +01:00
|
|
|
function getIcon (type) {
|
2016-11-24 21:44:21 +01:00
|
|
|
switch (type) {
|
|
|
|
case 'feature-updated': return 'autorenew';
|
|
|
|
case 'feature-created': return 'add';
|
|
|
|
case 'feature-deleted': return 'remove';
|
|
|
|
case 'feature-archived': return 'archived';
|
|
|
|
default: return 'star';
|
2016-11-22 22:58:09 +01:00
|
|
|
}
|
|
|
|
}
|
2016-11-22 21:13:26 +01:00
|
|
|
|
2016-11-22 22:58:09 +01:00
|
|
|
function buildItemDiff (diff, key) {
|
|
|
|
let change;
|
|
|
|
if (diff.lhs !== undefined) {
|
|
|
|
change = (
|
|
|
|
<div>
|
|
|
|
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else if (diff.rhs !== undefined) {
|
|
|
|
change = (
|
|
|
|
<div>
|
|
|
|
<div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-11-22 21:13:26 +01:00
|
|
|
|
2016-11-22 22:58:09 +01:00
|
|
|
return change;
|
|
|
|
}
|
|
|
|
|
|
|
|
function buildDiff (diff, idx) {
|
|
|
|
let change;
|
|
|
|
const key = diff.path.join('.');
|
|
|
|
|
|
|
|
if (diff.item) {
|
|
|
|
change = buildItemDiff(diff.item, key);
|
|
|
|
} else if (diff.lhs !== undefined && diff.rhs !== undefined) {
|
|
|
|
change = (
|
|
|
|
<div>
|
|
|
|
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
|
|
|
|
<div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
const spadenClass = SPADEN_CLASS[diff.kind];
|
|
|
|
const prefix = DIFF_PREFIXES[diff.kind];
|
|
|
|
|
|
|
|
change = (<div className={spadenClass}>{prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}</div>);
|
2016-11-22 21:13:26 +01:00
|
|
|
}
|
|
|
|
|
2016-11-22 22:58:09 +01:00
|
|
|
return (<div key={idx}>{change}</div>);
|
|
|
|
}
|
|
|
|
|
2016-11-26 10:01:48 +01:00
|
|
|
class HistoryItem extends PureComponent {
|
2016-11-22 21:13:26 +01:00
|
|
|
|
2016-11-22 22:58:09 +01:00
|
|
|
static propTypes () {
|
|
|
|
return {
|
|
|
|
entry: PropTypes.object,
|
|
|
|
};
|
2016-11-22 21:13:26 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
renderEventDiff (logEntry) {
|
|
|
|
if (!logEntry.diffs) {
|
|
|
|
return;
|
|
|
|
}
|
2016-11-22 22:58:09 +01:00
|
|
|
const changes = logEntry.diffs.map(buildDiff);
|
2016-11-22 21:13:26 +01:00
|
|
|
return (
|
|
|
|
<code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderFullEventData (logEntry) {
|
|
|
|
const localEventData = JSON.parse(JSON.stringify(logEntry));
|
|
|
|
delete localEventData.description;
|
|
|
|
delete localEventData.name;
|
|
|
|
delete localEventData.diffs;
|
|
|
|
|
|
|
|
const prettyPrinted = JSON.stringify(localEventData, null, 2);
|
|
|
|
|
|
|
|
return (<code className="JSON smalltext man">{prettyPrinted}</code>);
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const {
|
|
|
|
createdBy,
|
|
|
|
id,
|
|
|
|
type,
|
|
|
|
} = this.props.entry;
|
|
|
|
|
|
|
|
const createdAt = (new Date(this.props.entry.createdAt)).toLocaleString('nb-NO');
|
2016-11-22 22:58:09 +01:00
|
|
|
const icon = getIcon(type);
|
2016-11-22 21:13:26 +01:00
|
|
|
|
|
|
|
const data = this.props.showData ?
|
|
|
|
this.renderFullEventData(this.props.entry) : this.renderEventDiff(this.props.entry);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<FontIcon value={icon} title={type} /> {type}
|
|
|
|
<dl>
|
|
|
|
<dt>Id:</dt>
|
|
|
|
<dd>{id}</dd>
|
|
|
|
<dt>Type:</dt>
|
|
|
|
<dd>{type}</dd>
|
|
|
|
<dt>Timestamp:</dt>
|
|
|
|
<dd>{createdAt}</dd>
|
|
|
|
<dt>Username:</dt>
|
|
|
|
<dd>{createdBy}</dd>
|
|
|
|
</dl>
|
|
|
|
</td>
|
|
|
|
<td>{data}</td>
|
|
|
|
</tr>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default HistoryItem;
|