tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add UI to exclude system and view detailed History

Browse Source
This commit is contained in:
Tanner Collin 2020-05-08 04:54:28 +00:00
parent 77b1f932b4
commit 93fac195ae
1 changed files with 77 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
webclient/src/Admin.js
View File

@ -7,14 +7,24 @@ import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.j
import { NotFound } from './Misc.js'; import { NotFound } from './Misc.js';
let historyCache = false; let historyCache = false;
let excludeSystemCache = true;
let focusCache = false;
export function AdminHistory(props) { export function AdminHistory(props) {
const { token, user } = props; const { token, user } = props;
const [history, setHistory] = useState(historyCache); const [history, setHistory] = useState(historyCache);
const [excludeSystem, setExcludeSystem] = useState(excludeSystemCache);
const [focus, setFocus] = useState(focusCache);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const handleExcludeSystem = (e, v) => {
setExcludeSystem(v.checked);
excludeSystemCache = v.checked;
};
useEffect(() => { useEffect(() => {
requester('/history/', 'GET', token) const extra = excludeSystem ? '?exclude_system' : '';
requester('/history/'+extra, 'GET', token)
.then(res => { .then(res => {
setHistory(res.results); setHistory(res.results);
historyCache = res.results; historyCache = res.results;
@ -22,37 +32,77 @@ export function AdminHistory(props) {
.catch(err => { .catch(err => {
console.log(err); console.log(err);
}); });
}, []); }, [excludeSystem]);
return ( return (
<div> <div>
{!error ? {!error ?
history ? history ?
<Table basic='very'> <>
<Table.Header> <Checkbox
<Table.Row> label='Exclude System'
<Table.HeaderCell>Date</Table.HeaderCell> onChange={handleExcludeSystem}
<Table.HeaderCell>Username</Table.HeaderCell> checked={excludeSystem}
<Table.HeaderCell>Type</Table.HeaderCell> />
<Table.HeaderCell>Owner</Table.HeaderCell>
<Table.HeaderCell>Object</Table.HeaderCell>
<Table.HeaderCell>Changed Fields</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body> <Table basic='very'>
{history.map(x => <Table.Header>
<Table.Row key={x.id}> <Table.Row>
<Table.Cell>{moment.utc(x.history_date).format('YYYY-MM-DD')}</Table.Cell> <Table.HeaderCell>Date</Table.HeaderCell>
<Table.Cell>{x.history_user || 'System'}</Table.Cell> <Table.HeaderCell>Username</Table.HeaderCell>
<Table.Cell>{x.history_type}</Table.Cell> <Table.HeaderCell>Type</Table.HeaderCell>
<Table.Cell>{x.owner_name}</Table.Cell> <Table.HeaderCell>Owner</Table.HeaderCell>
<Table.Cell>{x.object_name}</Table.Cell> <Table.HeaderCell>Object</Table.HeaderCell>
<Table.Cell>{x.changes.map(x => x.field).join(', ')}</Table.Cell> <Table.HeaderCell>Changed Fields</Table.HeaderCell>
</Table.Row> </Table.Row>
)} </Table.Header>
</Table.Body>
</Table> <Table.Body>
{history.map(x =>
<React.Fragment key={x.id}>
<Table.Row>
<Table.Cell>
<a href='javascript:;' onClick={() => setFocus(x.id)}>
{moment.utc(x.history_date).format('YYYY-MM-DD')}
</a>
</Table.Cell>
<Table.Cell>{x.is_system ? 'System' : (x.history_user || 'Deleted User')}</Table.Cell>
<Table.Cell>{x.history_type}</Table.Cell>
<Table.Cell>{x.owner_name}</Table.Cell>
<Table.Cell>{x.object_name}</Table.Cell>
<Table.Cell>{x.changes.map(x => x.field).join(', ')}</Table.Cell>
</Table.Row>
{focus == x.id &&
<tr><td colSpan={6}>
<p>Object ID: {x.object_id}, <a href={apiUrl+x.revert_url} target='_blank'>Database Revert</a></p>
{!!x.changes.length &&
<Table basic='very'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Change</Table.HeaderCell>
<Table.HeaderCell>Before</Table.HeaderCell>
<Table.HeaderCell>After</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{x.changes.map(y =>
<Table.Row key={y.field}>
<Table.Cell>{y.field}</Table.Cell>
<Table.Cell>{y.old}</Table.Cell>
<Table.Cell>{y.new}</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
}
</td></tr>
}
</React.Fragment>
)}
</Table.Body>
</Table>
</>
: :
<p>Loading...</p> <p>Loading...</p>
: :
@ -122,8 +172,8 @@ export function Admin(props) {
<Header size='small'>Backup Downloads</Header> <Header size='small'>Backup Downloads</Header>
<AdminBackups /> <AdminBackups />
<Header size='medium'>History (Experimental)</Header> <Header size='medium'>History</Header>
<p>Last 100 database changes:</p> <p>Last 50 database changes:</p>
<AdminHistory {...props} /> <AdminHistory {...props} />