From e2fdacd997ffe7e5bc57bf055031c0c6fa555a91 Mon Sep 17 00:00:00 2001 From: ivaosthu Date: Sat, 3 Dec 2016 15:18:01 +0100 Subject: [PATCH] cleanup history view a bit --- ...history-item.jsx => history-item-diff.jsx} | 60 +++++----- .../component/history/history-item-json.jsx | 103 ++++++++++++++++++ .../history/history-list-component.jsx | 19 ++-- .../history/history-list-toggle-component.jsx | 1 + frontend/src/component/history/history.scss | 29 +---- 5 files changed, 145 insertions(+), 67 deletions(-) rename frontend/src/component/history/{history-item.jsx => history-item-diff.jsx} (64%) create mode 100644 frontend/src/component/history/history-item-json.jsx diff --git a/frontend/src/component/history/history-item.jsx b/frontend/src/component/history/history-item-diff.jsx similarity index 64% rename from frontend/src/component/history/history-item.jsx rename to frontend/src/component/history/history-item-diff.jsx index 108d542934..48d7f42b3d 100644 --- a/frontend/src/component/history/history-item.jsx +++ b/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 =
{JSON.stringify(logEntry.data, null, 2)}
; } - const changes = logEntry.diffs.map(buildDiff); - return ( - {changes.length === 0 ? '(no changes)' : changes} - ); - } - 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 ({prettyPrinted}); + return {changes.length === 0 ? '(no changes)' : changes}; } 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 ( - - - {type} -
-
Id:
-
{id}
-
Type:
-
{type}
-
Timestamp:
-
{createdAt}
-
Username:
-
{createdBy}
-
- - {data} - +
+
+
Id:
+
{id}
+
Type:
+
+ + {type} +
+
Timestamp:
+
{createdAt}
+
Username:
+
{createdBy}
+
Diff
+
{data}
+
+
); } } diff --git a/frontend/src/component/history/history-item-json.jsx b/frontend/src/component/history/history-item-json.jsx new file mode 100644 index 0000000000..6886e0fdc1 --- /dev/null +++ b/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 = ( +
+
- {key}: {JSON.stringify(diff.lhs)}
+
+ ); + } else if (diff.rhs !== undefined) { + change = ( +
+
+ {key}: {JSON.stringify(diff.rhs)}
+
+ ); + } + + 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 = ( +
+
- {key}: {JSON.stringify(diff.lhs)}
+
+ {key}: {JSON.stringify(diff.rhs)}
+
+ ); + } else { + const spadenClass = SPADEN_CLASS[diff.kind]; + const prefix = DIFF_PREFIXES[diff.kind]; + + change = (
{prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}
); + } + + return (
{change}
); +} + +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 ( +
+
+ {prettyPrinted} +
+
+ ); + } +} + +export default HistoryItem; diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx index bc16216237..9f41eca401 100644 --- a/frontend/src/component/history/history-list-component.jsx +++ b/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) => ); + let entries; + + if (showData) { + entries = history.map((entry) => ); + } else { + entries = history.map((entry) => ); + } return ( -
+
- - - {entries} - -
+ {entries}
); } diff --git a/frontend/src/component/history/history-list-toggle-component.jsx b/frontend/src/component/history/history-list-toggle-component.jsx index 80b48e2ae4..aba456efb2 100644 --- a/frontend/src/component/history/history-list-toggle-component.jsx +++ b/frontend/src/component/history/history-list-toggle-component.jsx @@ -27,6 +27,7 @@ class HistoryListToggle extends Component { if (this.state.fetching) { return fetching..; } + return (
Showing history for toggle: {this.props.toggleName}
diff --git a/frontend/src/component/history/history.scss b/frontend/src/component/history/history.scss index c018587eab..0fb3352f2d 100644 --- a/frontend/src/component/history/history.scss +++ b/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; } \ No newline at end of file