cleanup history view a bit

frontend/src/component/history/history-item-diff.jsx

@@ -79,24 +79,16 @@ class HistoryItem extends PureComponent {
     }
 
     renderEventDiff (logEntry) {
-        if (!logEntry.diffs) {
-            return;
+        let changes;
+
+        if (logEntry.diffs) {
+            changes = logEntry.diffs.map(buildDiff);
+        } else {
+            // Just show the data if there is no diff yet.
+            changes = <div className={SPADEN_CLASS.N}>{JSON.stringify(logEntry.data, null, 2)}</div>;
         }
-        const changes = logEntry.diffs.map(buildDiff);
-        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>);
+        return <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>;
     }
 
     render () {
@@ -109,26 +101,26 @@ class HistoryItem extends PureComponent {
         const createdAt = (new Date(this.props.entry.createdAt)).toLocaleString('nb-NO');
         const icon = getIcon(type);
 
-        const data = this.props.showData ?
-            this.renderFullEventData(this.props.entry) : this.renderEventDiff(this.props.entry);
+        const data = 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>
+            <div className={style['history-item']}>
+                <dl>
+                    <dt>Id:</dt>
+                    <dd>{id}</dd>
+                    <dt>Type:</dt>
+                    <dd>
+                        <FontIcon value={icon} title={type} style={{ fontSize: '1.6rem' }} />
+                        <span> {type}</span>
+                    </dd>
+                    <dt>Timestamp:</dt>
+                    <dd>{createdAt}</dd>
+                    <dt>Username:</dt>
+                    <dd>{createdBy}</dd>
+                    <dt>Diff</dt>
+                    <dd>{data}</dd>
+                </dl>
+             </div>
         );
     }
 }

frontend/src/component/history/history-item-json.jsx

@@ -0,0 +1,103 @@
+import React, { PropTypes, PureComponent } from 'react';
+
+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
+};
+
+function getIcon (type) {
+    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';
+    }
+}
+
+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>
+        );
+    }
+
+    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>);
+    }
+
+    return (<div key={idx}>{change}</div>);
+}
+
+class HistoryItem extends PureComponent {
+
+    static propTypes () {
+        return {
+            entry: PropTypes.object,
+        };
+    }
+
+    render () {
+        const { type } = this.props.entry;
+
+        const icon = getIcon(type);
+
+        const localEventData = JSON.parse(JSON.stringify(this.props.entry));
+        delete localEventData.description;
+        delete localEventData.name;
+        delete localEventData.diffs;
+
+        const prettyPrinted = JSON.stringify(localEventData, null, 2);
+
+        return (
+            <div className={style['history-item']}>
+                <div>
+                    <code className="JSON smalltext man">{prettyPrinted}</code>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default HistoryItem;

frontend/src/component/history/history-list-component.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import HistoryItem from './history-item';
+import HistoryItemDiff from './history-item-diff';
+import HistoryItemJson from './history-item-json';
 import Switch from 'react-toolbox/lib/switch';
 
 import style from './history.scss';
@@ -17,20 +18,22 @@ class HistoryList extends Component {
             return null;
         }
 
-        const entries =  history.map((entry) => <HistoryItem  key={`log${entry.id}`} entry={entry} showData={showData} />);
+        let entries;
+
+        if (showData) {
+            entries =  history.map((entry) => <HistoryItemJson  key={`log${entry.id}`} entry={entry} />);
+        } else {
+            entries =  history.map((entry) => <HistoryItemDiff  key={`log${entry.id}`} entry={entry} />);
+        }
 
         return (
-            <div>
+            <div className={style.history}>
                 <Switch
                     checked={showData}
                     label="Show full events"
                     onChange={this.toggleShowDiff.bind(this)}
                     />
-                <table className={style.history}>
-                    <tbody>
-                        {entries}
-                    </tbody>
-                </table>
+               {entries}
             </div>
         );
     }

frontend/src/component/history/history-list-toggle-component.jsx

@@ -27,6 +27,7 @@ class HistoryListToggle extends Component {
         if (this.state.fetching) {
             return <span>fetching..</span>;
         }
+
         return (
             <div>
                 <h5>Showing history for toggle: <strong>{this.props.toggleName}</strong></h5>

frontend/src/component/history/history.scss

@@ -1,31 +1,6 @@
 .history {
     width:100%;
     border-collapse: collapse;
-
-    td {
-        vertical-align: top;
-        padding: 8px;
-        margin-bottom: 4px;
-    }
-
-    tbody tr:nth-child(odd) {
-        background-color: #efefef;
-    }
-
-    td + td {
-        border-left: 1px solid white;
-    }
-
-    tr {
-        display: flex;
-        align-items: stretch;
-    }
-    
-    td:last-child {
-        flex: 1;
-        display:inline-block;
-        /* to keep IE happy */
-    }
     
     code {
         word-wrap: break-word;
@@ -75,4 +50,8 @@
         margin: 0 0 0 110px;
         padding: 0 0 0.5em 0;
     }
+}
+
+.history-item:nth-child(odd) {
+    background-color: #efefef;
 }