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: '+',
};
const SPADEN_CLASS = {
const KLASSES = {
A: style.blue, // array edited
E: style.blue, // edited
D: style.negative, // deleted
@ -32,13 +32,13 @@ function buildItemDiff (diff, key) {
if (diff.lhs !== undefined) {
change = (
<div>
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
<div className={KLASSES.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 className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
</div>
);
}
@ -55,12 +55,12 @@ function buildDiff (diff, idx) {
} 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 className={KLASSES.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
<div className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
</div>
);
} else {
const spadenClass = SPADEN_CLASS[diff.kind];
const spadenClass = KLASSES[diff.kind];
const prefix = DIFF_PREFIXES[diff.kind];
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);
} else {
// 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>;
@ -102,6 +102,8 @@ class HistoryItem extends PureComponent {
const data = this.renderEventDiff(this.props.entry);
return data;
return (
<div className={style['history-item']}>
<dl>

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

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import HistoryItemDiff from './history-item-diff';
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';
@ -23,13 +23,30 @@ class HistoryList extends Component {
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} />);
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 (
<div className={style.history}>
<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
{entries}
<Grid>
<Cell>
<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
</Cell>
</Grid>
{entries}
</div>
);
}

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

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