Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

use table on compact diff view

Browse Source
This commit is contained in:
sveisvei 2016-12-09 22:10:37 +01:00
parent b226fdc218
commit b0a1b4e2d1
3 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/component/history/history-item-diff.jsx
View File

@ -10,7 +10,7 @@ const DIFF_PREFIXES = {
N: '+', N: '+',
}; };
const SPADEN_CLASS = { const KLASSES = {
A: style.blue, // array edited A: style.blue, // array edited
E: style.blue, // edited E: style.blue, // edited
D: style.negative, // deleted D: style.negative, // deleted
@ -32,13 +32,13 @@ function buildItemDiff (diff, key) {
if (diff.lhs !== undefined) { if (diff.lhs !== undefined) {
change = ( change = (
<div> <div>
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div> <div className={KLASSES.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
</div> </div>
); );
} else if (diff.rhs !== undefined) { } else if (diff.rhs !== undefined) {
change = ( change = (
<div> <div>
<div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div> <div className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
</div> </div>
); );
} }
@ -55,12 +55,12 @@ function buildDiff (diff, idx) {
} else if (diff.lhs !== undefined && diff.rhs !== undefined) { } else if (diff.lhs !== undefined && diff.rhs !== undefined) {
change = ( change = (
<div> <div>
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div> <div className={KLASSES.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
<div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div> <div className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
</div> </div>
); );
} else { } else {
const spadenClass = SPADEN_CLASS[diff.kind]; const spadenClass = KLASSES[diff.kind];
const prefix = DIFF_PREFIXES[diff.kind]; const prefix = DIFF_PREFIXES[diff.kind];
change = (<div className={spadenClass}>{prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}</div>); change = (<div className={spadenClass}>{prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}</div>);
@ -84,7 +84,7 @@ class HistoryItem extends PureComponent {
changes = logEntry.diffs.map(buildDiff); changes = logEntry.diffs.map(buildDiff);
} else { } else {
// Just show the data if there is no diff yet. // Just show the data if there is no diff yet.
changes = <div className={SPADEN_CLASS.N}>{JSON.stringify(logEntry.data, null, 2)}</div>; changes = <div className={KLASSES.N}>{JSON.stringify(logEntry.data, null, 2)}</div>;
} }
return <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>; return <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>;
@ -102,6 +102,8 @@ class HistoryItem extends PureComponent {
const data = this.renderEventDiff(this.props.entry); const data = this.renderEventDiff(this.props.entry);
return data;
return ( return (
<div className={style['history-item']}> <div className={style['history-item']}>
<dl> <dl>

25
frontend/src/component/history/history-list-component.jsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import HistoryItemDiff from './history-item-diff'; import HistoryItemDiff from './history-item-diff';
import HistoryItemJson from './history-item-json'; import HistoryItemJson from './history-item-json';
import { Switch } from 'react-mdl'; import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
import style from './history.scss'; import style from './history.scss';
@ -23,13 +23,30 @@ class HistoryList extends Component {
if (showData) { if (showData) {
entries = history.map((entry) => <HistoryItemJson key={`log${entry.id}`} entry={entry} />); entries = history.map((entry) => <HistoryItemJson key={`log${entry.id}`} entry={entry} />);
} else { } else {
entries = history.map((entry) => <HistoryItemDiff key={`log${entry.id}`} entry={entry} />); entries = (<Table
sortable
rows={
history.map((entry) => Object.assign({
diff: (<HistoryItemDiff entry={entry} />),
}, entry))
}
style={{ width: '100%' }}
>
<TableHeader name="type">Type</TableHeader>
<TableHeader name="createdBy">User</TableHeader>
<TableHeader name="diff">Diff</TableHeader>
<TableHeader numeric name="createdAt">Time</TableHeader>
</Table>);
} }
return ( return (
<div className={style.history}> <div className={style.history}>
<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch> <Grid>
{entries} <Cell>
<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
</Cell>
</Grid>
{entries}
</div> </div>
); );
} }

7
frontend/src/component/history/history-list-toggle-component.jsx
View File

@ -1,5 +1,6 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import ListComponent from './history-list-container'; import ListComponent from './history-list-container';
import { Link } from 'react-router';
class HistoryListToggle extends Component { class HistoryListToggle extends Component {
@ -17,11 +18,11 @@ class HistoryListToggle extends Component {
if (!this.props.history || this.props.history.length === 0) { if (!this.props.history || this.props.history.length === 0) {
return <span>fetching..</span>; return <span>fetching..</span>;
} }
const { history, toggleName } = this.props;
return ( return (
<div> <div>
<h5>Showing history for toggle: <strong>{this.props.toggleName}</strong></h5> <h5>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></h5>
<ListComponent history={this.props.history} /> <ListComponent history={history} />
</div> </div>
); );
} }